.net 2.0下的asp.net ajax基本使用方法
2007年10月17日 星期三 13:15
一、必要的组件下载
asp.net ajax中用到了几个dll文件,这些可以从网上下载。http://ajax.asp.net站点下可以找到相关的下载。这其中包括: System.Web.Extensions.dll、System.Web.Extensions.Design.dll、 AjaxControlkit.dll、AjaxExtensionsToolBox.dll、Microsoft.Web.Preview.dll。其中,System.Web.Extensions.dll与AjaxControlKit.dll这两个组件是最重要的。在将这些组件下载到本地之后,需要将其引入到所需要的项目中。 System.Web.Extensions.dll中所包含的控件: ●ScriptManager ● ScriptManagerProxy ●Timer ●UpdatePanel ●UpdateProgress AjaxControlToolkit.dll中所包含的控件(扩展了现有的一些控件,同时提供了一些独立的Ajax控件) : ● Accordion ● AccordionPane ●AlwaysVisibleControlExtender ●AnimationExtender ●AutoCompleteExtender ●CalendarExtender ●CascadingDropDown ●CollapsiblePanelExtender ●ConfirmButtonExtender ●DragPanelExtender ●DropDownExtender ●DropShadowExtender ●DynamicPopulateExtender ●FilteredTextBoxExtender ●HoverMenuExtender ●ListSearchExtender ●MaskedEditExtneder ●MaskedEditValidator ●ModalPopupExtender ●MutuallyExclusiveCheckBoxExtender ●NoBot ●NumericUpDownExtender ●PaginBulletedListExtender ●PasswordStrength ●PopupControlExtender ●Rating ●ReorderList ●ResizableControlExtender ●RoundedCornersExtender ●SliderExtender ●SlideShowExtender ●TabContainer ●TextBoxWatermarkExtender ●ToggleButtonExtender ●ToolkitScriptManager ●UpdatePanelAnimationExtender ●ValidatorCalloutExtender 二、web.config文件配置 在项目中引用了asp.net ajax组件后,还需要对项目的web.config文件进行配置。web.config文件的配置,请参见: http://hi.baidu.com/zhenghanzheng/blog/item/72d1c3c3ce385156b319a891.html。 <?xml version="1.0" encoding="utf-8"?> <!-- 注意: 除了手动编辑此文件以外,您还可以使用 Web 管理工具来配置应用程序的设置。可以使用 Visual Studio 中的 “网站”->“Asp.Net 配置”选项。 设置和注释的完整列表在 machine.config.comments 中,该文件通常位于 \Windows\Microsoft.Net\Framework\v2.x\Config 中 --> <configuration> <!--configSections节点,asp.net ajax所需要的配置--> <configSections> <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"> </sectionGroup> </sectionGroup> </sectionGroup> </configSections> <appSettings/> <connectionStrings/> <system.web> <!--pages节点,asp.net ajax所需要的配置--> <pages> <controls> <add tagPrefix="AJAX" namespace="Microsoft.Web.UI" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add tagPrefix="AJAX" namespace="Microsoft.Web.UI.Controls" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add tagPrefix="AJAX" namespace="Microsoft.Web.UI.Compatibility" assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </controls> </pages> <!-- 设置 compilation debug="true" 将调试符号插入 已编译的页面中。但由于这会 影响性能,因此只在开发过程中将此值 设置为 true。 --> <compilation debug="false" /> <!-- 通过 <authentication> 节可以配置 ASP.NET 使用的 安全身份验证模式, 以标识传入的用户。 --> <authentication mode="Windows" /> <!-- 如果在执行请求的过程中出现未处理的错误, 则通过 <customErrors> 节可以配置相应的处理步骤。具体说来, 开发人员通过该节可以配置 要显示的 html 错误页 以代替错误堆栈跟踪。 <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"> <error statusCode="403" redirect="NoAccess.htm" /> <error statusCode="404" redirect="FileNotFound.htm" /> </customErrors> --> <!--httpHandlers节点,asp.net ajax所需要的配置--> <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> <add verb="GET,HEAD,POST" path="*.asbx" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/> </httpHandlers> <!--httpModules节点,asp.net ajax所需要的配置--> <httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </httpModules> </system.web> <!--system.webServer节点,asp.net ajax所需要的配置--> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules> <add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> </modules> <handlers> <remove name="WebServiceHandlerFactory-Integrated"/> <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services. ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> <add name="ASBXHandler" verb="GET,HEAD,POST" path="*.asbx" preCondition="integratedMode" type="System.Web.Script.Services. ScriptHandlerFactory,System.Web.Extensions, Version=1.0.61025.0, Culture=neutral,PublicKeyToken=31bf3856ad364e35"/> </handlers> </system.webServer> </configuration> 三、调用服务器端方法 (1)调用没有参数的服务器端方法 <%@ Page Language="C#" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> [System.Web.Services.WebMethod] public static string ServerDate() { return DateTime.Now.ToShortDateString(); } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>asp.net ajax调用服务器方法</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"> </asp:ScriptManager> <script language="javascript" type="text/javascript"> function GetServerDate() { Loading(); PageMethods.ServerDate(OnSuccess); } function Loading() { document.getElementById("ServerDate").innerText="Loading"; } function OnSuccess(Message) { document.getElementById("ServerDate").innerText=Message; } </script> <input type="button" value="GetServerTime" οnclick="GetServerDate()" /> </div> <div id="ServerDate"></div> </form> </body> </html> (2)调用需要参数的服务器方法 <%@ Page Language="C#" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> [System.Web.Services.WebMethod] public static string ServerDate() { return DateTime.Now.ToShortDateString(); } [System.Web.Services.WebMethod] public static String YourName( string firstName , string lastName ) { return firstName + " " + lastName; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>asp.net ajax调用服务器方法</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"> </asp:ScriptManager> <script language="javascript" type="text/javascript"> function GetServer(firstName,lastName) { Loading(); if ( arguments.length != 2 ) { PageMethods.ServerDate(OnSuccess); } else { PageMethods.YourName(firstName,lastName,OnSuccess);//调用带有参数的服务器方法 } } function Loading() { document.getElementById("ServerDate").innerText="Loading"; } function OnSuccess(Message) { document.getElementById("ServerDate").innerText=Message; } </script> <input type="button" value="GetServerTime" οnclick="GetServer()" /> <input type="button" value="GetYourName" οnclick="GetServer('henry','yu')" /> </div> <div id="ServerDate"></div> </form> </body> </html> 说明: (a)需要调用的服务器端方法必须以System.Web.Services.WebMethod特性进行标记 (b)需要调用的服务器端方法必须为公共静态方法 (c)需要调用的服务器端方法应写在.aspx页面(或对应的后台代码文件)中,不应写在用户控件中 (3)调用WebService <%@ Page Language="C#" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!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 runat="server"> <title>asp.net ajax调用WebService</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> <Services> <asp:ServiceReference Path="sample.asmx"/> </Services> </asp:ScriptManager> <input type="button" value="GetMachineName" οnclick="GetMachineName()" /> <script language="javascript"> function GetMachineName(IsUTC) { Loading(); Ajax_Test.sample.ServerMachineName(OnSucess); //Ajax_test为WebService的名命空间 //sample为类名 //ServerMachineName为所要调用的方法的名称 } function Loading() { document.getElementById("ServerMachineName").innerText="正在与服务器进行交互..."; } function OnSucess(ServerMachineName) { document.getElementById("ServerMachineName").innerText=ServerMachineName; } </script> </div> <div id="ServerMachineName"></div> </form> </body> </html> (4)关于错误处理 在调用服务端方法或WebService时,服务器端可能会发生异常!在客户端,这些异常分为服务器错误与服务器超时。 (a)服务器错误 <%@ Page Language="C#" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> [System.Web.Services.WebMethod] public static float ServerDate(int x, int y) { return x / y; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>asp.net ajax调用服务器方法</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"> </asp:ScriptManager> <script language="javascript" type="text/javascript"> function GetServer(x,y) { Loading(); //OnSuccess与OnError是两个回调函数 //OnSuccess表示当调用成功所要执行的回调函数 //OnError表示当调用不成功时所要执行的加调函数 PageMethods.ServerDate(x,y,OnSuccess,OnError); } function Loading() { document.getElementById("ServerDate").innerText="Loading"; } //调用成功时的回调函数 function OnSuccess(Message) { document.getElementById("ServerDate").innerText=Message; } //发生错误时的回调函数,如果所调用的服务器方法在调用时发生错误,会有一个error对象被返回 //这个对象就是客户端的Sys.Net.WebServiceError对象 function OnError(ErrorHander) { document.getElementById("ServerDate").innerText='服务器发生错误!'; var ErrorMessage = '是否超时'+ErrorHander.get_timedOut()+'\n错误信息为:' + ErrorHander.get_message() + '\n异常名称为:' + ErrorHander.get_exceptionType() + '\n错误位置为:' + ErrorHander.get_stackTrace(); alert(ErrorMessage); } </script> <input type="button" value="GetServerTime" οnclick="GetServer(10,0)" /> </div> <div id="ServerDate"></div> </form> </body> </html> 说明:当服务器发生错误时,会为客户端返回一个异常实例,该异常类型为Sys.Net.WebServiceError。该类包含以下几个属性: ●timedOut:布尔值,表示服务器是否超时 ●message:异常信息描述 ●exceptionType:服务器端异常的类型名称 ●stackTrace:异常位置 (b)服务器超时 <%@ Page Language="C#" %> <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server"> [System.Web.Services.WebMethod] public static float ServerDate(int x, int y) { return x / y; } [System.Web.Services.WebMethod] public static float TimeOutTest() { //方法会延迟十秒 System.Threading.Thread.Sleep(10000); return 0; } </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>asp.net ajax调用服务器方法</title> </head> <body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server"> </asp:ScriptManager> <script language="javascript" type="text/javascript"> function GetServer() { Loading(); //设置超时时间 PageMethods.set_timeout(2000); //OnSuccess与OnError是两个回调函数 //OnSuccess表示当调用成功所要执行的回调函数 //OnError表示当调用不成功时所要执行的加调函数 PageMethods.TimeOutTest(OnSuccess,OnError); } function Loading() { document.getElementById("ServerDate").innerText="Loading"; } //调用成功时的回调函数 function OnSuccess(Message) { document.getElementById("ServerDate").innerText=Message; } //发生错误时的回调函数,如果所调用的服务器方法在调用时发生错误,会有一个error对象被返回 //这个对象就是客户端的Sys.Net.WebServiceError对象 function OnError(ErrorHander) { document.getElementById("ServerDate").innerText='服务器发生错误!'; var ErrorMessage = '是否超时'+ErrorHander.get_timedOut()+'\n错误信息为:' + ErrorHander.get_message() + '\n异常名称为:' + ErrorHander.get_exceptionType() + '\n错误位置为:' + ErrorHander.get_stackTrace(); alert(ErrorMessage); } </script> <input type="button" value="GetServerTime" οnclick="GetServer()" /> </div> <div id="ServerDate"></div> </form> </body> </html> |