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>