Datalist Delete Command Event Implementation Using Page Methods

I have a DataList and Update Panel in my page. After implementation, I checked that the response is talking very long time after using Update panels...Here is the study material. I

Solution 1:

Rest Services

The full application can be downloaded from:

http://sdrv.ms/LJJz1K

This sample uses rest services in ASP.Net (the same concepts can be applied to a MVC application)

The clearer advantage when using rest services vs page methods, is testability.

I will guide you step by step to configure the service:

You need the following references:

• System.Web.ServiceModel.dll
• System.Web.ServiceModel.Activation.dll
• System.Web.ServiceModel.Web.dll

Nuget packages:

• jQuery

jQuery plugins:

• jQuery Block UI (it’s available as a single script file)

Service info

[ServiceContract]
publicinterfaceIMyService
{
    [OperationContract]
    [WebInvoke(
        ResponseFormat = WebMessageFormat.Json, 
        RequestFormat = WebMessageFormat.Json,
        UriTemplate = "/DeleteFromService",
        Method = "DELETE")]
    voidDelete(int id);
}

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
publicclassMyService : IMyService
{
    publicvoidDelete(int id)
    {
        // delete your product// simulate a long process
        Thread.Sleep(5000);
    }
}

In Global.asax

voidApplication_Start(object sender, EventArgs e)
{
    // Code that runs on application startup
    RouteTable.Routes.Ignore("{resource}.axd/{*pathInfo}");
    RouteTable.Routes.Add(new ServiceRoute("",
      new WebServiceHostFactory(),
      typeof(MyService)));

}

In web.config

<system.serviceModel><serviceHostingEnvironmentaspNetCompatibilityEnabled="true" /><standardEndpoints><webHttpEndpoint><standardEndpointname=""helpEnabled="true"automaticFormatSelectionEnabled="true" /></webHttpEndpoint></standardEndpoints></system.serviceModel>

Register scripts (they can be registered in a master page)

<scripttype="text/javascript"src="Scripts/jquery-1.7.2.min.js"language="javascript" ></script><scriptlanguage="javascript"type="text/javascript"src="Scripts/jquery.blockui.1.33.js"></script>

In a ASP.Net content page (in this sample, I am using a master page)

<asp:ContentID="BodyContent"runat="server"ContentPlaceHolderID="MainContent"><inputtype="button"value="Delete"id="myButton" /></asp:Content><asp:ContentID="HeaderContent"runat="server"ContentPlaceHolderID="HeadContent"><scripttype="text/javascript"language="javascript">functiondeleteFromService() {
            if (!confirm("Are you sure you want to delete?")) {
                return;
            }
            $.blockUI();
            $.ajax({
                cache: false,
                type: "DELETE",
                async: true,
                url: "/DeleteFromService",
                data: "3", // get your id to deletecontentType: "application/json",
                dataType: "json",
                success: function () {
                    $(document).ajaxStop($.unblockUI); 
                    alert("done");
                },
                error: function (xhr) {
                    $(document).ajaxStop($.unblockUI); 
                    alert(xhr.responseText);
                }
            });
        }
        jQuery().ready(function () {
                        $("#myButton").click(deleteFromService);
        });
    </script></asp:Content>

And that’s it, ajax commands the easy way =)