Tip and Tricks: ASP.NET 2.0 AJAX 1.0 Extensions and Master Pages
page 5 of 10
by Bilal Haidar
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 117571/ 172

ScriptManager outside, Script and Service references inside

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.


View Entire Article

User Comments

Title: .Net Programmers   
Name: Chadwick Ball
Date: 2013-01-09 3:05:47 AM
Comment:
.NET programmers also take the obligation for a number of elements of the particular procedure from its origination to conclusion.
Title: .Net programmer   
Name: Ryder Farrell
Date: 2012-12-25 4:54:05 AM
Comment:
ASP.NET web application in which we have a Master Page together with a Content Page, and then we will explore the different options we have to enable the web application with AJAX.
Title: sdf   
Name: sdfsf
Date: 2012-11-05 11:02:24 AM
Comment:
sdfsfsdf
Title: Custom Application Development   
Name: AbigailAlvarado
Date: 2012-10-30 2:48:39 AM
Comment:
I was relay not able to understand how to create my asp.net material web page AJAX allowed. After studying this I slim this is the best response for this query.
Title: .net development   
Name: Adam Gibson
Date: 2012-10-22 5:51:55 AM
Comment:
A Microsoft Ajax Web application consists of either a client-only solution or a client and server solution. A client-only solution uses Microsoft Ajax Library but does not use any ASP.NET server controls.
Title: .net developer   
Name: TravisCarlson
Date: 2012-10-22 5:26:42 AM
Comment:
ajax toolkit is mostly used in asp.net application.it is easily work in website pages to refresh particular part of that page.
Title: hkk   
Name: hjkjh
Date: 2012-08-30 1:03:23 AM
Comment:
jkjhkhj
Title: sdfsd   
Name: sdfsdf
Date: 2012-08-22 6:43:35 AM
Comment:
sdfsdfsdf
Title: Master-Content Page Ajax   
Name: Pravee Saini
Date: 2011-03-06 12:25:04 AM
Comment:
I was realy not able to understant how to make my asp.net content page AJAX enabled. After reading this I thin this is the best answer for this question.
Thanx sbudy !!!!!
Title: AJAX   
Name: Saurabh Saxena
Date: 2010-08-13 2:56:43 AM
Comment:
I am using Update panel in Master pages and content pages. But i am not able to aoid the flickering causing in the content pages due to the page postback.

please mail me the solution on
getsaurabhsaxena@gmail.com
Title: Ajax   
Name: Fiona Sheik
Date: 2010-06-29 5:34:14 AM
Comment:
Hi there, Im trying to add a new menu item to an existing site. For some reason if i add a new radpageitem, it does create a new tab but the page loads blank. Please help. Im a beginer in ajax. Dont know much.
Title: Ajax   
Name: Sanjay Gupta
Date: 2010-06-15 9:52:27 AM
Comment:
Thanks Dude :)
Title: Ajax   
Name: Sandy
Date: 2010-01-14 5:04:42 AM
Comment:
i don't know to incorporate Ajax in my web application
Title: Ajax Controls   
Name: Hanumantha Rao
Date: 2009-12-11 4:51:22 AM
Comment:
Nice article, it gives basic idea of ajax update panel and work Grid view methods in ajax controls.
Title: Optimised use of ajax   
Name: Minu
Date: 2009-11-20 4:17:30 AM
Comment:
Hi, I want to know how to use ajax control efficiently.
Suppose i have 10 controls (5 asp:labels and 5 asp:textBox controls) and i have kept 10 controls inside asp:updatePanel but i want to update only asp:textbox controls.Please guid me Is this a right way or how can i achieve this.because when i am using large no. of controls ,My application takes long time to refresh.
can you help me please i need the solution quickliy
you can send me email on this emailid
minusingh06@gmail.com
Title: ajax with master   
Name: khatib
Date: 2009-04-18 6:29:32 AM
Comment:
alsalm alekom
i have create amster page with script manager control

and in the content page i would like to use tabs control but it doesnt work it appear in the desgin page but when i run the prject it doesnt appear in the page can you help me please i need the solution quickliy
you can send me email on his email
khatib7@gmail.com
Title: working fine   
Name: kumar
Date: 2009-02-20 3:41:54 AM
Comment:
Thanks this works fine.
Title: OnClick of a link its back ground color should be changed which is in the master page   
Name: lakshmi
Date: 2008-07-30 3:47:39 AM
Comment:
Thanks Haider. Iam facing some problem in Master pages.
As said in the title I have 4 anchor elements in a master page. On click of each link leads to a new page (content page). My requirement is that when the content page is active the back ground color of the link in the master page should change. I tried calling a function for the onclick event of the anchor element. But the function is not getting called.

