Professional ASP.NET 3.5 in C# and Visual Basic Part 95 docx

Evjen c19.tex V2 - 01/28/2008 3:08pm Page 898
Chapter 19: ASP.NET AJAX
AJAX is dependent upon a few technologies in order for it to work. The first is the
XMLHttpRequest
object. This object allows the browser to communicate to a back-end server and has been available in the
Microsoft world since Internet Explorer 5 through the MSXML ActiveX component. Of course, the other
major component is JavaScript. This technology provides the client-side initiation to communication with
the back-end services and takes care of packaging a message to send to any server-side services. Another
aspect of AJAX is support for DHTML and the Document Object Model (DOM). These are the pieces that
will change the page when the asynchronous response is received from the server. Finally, the last piece
is the data that is being transferred from the client to the server. This is done in XML or, more important,
JSON.
Support for the
XMLHttpRequest
object gives JavaScript functions within the client script library the
capability to call server-side events. As stated, typically HTTP requests are issued by a browser. It is
also the browser that takes care of processing the response that comes from the server and then usually
regenerates the entire Web page in the browser after a response is issued. This process is detailed in
Figure 19-3.
Figure 19-3
898
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 899
Chapter 19: ASP.NET AJAX
If you use the
XMLHttpRequest
object from your JavaScript library, you do not actually issue full page
requests from the browser. Instead, you use a client-side script engine (which is basically a JavaScript
function) to initiate the request and also to receive the response. Because you are also not issuing a
request and response to deal with the entire Web page, you can skip a lot of t he page processing because
it is not needed. This is the essence of an AJAX Web request. It is illustrated in Figure 19-4.
Figure 19-4

As stated, this opens the door to a tremendous number of possibilities. Microsoft has provided the neces-
sary script engines to automate much of the communication that must take place in order for AJAX-style
functionality to occur.
ASP.NET AJAX and Visual Studio 2008
Prior to Visual Studio 2008, the ASP.NET AJAX product used to be a separate installation that you were
required to install on your machine and the Web server that you were working with. This release gained
in popularity quite rapidly and is now a part of the Visual Studio 2008 offering. Not only is it a part of
the Visual Studio 2008 IDE, the ASP.NET AJAX product is also baked into the .NET Framework 3.5.
This means that to use ASP.NET AJAX, you don’t need to install anything if you are working with
ASP.NET 3.5.
899
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 900
Chapter 19: ASP.NET AJAX
If you are using an ASP.NET version that is prior to the ASP.NET 3.5 release, then you need to visit
www.asp.net/AJAX
to get the components required to work with AJAX.
ASP.NET AJAX is now just part of the ASP.NET framework. When you create a new Web a pplication,
you do not have to create a separate type of ASP.NET application. Instead, all ASP.NET applications that
you create are now AJAX-enabled.
If you have already worked with ASP.NET AJAX prior to this 3.5 release, you will find that there is
really nothing new to learn. The entire technology is seamlessly integrated into the overall development
experience.
Overall, Microsoft has fully integrated the entire ASP.NET AJAX experience so you can easily use Visual
Studio and its visual designers to work with your AJAX-enabled pages and even have the full debugging
story that you would want to have with your applications. Using Visual Studio 2008, you are now able
to debug the JavaScript that you are using in the pages.
In addition, it is important to note that Microsoft focused a lot of attention on cross-platform compatibility
with ASP.NET AJAX. You will find that the AJAX-enabled applications that you build upon the .NET
Framework 3.5 can work within all the major up-level browsers out there (e.g., Firefox and Opera).
Client-Side Technologies

There really are two parts of the ASP.NET AJAX story. The first is a client-side framework and a set of
services that are completely on t he client-side. The other part of the story is a server-side framework.
Remember that the client-side of ASP.NET AJAX is all about the client communicating asynchronous
requests to the server-side of the offering.
For this reason, Microsoft offers a Client Script Library, which is a JavaScript library that takes care of the
required communications. The Client Script Library is presented in Figure 19-5.
The Client Script Library provides a JavaScript, object-oriented interface that is reasonably consistent with
aspects of the .NET Framework. Because browser compatibility components are built in, any work that
you build in this layer or (in most cases) work that you let ASP.NET AJAX perform for you here will func-
tion with a multitude of different browsers. Also, several components support a rich UI infrastructure
that produces many things that would take some serious time to build yourself.
The interesting thing about the client-side technologies that are provided by ASP.NET AJAX is that
they are completely independent of ASP.NET. In fact, any developer can freely download the Microsoft
AJAX Library (again from
asp.net/AJAX
) and use it with other Web technologies such as PHP (
php.net
)
and Java Server Pages (JSP). With that said, really the entire Web story is a lot more complete with the
server-side technologies that are provided with ASP.NET AJAX.
Server-Side Technologies
As an ASP.NET developer, you will most likely be spending most of your time on the server-side aspect
of ASP.NET AJAX. Remember that ASP.NET AJAX is all about the client-side technologies talking back
to the server-side technologies. You can actually perform quite a bit on the server-side of ASP.NET AJAX.
900
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 901
Chapter 19: ASP.NET AJAX
Figure 19-5
The server-side framework knows how to de al with client requests (e.g., putting responses in the correct
format). The server-side framework also takes care of the marshalling of objects back and forth between

