net 2.0下的asp.net ajax基本使用方法 (备忘)

  

asp.net ajax中用到了几个dll文件,这些可以从网上下载。http://ajax.asp.net站点下可以找到相关的下载。这其中包括:System.Web.Extensions.dllSystem.Web.Extensions.Design.dllAjaxControlkit.dllAjaxExtensionsToolBox.dllMicrosoft.Web.Preview.dll。其中,System.Web.Extensions.dllAjaxControlKit.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文件的配置,请参见:

 

<?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#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<%@ 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 id="Head1" 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" onclick="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 id="Head1" 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" onclick="GetServer()" />

     <input type="button" value="GetYourName" onclick="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 id="Head1" 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" onclick="GetMachineName()" />

         <script language="javascript">

             function GetMachineName(IsUTC) {

                 Loading();

                 Ajax_Test.sample.ServerMachineName(OnSucess);

                 //Ajax_testWebService的名命空间

                 //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 id="Head1" 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();

 

             //OnSuccessOnError是两个回调函数

             //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" onclick="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 id="Head1" 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);

 

             //OnSuccessOnError是两个回调函数

             //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" onclick="GetServer()" />

     </div>

     <div id="ServerDate"></div>

     </form>

</body>

</html>

 

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值