Archive for March, 2017

How to access WCF Service in Asp.Net Core Application

Introduction

How to access WCF Service in Asp.Net Core Application

Description:

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.

WCFConnectedService:

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

ConnectedService7

If the Extension is not installed then you will see the below window. User need to click on Find more Services link

ConnectedServices1

Extension and Updates window will be displayed and from this window you can find the Visual Studio WCF Connected Service extension option

ConnectedServices2

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”

ISimpleService Interface

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

ConnectedService7

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

ConnectedService4

  • 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 ServiceConnectedServices5
  • Click on Next and select appropriate options

ConnectedServices6

  • 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.

ConnectedService3

Now all you need to is to Create the Client and access the service like below

Result

You can download sample application for this article from here

, , , , ,

Leave a comment

How to populate Angular UIGrid in MVC using AngularJS

Description

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

PreRequisites:

Ui-Grid is dependant on AngularJS.Hence ensure that you have added reference of Angular js on page.

Implementation:

Model:

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

Northwind

You can get more details about how to use DatabaseFirst approach from this link.

Controller (WebAPI)

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.

View:

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.

RouteConfig Changes:

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.

 

, , , , ,

1 Comment