Starting & Aborting/Cancelling Asp .Net Ajax Request Techniques

Starting an Ajax request is easy task. We can use ScriptManager, UpdatePanel and UpdateProgress controls but aborting it requires more client script.
Common web example of abort/cancel ajax request has abort() method to XMLHttpRequest. On the other hand Asp .Net has its own way to accomplish this.

Example 1 (Sys.WebForms.PageRequestManager)

  1. Create new Website Application
  2. Add new Webform, Default.aspx:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function aborttask() {
                Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
                alert('Aborted');
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="updpanel" runat="server">
                <ContentTemplate>
                    <asp:Button ID="btnstart" Text="Start Ajax for 10 seconds" runat="server" /> &nbsp;
                    <asp:Button ID="btnstop" Text="Abort" runat="server" OnClientClick="aborttask()" /><br />
                    <asp:Label ID="msg" runat="server"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
    
            <asp:UpdateProgress ID="updprog" runat="server" AssociatedUpdatePanelID="updpanel">
                <ProgressTemplate>Sleeping ..</ProgressTemplate>
            </asp:UpdateProgress>
        </div>
        </form>
    </body>
    </html>
    


    This file has two button which are Start & Abort. Start button will execute code behind file as usual ajax and Abort button will execute javascript.
    Brief explanation on Asp .Net Ajax please follow these urls: Introduction To Asp .Net Ajax (ScriptManager, UpdatePanel, ContentTemplate, Triggers) , Introduction to Asp .Net Ajax – 2 (UpdateProgress)

    Inside javascript there is Sys.WebForms.PageRequestManager.getInstance().abortPostBack(); to abort current ajax request.

  3. Code behind file of Default.aspx:
    Partial Class _Default
        Inherits System.Web.UI.Page
    
        Protected Sub btnstart_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnstart.Click
    
            System.Threading.Thread.Sleep(10000)
            msg.Text = "Process Done"
        End Sub
    End Class
    

    btnstart click event execute Sleep for ten seconds and then set label msg text.

Example 2 (PageMethods)

  1. Add new Webform on this Website Application, Default2.aspx:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var request;
            function startajax() {
                request = PageMethods._staticInstance.StartAjax(startajax_success);
                document.getElementById("msg").innerHTML = "Sleeping";
                document.getElementById("btnstop").disabled = "";
            }
    
            function startajax_success() {
                document.getElementById("msg").innerHTML = "Process Done";
                document.getElementById("btnstop").disabled = "disabled";
            }
    
            function aborttask() {
                var executor = request.get_executor();
                if (executor.get_started()) {
                    executor.abort();
                    document.getElementById("msg").innerHTML = "Aborted";
                    document.getElementById("btnstop").disabled = "disabled";
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
            </asp:ScriptManager>
            
            <input type="button" id="btnstart" value="Start Ajax for 10 seconds" onclick="startajax()" /> &nbsp;
            <input type="button" id="btnstop" value="Abort" onclick="aborttask()" disabled="disabled"/><br />
            <div id="msg" ></div>
        </div>
        </form>
    </body>
    </html>
    

    Key points are set variable (request) to request = PageMethods._staticInstance.StartAjax(startajax_success);.
    StartAjax part is a function defined inside code behind file. So basically we call server method via client script.
    We have to set EnablePageMethods="true" in order to define PageMethods object.
    Also we have executor = request.get_executor() inside aborttask function. Use executor.abort() to abort current ajax request.

  2. Default2.asp code behind file:
    Imports System.Web.Services
    Partial Class Default2
        Inherits System.Web.UI.Page
    
        <WebMethod()> _
        Public Shared Sub StartAjax()
            System.Threading.Thread.Sleep(10000)
        End Sub
    End Class
    

The result is same as Example 1 above.

Cheers,
Agung Gugiaji

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s