(this.GetType,"ReturnScript","alert('JavaScript Method called');",true

Inplace of the alert function I had put a script but its giving syntax error.
ScriptManager.RegisterStartupScript(Calendar, typeof(string), "ChangeBackgroundScript", "Calendar.Style.background-color :'black';", true);
Thank you. My Email Id is: lakshmikarnam@gmail.com
Title: Master Page With Ajax   
Name: venkateshwara rao, hyderabad
Date: 2008-07-27 5:55:47 AM
Comment:
Thanks haider for posting "ASP.NET 2.0 AJAX 1.0 Extensions and Master Pages". This is really very useful tips. I got clear vision of how to use Scriptmanger in Masterpage & content page. Thanks a lot.
Title: Master Page With Ajax   
Name: Mohammad Javed from Comm-IT India (P) Ltd.
Date: 2008-07-21 1:39:30 AM
Comment:
Thanks haider for posting "ASP.NET 2.0 AJAX 1.0 Extensions and Master Pages". This is really very useful tips. I got clear vision of how to use Scriptmanger in Masterpage & content page. Thanks a lot.
Title: Master Page With Ajax   
Name: Badal kant Verma
Date: 2008-07-21 1:38:01 AM
Comment:
On my MasterPage I've ScriptManager and only one ContentPlaceHolder, on my Web Page there are 3 UserControls and each UserControl uses UpdatePanel now I want to call a JavaScript Method e.g., alert(); from my UserControls... I've tried to use ScriptManagerProxy1.Page.ClientScript.RegisterStartupScript(this.GetType,"ReturnScript","alert('JavaScript Method called');",true
Title: Ajax   
Name: Mohammad Javed
Date: 2008-07-21 1:36:53 AM
Comment:
How to used ajax in .net 2.0.Using ajax whose type application i we can do.
Title: Mr   
Name: Rajesh
Date: 2008-06-15 3:04:18 PM
Comment:
Thank you For valuable information
Title: Good Articale   
Name: Lokesh
Date: 2008-06-09 6:48:20 AM
Comment:
ok, this seems to working here understand ..what i am telling you..if not please involve us wth you. so that we can have better understanding ...
Title: Master Page With Ajax   
Name: Suchitra Singh
Date: 2008-05-22 3:18:36 AM
Comment:
Hi,
Thanks for explaing the master page with Ajax. I hv tried out it is working fine.
Title: Just What I needed   
Name: ants
Date: 2008-05-13 8:13:03 AM
Comment:
this is da bomb.....just wat i needed....peace out
Title: doubt   
Name: ramu.annamalai@inetframe.com
Date: 2008-04-01 8:02:55 AM
Comment:
I have a user control(TreeView) in a master page,
i also have a ContentPlaceHolder inside that Master page,

When the SelectedNodeChange event for TreeView fires,
i want to perform the Asynchronous PostBack for the page loading under ContentPlaceHolder. can any one explain me this
Title: How to Synch Mobile without external device   
Name: Chhaya Pandey
Date: 2008-03-14 6:32:28 AM
Comment:
Hi
I need Your help I am developing a mobile based website.But I have a major problem synchronize mobile with my website. I want help about this topic how to save mobile data in my server database. I mention one url below
www.jiobindaas.com
In this site user fill your contact Number adn got one confirmaion code. after confirmation he can synh his mobile and all contac save on that site.
I also make like that.
pls help me anyone
Its Urgent

Thanks & Regards
Chhaya Pandey
mail id= chaya.pandey@hotmail.com
Title: Calling JavaScript Methods using ScriptManagerProxy   
Name: Nasir Ibrahim
Date: 2008-03-03 4:54:23 AM
Comment:
Hi

On my MasterPage I've ScriptManager and only one ContentPlaceHolder, on my Web Page there are 3 UserControls and each UserControl uses UpdatePanel now I want to call a JavaScript Method e.g., alert(); from my UserControls... I've tried to use ScriptManagerProxy1.Page.ClientScript.RegisterStartupScript(this.GetType,"ReturnScript","alert('JavaScript Method called');",true);

but its not working....
plzz help me in this case

Thanks
Nasir Ibrahim
Title: element timer is not a known element   
Name: Vaibhav Gangal
Date: 2007-11-23 2:05:08 AM
Comment:
I get an error "element timer is not a known element" in IDE, but the app runs as expected.

Why I am getting the error?

ScriptManager is in MasterPage & UpdatePanel and Timer in Content Page.
Title: Using the update panel to load an entire content page   
Name: vishy
Date: 2007-11-09 1:25:26 PM
Comment:
Hey bilal,

Great post man. I saw that someone has already asked the the question. I am trying to load different content pages inside the placeholder and is there a way to refresh only that part of the page which is loading the content page everytime. I know it is possible with AJAX but I havn't seen anyone explaining anyone how this could be done. So just let me know if u have idea for implementing this functionality.
Thanks man

Cheers
vishy
Title: WebUser Control custom event to be triggered in an update panel   
Name: hratch
Date: 2007-11-08 6:00:42 PM
Comment:
I was experimenting and i realized that if i place the two updatepanels in the same content holder it works fine , however if each of the user controls is in a ddifferent contentholder it fails
Title: ebUser Control custom event to be triggered in an update panel   
Name: hratch
Date: 2007-11-08 5:20:20 PM
Comment:
you can email me at
h@zeitunlian.com
Title: WebUser Control custom event to be triggered in an update panel   
Name: hratch
Date: 2007-11-08 5:16:34 PM
Comment:
hello Bilal,
i have a webusercontrol that is found in an updatepanel and want the select event of my usercntrol to be triggered to another update panel.
When i load the page i get an error
A control with ID 'SearchPanel1'(my user control) could not be found for the trigger in UpdatePanel 'UppResults'.
can u help me to solve this problem
Title: Regarding preventing update of MasterPages when new content page loads   
Name: Shilpa
Date: 2007-09-28 6:43:08 AM
Comment:
Hi Bilal,

I did find your article very useful.
I need your help while I am using multiple content pages for a master page. I have a single script manager for the master page.1st time the master page loads with content page, values are filled in both master and the content page. however on clicking a link within the master page, i need a new content page to replace the old content page. At this time, the entire page is getting refreshed and the master page loses its values. Is there a way to retain the master page values in the 1st call so that when subsequent content pages load, master page values remain as it is?
My 2nd question is that when I am using page methods to make asynchronous calls, it is not recognizing methods written in the code behind of a master page. It has to be written in the code behind of a content page. But shouldn't it work for code behind of master page? How to do this? Please help me as it is urgent.

My email ID is shilpa.a@tcs.com

Regards,
Shilpa
Title: problem in masterpages using ajax   
Name: navneet
Date: 2007-09-14 8:25:59 AM
Comment:
hello sir i am having problem in master pages during using ajax....
i vl explain my prob
sir i am adding new records to database 'd i want these newly record immediately updated in the table(in which all the records are displayed)...
before ajax after adding or updating m just doing server.transfer so that it just refresh the page 'd display currently added 'd updated record immedistely in table but if i try to do this thro ajax(update panel) i am not able to do...it display warning message 'd then behave unexpectedly....
please help me...i am vry new to ajax....
'd also guide wht i cn do to display immediately added or updated record in table rather than using server.transfer("redirected to same page");

thanx a lot

help me m waiting
or respond back to
navneetkhehra@gmail.com
Title: Re: Derek   
Name: Bilal Haidar [MVP]
Date: 2007-07-27 1:38:26 AM
Comment:
Hello Derek,
Well, you should be able to add UpdatePanels in MasterPage. Did you try and face any problems?

Thanks Josh for your kind comments!

Regards
Title: New to master pages   
Name: Derek
Date: 2007-07-26 8:45:53 PM
Comment:
Just curious if it's possible to add updatepanels and ajax controls in the master page (rather than just the content page). I just did a tutorial where the (single) content page changes master pages based on a get variable (http://msdn2.microsoft.com/en-us/library/c8y19k6h.aspx). I wanted different ajax controls in each master page but got errors when run ("Sys does not exist", etc). Am I thinking about/using the master pages incorrectly? Is there a better way to acheive this? Thanks! -Derek
Title: Good job   
Name: Josh Stodola
Date: 2007-06-13 9:06:55 AM
Comment:
Nicely done, Bilal! You probably should fix the link to ASP.NET though (in the references section).
Title: IT consultant, LogicaCMG   
Name: Dharmendra kumar
Date: 2007-06-13 6:44:56 AM
Comment:
Thanks haider for posting "ASP.NET 2.0 AJAX 1.0 Extensions and Master Pages". This is really very useful tips. I got clear vision of how to use Scriptmanger in Masterpage & content page. Thanks a lot.






Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2019 ASPAlliance.com  |  Page Processed at 2019-09-15 4:28:09 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search