AJAX经典教程

了解使用ASP.NETAJAX进行局部页面更新ASP.NETAJAXExtensions最显而易见的特性应该是：能够进行局部或增量页面更新，而无需执行向服务器的完全回传，也无需更改代码，只需要做很少的标记更改。其优势有很多：不会改变您的多媒体状态（如AdobeFlash或WindowsMedia，减少了带宽成本，且客户端也不会出现通常与回传有关的闪屏现象。«前一篇教程|下一篇教程»C#教程Ajax教程了解使用ASP.NETAJAX进行局部页面更新了简介Microsoft的ASP.NET技术提供了一个面向对象、事件驱动的编程模型，并将其与已编译代码的优势结合起来。但其服务器端的处理模型仍存在技术本身所固有的几点不足：进行页面更新需要往返服务器，因此需要页面刷新；来回往返不会保留Javascript或其他客户端技术（如AdobeFlash）生成的任何效果。在回传过程中，除MicrosoftInternetExplorer之外的浏览器都不支持自动存储滚动位置。而即使在InternetExplorer中，页面刷新时仍然会出现闪屏现象。回传可能会导致占用较多的带宽，这是因为__VIEWSTATE表单字段可能会变大，尤其是在处理GridView或Repeater等控件时。没有统一的模型用于通过JavaScript或其他客户端技术访问Web服务。进入Microsoft的ASP.NETAJAX扩展。AJAX的全称为AsynchronousJavaScriptAndXML（异步JavaScript和XML），它是一个集成框架，用于通过跨平台的JavaScript提供增量页面更新。AJAX包括含有MicrosoftAJAXFramework的服务器侧代码，以及一个名为MicrosoftAJAXScriptLibrary的脚本组件。ASP.NETAJAX扩展还跨平台支持通过JavaScript访问ASP.NETWeb服务。本白皮书将深入探讨ASP.NETAJAXExtensions的局部页面更新功能，包括ScriptManager组件、UpdatePanel控件及UpdateProgress控件，以及适合及不适合应用它们的场景。本白皮书基于VisualStudio2008的Beta2版本和.NETFramework3.5。.NETFramework3.5将ASP.NETAJAXExtensions集成到了基础类库中（之前它是ASP.NET2.0的一个插件组件）。本白皮书还假定您使用的是VisualStudio2008而非VisualWebDeveloperExpressEdition。因为本教程引用的某些项目模板对于VisualWebDeveloperExpress用户可能是不可用的。解ASP.NETAJAXUpdatePanel触发器了解ASP.NETAJAX验证和配置文局部页面更新能够进行局部或增量页面更新，而无需执行向服务器的完全回传，也无需更改代码，只需要做很少的标记更改。这可能算得上ASP.NETAJAXExtensions最显而易见的特性了。其优势有很多：不会改变您的多媒体状态（如AdobeFlash或WindowsMedia，减少了带宽成本，且客户端也不会出现通常与回传有关的闪屏现象。局部页面解析功能被集成到ASP.NET中，并对您的项目做到最小程度的更改。演练：将局部解析集成到现有项目中1.在MicrosoftVisualStudio2008中新建一个ASP.NETWebSite项目：打开File–New–WebSite…，在对话框中选择ASP.NETWebSite。您自己为项目命名，Location选择“文件系统”或者IIS都可以。2.这时会出现一个空白默认页面，以及基本ASP.NET标记（一个服务器侧表单以及一个@Page指令）。在页面的表单元素中，添加一个名为Label1的Label以及一个名为Button1的Button。您可自行设定它们的文本属性。3.在设计视图中双击Button1以生成一个代码文件eventhandler。在此eventhandler中将Label1.Text设为Youclickedthebutton!。程序列表1：启用局部解析之前default.aspx的标记1.%@PageLanguage=C#AutoEventWireup=trueCodeFile=Default.aspx.cs2.Inherits=_Default%3.4.!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN5.==server件应用程序服务了解ASP.NETAJAX本地化了解ASP.NETAJAXWeb服8.titleUntitledPage/title9./head10.body11.formid=form1runat=server12.div13.asp:LabelID=Label1runat=serverText=Thisisalabel!14./asp:Label15.asp:ButtonID=Button1runat=serverText=ClickMe16.OnClick=Button1_Click/17./div18./form19./body20./html程序列表2：default.aspx.cs中的代码文件1.publicpartialclass_Default:System.Web.UI.Page2.{3.protectedvoidButton1_Click(objectsender,EventArgse)4.{5.Label1.Text=Youclickedthebutton!;6.}7.}4.按下F5打开您的网站。VisualStudio将提示您添加一个web.config文件以启用调试。务了解ASP.NETAJAX调试功能照此提示操作。注意当您单击按钮时，页面将刷新以更改标签中的文本，刷新页面时会出现短暂的闪屏现象。5.关闭浏览器窗口后，返回VisualStudio和标记页面。在VisualStudio工具箱中向下滚动，找到标记为AJAXExtensions的选项卡。（如果由于您使用的是AJAX或Atlas扩展的早期版本而没有此选项卡，请参考本白皮书稍后部分中关于注册AJAXExtensions工具箱项的过程的内容，或使用网络上可下载的WindowsInstaller安装新版本。已知问题：如果您的计算机上已经安装了带有ASP.NET2.0AJAXExtensions的VisualStudio2005，那么当您安装VisualStudio2008Beta2时，VisualStudio2008将导入AJAXExtensions工具箱项。您可以查看组件的工具提示来确定自己计算机上的软件版本，版本应为Version3.5.0.0。如果显示版本为Version2.0.0.0，说明您已经导入了原有的工具箱项，并且需要使用VisualStudio的ChooseToolboxItems对话框来手动导入。不能通过设计器添加Version2控件。6.在asp:Label标记开始之前，创建一个空白行，并双击工具箱中的UpdatePanel控件。注意,页面顶部包含了一个新的@Register指令，表示应使用asp:prefix导入System.Web.UI命名空间中的控件。7.将/asp:UpdatePanel结束标记拖过Button元素的末尾，以使元素有效包装Label和Button控件。8.在asp:UpdatePanel标记之后添加一个新标记。注意，IntelliSense将提示有两个选项。此处请选择创建ContentTemplate标记。确保用此标记包括您的Label和Button控件，以使标记有效。9.在form元素中的任何位置，双击工具箱中的ScriptManager项，以包含一个ScriptManager项。10.编辑asp:ScriptManager标记以使其包含EnablePartialRendering=”true”属性。程序列表3：启用局部解析的default.aspx的标记1.%@PageLanguage=C#AutoEventWireup=true2.CodeFile=Default.aspx.csInherits=_Default%3.%@RegisterAssembly=System.Web.Extensions,Version=1.0.61025.0,Culture=neutral,4.PublicKeyToken=31bf3856ad364e355.Namespace=System.Web.UITagPrefix=asp%6.7.!DOCTYPEhtmlPUBLIC8.-//W3C//DTDXHTML1.0Transitional//EN9.==server13.titleUntitledPage/title14./head15.body16.formid=form1runat=server17.asp:ScriptManagerEnablePartialRendering=true18.ID=ScriptManager1runat=server/asp:ScriptManager19.div20.asp:UpdatePanelID=UpdatePanel1runat=server21.ContentTemplate22.asp:LabelID=Label1runat=server23.Text=Thisisalabel!/asp:Label24.asp:ButtonID=Button1runat=server25.Text=ClickMeOnClick=Button1_Click/26./ContentTemplate27./asp:UpdatePanel28./div29./form30./body31./html11.打开web.config文件。注意，VisualStudio自动添加了一个指向System.Web.Extensions.dll的编译引用。VisualStudio2008的新特性：ASP.NET网站项目模板附带的web.config自动包含了所有必需的到ASP.NETAJAXExtensions的引用，且包含配置信息中可删除注释以启用附加功能的加注释部分。在安装了ASP.NET2.0AJAXExtensions后，VisualStudio2005也拥有相似的模板。但在VisualStudio2008中，AJAXExtensions默认是被引用的，但是可以选择其不被引用。12.按下F5启动您的网站。注意，对局部解析的支持并不要求进行任何源代码更改，只更改标记。启动您的网站时，应该看见现在已经启用了局部解析。因为您单击按钮时没有出现闪屏现象，页面的滚动位置也没有更改（示例并未说明这点）。如果您要在单击按钮后查看页面的被解析过的源代码文件，将可以确认实际上没有产生回传：原有的标签文本仍是源标记的一部分，标签是通过JavaScript更改的。VisualStudio2008Beta2并没有自带ASP.NETAJAX-Enabled网站模板。但是在VisualStudio200