用Microsoft ASP.NET AJAX技术构建交互式的用户界面—part1

本文英文原版以及代码下载：
http://aspnet.4guysfromrolla.com/articles/101007-1.aspx#postadlink

用Microsoft ASP.NET AJAX技术构建交互式的用户界面—part1

导言

在过去的几年时间里，web开发员开始使用JavaScript来向web服务器执行异步回传，也就是仅仅发送和接收必要的数据.这些技术通常统称为AJAX.如果设计合理的话，具有AJAX功能的web应用程序，其用户界面的高度交互性完全可以与桌面应用程序相媲美.

由于AJAX包含了网络体系(networking stack)里不同层面的很多技术，在不使用AJAX framework的情况下执行AJAX很困难也很容易出错.还好，微软为ASP.NET开发者推出了免费的AJAX framework：即Microsoft ASP.NET AJAX.本文作为本系列文章的开篇之作，首先总览AJAX技术以及如何开始使用Microsoft ASP.NET AJAX；然后再探讨具体的控件以及使用细节.

Ajax历史简短回顾

client-server模式包括了双方：一个客户端和一个服务器.服务器端等待来自客户端的请求，进行相关处理后再做出回应；客户端向服务器发出请求，等待回应，最后对返回的数据进行处理.Web应用程序便是client-server模式的典型代表.在客户端——通常情况是一个web浏览器，向web服务器请求一个特定的资源，该资源可能是静态内容，比如一个HTML页面或一个图片，此时服务器仅仅需要将其返回即可；也可能是动态内容，比如一个ASP.NET页面，此时服务器需要做一些处理后才能将其返回.然而不管怎么说，交互模式都是一样的：客服端请求一个具体的资源，服务器端将其返回给客户端.

client-server模式的一个缺点便是延迟性。客户端必须周期性的与服务器进行通信，更新用户输入信息或获取最新的数据.在这个过程中，用户必须等待，而白白浪费掉请求/回应生命周期时间.在ASP.NET应用程序里，当发生回传时这种延迟表现的最为明显.设想一下在一个电子商务网站里，列出了一系列的产品，且可以进行分类，并分页显示出来.然而，当切换到下一页面时，将需要对服务器产生一个回传，以获取下一页面的产品.自然，这将产生一个延迟，从一秒到几秒不定，这取决于多种因素(比如网络连接速度、网络拥堵情况、服务器加载情况、数据库查询情况等等).

最主要的缺点是页面回传需要将所有的页面form字段发送到服务器，再将整个页面内容返回给浏览器.这样一来，交互的数据量就过多了，因为我们只需要下一页面的产品的信息.AJAX可以减小这种延迟性，方法是使用JavaScript向web服务器作出异步回传.这些回传传输并接收最少量的必需的数据.对AJAX背景知识的更多介绍，请参阅Jesse James Garrett的随笔《Ajax: A New Approach to Web Applications》，在这篇文章里他创造了术语"Ajax".

很多AJAX frameworks是商业性的，当然也有一些开源类库(open source libraries).在2006的上半年，微软发布了自己的AJAX framework，也即：Microsoft ASP.NET AJAX,本系列文章的焦点.

Microsoft ASP.NET AJAX综述

Microsoft's ASP.NET AJAX framework是专门为ASP.NET 2.0以及后续版本开发的，它不支持ASP.NET version 1.x版本的应用程序.ASP.NET AJAX framework将会集成在Visual Studio 2008里，ASP.NET 2.0的开发人员需要下载并安装该framework.在本文的"Getting Started with Microsoft ASP.NET AJAX" 部分，我们将深入探讨.

ASP.NET AJAX framework包含客户端和服务器端的逻辑.其中很多的JavaScript类库简单的开启一个异步回传，并对服务器的返回进行处理.客户端的类库包含的类很多都模仿NET Framework的核心类和数据类型.而服务器端部分包含了很多的ASP.NET控件，当添加到页面时执行各种不同的AJAX技术.比如ScriptManager控件,它在页面添加对客户端脚本的引用，所以请求该ASP.NET页面的的浏览器也要下载相应的JavaScript类库.所以，如果你想使用ASP.NET AJAX framework的话，你必须在ASP.NET页面里使用ScriptManager控件.