JavaScript objects and the .NET objects that you are using in your server-side code. Figure 19-6 illustrates
the server-side framework provided by ASP.NET AJAX.
When you have the .NET Framework 3.5, you will have the ASP.NET AJAX Server Extensions on top of
the core ASP.NET 2.0 Framework, the Windows Communication Foundation, as well as ASP.NET-based
Web services (
.asmx
).
Developing with ASP.NET AJAX
There are a couple of types of Web developers out there. There are the Web developers who are used to
working with ASP.NET and who have experience working with server-side controls and manipulating
these controls on the server-side. Then there are developers who concentrate on the client-side and work
with DHTML and JavaScript to manipulate and control the page and its behaviors.
901
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 902
Chapter 19: ASP.NET AJAX
Figure 19-6
With that said, it is important to realize that ASP.NET AJAX was designed for both types of developers.
If you want to work more on the server-side of ASP.NET AJAX, you can use the new ScriptManager
control and the new UpdatePanel control to AJAX-enable your current ASP.NET applications with little
work on your part. All this work can be done using the same programming models that you are quite
familiar with in ASP.NET.
Both the ScriptManager and the UpdatePanel controls are discussed later in this chapter.
In turn, you can also use the Client Script Library directly and gain greater control over what is happen-
ing on the client’s machine. Next, this chapter looks at building a simple Web application that makes use
of AJAX.
ASP.NET AJAX Applications
The next step is to build a basic sample utilizing this new framework. First create a new ASP.NET Web
Site application using the New Web Site dialog. Name the project
AJAXWebSite
. You will notice (as shown

here in Figure 19-7) that there is not a separate type of ASP.NET project for building an ASP.NET AJAX
application because every ASP.NET application that you now build is AJAX-enabled.
902
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 903
Chapter 19: ASP.NET AJAX
Figure 19-7
After you create the application, you will be presented with what is now a standard Web Site project.
However, you may notice some additional settings in the
web.config
file that are new to the ASP.NET
3.5. At the top of the
web.config
file, there are new configuration sections that are registered that deal
with AJAX. This section of
web.config
is presented in Listing 19-1.
Listing 19-1: The <configSections> element for an ASP.NET 3.5 application
<
?xml version="1.0"?
>
<
configuration
>
<
configSections
>
<
sectionGroup name="system.web.extensions"
type="System.Web.Configuration.SystemWebExtensionsSectionGroup,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,

PublicKeyToken=31BF3856AD364E35"
>
<
sectionGroup name="scripting"
type="System.Web.Configuration.ScriptingSectionGroup,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"
>
<
section name="scriptResourceHandler"
type="System.Web.Configuration.ScriptingScriptResourceHandlerSection,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"
requirePermission="false"
allowDefinition="MachineToApplication"/
>
Continued
903
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 904
Chapter 19: ASP.NET AJAX
<
sectionGroup name="webServices"
type="System.Web.Configuration.ScriptingWebServicesSectionGroup,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35"
>
<
section name="jsonSerialization"
type="System.Web.Configuration.ScriptingJsonSerializationSection,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,

PublicKeyToken=31BF3856AD364E35" requirePermission="false"
allowDefinition="Everywhere" /
>
<
section name="profileService"
type="System.Web.Configuration.ScriptingProfileServiceSection,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35" requirePermission="false"
allowDefinition="MachineToApplication" /
>
<
section name="authenticationService"
type="System.Web.Configuration.ScriptingAuthenticationServiceSection,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35" requirePermission="false"
allowDefinition="MachineToApplication" /
>
<
section name="roleService"
type="System.Web.Configuration.ScriptingRoleServiceSection,
System.Web.Extensions, Version=3.5.0.0, Culture=neutral,
PublicKeyToken=31BF3856AD364E35" requirePermission="false"
allowDefinition="MachineToApplication" /
>
<
/sectionGroup
>
<
/sectionGroup
>

<
/sectionGroup
>
<
/configSections
>
<
! Configuraiton removed for clarity
>
<
/configuration
>
With the
web.config
file in place (as provided by the ASP.NET Web Site project type), the next step is to
build a simple ASP.NET page that does not yet make use of AJAX.
Building a Simple ASP.NET Page Without AJAX
The first step is to build a simple page that does not yet make use of the AJAX capabilities offered by
ASP.NET 3.5. Your page needs only a Label control and Button server control. The code for the page is
presented in Listing 19-2.
Listing 19-2: A simple ASP.NET 3.5 page that does not use AJAX
VB
<
%@ Page Language="VB" %
>
<
script runat="server"
>
Protected Sub Button1_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)

