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

ASP.NET AJAX and V isual 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 We

AJAX is dependent upon a few technologies in order for it to work The first is theXMLHttpRequest

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 theXMLHttpRequestobject 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

If you use theXMLHttpRequestobject 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 the 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 V isual 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

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/AJAXto 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 application,

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 the 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 fromasp.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

Figure 19-5

The server-side framework knows how to deal 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

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 buildhappen-ing 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 projectAJAXWebSite 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

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 theweb.configfile that are new to the ASP.NET 3.5 At the top of theweb.configfile, there are new configuration sections that are registered that deal

with AJAX This section ofweb.configis 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"/>

<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 theweb.configfile 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>

<html xmlns="http://www.w3.org/1999/xhtml">

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

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

<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

theDefault.aspxpage 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, _

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="http://www.w3.org/1999/xhtml">

<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>