Step By Step WCF Service Creation And Integration In ASP.NET

In this article we will learn how to create a service in WCF and how to integrate it in our ASP.NET application.

We are going to create two services in which first we will calculate simple interest, and next we will bind repeater control with SQL database table.

Step 1: Create a WCF Service Application,

  • Open Visual Studio
  • File, New, then Project
  • Select WCF Service Application.
  • Enter the name of application as "WcfTst".
  • Click OK.

    WCF Service Application

Step 2: Add New WCF service file.

  • Right click on the Service in the solution explorer.
  • Go to Add and select New Item.
  • Select WCF Service, write the service name as "TstSI" and click on Add button.

Step 3: Create a Service

  • Open TstSI.svc file as in the following screenshot and also write the following code.

    TstSI.svc file

TstSI.svc.cs

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Runtime.Serialization;  
  5. using System.ServiceModel;  
  6. using System.Text;  
  7. using System.Data.SqlClient;  
  8. using System.Data;  
  9. namespace WcfTst  
  10. {  
  11.     public class TstSI: ITstSI  
  12.     {  
  13.         string con = "Data Source=BITS-PC;Initial Catalog=MVCDB;Integrated Security=True;";  
  14.         public int CalculateSI(int p, int r, int t)  
  15.         {  
  16.             int SI;  
  17.             SI = (p * r * t) / 100;  
  18.             return SI;  
  19.         }  
  20.         public DataTable GetRecordList()  
  21.         {  
  22.             SqlDataAdapter da = new SqlDataAdapter();  
  23.             da = new SqlDataAdapter("select * from Users", con);  
  24.             DataSet ds = new DataSet();  
  25.             DataTable dt = new DataTable();  
  26.             da.Fill(ds);  
  27.             if (ds.Tables[0].Rows.Count > 0)  
  28.             {  
  29.                 dt = ds.Tables[0];  
  30.             }  
  31.             return dt;  
  32.         }  
  33.     }  
  34. }  
Now, open ITstSI.svc.cs and write the code as follows:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Runtime.Serialization;  
  5. using System.ServiceModel;  
  6. using System.Text;  
  7. using System.Data;  
  8. namespace WcfTst  
  9. {  
  10.     [ServiceContract]  
  11.     public interface ITstSI  
  12.     {  
  13.         [OperationContract]  
  14.         int CalculateSI(int p, int r, int t);  
  15.         [OperationContract]  
  16.         DataTable GetRecordList();  
  17.     }  
  18. }  
Our WCF service has been completed. Press F5 to run the service.

WCF service

Right click on the service URL as given in the above image and copy address.

Paste the copied service URL anywhere or keep in mind that we have to use it.

Step 4: Now, create a new ASP.NET web application to integrate that service.
  • Open Visual Studio
  • File, New, then Project.
  • Select ASP.NET Empty web Application.
  • Enter the name of application as "TstWebWcf".
  • Click OK.

    TstWebWcf

  • Add new web page with the name "Default.aspx" and write the following code:

Default.aspx

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="TstWebWcf.Default" %>  
  2.     <!DOCTYPE html>  
  3.     <html xmlns="http://www.w3.org/1999/xhtml">  
  4.   
  5.     <head runat="server">  
  6.         <title></title>  
  7.     </head>  
  8.   
  9.     <body>  
  10.         <form id="form1" runat="server">  
  11.             <div class="BgGrid" style="margin:100px;">  
  12.                 <table>  
  13.                     <asp:Repeater ID="grduser" runat="server">  
  14.                         <HeaderTemplate>  
  15.                             <tr>  
  16.                                 <th style="margin:5px,auto;text-align:center">First Name</th>  
  17.                                 <th style="margin:5px,auto;text-align:center">Last Name</th>  
  18.                                 <th style="margin:5px,auto;text-align:center">Email</th>  
  19.                             </tr>  
  20.                         </HeaderTemplate>  
  21.                         <ItemTemplate>  
  22.                             <tr>  
  23.                                 <td>  
  24.                                     <%#Eval("FirstName") %>  
  25.                                 </td>  
  26.                                 <td>  
  27.                                     <%#Eval("LastName") %>  
  28.                                 </td>  
  29.                                 <td>  
  30.                                     <%#Eval("Email") %>  
  31.                                 </td>  
  32.                             </tr>  
  33.                         </ItemTemplate>  
  34.                     </asp:Repeater>  
  35.                 </table>  
  36.             </div>  
  37.             <div id="dvSI" style="margin:100px,20px;">  
  38.                 <asp:TextBox ID="txtP" runat="server" Placeholder="Enter Principle"></asp:TextBox>  
  39.                 <asp:TextBox ID="txtR" runat="server" Placeholder="Enter Rate"></asp:TextBox>  
  40.                 <asp:TextBox ID="txtT" runat="server" Placeholder="Enter Time"></asp:TextBox>  
  41.                 <asp:Button ID="btnSmt" Text="Calculate" OnClick="btnSmt_click" runat="server" /> </div>  
  42.             <div style="margin:50px;">  
  43.                 <asp:Label ID="lblval" runat="server"></asp:Label>  
  44.             </div>  
  45.         </form>  
  46.     </body>  
  47.   
  48. </html>  
Right click on the "References" and choose "Add Service Reference" in Solution Explorer as in the following screenshot.

Add Service Reference

Paste the URL which you had copied during service creation in the address bar as in the following screenshot.

address bar

When you add this service reference, the end point will automatically create in web.config file as given below.
  1. <system.serviceModel>  
  2.     <bindings>  
  3.         <basicHttpBinding>  
  4.             <binding name="BasicHttpBinding_ITstSI" /> </basicHttpBinding>  
  5.     </bindings>  
  6.     <client>  
  7.         <endpoint address="http://localhost:3125/TstSI.svc" binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_ITstSI" contract="MyWcfService.ITstSI" name="BasicHttpBinding_ITstSI" /> </client>  
  8. </system.serviceModel>  
Note: If end point is not added in web.config file, then create an end point.

Now, open Default.aspx.cs file and write the code as given below.

Default.aspx.cs
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using TstWebWcf.MyWcfService;  
  8. using System.Data;  
  9. namespace TstWebWcf  
  10. {  
  11.     public partial class Default: System.Web.UI.Page  
  12.     {  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             if (!IsPostBack)  
  16.             {  
  17.                 DataTable dt = new DataTable();  
  18.                 MyWcfService.TstSIClient siclnt = new TstSIClient();  
  19.                 dt = siclnt.GetRecordList();  
  20.                 if (dt.Rows.Count > 0)  
  21.                 {  
  22.                     grduser.DataSource = dt;  
  23.                     grduser.DataBind();  
  24.                 }  
  25.             }  
  26.         }  
  27.         protected void btnSmt_click(object sender, EventArgs e)  
  28.         {  
  29.             MyWcfService.TstSIClient siclnt = new TstSIClient();  
  30.             int tst = siclnt.CalculateSI(Convert.ToInt32(txtP.Text), Convert.ToInt32(txtR.Text), Convert.ToInt32(txtT.Text));  
  31.             lblval.Text = "Simple Intrest : " + Convert.ToString(tst);  
  32.         }  
  33.     }  
  34. }  
Press F5 to run the code.