Call WCF Service Using jQuery - Part 1

This article contains the following which I used: 

  • Used WCF Service
  • Configuration Setting for WCF in web.config
  • Used JavaScript,JQuery and JSON.
  • Insert,Update and Delete data without refreshing page.
SQL Script 
  •  This is a SQL script for above source code.          
  1. CREATE TABLE [dbo].[ProductInfo](  
  2.     [Id] [int] IDENTITY(1,1) NOT NULL,  
  3.     [ProductName] [varchar](maxNULL,  
  4.     [ProductDescription] [varchar](maxNULL,  
  5.     [CreatedDate] [datetime] DEFAULT GETDATE()  
  6.     )  
WCF Service setting in web.config file
  •  This is service configuration setting.
  •  We need to add service end point and behavior setting in web.config file.
  •  there are so many way to host wcf service like self hosting, WAS, IIS and Window service.
  1. <system.serviceModel>  
  2.   <behaviors>  
  3.     <endpointBehaviors>  
  4.       <behavior name="AspNetAjaxBehavior">  
  5.         <enableWebScript />  
  6.       </behavior>  
  7.     </endpointBehaviors>  
  8.   </behaviors>  
  9.   <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />  
  10.   <services>  
  11.     <service name="WCFService.ProductService">  
  12.       <endpoint behaviorConfiguration="AspNetAjaxBehavior" binding="webHttpBinding"  
  13.        contract="WCFService.IProductService" />  
  14.     </service>  
  15.   </services>  
  16. </system.serviceModel>  
Add Script Reference in Default.aspx page
  •  I add a script reference inside scriptmanager. 
  1. <asp:ScriptManager runat="server">  
  2.      <Scripts>  
  3.         <asp:ScriptReference Path="~/Script/Product.js" />  
  4.       </Scripts>  
  5.       <Services>  
  6.          asp:ServiceReference Path="~/ProductService.svc" />  
  7.       </Services>  
  8. </asp:ScriptManager>  
IproductService.cs page
  •  The following interface method contain insert, update, delete definition only which is used in service call.
    1. [ServiceContract(Namespace = "WCFService")]    
    2. interface IProductService    
    3. {    
    4.     [OperationContract]    
    5.     void AddProductDetail(string productName, string productDescription);    
    6.   
    7.     [OperationContract]    
    8.     void UpdateProductDetail(int updateId, string productName, string productDescription);    
    9.   
    10.     [OperationContract]    
    11.     void DeleteProductDetail(int id);    
    12.   
    13.     [OperationContract]    
    14.     string EditProductDetail(int id);    
    15.   
    16.     [OperationContract]    
    17.     string LoadAllProductDetail();    
    18.   
    19. }    
productService.cs page
  •  This file contain functionality which is mentioned in the above interface file.  
    1. [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]    
    2. public class ProductService : IProductService    
    3. {    
    4.     #region  IproductService Member    
    5.     readonly TestProductEntities _testProductEntities = new  TestProductEntities();    
    6.   
    7.     [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.WrappedRequest, RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]    
    8.     public string LoadAllProductDetail()    
    9.     {    
    10.         try    
    11.         {    
    12.             var productDetail = (from s in _testProductEntities.ProductInfoes    
    13.                                  select s).ToList();    
    14.   
    15.             var serializer = new JavaScriptSerializer();    
    16.             return (serializer.Serialize(productDetail.ToList()));    
    17.         }    
    18.         catch (Exception ex)    
    19.         {    
    20.             throw ex;    
    21.         }    
    22.     }    
    23.     #endregion    
    24. }  
product.js page
  •  This is my javascript file and highlighted area displays my service call.
  1. $(document).ready(function () {  
  2.     LoadProduct();  
  3. });  
  4.   
  5. function BindProduct(results) {  
  6.     var myJsonString = JSON.parse(results);  
  7.     var string = "<table class='table table-bordered'><tbody>";  
  8.     string += '<tr><th>Name</th><th>Description</th><th colspan="2">Action</th></tr>';  
  9.     if (myJsonString.length > 0) {  
  10.         for (var i = 0; i < myJsonString.length; i++) {  
  11.             string += '<tr><td>' + myJsonString[i].ProductName + '</td>';  
  12.             string += '<td>' + myJsonString[i].ProductDescription + '</td>';  
  13.             string += '<td><span><a href="javascript:void(0);" ' + ' onclick="EditProduct(' + myJsonString[i].Id + ');">';  
  14.             string += '<img width="16" height="16" alt="Close" src="Image/Edit.jpg" /></a></span></td>';  
  15.             string += '<td><span><a href="javascript:void(0);" ' + ' onclick="DeleteProduct(' + myJsonString[i].Id + ');">';  
  16.             string += '<img width="16" height="16" alt="Close" src="Image/close.png" /></a></span></td></tr>';  
  17.         }  
  18.     }  
  19.     string = string + "</tbody></table>";  
  20.     $("#bindProduct").html(string);  
  21. }  
  22.   
  23. function LoadProduct() {  
  24.     WCFService.IProductService.LoadAllProductDetail(BindProduct, LoadProduct_success, LoadProduct_fail);  
  25. }  
  26.   
  27. function LoadProduct_success() {  
  28.   
  29. }  
  30.   
  31. function LoadProduct_fail() {  
  32.     alert("LoadProduct_fail");  
  33. }  
Output 

You can also test the output here

output