`

浅谈ASP.NET 2.0里面的AJAX 和 Atlas

阅读更多

本文英文原版及代码下载:
http://aspnet.4guysfromrolla.com/articles/062106-1.aspx


浅谈ASP.NET 2.0里面的AJAX 和 Atlas


导言:

传统上,web应用程序主要运用"请求/回应"模式。然后页面交互,典型的情况是向web服务器上请求一个回转(一个请求),然后执行服务器端工作并返回一个更新过的页面(一个回应).这样的话,当进行页面交互的时候多少会有些延迟.要提高用户体验的话,其中一种方法是使用AJAX.AJAX是一种使用JavaScript 和 XMLHttpRequest对象的技术.它可以把从客户端发往web服务器的HTTP requests进行“瘦身”(light-weight).一旦接收到回应,页面就使用JavaScript通知页面的 Document Object Model (DOM) 和 CSS 设置进行无缝刷新.

过去,向web程序添加AJAX类型是比较困难的,并且学习起来比较难,因为AJAX包括了很多技术(JavaScript, XML, XmlHttpObject, HTTP requests, DHTML等等),不过随着ASP.NET Atlas framework的出现.当谈到AJAX时就用不着叹气了.

在本文,我们首先介绍AJAX a以及 Microsoft's Atlas framework的概念.接下来,我们通过一个简单的示例讲解这些概念.最后,通过一个稍微复杂点的示例见识 Atlas的威力,并向GridView控件添加AJAX行为,最后的案例显示,向一个现有的或新建的web程序添加AJAX行为是很容易的.


AJAX 和 Atlas的基本概念

AJAX表示异步JavaScript和XML. (Asynchronous JavaScript and XML).AJAX技术的核心是XMLHttpRequest object对象,该对象便于以异步方式向web服务器传送更少量的数据,而不是每次当用户做出改动时刷新整个页面.就像前面提到的那样,在以前,AJAX技术很难执行,因为开发者需要写客户端JavaScript来进行异步请求并处理回应.自然,服务器端代码也要处理这种“局部”回传.此外,浏览器在执行DOM 和 XMLHttpObject的细微差异也会使事情变的不那么简单.

针对执行AJAX技术面临的这些困难,微软推出了Atlas framework,它是对ASP.NET的扩充,用它可以很容易的贯彻到你的ASP.NET web应用程序中,真是难以置信.比如,使用Atlas的话,你不必再担心浏览器的兼容性,因为Atlas framework会根据客户端浏览器的不同,输出相应的代码.

本文接下来将演示如何构建一个使用AJAX技术的页面;这2个例子可以在本文结尾处下载得到.假定你安装的是Visual Studio 2005(或Web Developer),以及SQL Server 2005 Express版.(对那些非SQL Server 2005Express版本的用户,我们稍后会提供相应的用法说明,指导如何顺利的运行第二个示例)

一个基本的Atlas示例

让我们先来演示一个简单的示例。首先我们要网站Atlas website(atlas.asp.net)上去下载并安装April CTP setup (.msi)文件(http://www.microsoft.com/downloads/details.aspx?FamilyId=B01DC501-B3C1-4EC0-93F0-7DAC68D2F787&displaylang=en). 在默认安装即可,该安装文件将在你的Visual Studio 2005 或 Visual Web Developer里安装Atlas website 模板.

现在你已经安装了Atlas模板.打开Visual Studio 2005,在File菜单里选“New Web Site” .

图1:

在My Templates里选Atlas Web Site项,在location里做相应的设置,再点OK.该Atlas Web Site模板以已经做了最初的准备工作。比如,在解决资源管理器里,查看 /bin目录的话,你将会看到一个Microsoft.Web.Atlas.dll编译文件.此外,你查看Web.config文件的话,你将看到所有必须的“挂钩”(hooks)开始向Web应用程序添加Atlas functionality.(在此,我不打算讲解Web.config文件里有关Atlas的属性,你想更多的了解的话,请参阅Atlas documentation:http://www.asp.net/ajax/documentation/live/)

最后,如果你查看Default.aspx页面的源代码,你可以看到Atlas新添加了一个 server控件:

<atlas:ScriptManager ID="ScriptManager1" runat="server" />

在每一个使用Atlas functionality的页面,你必须使用ScriptManager控件声明.我们先忽略页面底部的<script>模块,直接看我们的示例.

首先,在Default.aspx页面里输入如下的代码片段,以替换<form>标签里的现有代码:

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

<div style="background-color: Yellow; float: left; width: 100px;">
<asp:Label ID="FullPostBackLabel" runat="server" /><br />
<asp:Button ID="FullPostBackButton" runat="server" text="Full Post Back" OnClick="FullPostBackButton_OnClick" />
</div>

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<div style="background-color: Lime; width: 100px;">
<asp:Label ID="PartialPostBackLabel" runat="server" /><br />
<asp:Button ID="PartialPostBackButton" runat="server" text="Partial Post Back" OnClick="PartialPostBackButton_OnClick" />
</div>
</ContentTemplate>
</atlas:UpdatePanel>
</form>

简单的说,这段代码创建了2个用户界面,且都用当前的服务器时间来更新一个 Label控件。第一个界面使用标准的,“请求/回应”模式完全回传("Full Post Back"控件);而第二个界面使用AJAX技术进行局部回传.我们不谈第一个界面,那是不言而喻的。 我们将重点看第二个"Partial Post Back"控件.

就像你看到的那样,ScriptManager控件添加了EnablePatialRendering属性,且设置为rue. 这将允许ASP.NET部分回传页面而不是全部回传。这就是我们想要的!要异步地处理部分回传给web服务器的数据,为此我们要添加一个UpdatePanel 控件:

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
</ContentTemplate>
</atlas:UpdatePanel>

将参与异步回传的ASP.NET控件放置在UpdatePanel的<ContentTemplate>标签里.该UpdatePanel的Mode属性指示什么时候发生局部回传.就本页面而言,Mode属性为Conditional,那就意味着下面3种事件之一发生时, UpdatePanel将会把其数据回传给服务器:

1.明白无误的调用UpdatePanel的Update()方法.
2.一个UpdatePanel事件导致Update()方法明白无误的被调用.
3.包含在UpdatePanel里面的一个server控件导致一个页面回传

如果你忽略Mode特性的话,它默认为Always,那就是说,当页面里的任何一个 server控件导致回传时,UpdatePanel都要刷新.在本例中我们使用第三种方法来回传UpdatePanel(那就是说,当UpdatePanel里面的一个控件引发回传的时候,该UpdatePanel就会回传)。就像你看到的一样,我们将一个Label 和 Button控件包含在<ContentTemplate>标签里,因此当点击Button控件时UpdatePanel就会回传.

最后,在页面的<head>表签里添加如下的服务器端<script>模块(如果你愿意的话,也可以添加到页面的后台代码类里)

<script runat="server">
void FullPostBackButton_OnClick(object sender, EventArgs e)
{
FullPostBackLabel.Text = DateTime.Now.ToString();
}

void PartialPostBackButton_OnClick(object sender, EventArgs e)
{
PartialPostBackLabel.Text = DateTime.Now.ToString();
}
</script>


它们是页面上2个Button控件的服务器端事件处理器(一个在UpdatePanel里面,一个在外面),它们都会用服务器当前的时间来对Label控件进行更新.

我们来运行,点击这2个按钮,之后你的屏幕看起来和下面的差不多:

图2:

当你点击"Partial Post Back"按钮时, 你将看到其上面的时间改变了但屏幕没有任何的闪烁,页面并没有完全的回传,也没有改变其它部分的时间!点击"Partial Post Back"按钮的时候,使用XMLHttpRequest object对象向web服务器进行异步回传;web服务器然后返回信息.该简单的示例向我们展示在你的web程序里使用Atlas执行AJAX行为是很简单的.

在下一个示例里,我们使用GridView控件,用局部回传来更新、排序、分页记录!


构建一个使用Atlas技术的GridView控件

我们来使用GridView控件进行更具实践性的示例。首先创建一个新个Atlas template工程.请下载本文的代码,在AtlasSecondExample文件夹下的的App_Data文件夹里有一个名为Database.mdf的数据库文件.将其复制到你新近创建的website的App_Data文件夹里

打开Default.aspx页面,进入source模式,在<form>标签里添加如下的代码:

<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"/>

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>

</ContentTemplate>
</atlas:UpdatePanel>
</form>

我们在第一个示例里解释过了这些代码,你理解起来应该已经没有障碍了.

接下来,创建一个强类型的DataSet,在创建过程中你可以自动的生产nsert, update, delete SQL statements.关于使用强类型DataSet的好处已经超出了本文的范畴,你可以参阅Scott Mitchell写的《Working with Data in ASP.NET 2.0》系列教程.

在File菜单里选New File,再选DataSet,点Add(将其命名为DataSet1).然后询问你是否将其放在App_Code文件夹里,选Yes. 这将打开DataSet Designer and the TableAdapter Configuration Wizard向导.


图3

确保在下拉列表里选中Database.mdf文件,再连续点3次Next,接着输入SELECT statement,用从数据库检索的记录填充到DataSet,键入下面的statement,再点2次Next,最后点Finish.

SELECT * FROM Employees

我们的SELECT statement仅仅返回Employees表的所有记录.保存该强类型DataSet再关闭DataSet Designer.

现在我们将注意力转移到构建使用AJAX的GridView控件.打开Default.aspx页面并切换到design模式,拖一个GridView控件到UpdatePanel内部,在智能标签里,在“选择数据源”里选择“新数据源”。然后就开启了Data Source Configuration Wizard向导,选择“Object”并使用其默认ID,再点OK. 接下来的屏幕我们将在下拉列表里看到我们创建的名为DataSet1TableAdapters.EmployeesTableAdapter的TableAdapter,选中它,点Next,再点Finish.

差不多就这些了!在GridView的智能标签里启用分页、排序、编辑功能.运行该工程,你看到的输出和下面的图片差不多。

图4

测试排序、分页、编辑功能。我们注意到这些功能都是异步发生的!

最后我还想提一点,绝大多数用户在与web页面交互的时候,体验的是页面产生回传,屏幕闪烁一下后又重新对页面进行装载.这样用户就可以知道页面在进行处理.但随着AJAX的出现,就不会出现屏幕闪烁的情况了,不过最后还是通过某种感官效果来提示用户页面正进行处理.一个比较简单的方法是使用Atlas内置的,称为UpdateProgess的服务器控件.你可以添加该控件到任何页面,无论何时一个 UpdatePanel产生回传,UpdateProgress的<ProgressTemplate>标签里的所有内容都会显示出来,直到页面更新完为止.你甚至可以放一个GIF图像文件出来,提示用户页面正在处理.

<atlas:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Please wait...
</ProgressTemplate>
</atlas:UpdateProgress>

结语:

在本文,我们看到使用Microsoft的Atlas来执行AJAX功能是多么的简单。我们做了2个示例,第一个用来解释AJAX和Atlas framework的基本概念.另一个示例演示了如何将一个ASP.NET server控件放在一个合适的Atlas server控件里,使其也可以使用AJAX技术.欣慰的是,通过本文我们为你揭开了AJAX 和 Atlas的神秘面纱.


附录:

名称解释:Hook

Hook是Windows中提供的一种用以替换DOS下“中断”的系统机制,中文译为“挂钩”或“钩子”。在对特定的系统事件进行hook后,一旦发生已hook事件,对该事件进行hook的程序就会受到系统的通知,这时程序就能在第一时间对该事件做出响应。

分享到:
评论

相关推荐

    ASP.NET AJAX程序设计——第I卷:服务器端ASP.NET 2.0 AJAX Extensions与ASP.NET AJAX Control Toolkit 源代码

    本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...

    ASP.NET2.0 AJAX

    ASP.NET2.0 AJAX包括:ASP.NET 2.0 AJAX Extensions和ASP.NET Futures CTP.放心下载可用! 支持vs2005sp1!不要用vs2005的哟!否则web.config中会出现错误的!

    ASP.NET2.0 AJAX开发组件包

    Validators.zip是在Bet1a,Beta2,RC中自带但在Relase中被移到ASP.NET 2.0补丁包中的AJAX兼容性Validators控件库,在新的ASP.NET2.0补丁包安装之前可以先用此库代替。具体用法祥见Scott老大的Blog ...

    asp.net 2.0+ajax 的简单示例

    asp.net 2.0+ajax 的简单示例哦,大家可以学习看看。

    Microsoft ASP.NET 2.0 AJAX Extensions 1.0.zip

    主要用来解决:Parser Error Message: Could not load file or assembly 'System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35' or one of its dependencies....

    Microsoft Ajax For asp.net2.0

    Microsoft Ajax For Asp.net2.0及demo

    ASP.NET 2.0高级编程(特别版)》[英文CHM电子书+源代码].

    在全面介绍ASP.NET各种编程技能的同时重点介绍了ASP.NET 2.0版本中的巨大变化,详细阐述了ASP.NET 2.0中所包含的每个新特性。书中提供了大量的实例,可帮助读者快速掌握如何在.NET Framework下构建功能强大的ASP.NET...

    ASP.NET 2.0入门经典(第4版)

    《ASP.NET 2.0 入门经典》将逐步引导您使用 ASP.NET 2.0 创建动态的、数据驱动的、复杂的Web站点。在本章结束时,我们将解释一些基本的想法并介绍一个完整的示例站点。然后将学习怎样使用 Visual Web Developer ...

    Asp.net 2.0高级编程(pdf)

    内容代码,使用VB.net和C# 两种解释 &lt;br&gt;第1章ASP.NET2.0概述 1 1.1简史 1 1.2ASP.NET2.0的目标 2 1.2.1开发人员的效率 3 1.2.2管理 5 1.2.3性能和可伸缩性 8 1.3ASP.NET2.0的其他新特性 8 ...

    ASP.NET2.0 经典案例教程

    熟悉ASP.NET 1.x的程序员亟需快速掌握ASP.NET 2.0新增的功能和控件,以便立刻使用ASP.NET 2.0来编写程序。  本书通过深入剖析12个使用ASP.NET 2.0开发的项目,全面阐述了ASP.NET 2.0应用程序的架构及ASP.NET 2.0...

    ASP.NET 2.0动态网站开发基础教程(C#) 第09章 ASP.NET Web服务 传送数据(共9页).ppt

    ASP.NET 2.0动态网站开发基础教程(C#) 第03章 ASP.NET2.0语言程序设计基础 数据类型 控制语句 类和对象(共28页).ppt ASP.NET 2.0动态网站开发基础教程(C#) 第04章 ASP.NET2.0常用对象 response request server...

    ASP.NET 2.0入门经典:C#编程篇.pdf

    原装的英文版Asp.net2.0 入门经典C#篇.避免了翻译后的质量下降

    圣殿祭司的ASP.NET 2.0开发详解 使用C# PDF Part17

    内容涵盖VS 2005开发工具、SQL Server 2005安装管理策略与ASP.NET 2.0各种新功能,乃至于极度爆红的AJAX与Atlas Framework亦收录在本书之中,让您置身最顶尖的技术潮流。内容以专家级水平为基准点,透过精辟立论来...

    圣殿祭司的ASP.NET 2.0开发详解 使用C# PDF Part22

    内容涵盖VS 2005开发工具、SQL Server 2005安装管理策略与ASP.NET 2.0各种新功能,乃至于极度爆红的AJAX与Atlas Framework亦收录在本书之中,让您置身最顶尖的技术潮流。内容以专家级水平为基准点,透过精辟立论来...

    圣殿祭司的ASP.NET 2.0开发详解 使用C# PDF Part08

    内容涵盖VS 2005开发工具、SQL Server 2005安装管理策略与ASP.NET 2.0各种新功能,乃至于极度爆红的AJAX与Atlas Framework亦收录在本书之中,让您置身最顶尖的技术潮流。内容以专家级水平为基准点,透过精辟立论来...

    ASP.NET 2.0 Ajax程序设计——第II卷书中代码2

    本卷侧重分析ASP.NET AJAX框架的客户端部分,包括对JavaScript 在面向对象、DOM 操作方面的扩展、ASP.NET AJAX 客户端组件、ASP.NET AJAX XML脚本等,还介绍了ASP.NET AJAX 框架为开发者在客户端用JavaScript 与...

    ASP.NET 2.0 入门经典(第4版).rar

    《ASP.NET 2.0 入门经典》将逐步引导您使用 ASP.NET 2.0 创建动态的、数据驱动的、复杂的Web站点。在本章结束时,我们将解释一些基本的想法并介绍一个完整的示例站点。然后将学习怎样使用 Visual Web Developer ...

    圣殿祭司的ASP.NET 2.0开发详解 使用C# PDF Part01

    内容涵盖VS 2005开发工具、SQL Server 2005安装管理策略与ASP.NET 2.0各种新功能,乃至于极度爆红的AJAX与Atlas Framework亦收录在本书之中,让您置身最顶尖的技术潮流。内容以专家级水平为基准点,透过精辟立论来...

    圣殿祭司的ASP.NET 2.0开发详解 使用C# PDF Part16

    内容涵盖VS 2005开发工具、SQL Server 2005安装管理策略与ASP.NET 2.0各种新功能,乃至于极度爆红的AJAX与Atlas Framework亦收录在本书之中,让您置身最顶尖的技术潮流。内容以专家级水平为基准点,透过精辟立论来...

    ASP.NET 2.0网络开发技术 ASP.NET 2.0类,对象和命名空间

    ASP.NET 2.0网络开发技术 ASP.NET 2.0类,对象和命名空间,电子书

Global site tag (gtag.js) - Google Analytics