除了ScriptManager外，ASP.NET AJAX framework还包含很多其它的服务器端控件，比如UpdatePanel,Timer,以及UpdateProgress控件.该UpdatePanel控件允许你在页面的某个区域用异步操作的结果进行更新.简而言之，它允许你进行局部回传而不是整页回传，这样从2方面改善了页面响应：首先，当发生局部回传时，只有放置在UpdatePanel控件内的相关数据才会发送到服务器，并返回相应的数据；再者，局部回传并不会导致整个页面从新装载，所以不会出现页面闪烁现象.

UpdatePanel控件是ASP.NET AJAX framework里的核心模块之一，我们将在后面进行考察。一旦把一个UpdatePanel控件添加到页面上，你就可以添加其它的ASP.NET web控件，比如TextBoxes, Buttons, GridViews, DropDownLists等等，它们会自动的利用到AJAX技术.比如，如果你在一个UpatePanel控件里放置一个Button和一个TextBox控件，当点击该Button控件时，将会触发一个局部回传。就像我们期望的那样，在服务器端调用该Button控件的Click事件处理器，同时该TextBox控件的 Text属性可以正常访问.此外，置于同一个UpdatePanel控件里的其它Web控件，也可以对其属性进行读写操作，在用户浏览器里从新呈现出来.

除了基本的服务器端控件(ScriptManager, UpdatePanel, Timer等)外，微软还通过AJAX控件工具包(AJAX Control Toolkit)来提供一系列额外的交互控件. 该工具包包含ratings controls, sliders, modal popup windows等.

使用Microsoft ASP.NET AJAX

