Search content within the blog

Tuesday, May 26, 2009

Ajax Page Life Cycle Event

Introduction
This article explains the Client Life Cycle of Ajax Script Manager and Update Control. And also it explains the page life cycle when a partial postback happens because of ajax control, and the control over the events as a devoloper.
The Page Life Cycle of Client[Browser]
We all know the normal asp.net page life cycle events. the ajax controls will have more events added to that existing. the events are more related to the client side rather than the server side. the normal page events happens at the server side and these ajax events occur in the client side. i am not going to discuss more about the server page events, we will look the page events of the client side.
Sys.Application Class
The events are related to the Sys.Application Class, which provides a runtime object to take care client events and to manage client components. this object provides access to all his members with out creating instance for it.
• pageInit
• pageLoad
• pageUnload
pageInit
pageInit event occurs only once for the first time when the page is loaded, and for every normal post back. this event will not be called when the postback happens to be partial using update panel ot by any other ajax method. it occurs after the server Page Render event. also after all the script related to the ScriptManager is loaded, but before the object or controls created in the client client, if a we are creating any components on the client side. this is a good place to write our first time intialization code. we can have a hold for this event by adding a function handler to pageInit event. by simply adding the handler our function will be called after the init event. since the page is not loaded, we cannot have refernce to any object or control in the page. we can add any no. of handlers to these events. also we can remove existing handlers, the syntax looks like this..
Sys.Application.add_init(MyInit);
//Sys.Application.remove_init(MyInit);

function MyInit()
{
alert("MyInit added to page init");
}

pageLoad
pageLoad event occurs after client pageInit event. after pageInit event all the objects or controls are created after that pageload will be called. it occurs every time the page is loaded for both normal and partial renders. we can refer any object here in the event, after this event the page is servered to the user. similarly as pageInit event, pageLoad event will also accept handlers to be added after this event. the syntax is almost similar, looks like this..
Sys.Application.add_load(MyLoad);
//Sys.Application.remove_load(MyLoad);

function MyLoad()
{
alert("MyLoad added to page load");
}

pageUnload
pageUnload event occurs only once when page is redirected to another page, or when the browser window is closed. the redirection has to happen in normal postback or using Response.Redirect method, if we try to redirect using Server.Transfer, where the client will not be aware of the page redirection, it throws an client exception named PageRequestManagerParserErrorException. this event is not linked with server Page Unload event, which occurs after Page Render in server side, has nothing to do with client side,by the time all controls will be loaded into the browser[client]. pageUnload event will accept handlers to be added after this event. the syntax looks like this..
Sys.Application.add_unload(MyUnload);
//Sys.Application.remove_unload(MyUnload);

function MyUnload()
{
alert("MyUnload added to page unload");
}

Additional Information
The event handlers and other code should be written is a separate js file and that should be specified under scripts section of ScriptManger control, here the js file named "UsingJScript.js" is attached to ScriptManger control as shown below..
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true">
<Scripts>
<asp:ScriptReference Path="UsingJScript.js" />
</Scripts>
</asp:ScriptManager>

Sys.WebForms.PageRequestManager Class
This class is responsible for partial post back. this object will be intiated on its own, to get this object in client side, the page should have a ScriptManager and minimum one UpdatePanel. this object also has certain events which will be involved in the client page life cycle. this full name of the class along with the namespace is Sys.WebForms.PageRequestManager. let us see the events related to this.
• initializeRequest
• beginRequest
• pageLoading
• pageLoaded
• endRequest
initializeRequest
intializeRequest event will be triggered after the control is triggered for the asynchronous partial postback by the user. this prepares the request, which has to be sent to the server to get the response. the partial postback can be aborted or cancelled at this stage. we can add our handlers to this event as any other life cycle event. our handlers will be called after the intialRequest is called. the intializeRequestEventArgs gives more details about the event, we get the reference of this class as a argument of event. the code snippet is shown below..
//This statement should be inside pageInit or pageLoad event.
//adds the handler MyIntializeRequest to the intializeRequest event
Sys.WebForms.PageRequestManager.getInstance().add_initializeRequest(MyIntializeRequest);

//removes the handler MyIntializeRequest from the intializeRequest event
//Sys.WebForms.PageRequestManager.getInstance().remove_initializeRequest(MyIntializeRequest);

function MyIntializeRequest(sender,args)
{
alert("My Request is getting initalized");
}

beginRequest
beginRequest is triggered after the intializeRequest, also before the asynchronous postback is processed. this takes care of sending the request to the server. we can add our handlers to this event. the handlers are called first before the request is posted to the server. the beginRequestEventArgs gives more details about the event and other object related to this. normally this event will be use to display a graphic or any message to keep the user interactive, till the request gets processed in the server. after this particular event the server takes charge of processing the request. the code snippet is given below..
//This statement should be inside pageInit or pageLoad event.
//adds the handler MyBeginRequest to the beginRequest event
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(MyBeginRequest);

//removes the handler MyBeginRequest from the beginRequest event
//Sys.WebForms.PageRequestManager.getInstance().remove_beginRequest(MyBeginRequest);

function MyBeginRequest(sender,args)
{
alert("My Request is ready about to sent to server");
}

pageLoading
pageLoading is first event called after the server process finished, means after page render event of server. when it is called the client is not loaded with the new response and it is in hold of the response object, we can have refernce of it here for any manipulations. also it gives reference to the panels which are going to get modified after this partial postback. if we require any animation or transition to happen before the updated data is placed in the respective position. the pageLoadingEventArgs gives more details about the events and other objects related to this. normally we will do some control manipulation in this part before it is getting loaded in the page. the code snippet is given below..
//This statement should be inside pageInit or pageLoad event.
//adds the handler MyPageLoading to the pageLoading event
Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(MyPageLoading);

//removes the handler MyPageLoading from the pageLoading event
//Sys.WebForms.PageRequestManager.getInstance().remove_pageLoading(MyPageLoading);

function MyPageLoading(sender, args)
{
alert("My page is started loading");
}

pageLoaded
pageLoaded is event triggered after all the contents of the page is updated due to synchronous or asynchronous postback. we can clear the graphic or animation which we intiated in the beginRequest event here. we get the reference of the response and other object and controls related to the postback using the class pageLoadedEventArgs. we can also do a animation or trasition here instead of pageLoading event. the code snippet is below
//This statement should be inside pageInit or pageLoad event.
//adds the handler MyPageLoaded to the pageLoaded event
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(MyPageLoaded);

//removes the handler MyPageLoaded from the pageLoaded event
//Sys.WebForms.PageRequestManager.getInstance().remove_pageLoaded(MyPageLoaded);

function MyPageLoaded(sender, args)
{
alert("My page is loaded");
}

endRequest
endRequest event will be the last event to be triggered in the client postback cycle. after this the control is given back to the user. this event can be used to notify the status of request to the user. this is event can be used to log errors. as a finally in the try catch block, this event will be called irrespective of the postback is success or failed. the objects and other data related to this can be refered using the endRequestEventArgs class. the code snippet is shown below..
//This statement should be inside pageInit or pageLoad event.
//adds the handler MyEndRequest to the endRequest event
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(MyEndRequest);

//removes the handler MyEndRequest from the endRequest event
Sys.WebForms.PageRequestManager.getInstance().remove_endRequest(MyEndRequest);

function MyEndRequest(sender, args)
{
alert("My Request has end");
}

1 comment:

  1. This is a nice article..
    Its easy to understand ..
    And this article is using to learn something about it..

    c#, dot.net, php tutorial, Ms sql server

    Thanks a lot..!
    ri70

    ReplyDelete