Microsoft AJAX LifeCycle Events


Sponsored Links

73058_New Scooba® 230 Floor Washing Robot + Free Shipping!

 

Microsoft AJAX LifeCycle Events

Here we take a look at the Microsoft AJAX LifeCycle Events.

There are two objects which expose events for us to tap into when using the Microsoft Ajax libraries, the Sys.Application class and the Sys.WebForms.PageRequestManager class.

Sys.Application Class

The Sys.Application class is an object which exposes the following events for us to plug into:


init - scripts loaded but objects not initialised
load - scripts loaded and objects created
unload - before objects are disposed
navigate - user click's Back or Forward button


To wire up event handlers for these events, we use a prefix of Sys.Application. plus 'add_' or 'remove_' to the event names and pass in the name of a delegate function to bind or unbind from the event. Adding a ScriptManager to the page will open access to this Javascript object:


Sys.Application.init

Sys.Application.add_init(someFunction);
Sys.Application.remove_init(someFunction);

Sys.Application.load

Sys.Application.add_load(someFunction);
Sys.Application.remove_load(someFunction);

Sys.Application.unload

Sys.Application.add_unload(someFunction);
Sys.Application.remove_unload(someFunction);

Sys.Application.navigate

Sys.Application.add_navigate(someFunction);
Sys.Application.remove_navigate(someFunction);


The Application Load and Unload events have a couple of reserved names, pageLoad and pageUnload, which you can wire up an event without having to use the add_load method. What I've found though is that if you need to use this event in more than one place, you'll need to use the add_load method as not all your method hooks will be called up otherwise.


function pageLoad(sender, args) {
    alert('pageLoaded');
}


Sys.Application Class Example

Here is an example:


<asp:ScriptManager ID="ScriptManager1" runat="server" />

<script type="text/javascript">

    Sys.Application.add_init(myFunction);

    function myFunction(sender) {
        alert('init');
    }

</script>


Sys.WebForms.PageRequestManager Class

The Sys.WebForms.PageRequestManager class gets involved with UpdatePanels. As one uses an UpdatePanel then an instance of the PageRequestManager becomes available when partial-page rendering is switched on. The PageRequestManager has the following events we can hook into:


initializeRequest - before asynchronous request process starts, cancel a postback here
beginRequest - postback not started, set headers/start animation
pageLoading - server response received, content not updated yet
pageLoaded - all page content has been loaded
endRequest - asynchronous request finished


Just as with the Application class, simple prefix with Sys.WebForms.PageRequestManager.getInstance(). plus add_ or remove_ for the adding and removing event handlers.


initializeRequest

Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(myFunction);
Sys.WebForms.PageRequestManager.getInstance().remove_initializeRequest(myFunction);

beginRequest

Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(myFunction);
Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(myFunction);

pageLoading

Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(myFunction);
Sys.WebForms.PageRequestManager.getInstance().remove_pageLoading(myFunction);

pageLoaded

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(myFunction);
Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(myFunction);

endRequest

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myFunction);
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(myFunction);


Sys.WebForms.PageRequestManager Class Example

Here is an example which uses an UpdatePanel to make a partial page postback, and we hook into the various events which are available. First of all we provide a a C# code behind event handler for an ASP.NET Button's Click event so we can handle a postback. In the Javascript, we wire up event handlers to listen to each one of the events fired off by the PageRequestManager and popup an alert message to confirm the event has fired. So when we click the ASP.NET Button which is inside the UpdatePanel, all of the events fire off as per the partial page postback.


protected void test_OnClick(object sender, EventArgs e)
{

}



<asp:PlaceHolder ID="PlaceHolder_Buttons" runat="server" />

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

    <asp:Button text="test" runat="server" OnClick="test_OnClick" />

</ContentTemplate>
</asp:UpdatePanel>

<script type="text/javascript">

    Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(myFunc_Init);

    Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(myFunc_BeginReq);

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(myFunc_PageLoad);

    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(myFunc_PageLoaded);

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(myFunc_EndReq);

    function myFunc_Init() {
        alert('init');
    }

    function myFunc_BeginReq() {
        alert('begin request');
    }

    function myFunc_PageLoad() {
        alert('page load');
    }

    function myFunc_PageLoaded() {
        alert('page loaded');
    }

    function myFunc_EndReq() {
        alert('end request');
    }

</script>