Archive for March, 2017
How to access WCF Service in Asp.Net Core Application
In this article I will explain how to consume WCF Service in Asp.Net Core Web Application. In previous .Net Framework we have multiple options to consume a WCF service. We have the options like Add Service Reference, SvcUtil, ChannelFactory etc. However in Asp.Net Core there is a slight difference in Consuming WCF Service. In Asp.Net core you will notice that, we don’t have the option “Add Service Reference like in the older .Net Framework. The solution for this is WCFConectedService.
Asp.net Core team has come up with an extension called WCFConnectedService, This is a Visual Studio extension for generating SOAP service references in the Asp.Net Core application. This extension can be used with any project types in asp.net core.
We use ConnectedService to access a WCF Service in Asp.Net Core Web Application.
Installing WCF Connected Service Extension:
Below are the steps to install WCF Connected Service Extension in Asp.Net Core WebApplication
- Right Click on the Connected Services Option
If the Extension is not installed then you will see the below window. User need to click on Find more Services link
Extension and Updates window will be displayed and from this window you can find the Visual Studio WCF Connected Service extension option
Click on Download button to install the extension. You may need to close the VisualStudio instances to complete the VSIX installation.
Simple WCF Service
For this example, we have created a WCF Service. In our service we have a sample method called “GetData(int id)”. This method will take integer input values and return a string “You entered:1”
SimpleService Method Implementation
Above service is for demo purpose, you can use connected service approach with any service as per your design.
Accessing WCF Service in Asp.Net Core Web Application
In your Asp.Net Core web application, you will see a Connected Service Option like below
Follow the below steps to Add Service Reference
- Right Click on the Connected Services Option
- Select Add Connected Service and Add Connected Services wizard will be displayed and Select the WCF -Service Preview option
- Click on the Configure button. This will bring up Configure WCF Service Reference dialog box. Enter your Service url and Click on Go or Discover, it will discover the Service
- Click on Next and select appropriate options
- Click on Finish to generate proxy for WCF Service.
Once after this you will be able to see Service Reference Folder added in our project.
Now all you need to is to Create the Client and access the service like below
You can download sample application for this article from here
In this article I will explain the steps for populating UI-Grid in angularjs from database using WebAPI. UI-grid is a powerfull tool which provides a table like representation. Apart from table like structure Ui-Grid also provides functionality like filtering, sorting, exporting etc. You can find more details about UI-Grid from here
Ui-Grid is dependant on AngularJS.Hence ensure that you have added reference of Angular js on page.
To load the data from database, we are using EntityFramework and its related method. In this example I have used the DatabaseFirstApporach. DatabaseFirstApporach lets the EnityData Model to generate classes, dbcontext etc from the database automatically. All other functionalities like database and model sync exists as is.
Follow the below procedures to generate Model for Customer database in Northwind database
- Right click on the Model folder
- Select Add option
- And then select the New Item option
- Choose Data from Installed Templates group
- Select the ADO.NET Entity Data Model option and Provide a name for it
- In the Entity Data Model Wizard, Select EF Designer from database and click on Next
- Choose the Connection string options
- If you already have connection string configured then you can select that from the available list.
- If you don’t have the connection string configured then use the New Connection option and create the connection
- Expand the Table option and then select the tables which you want
- Click on Finish
You will have necessary class files generated in your solution now
You can get more details about how to use DatabaseFirst approach from this link.
In this example we are using WebAPI to load the data. The next procedure is to write code to fetch records from database using WebAPI. For this demo I have used a basic select operation. You can modify this as per your need.
Another point to note here is UI-grid read data which is in Json format, Hence we need to ensure that the data which we return from controller is of Json format. We will use the JsonResult method for this.
On View we will have the codes for UI-Grid and its related files. If you look at the design of UI-Grid it’s a div which will be styled to look like a table at runtime.
We need to add div with an attribute as ui-grid=”gridOptions”. We add all the details from angular js code to gridOptions and UI-Grid at runtime uses this div to populate the grid.
I have changed the Action Name from “Get” to “GetCustomer” to be more specific with what the method do. In order for api to identify the proper method add the below route setting to web api route config
Angular JS Script
Below are the code to fetch the data from database and populate it to UI-Grid. I have used a factory to call the Get Customer method and used that in the main method.