Evjen c19.tex V2 - 01/28/2008 3:08pm Page 908 Chapter 19: ASP.NET AJAX Figure 19-9 When this page is pulled up in the browser, it has two buttons. The first button causes a complete page postback and updates the current time in the Label1 server control. Clicking on the second button causes an AJAX asynchronous postback. Clicking this second button updates the current server time in the Label2 server control. When you click the AJAX button, the time in Label1 will not change at all, as it is outside of the UpdatePanel. A screenshot of the final result is presented in Figure 19-10. When you first pull up the page from Listing 19-4, the code of the page is quite different from the page that was built without using AJAX. Listing 19-5 shows the page results that you will see. Listing 19-5: The page output for a page that is using AJAX < html xmlns="http://www.w3.org/1999/xhtml" > < head >< title > My ASP.NET AJAX Page < /title >< /head > < body > < form name="form1" method="post" action="Default.aspx" id="form1" > < div > < input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" / > < input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" / > < input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4NzE5NTc5MzRkZDRIzHpPZg4GaO9Hox9A/RnOflkm" / > 908 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 909 Chapter 19: ASP.NET AJAX < /div > < script type="text/javascript" > // < ![CDATA[ var theForm = document.forms[’form1’]; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]] > < /script > < script src="/AJAXWebSite/WebResource.axd?d=o84znEj- n4cYi0Wg0pFXCg2&amp;t=633285028458684000" type="text/javascript" >< /script > < script src="/AJAXWebSite/ScriptResource.axd? d=FETsh5584DXpx8XqIhEM50YSKyR2GkoMoAqraYEDU5_ gi1SUmL2Gt7rQTRBAw56lSojJRQe0OjVI8SiYDjmpYmFP0 CO8wBFGhtKKJwm2MeE1&amp;t=633285035850304000" type="text/javascript" >< /script > < script type="text/javascript" > // < ![CDATA[ if (typeof(Sys) === ’undefined’) throw new Error(’ASP.NET AJAX client-side framework failed to load.’); //]] > < /script > < script src="/AJAXWebSite/ScriptResource.axd? d=FETsh5584DXpx8XqIhEM50YSKyR2GkoMoAqraYEDU5_ gi1SUmL2Gt7rQTRBAw56l7AYfmRViCoO2lZ3XwZ33TGiC t92e_UOqfrP30mdEYnJYs09ulU1xBLj8TjXOLR1k0&amp;t=633285035850304000" type="text/javascript" >< /script > < div > < script type="text/javascript" > // < ![CDATA[ Sys.WebForms.PageRequestManager._initialize(’ScriptManager1’, document.getElementById(’form1’)); Sys.WebForms.PageRequestManager.getInstance()._updateControls([’tUpdatePanel1’], [], [], 90); //]] > < /script > < span id="Label1" >< /span > < br / > < br / > < input type="submit" name="Button1" value="Click to get machine time" id="Button1" / > < br / > < br / > < div id="UpdatePanel1" > Continued 909 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 910 Chapter 19: ASP.NET AJAX < span id="Label2" >< /span > < br / > < br / > < input type="submit" name="Button2" value="Click to get machine time using AJAX" id="Button2" / > < /div > < /div > < div > < input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAwLktbDGDgKM54rGBgK7q7GGCMYnNq57VIqmVD2sRDQqfnOsgWQK" / > < /div > < script type="text/javascript" > // < ![CDATA[ Sys.Application.initialize(); //]] > < /script > < /form > < /body > < /html > Figure 19-10 From there, if you click Button1 and perform the full-page postback, you get this entire bit of code back in a response — even though you are interested in updating only a small portion of the page! However, if you click Button2 — the AJAX button — you send the request shown in Listing 19-6. Listing 19-6: The asynchronous request from the ASP.NET AJAX page POST /AJAXWebSite/Default.aspx HTTP/1.1 Accept: */* Accept-Language: en-US Referer: http://localhost.:62203/AJAXWebSite/Default.aspx x-microsoftAJAX: Delta=true Content-Type: application/x-www-form-urlencoded; charset=utf-8 Cache-Control: no-cache 910 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 911 Chapter 19: ASP.NET AJAX UA-CPU: x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 1.1.4322; .NET CLR 3.5.21004; .NET CLR 3.0.04506) Host: localhost.:62203 Content-Length: 334 Proxy-Connection: Keep-Alive Pragma: no-cache ScriptManager1=UpdatePanel1%7CButton2&__EVENTTARGET=&__EVENTARGUMENT=&__VIEWSTATE=% 2FwEPDwULLTE4NzE5NTc5MzQPZBYCAgQPZBYCAgMPDxYCHgRUZXh0BRQxMS8zLzIwMDcgMjoxNzo1NSBQTW RkZHZxUyYQG0M25t8U7vLbHRJuKlcS&__EVENTVALIDATION=%2FwEWAwKCxdk9AoznisYGArursYYI1844 hk7V466AsW31G5yIZ73%2Bc6o%3D&Button2=Click%20to%20get%20machine%20time%20 using%20Aj ax The response for this request is shown in Listing 19-7: Listing 19-7: The asynchronous response from the ASP.NET AJAX page HTTP/1.1 200 OK Server: ASP.NET Development Server/9.0.0.0 Date: Sat, 03 Nov 2007 19:17:58 GMT X-AspNet-Version: 2.0.50727 Cache-Control: private Content-Type: text/plain; charset=utf-8 Content-Length: 796 Connection: Close 239|updatePanel|UpdatePanel1| < span id="Label2" > 11/3/2007 2:17:58 PM < /span > < br / > < br / > < input type="submit" name="Button2" value="Click to get machine time using AJAX" id="Button2" / > |172|hiddenField|__VIEWSTATE|/wEPDwULLTE4NzE5NTc5MzQPZBYCAgQPZBYEAgMPDxYCHgRUZXh0BR QxMS8zLzIwMDcgMjoxNzo1NSBQTWRkAgcPZBYCZg9kFgICAQ8PFgIfAAUUMTEvMy8yMDA3IDI6MTc6NTggU E1kZGQ4ipZIg91+XSI/dqxFueSUwcrXGw==|56|hiddenField|__EVENTVALIDATION|/wEWAwKCz4mbCA K7q7GGCAKM54rGBj8b4/mkKNKhV59qX9SdCzqU3AiM|0|asyncPostBackControlIDs|||0|postBackCo ntrolIDs|||13|updatePanelIDs||tUpdatePanel1|0|childUpdatePanelIDs|||12|panelsToRefr eshIDs||UpdatePanel1|2|asyncPostBackTimeout||90|12|formAction||Default.aspx|22|page Title||My ASP.NET AJAX Page| From Listing 19-7 here, you can see that the response is much smaller than an entire Web page! In fact, the main part of the response is only the code that is contained within the UpdatePanel server control and nothing more. The items at the bottom deal with the ViewState of the page (as it has now changed) and some other small page changes. ASP.NET AJAX’s Server-Side Controls When you look at the AJAX Extensions section in the Visual Studio 2008 toolbox, you will notice that there are not many controls there at your disposal. The controls there are focused on allowing you to 911 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 912 Chapter 19: ASP.NET AJAX AJAX-enable your ASP.NET applications. They are enabling controls. If you are looking for more specific server controls that take advantage of the new AJAX model, then look at the ASP.NET AJAX Control Toolkit — a separate download that is covered in the next chapter. The new ASP.NET AJAX server controls that come with ASP.NET 3.5 are discussed in the following table. ASP.NETAJAXServer Control Description ScriptManager A component control that manages the marshalling of messages to the AJAX-enabled server for the parts of the page requiring partial updates. Every ASP.NET page will require a ScriptManager control in order to work. It is important to note that you can have only a single ScriptManager control on a page. ScriptManagerProxy A component control that acts as a ScriptManager control for a content page. The ScriptManagerProxy control, which sits on the content page (or sub-page), works in conjunction with a required ScriptManager control that resides on the master page. Timer The Timer control will execute client-side events at specific intervals and allows specific parts of your page to update or refresh at these moments. UpdatePanel A container control that allows you to define specific areas of the page that are enabled to work with the ScriptManager. These areas can then, in turn, make the partial page postbacks and update themselves outside the normal ASP.NET page postback process. UpdateProgress A control that allows you to display a visual element to the end user to show that a partial-page postback is occurring to the part of the page making the update. This is an ideal control to use when you have long-running AJAX updates. The next few sections of this chapter look at these new controls and how to use them within your ASP.NET pages. The ScriptManager Control Probably the most important control in your ASP.NET AJAX arsenal is the ScriptManager server control, which works with the page to allow for partial page rendering. You use a single ScriptManager con- trol on each page that you want to use the AJAX capabilities provided by ASP.NET 3.5. When placed in conjunction with the UpdatePanel server control, AJAX-enabling your ASP.NET applications can be as simple as adding two server controls to the page and then you are ready to go! The ScriptManager control takes care of managing the JavaScript libraries that are utilized on your page as well as marshalling the messages back and forth between the server and the client for the par- tial page rendering process. The marshalling of the messages can be done using either SOAP or JSON through the ScriptManager control. 912 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 913 Chapter 19: ASP.NET AJAX If you place only a single ScriptManager control on your ASP.NET page, it takes care of loading the JavaScript libraries needed by ASP.NET AJAX. The page for this is presented in Listing 19-8. Listing 19-8: An ASP.NET page that includes only the ScriptManager control < %@ Page Language="VB" % > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > The ScriptManager Control < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" > < /asp:ScriptManager > < /div > < /form > < /body > < /html > From Listing 19-8, you can see that this control is like all other ASP.NET controls and needs only an ID and a runat attribute to do its work. The page output from this bit of ASP.NET code is presented in Listing 19-9. Listing 19-9: The page output from the ScriptManager control < html xmlns="http://www.w3.org/1999/xhtml" > < head >< title > The ScriptManager Control < /title >< /head > < body > < form name="form1" method="post" action="Default2.aspx" id="form1" > < div > < input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" / > < input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" / > < input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTEzNjQ0OTQ1MDdkZO9dCw2QaeC4D8AwACTbOkD1OX4h" / > < /div > < script type="text/javascript" > // < ![CDATA[ var theForm = document.forms[’form1’]; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]] > < /script > Continued 913 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 914 Chapter 19: ASP.NET AJAX < script src="/AJAXWebSite/WebResource.axd?d=o84znEj- n4cYi0Wg0pFXCg2&amp;t=633285028458684000" type="text/javascript" >< /script > < script src="/AJAXWebSite/ScriptResource.axd?d= FETsh5584DXpx8XqIhEM50YSKyR2GkoMoAqraYEDU5_gi1SUmL2Gt7rQTRBAw56lSojJR Qe0OjVI8SiYDjmpYmFP0CO8wBFGhtKKJwm2MeE1&amp;t=633285035850304000" type="text/javascript" >< /script > < script type="text/javascript" > // < ![CDATA[ if (typeof(Sys) === ’undefined’) throw new Error(’ASP.NET AJAX client-side framework failed to load.’); //]] > < /script > < script src="/AJAXWebSite/ScriptResource.axd?d=FETsh5584DXpx8XqIhEM50YSKyR2GkoM oAqraYEDU5 _gi1SUmL2Gt7rQTRBAw56l7AYfmRViCoO2lZ3XwZ33TGiCt92e_UOqfrP30mdEYnJYs09ulU1xBLj 8TjXOLR1k0&amp;t=633285035850304000" type="text/javascript" >< /script > < div > < script type="text/javascript" > // < ![CDATA[ Sys.WebForms.PageRequestManager._initialize(’ScriptManager1’, document.getElementById(’form1’)); Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90); //]] > < /script > < /div > < script type="text/javascript" > // < ![CDATA[ Sys.Application.initialize(); //]] > < /script > < /form > < /body > < /html > The page output shows that a number of JavaScript libraries are loaded with the page. You will also notice that the scripts source are dynamically registered and available through the HTTP handler provided through the ScriptResource.axd handler. If you are interested in seeing the contents of the JavaScript libraries, you can use the src attribute’s URL in the address bar of your browser and you will be prompted to download the JavaScript file that is referenced. You will be prompted to save the ScriptResource.axd file, but you can rename it to make use of a .txt or .js extension if you wish. An interesting point about the ScriptManager is that it deals with the scripts that are sent to the client by taking the extra step to compress them. The ScriptManagerProxy Control The ScriptManagerProxy control was actually introduced earlier in this book in Chapter 5 as this control deals specifically with master pages. As with the ScriptManager control in the previous section, you need a single ScriptManager control on each page that is going to be working with ASP.NET AJAX. However, 914 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 915 Chapter 19: ASP.NET AJAX with that said, the big question is what do you do when you are utilizing master pages? Do you need to put the ScriptManager control on the master page and how does this work with the content pages that use the master page? When you create a new master page from the Add New Item dialog, in addition to an option for a Mas- ter Page, there is also an option to add an AJAX Master Page. This option creates the page shown in Listing 19-10. Listing 19-10: The AJAX Master Page < %@ Master Language="VB" % > < script runat="server" > < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Untitled Page < /title > < asp:ContentPlaceHolder id="head" runat="server" > < /asp:ContentPlaceHolder > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" / > < asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" > < /asp:ContentPlaceHolder > < /div > < /form > < /body > < /html > This code shows that there is indeed a ScriptManager control on the page and that this page will be added to each and every content page that uses this master page. You do not have to do anything special to a content page to use the ASP.NET AJAX capabilities provided by the master page. Instead, you can create a content page that is no different from any other content page that you might be used to creating. However, if you are going to want to modify the ScriptManager control that is on the master page in any way, then you have to add a ScriptManagerProxy control to the content page, as shown in Listing 19-11. Listing 19-11: Adding to the ScriptManager control from the content page < %@ Page Language="VB" MasterPageFile="~/AJAXMaster.master" % > < asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server" > < /asp:Content > < asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server" > < asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server" > < Scripts > < asp:ScriptReference Path="myOtherScript.js" / > < /Scripts > < /asp:ScriptManagerProxy > < /asp:Content > 915 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 916 Chapter 19: ASP.NET AJAX In this case, the content page adds to the ScriptManager control that is on the master page by interjecting a script reference from the content page. If you use a ScriptManagerProxy control on a content page and there does not happen to be a ScriptManager control on the master page, you will get an error. The Timer Control One common task when working with asynchronous postbacks fro m your ASP.NET pages is that you might want these asynchronous postbacks to occur at specific inte rvals in time. To accomplish this, you use the Timer control available to you from the AJAX Extensions part of the toolbox. A simple example to demonstrate how this control works involves putting some timestamps on your page and setting postbacks to occur at specific timed intervals. This example is illustrated in Listing 19-12. Listing 19-12: Using the Timer control VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) If Not Page.IsPostBack Label1.Text = DateTime.Now.ToString() End If End Sub Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = DateTime.Now.ToString() End Sub < /script > < html xmlns="http://www.w3.org/1999/xhtml" > < head runat="server" > < title > Timer Example < /title > < /head > < body > < form id="form1" runat="server" > < div > < asp:ScriptManager ID="ScriptManager1" runat="server" / > < asp:UpdatePanel ID="UpdatePanel1" runat="server" > < ContentTemplate > < asp:Label ID="Label1" runat="server" Text="Label" >< /asp:Label > < asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="10000" > < /asp:Timer > < /ContentTemplate > < /asp:UpdatePanel > < /div > < /form > < /body > < /html > C# < %@ Page Language="C#" % > < script runat="server" > 916 Evjen c19.tex V2 - 01/28/2008 3:08pm Page 917 Chapter 19: ASP.NET AJAX protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { Label1.Text = DateTime.Now.ToString(); } } protected void Timer1_Tick(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); } < /script > In this case, there are only three controls on the page. The first is the ScriptManager control followed by a Label and the Timer control. When this page loads for the first time, the Label control is populated with the DateTime value through the invocation of the Page_Load event handler. After this initial load of the DateTime value to the Label control, the Timer control takes care of changing this value. The OnTick attribute from the Ticker control enables you to accomplish this task. It points to the function that is triggered when the time span specified in the Interval attribute is reached. The Interval attribute is set to 10000 , which is 10,000 milliseconds (remember that there are 1,000 mil- liseconds to every second). This means, that every 10 seconds a n asynchronous postback is performed and the Timer1_Tick() function is called. When you run this page, you will see the time change on the page every 10 seconds. The UpdatePanel Control The UpdatePanel server control is an AJAX-specific control that is new in ASP.NET 3.5. T he UpdatePanel control is the control that you are likely to use the most when dealing with AJAX. This control preserves the postback model and allows you to perform a partial page render. The UpdatePanel control is a container control, which means that it does not actually have UI-specific items associated with it. It is a way to trigger a partial page postback and update only the portion of the page that the UpdatePanel specifies. The < ContentTemplate > Element There are a couple of ways to deal with the controls on the page that initiate the asynchronous page postbacks. The first is by far the simplest and is shown in Listing 19-13. Listing 19-13: Putting the triggers inside of the UpdatePanel control VB < %@ Page Language="VB" % > < script runat="server" > Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = "This button was clicked on " & DateTime.Now.ToString() Continued 917 . src="/AJAXWebSite/ScriptResource.axd? d=FETsh 558 4DXpx8XqIhEM50YSKyR2GkoMoAqraYEDU5_ gi1SUmL2Gt7rQTRBAw56l7AYfmRViCoO2lZ3XwZ33TGiC t92e_UOqfrP30mdEYnJYs09ulU1xBLj8TjXOLR1k0&amp;t= 633 2 85 0 35 85 030 4000" type="text/javascript" >< /script > < div > < script. x86 Accept-Encoding: gzip, deflate User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NET CLR 2.0 .50 727; Media Center PC 5. 0; .NET CLR 1.1. 432 2; .NET CLR 3. 5. 21004; .NET CLR 3. 0.0 450 6) Host:. src="/AJAXWebSite/ScriptResource.axd?d=FETsh 558 4DXpx8XqIhEM50YSKyR2GkoM oAqraYEDU5 _gi1SUmL2Gt7rQTRBAw56l7AYfmRViCoO2lZ3XwZ33TGiCt92e_UOqfrP30mdEYnJYs09ulU1xBLj 8TjXOLR1k0&amp;t= 633 2 85 0 35 85 030 4000" type="text/javascript" >< /script > < div > < script