Looking back at the above section, you notice that if any
content page in your web application, wants to add a reference to a JavaScript
file, this file should be added a script reference at the ScriptManager
location. Therefore, we conclude that, the ScriptManager located inside the
MasterPage should include all references to JavaScript files inside your web
application. However, this is not a neat solution to have the MasterPage hold
all references to scripts and services consumed by the content pages.
ScriptManagerProxy is your salvation!
The AJAX team was aware of the above problem and that’s why
in my own guessing they have included this server-side class. The
ScriptManagerProxy is used to add script and service references to content
pages or user controls when the ScriptManager is placed either in the Master
Page or Parent page respectively!
Hence, in this scenario, we will call the beginRequest
function, that is part of the PageRequestManager that has several functions
that are called during the life-cycle of an asynchronous request, to show an
alert box informing the user that the request has started. The JavaScript code
written will be placed inside a JavaScript file and embedded to the page as a
reference using the ScriptManagerProxy as follows:
Listing 3
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
<Scripts>
<asp:ScriptReference Path="myFunctions.js" />
</Scripts>
</asp:ScriptManagerProxy>
<script type="text/javascript"
language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
</script>
As you can see we have added a reference to the
myFunctions.js file and attached a handler to the beginRequest function of the
PageRequestManager Class.
The PageRequestManager has several methods that are worth
mentioning in here:
initializeRequest: This function is raised automatically
before the request is initialized for an asynchronous request. This function
takes as one of the input parameters the InitializeRequestEventArgs object.
This object provides the element that caused the asynchronous postback and the
request object. This function can be used to cancel an asynchronous postback.
beginRequest: This function is raised just before the
request is sent to the server. This function takes as one of the input
parameters the BeginRequestEventArgs object. This object provides the element
that caused the asynchronous postback and the request object. This function can
be used to show/hide an UpdateProgress control.
pageLoading: This function is raised just after the response
is back from the server and before any content is updated on the page. This
function takes as one of the input parameters the PageLoadingEventArgs object.
This object provides information about the panels that are to be deleted and
update as a result of the latest asynchronous postback request.
pageLoaded: This function is raised just after the panels
have been updated on the page as a result of the latest asynchronous postback
request. This function takes as one of the input parameters the
PageLoadedEventArgs object. This object provides information about the panels
that were created or updated as a result of the latest asynchronous postback
request. This function is also raised for synchronous requests too and in that
case, the PageLoadedEventArgs contains information only about the panels that
were created.
endRequest: This function is raised when the asynchronous
request has finished. This function takes as one of the input parameters the
EndRequestEventArgs object. This object provides information about any errors
if any that occurred while processing the asynchronous postback request. It
also makes available the response object.
The myFunctions.js file includes the following functions:
Listing 4
function BeginRequestHandler(sender, args)
{
// Get the postback element that is part of the args
// parameter which is of type BeginRequestEventArgs class
var elem = args.get_postBackElement();
// Show the alert box
alert(elem.value + ' is processing...');
}Inside the beginRequest handler, the code gets the control
that caused the asynchronous postback by using the BeginRequestEventArgs client
class’s function, get_postBackElement. Finally, an alert box is shown to inform
the user about the control that started an asynchronous postback.
To get more information about the PageRequestManager class
we recommend you check the AJAX documentation page located at http://ajax.asp.net/docs. This class has
other functions that are useful throughout the AJAX page-life cycle! To get
more information about the AJAX life cycle, make sure to check those two blog
posts at:
Microsoft
ASP.NET AJAX - Request Life Cycle
More
on AJAX Client Side Life Cycle
As a conclusion of this scenario, you can see how easily it
is to add both scripts and service references from inside the content page.
This way, each page will be adding its own related scripts or services and not
having the ScriptManager located in the Master Page hold all the script or
services references for all content pages inside the web application.
