Microsoft AJAX LifeCycle Events


InterServer Web Hosting and VPS
Sony Playstation PS4 Pro Custom Build NVMe SSD Drive - Enclosure case and Crucial NVMe SSD
PS4 Pro Custom External SSD NVMe Drive

How I built a PS4 Pro Custom External SSD NVMe Drive...

NUC8i7BEH with memory
Intel NUC8I7BEH Review and Custom Build

This is my review of the Intel NUC8i7BEH and a summary of my build...

Card image cap
Asus M5A88-M EVO Review

This is my review of the Asus M5A88-M EVO motherboard...

Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit
Corsair Vengeance Blue Review

This is my review of the Corsair Vengeance Blue 8GB (2x4GB) DDR3 PC3-12800C9 1600MHz Dual Channel Kit memory...

Robotic Arm with USB PC Interface Review
Robotic Arm with USB PC Interface Review

This is my review of the Robotic Arm with USB PC Interface...

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>


Sponsored Links
SolarSystem - AngularJS Demo
SolarSystem - Angular JS Demo

Check out my first Angular JS demo hosted in Azure, it helped win my first Angular contract. Put the sound on.