Label1.Text = DateTime.Now.ToString()
End Sub
<
/script
>
904
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 905
Chapter 19: ASP.NET AJAX
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
My Normal ASP.NET Page
<
/title
>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<

div
>
<
asp:Label ID="Label1" runat="server"
><
/asp:Label
>
<
br /
>
<
br /
>
<
asp:Button ID="Button1" runat="server" Text="Click to get machine time"
onclick="Button1_Click" /
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#

<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();
}
<
/script
>
When you pull this page up in the browser, it contains only a single button. When the button is clicked,
the Label control that is on the page is populated with the time from the server machine. Before the
button is clicked, the page’s code is similar to the code presented in Listing 19-3.
Listing 19-3: The page output for a page that is not using AJAX
<
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" />>
<
html xmlns=" />>
<
head
><
title
>
My Normal ASP.NET Page
<
/title

><
/head
>
<
body
>
<
form name="form1" method="post" action="Default.aspx" id="form1"
>
<
div
>
<
input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwULLTE4OTg4OTc0MjVkZIgwrMMmvqXJHfogxzgZ92wTUORS" /
>
<
/div
>
<
div
>
<
span id="Label1"
><
/span
>
<
br /
>

<
br /
>
<
input type="submit" name="Button1" value="Click to get machine time"
id="Button1" /
>
<
/div
>
Continued
905
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 906
Chapter 19: ASP.NET AJAX
<
div
>
<
input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION"
value="/wEWAgLFpoapCAKM54rGBkhUDe2q/7eVsROfd9QCMK6CwiI7" /
>
<
/div
><
/form
>
<
/body
>
<

/html
>
There is not much in this code. There is a little ViewState and a typical form that will be posted back to
the
Default.aspx
page. When the end user clicks the button on the page, a full post back to the server
occurs and the entire page is reprocessed and returned to the client’s browser. Really, the only change
made to the page is that the
<
span id="Lable1"
><
/span
> element is populated with a value, but in this
case, the entire page is returned.
Building a Simple ASP.NET Page with AJAX
The next step is to build upon the page from Listing 19-2 and add AJAX capabilities to it. For this
example, you will be adding some additional controls. Two of the controls to add are typical ASP.NET
server controls — another Label and Button server control. In addition to these controls, you are going to
have to add some ASP.NET AJAX controls.
In the Visual Studio 2008 toolbox, you will find a new section titled AJAX Extensions. This new section is
shown in Figure 19-8.
Figure 19-8
From AJAX Extensions, add a ScriptManager server control to the top of the page and include the second
Label and Button control inside the UpdatePanel control. The UpdatePanel control is a template server
control and allows you to include any number of items within it (just as other templated ASP.NET server
controls). When you have your page set up, it should look something like Figure 19-9.
The code for this page is shown in Listing 19-4.
Listing 19-4: A simple ASP.NET AJAX page
VB
<

%@ Page Language="VB" %
>
<
script runat="server"
>
Protected Sub Button1_Click(ByVal sender As Object, _
906
Evjen c19.tex V2 - 01/28/2008 3:08pm Page 907
Chapter 19: ASP.NET AJAX
ByVal e As System.EventArgs)
Label1.Text = DateTime.Now.ToString()
End Sub
Protected Sub Button2_Click(ByVal sender As Object, _
ByVal e As System.EventArgs)
Label2.Text = DateTime.Now.ToString()
End Sub
<
/script
>
<
html xmlns=" />>
<
head runat="server"
>
<
title
>
My ASP.NET AJAX Page
<
/title

>
<
/head
>
<
body
>
<
form id="form1" runat="server"
>
<
div
>
<
asp:ScriptManager ID="ScriptManager1" runat="server"
>
<
/asp:ScriptManager
>
<
asp:Label ID="Label1" runat="server"
><
/asp:Label
>
<
br /
>
<
br /
>

<
asp:Button ID="Button1" runat="server" Text="Click to get machine time"
onclick="Button1_Click" /
>
<
br /
>
<
br /
>
<
asp:UpdatePanel ID="UpdatePanel1" runat="server"
>
<
ContentTemplate
>
<
asp:Label ID="Label2" runat="server" Text=""
><
/asp:Label
>
<
br /
>
<
br /
>
<
asp:Button ID="Button2" runat="server"
Text="Click to get machine time using AJAX"

onclick="Button2_Click" /
>
<
/ContentTemplate
>
<
/asp:UpdatePanel
>
<
/div
>
<
/form
>
<
/body
>
<
/html
>
C#
<
%@ Page Language="C#" %
>
<
script runat="server"
>
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = DateTime.Now.ToString();

}
protected void Button2_Click(object sender, EventArgs e)
{
Label2.Text = DateTime.Now.ToString();
}
<
/script
>
907