使用 AjaxManager 生成调用服务器端方法的 javascript 函数

通过 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:AjaxSettingClientFunction="<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 函数相关推荐

java 调用服务器文档,JAVA远程调用服务器端方法
JAVA远程调用服务器端方法内容精选换一换 Windows Server 2012 R2操作系统弹性云服务器,本地使用远程桌面连接功能连接云服务器并启用redirected drive功能时,云服 ...
【Python】继承、父类、子类、方法重写、子类调用父类方法、super()函数、多继承
Python继承 2021/6/21 周一学习内容:父类.子类.方法重写.子类调用父类方法.super()函数.多继承 Python入门,主要是看菜鸟教程.w3school 网站,以及电子工业出版 ...
js 调用服务器端方法总结
javascript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为documen ...
JS调用服务器端方法
javascript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为documen ...
主页面调用iframe里面匿名Javascript函数的问题
2019独角兽企业重金招聘Python工程师标准>>> 这个问题出现已经几天了,今天终于解决了,特此记录下来. 问题的出现始于我在HTML5下采用Reveal.js来播放PPT和使用 ...
深入Atlas系列：综合示例（1） - 调用服务器端方法时直接获得客户端具体类型...
摘要: 在使用ASP.NET AJAX时,大家对于返回服务器端的复杂类型的情况经常会遇到问题.Dflying兄写了一篇文章来说明在如何在客户端得到Sys.Preview.Data.DataTable对 ...
asp.net调用js方法小结
asp.net调用js方法小结 key:asp.net js方法互调 asp.net 前台如何调用后台方法 1. javaScript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在 ...
js调用后台方法与后台调用js方法
JS调用后台方法大全 javascript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为docu ...
Flex与JavaScript的交互：调用JavaScipt或者被JavaScript调用
一.在JavaScript中调用Flex方法在Flex中可以用ExternalInterface来调用Flex的方法,途径是 1.通过在Flex应用可调用方法列表中添加指定的公用方法.在Flex应用 ...

使用 AjaxManager 生成调用服务器端方法的 javascript 函数

使用 AjaxManager 生成调用服务器端方法的 javascript 函数相关推荐

最新文章

热门文章