对ASP.NET 2.0开发者而言，如果要使用Microsoft ASP.NET AJAX首先要下载AJAX Extensions(http://www.asp.net/AJAX/downloads)，如果愿意的话还可以下载AJAX Control Toolkit.(对ASP.NET 3.5的开发者而言，其已经安装好了ASP.NET AJAX framework)

注意：本文主要探讨AJAX Extensions(它为该framework的核心部分)，对Control Toolkit，我们将在以后探讨

.要下载ASP.NET AJAX 1.0 framework，请访问该页面http://www.microsoft.com/downloads/details.aspx?FamilyID=ca9d90fa-e8c9-42e3-aa19-08e2c027f5d6&displaylang=en；点击Download按钮。该ASP.NET AJAX framework打包为一个MSI文件.一旦下载该文件到你的电脑后，双击进行安装，完成后，打开Visual Studio，并选择创建一个新工程。在New Project对话框里你应该能看到一个名为"ASP.NET AJAX-Enabled Web Application"的新工程类型.

图1

创建一个ASP.NET AJAX-Enabled Web Application将会创建一个新的Web Application Project，该工程将引用System.Web.Extensions程序集.该程序集包含了微软ASP.NET AJAX framework客户端和服务器端的核心模块。同时，工具箱包含了一个AJAX Extensions区域，里面有服务器端的核心AJAX控件.

图2

第一个ASP.NET AJAX实例:使用UpdatePanel控件

当你希望页面的某个区域回传而不是整页回传的时候，UpdatePanel控件是很有用的. 这种有限回传叫做局部回传(partial postback)，通过UpdatePanel控件可以很容易地实现.正如我们知道的，很多ASP.NET控件都可以导致回传：比如点击一个Button控件、将DropDownLists 和 CheckBoxes控件的AutoPostBack属性设置为True时等等.通常情况下，当这些控件引发回传时，整页都要进行回传.所有的窗体字段值(form field values)都会从浏览器发送到服务器.服务器再返回完整的HTML代码，在浏览器里重新展现出来.

当这些控件被放置在UpdatePanel里时,将只有局部页面回传.只有UpdatePanel控件里的窗体字段值发送到服务器.服务器仅仅将这些标记在UpdatePanel控件里的内容返回.客户端脚本接收到结果后，将这些返回值在浏览器里无缝的进行更新、显示出来.UpdatePanel控件减少了客户端和服务器端交互的数据量，对页面的某个区域进行重新绘制，改善了页面的交互性.

让我们对UpdatePanel控件进行实际考察.下面的代码(在本文结尾处可以下载)展示了一个简单的例子，在UpdatePanel控件里有2个控件，一个Label 和 Button控件.该Label控件展示一个随机选择的笑话，点击该Button按钮将会把一个随机选择的新笑话加载到Label控件里.如果你是一路看下来的话，在前面(使用Microsoft ASP.NET AJAX)章节里创建的一个ASP.NET AJAX-Enabled Web Application应用程序里添加一个新的ASP.NET页面.

当在页面里使用ASP.NET AJAX framework时，我们首先要添加一个ScriptManager控件.所以先向页面添加一个ScriptManager控件，然后添加一个UpdatePanel控件，在UpdatePanel里面再添加一个Label 和 Button控件.完成后，其声明代码应该看起来和下面的差不多：

<asp:ScriptManager ID="myScriptManager" runat="server">
</asp:ScriptManager>

<asp:UpdatePanel ID="JokeUpdatePanel" runat="server">
<ContentTemplate>
<asp:Label ID="JokeText" runat="server" Font-Italic="False" Font-Names="Comic Sans MS"
Font-Size="Large"></asp:Label>
<br />
<br />
<asp:Button ID="NewJokeButton" runat="server" Text="Show Me a Random Joke!" />
</ContentTemplate>
</asp:UpdatePanel>

此时，剩下的便是添加服务器端代码.当页面首次登录时我们想设置该Label的Text属性为一个随机选择的笑话；同样，每当点击ID为NewJokeButton的按钮时，我们希望将该Label控件的Text属性刷新为一个新的笑话，代码如下：

protected void Page_Load(object sender, EventArgs e)
{
JokeText.Text = GetRandomJoke();
}

protected void NewJokeButton_Click(object sender, EventArgs e)
{
JokeText.Text = GetRandomJoke();
}

private string GetRandomJoke()
{
// Get a random number
Random r = new Random();
switch (r.Next(5))
{
case 0:
return "Why did the chicken cross the road? To get to the other side!!";
case 1:
return "How much do pirates pay for their earrings? A Buccaneer!";
case 2:
return "Why did the computer squeak? Because someone stepped on it's mouse!";
case 3:
return "What is a golfer's favorite letter? Tee!";
default:
return "A child comes home from his first day at school. Mom asks, \"What did you

learn today?\" \"Not enough,\" the kid replies, \"I have to go back tomorrow.\"";
}
}

此时，我们有了一个使用AJAX技术的页面，当点击UpdatePanel里的按钮时引发局部页面回传.点击这个"Show Me a Random Joke!" 按钮，迅速的展示一个新的笑话而不用刷新整个页面.诚然，这个示例非常的简单，不过我们可以将其扩展为一个更真实的场景(在本系列的后面进行探讨).比如，我们可能有这样的一个页面，页面上有几个方格，每个方格都要显示很多数据.你可以把这些方格放置在各自的UpdatePanel控件里.这样一来，当用户在一个方格里进行分类或分页操作时，将会产生一个局部回传，在该方块里分类或分页时用不着整个页面回传.

图3

本例贯彻AJAX技术非常简单，ScriptManager 和 UpdatePanel控件自动的处理了所有的相关复杂事务，比如初始化异步回传，并将返回的数据展示出来.

展望

本文仅仅考察了一个简单的UpdatePanel实例.在真实场景里事情远没有这么简单.比如，我们可能想将一些外部事件作为UpdatePanel触发局部回传的触发器.我们还没有考察如何直接处理客户端AJAX libraries;也没有考察AJAX Control Toolkit里的控件.诸如这些主题，我们将在后面的系列文章分别考察.

祝编程快乐！