通過 AjaxManager, 我們可以方便的生成調用 WebService 或者一般處理程序的 javascript 函數, 這樣就可以方便的在客戶端調用.

本文更新:

2011-12-12: 去掉 ParameterList 和 AjaxList.

由于精力有限, 不能在多個博客中保證文章的同步, 可在如下地址查看最新內容, 請諒解:

http://code.google.com/p/zsharedcode/wiki/AjaxManager

請到 Download 下載資源 的 JQueryElement 示例下載一節下載示例代碼

本文將說明如何使用 AjaxManager 來生成調用服務器端方法的 javascript 函數, 以及如何調用這些函數:

? * 準備

? * 創建 javascript 函數

? * 直接調用

? * 通過 Async 屬性調用

? * 隱式添加的參數

準備

請確保已經在 Download 下載資源 中下載 JQueryElement 最新的版本.

請使用指令引用如下的命名空間:

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.ui.jqueryui"
TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.web.jqueryui"
TagPrefix="je" %>

除了命名空間, 還需要引用 jQueryUI 的腳本:

<script type="text/javascript" src="[腳本路徑]/jquery-<version>.min.js"></script>

創建 javascript 函數

在頁面中添加一個 AjaxManager 控件, 來創建調用服務器端方法的 javascript 函數:

<je:AjaxManager ID="manager" runat="server">
<AjaxList>
<je:AjaxSetting
ClientFunction="<javascript 函數名>"
ClientParameter="<javascript 參數, 比如: name, age>"
Url="<服務器端方法地址>" MethodName="<服務器端方法名稱>"
Success="<調用成功時的 javascript 函數>"
Error="<調用失敗時的 javascript 函數>"
Complete="<調用完成時的 javascript 函數>"
...
>
<ParameterList>
<參數>
</ParameterList>
</je:AjaxSetting>
</AjaxList>
</je:AjaxManager>

<je:AjaxManager ID="manager" runat="server">
<AjaxList>
<je:AjaxSetting ClientFunction="add" Url="handler.ashx" Success="
function(data){
$('#result').text(-:data.result);
}
">
<ParameterList>
<je:Parameter Name="c" Type="Expression" Value="'add'" />
<je:Parameter Name="num1" Type="Selector"
Value="'#num1'" DataType="Number" />
<je:Parameter Name="num2" Type="Selector"
Value="'#num2'" DataType="Number" />
</ParameterList>
</je:AjaxSetting>
</AjaxList>
</je:AjaxManager>

上面的示例, 生成了一個名為 add 的 javascript 函數, 在此函數中將調用一般處理程序 handler.ashx 來返回 JSON 數據.

代碼中的 -:data 將被替換為 data 或者 data.d, 更多內容請參考 使用 ASP.NET 一般處理程序或 WebService 返回 JSON.

?通過 Parameter 對象可以為 Ajax 調用增加參數, 詳細內容請參考 通過 Parameter 對象添加 Ajax 請求時的參數.

設置 javascript 函數的參數列表

通過 ClientParameter 屬性, 可以為 javascript 函數設置參數列表:

<je:AjaxManager ID="manager" runat="server">
<AjaxList>
<je:AjaxSetting ClientFunction="add3" ClientParameter="othernum"
Url="handler.ashx"
... >
<ParameterList>

<je:Parameter Name="num3" Type="Expression" Value="othernum" />

</ParameterList>
</je:AjaxSetting>
</AjaxList>
</je:AjaxManager>

上面的示例中, 為 add3 函數增加了一個 othernum 參數, 而 othernum 參數將作為 num3 的值傳遞給服務器端. 可以像這樣來調用 add3:

<input type="button" onclick="javascript:add3(1);" value="額外加 1" />

直接調用

在上面的例子中, 已經展示了直接調用, 就和調用普通的 javascript 函數是一樣的:

<script>
$(function () {
add3(1);
});
</script>

通過 Async 屬性調用

對于 JQueryElement 的控件可以通過 Async 屬性來調用 AjaxManager 生成的函數:

<je:Button ID="cmdSub" runat="server" IsVariable="true" Label="減" Disabled="true"
ClickAsync-AjaxManagerID="manager" ClickAsync-ClientFunction="sub">
</je:Button>

通過 Async 的 AjaxManagerID 來指定需要調用的 javascript 函數所在的 AjaxManager, 通過 ClientFunction 來指定調用的 javascript 函數名稱.

隱式添加的參數

部分 JQueryElement 控件會為 AjaxManager 增加 Parameter 對象, 比如 Repeater 會增加 pageindex, pagesize 等:

<je:Repeater ID="repeater" runat="server"
FillAsync-AjaxManagerID="manager" FillAsync-ClientFunction="fill">
</je:Repeater>

<je:AjaxManager ID="manager" runat="server">
<AjaxList>
<je:AjaxSetting ClientFunction="fill" ClientParameter="othernum"
Url="handler.ashx"
... >
<ParameterList>
</ParameterList>
</je:AjaxSetting>
</AjaxList>
</je:AjaxManager>

雖然 AjaxManager 中的 fill 函數沒有添加任何的 Parameter, 但由于 Repeater 的 FillAsync 被指定調用 fill 函數, 因此 fill 函數被隱式的添加 pageindex, pagesize 等參數.

JQueryElement 是開源共享的代碼, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 頁面下載 dll 或者是源代碼.

實際過程演示:?http://www.tudou.com/programs/view/Bbk5GvsEGKs/, 建議全屏觀看.

轉載于:https://www.cnblogs.com/zoyobar/archive/2011/12/10/JE_26.html

總結

以上是生活随笔為你收集整理的使用 AjaxManager 生成调用服务器端方法的 javascript 函数的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。