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](max) NULL,
  4. [ProductDescription] [varchar](max) NULL,
  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);
    7. [OperationContract]
    8. void UpdateProductDetail(int updateId, string productName, string productDescription);
    10. [OperationContract]
    11. void DeleteProductDetail(int id);
    13. [OperationContract]
    14. string EditProductDetail(int id);
    16. [OperationContract]
    17. string LoadAllProductDetail();
    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();
    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();
    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. });
  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. }
  23. function LoadProduct() {
  24. WCFService.IProductService.LoadAllProductDetail(BindProduct, LoadProduct_success, LoadProduct_fail);
  25. }
  27. function LoadProduct_success() {
  29. }
  31. function LoadProduct_fail() {
  32. alert("LoadProduct_fail");
  33. }
Output

output