Professional ASP.NET 3.5 in C# and Visual Basic Part 96 pptx

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=" />>
<
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=" />>
<

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=" />>
<
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=" />>
<
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=" />>
<
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