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

UA-CPU: x86Accept-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.21

Trang 1

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

Trang 2

<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&t=633285028458684000" type="text/javascript"></script>

<script src="/AJAXWebSite/ScriptResource.axd?

d=FETsh5584DXpx8XqIhEM50YSKyR2GkoMoAqraYEDU5_

gi1SUmL2Gt7rQTRBAw56lSojJRQe0OjVI8SiYDjmpYmFP0

CO8wBFGhtKKJwm2MeE1&t=633285035850304000" type="text/javascript"></script>

//<![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&t=633285035850304000"

type="text/javascript"></script>

<div>

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize(’ScriptManager1’,

document.getElementById(’form1’));

Sys.WebForms.PageRequestManager.getInstance()._updateControls([’tUpdatePanel1’],

[], [], 90);

//]]>

</script>

<span id="Label1"></span>

<br />

<input type="submit" name="Button1" value="Click to get machine time"

id="Button1" />

<br />

<div id="UpdatePanel1">

Continued

Trang 3

<span id="Label2"></span>

<br />

<input type="submit" name="Button2" value="Click to get machine

time using AJAX" id="Button2" />

</div>

<div>

<input type="hidden" name=" EVENTVALIDATION" id=" EVENTVALIDATION"

value="/wEWAwLktbDGDgKM54rGBgK7q7GGCMYnNq57VIqmVD2sRDQqfnOsgWQK" />

</div>

//<![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

Trang 4

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

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

Trang 5

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.NET AJAX Server

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

Trang 6

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

<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 anID and arunatattribute 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

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

//<![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

Trang 7

<script

src="/AJAXWebSite/WebResource.axd?d=o84znEj-n4cYi0Wg0pFXCg2&t=633285028458684000" type="text/javascript"></script>

<script src="/AJAXWebSite/ScriptResource.axd?d=

FETsh5584DXpx8XqIhEM50YSKyR2GkoMoAqraYEDU5_gi1SUmL2Gt7rQTRBAw56lSojJR

Qe0OjVI8SiYDjmpYmFP0CO8wBFGhtKKJwm2MeE1&t=633285035850304000"

type="text/javascript"></script>

//<![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&t=633285035850304000" type="text/javascript"></script>

<div>

//<![CDATA[

Sys.WebForms.PageRequestManager._initialize(’ScriptManager1’,

document.getElementById(’form1’));

Sys.WebForms.PageRequestManager.getInstance()._updateControls([], [], [], 90);

//]]>

</script>

</div>

//<![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 theScriptResource.axdhandler

If you are interested in seeing the contents of the JavaScript libraries, you can use thesrcattribute’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 theScriptResource.axdfile, but you can rename it to make

use of a.txtor.jsextension 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,

Trang 8

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

<title>Untitled Page</title>

<asp:ContentPlaceHolder id="head" runat="server">

</asp:ContentPlaceHolder>

</head>

<body>

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

Trang 9

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 from your ASP.NET pages is that you

might want these asynchronous postbacks to occur at specific intervals 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

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>

<title>Timer Example</title>

</head>

<body>

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

Trang 10

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 theDateTimevalue through the invocation of thePage_Loadevent handler After this initial load of the DateTimevalue to the Label control, the Timer control takes care of changing this value

TheOnTickattribute from the Ticker control enables you to accomplish this task It points to the function that is triggered when the time span specified in theIntervalattribute is reached

TheIntervalattribute is set to10000, which is 10,000 milliseconds (remember that there are 1,000 mil-liseconds to every second) This means, that every 10 seconds an asynchronous postback is performed

and theTimer1_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 The 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

Protected Sub Button1_Click(ByVal sender As Object,

ByVal e As System.EventArgs)

Label1.Text = "This button was clicked on " & DateTime.Now.ToString()

Continued

Định dạng
Số trang	10
Dung lượng	222,61 KB