使用 AjaxManager 生成调用服务器端方法的 JavaScript

原始帖子可以在这里找到：http://zoyobar.blogspot.com/2011/12/use-ajaxmanager-to-generate-javascript.html。

简介/目录

由于时间有限，无法保证多篇博文的同步。您可以在以下地址查看最新内容，敬请谅解

• http://zoyobar.blogspot.com/2011/12/use-ajaxmanager-to-generate-javascript.html

请在 下载 JQueryElement 的 JQueryElement 演示下载部分下载示例代码，目录是 /ajaxmanager/Default.aspx。

本文解释了如何使用 AjaxManager 生成调用服务器端方法的 JavaScript，以及如何调用这些方法。

• 准备
• 创建 JavaScript
• 设置 JavaScript 方法的参数列表
• 直接调用
• 通过 Async 属性调用
• 隐式参数

准备

请确保您已在 下载 JQueryElement 的 JQueryElement.dll 下载部分获取了最新版本的 JQueryElement 。

使用以下语句来引用 namespace

<%@ 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" %>  

除了 namespace 之外，您还需要引用 jQueryUI 脚本

<script type="text/javascript"
 src="[script path]/jquery-<version>.min.js"></script>  

创建 JavaScript

在此页面中，我们添加一个 AjaxManager 控件来创建一个调用服务器端方法的 JavaScript 方法

<je:AjaxManager ID="manager" runat="server">
 <AjaxList>
  <je:AjaxSetting
   ClientFunction="<javascript method name>"
   ClientParameter="<javascript parameter, ??: name, age>"
   Url="<server-side method url>" MethodName="<server-side method name>"
   Success="<javascript method invoked on success>"
   Error="<javascript method invoked when error>"
   Complete="<javascript method invoked when completed>"
   ...
   >
   <ParameterList>
    <parameter>
   </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。有关更多信息，请参阅 在不同 .NET 版本中返回 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="plus 1" />  

直接调用

上面的例子展示了一个直接调用，它与调用一个普通的 JavaScript 方法相同。

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

通过 Async 属性调用

JQueryElement 控件可以通过 Async 属性调用生成的方法

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

使用 AjaxManagerID 指定包含要调用的 JavaScript 方法的 AjaxManager ，并通过 ClientFunction 指定 JavaScript 方法名称。

隐式参数

部分 JQueryElement 控件会将参数添加到 AjaxManager，例如 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>  

方法 fill 不添加任何 Parameter，但属性 FillAsync 将调用方法 fill，因此 fill 方法会隐式添加 pageIndex 和 pagesize。

相关内容

• 在不同 .NET 版本中返回 JSON
• 通过 Parameter 对象添加 Ajax 请求参数

comment