How To Perform Client Side Action After Completion Of AJAX Postback Operation[ASP.NET 2.0]

While developing an ASP.NET 2.0 web application that uses <asp:UpdatePanel> control, we were required to perform a client side action (using JavaScript) after completion of Ajaxed post back.

We achieved it by attaching an event handler method to the event _endRequest of PageRequestManager object. After completion of every post back ASP.NET automatically notifies all the event handlers attached to the event _endRequest.

Here is the sample JavaScript. The first method attaches an event handler to _endRequest event and the second method is the event handler that is responsible for displaying an alert message on completion of every post back.

<script type="text/javascript">

//Add an event handler to listen to _endRequest events

function Register() 
{
  Sys.WebForms.PageRequestManager.getInstance().add_endRequest

                                               (EndRequestHandler);
}

//This method is invoked after completion of post back operation.
//In this method add all the client side script that needs 
//to be executed after the post back.
function EndRequestHandler(sender, args) 
{   
  alert("Post back completed");
}
</script>

Here is the sample ASPX code to call the Register() method on page load and controls required to perform simple Ajax operation.

<body onload="Register();">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="scriptmanager" runat="server" />
    <div>
        <asp:UpdatePanel ID="upPanel" runat="server">
            <ContentTemplate>
                <asp:Label ID="lblMessage" runat="server" />

                <br />
                <asp:Button ID="btnClick" runat="server"

                  Text="Click Here"

                  OnClick="btnClick_OnClick" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>

Leave a Comment Cancel Reply