asp.net ajax中用到了幾個dll文件,這些可以從網(wǎng)上下載。http://ajax.asp.net站點下可以找到相關(guān)的下載。這其中包括: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中所包含的控件(擴(kuò)展了現(xiàn)有的一些控件,同時提供了一些獨(dú)立的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文件進(jìn)行配置。web.config文件的配置,請參見:
http://hi.baidu.com/zhenghanzheng/blog/item/72d1c3c3ce385156b319a891.html。
<?xml version="1.0" encoding="utf-8"?>
<!--
注意: 除了手動編輯此文件以外,您還可以使用
Web 管理工具來配置應(yīng)用程序的設(shè)置??梢允褂?Visual Studio 中的
“網(wǎng)站”->“Asp.Net 配置”選項。
設(shè)置和注釋的完整列表在
machine.config.comments 中,該文件通常位于
\Windows\Microsoft.Net\Framework\v2.x\Config 中
-->
<configuration>
<!--configSections節(jié)點,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節(jié)點,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>
<!--
設(shè)置 compilation debug="true" 將調(diào)試符號插入
已編譯的頁面中。但由于這會
影響性能,因此只在開發(fā)過程中將此值
設(shè)置為 true。
-->
<compilation debug="false" />
<!--
通過 <authentication> 節(jié)可以配置 ASP.NET 使用的
安全身份驗證模式,
以標(biāo)識傳入的用戶。
-->
<authentication mode="Windows" />
<!--
如果在執(zhí)行請求的過程中出現(xiàn)未處理的錯誤,
則通過 <customErrors> 節(jié)可以配置相應(yīng)的處理步驟。具體說來,
開發(fā)人員通過該節(jié)可以配置
要顯示的 html 錯誤頁
以代替錯誤堆棧跟蹤。
<customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
<error statusCode="403" redirect="NoAccess.htm" />
<error statusCode="404" redirect="FileNotFound.htm" />
</customErrors>
-->
<!--httpHandlers節(jié)點,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節(jié)點,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節(jié)點,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>
三、調(diào)用服務(wù)器端方法
(1)調(diào)用沒有參數(shù)的服務(wù)器端方法
<%@ 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調(diào)用服務(wù)器方法</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)調(diào)用需要參數(shù)的服務(wù)器方法
<%@ 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調(diào)用服務(wù)器方法</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);//調(diào)用帶有參數(shù)的服務(wù)器方法
}
}
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)需要調(diào)用的服務(wù)器端方法必須以System.Web.Services.WebMethod特性進(jìn)行標(biāo)記
(b)需要調(diào)用的服務(wù)器端方法必須為公共靜態(tài)方法
(c)需要調(diào)用的服務(wù)器端方法應(yīng)寫在.aspx頁面(或?qū)?yīng)的后臺代碼文件)中,不應(yīng)寫在用戶控件中
(3)調(diào)用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調(diào)用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_test為WebService的名命空間
//sample為類名
//ServerMachineName為所要調(diào)用的方法的名稱
}
function Loading()
{
document.getElementById("ServerMachineName").innerText="正在與服務(wù)器進(jìn)行交互...";
}
function OnSucess(ServerMachineName)
{
document.getElementById("ServerMachineName").innerText=ServerMachineName;
}
</script>
</div>
<div id="ServerMachineName"></div>
</form>
</body>
</html>
(4)關(guān)于錯誤處理
在調(diào)用服務(wù)端方法或WebService時,服務(wù)器端可能會發(fā)生異常!在客戶端,這些異常分為服務(wù)器錯誤與服務(wù)器超時。
(a)服務(wù)器錯誤
<%@ 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調(diào)用服務(wù)器方法</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是兩個回調(diào)函數(shù)
//OnSuccess表示當(dāng)調(diào)用成功所要執(zhí)行的回調(diào)函數(shù)
//OnError表示當(dāng)調(diào)用不成功時所要執(zhí)行的加調(diào)函數(shù)
PageMethods.ServerDate(x,y,OnSuccess,OnError);
}
function Loading()
{
document.getElementById("ServerDate").innerText="Loading";
}
//調(diào)用成功時的回調(diào)函數(shù)
function OnSuccess(Message)
{
document.getElementById("ServerDate").innerText=Message;
}
//發(fā)生錯誤時的回調(diào)函數(shù),如果所調(diào)用的服務(wù)器方法在調(diào)用時發(fā)生錯誤,會有一個error對象被返回
//這個對象就是客戶端的Sys.Net.WebServiceError對象
function OnError(ErrorHander)
{
document.getElementById("ServerDate").innerText='服務(wù)器發(fā)生錯誤!';
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>
說明:當(dāng)服務(wù)器發(fā)生錯誤時,會為客戶端返回一個異常實例,該異常類型為Sys.Net.WebServiceError。該類包含以下幾個屬性:
●timedOut:布爾值,表示服務(wù)器是否超時
●message:異常信息描述
●exceptionType:服務(wù)器端異常的類型名稱
●stackTrace:異常位置
(b)服務(wù)器超時
<%@ 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調(diào)用服務(wù)器方法</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();
//設(shè)置超時時間
PageMethods.set_timeout(2000);
//OnSuccess與OnError是兩個回調(diào)函數(shù)
//OnSuccess表示當(dāng)調(diào)用成功所要執(zhí)行的回調(diào)函數(shù)
//OnError表示當(dāng)調(diào)用不成功時所要執(zhí)行的加調(diào)函數(shù)
PageMethods.TimeOutTest(OnSuccess,OnError);
}
function Loading()
{
document.getElementById("ServerDate").innerText="Loading";
}
//調(diào)用成功時的回調(diào)函數(shù)
function OnSuccess(Message)
{
document.getElementById("ServerDate").innerText=Message;
}
//發(fā)生錯誤時的回調(diào)函數(shù),如果所調(diào)用的服務(wù)器方法在調(diào)用時發(fā)生錯誤,會有一個error對象被返回
//這個對象就是客戶端的Sys.Net.WebServiceError對象
function OnError(ErrorHander)
{
document.getElementById("ServerDate").innerText='服務(wù)器發(fā)生錯誤!';
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>