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 have a Delete Command event in Datalist and works find in the above mentioned case. I was trying to implement Delete Command using Page Methods. Any Idea how to do that?

I basically want to find hidden controls in this event and have to delete the record in `database. Any help will be highly appreciated.



Rest Services

The full application can be downloaded from:

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 plugins:

Service info

public interface IMyService
        ResponseFormat = WebMessageFormat.Json, 
        RequestFormat = WebMessageFormat.Json,
        UriTemplate = "/DeleteFromService",
        Method = "DELETE")]
    void Delete(int id);

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class MyService : IMyService
    public void Delete(int id)
        // delete your product
        // simulate a long process

In Global.asax

void Application_Start(object sender, EventArgs e)
    // Code that runs on application startup
    RouteTable.Routes.Add(new ServiceRoute("",
      new WebServiceHostFactory(),


In web.config

    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
        <standardEndpoint name="" helpEnabled="true"
          automaticFormatSelectionEnabled="true" />

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

<script type="text/javascript" src="Scripts/jquery-1.7.2.min.js" language="javascript" ></script>
<script language="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:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<input type="button" value="Delete" id="myButton" />

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript" language="javascript">
        function deleteFromService() {
            if (!confirm("Are you sure you want to delete?")) {
                cache: false,
                type: "DELETE",
                async: true,
                url: "/DeleteFromService",
                data: "3", // get your id to delete
                contentType: "application/json",
                dataType: "json",
                success: function () {
                error: function (xhr) {
        jQuery().ready(function () {

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


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.