AjaxEvent、AjaxMethod和Listeners的区别

最新推荐文章于 2025-09-12 22:15:02 发布

weixin_34279184

最新推荐文章于 2025-09-12 22:15:02 发布

阅读量64

点赞数

CC 4.0 BY-SA版权

文章标签： c# ui json

原文链接：http://www.cnblogs.com/mystar/archive/2010/07/30/1788482.html

本文详细介绍CooliteToolkit中的AjaxEvent、AjaxMethod及Listeners的功能与使用方法。包括如何在各种控件和HTML元素上实现异步提交，如何调用页面、母版页及用户自定义控件中的方法。

一：AjaxEvent

　　Coolite Toolkit所提供的AjaxEvent可以应用在很多的控件中，实现异步提交等相关功能。比如使用在Coolite Toolkit的Button控件中，通过该控件提供的机制就可以方便的使用。

<script　runat="server"　language="C#">
　　protected　void　OnAjaxEvent_Click(object　sender,　AjaxEventArgs　e)
　　{
　　　　　　　　　
　　}
</script>
<ext:Button　ID="Button1"　runat="server"　Text="Submit">
     <AjaxEvents>
　　　<Click　OnEvent="OnAjaxEvent_Click"></Click>
　 </AjaxEvents>
</ext:Button>

如果需要使用在标准控件或是其他的html标签元素上，则需要通过Coolite Toolkit所提供的ScriptManager来实现了，下面简单演示将AjaxEvent使用在官方的Button控件上。

<ext:ScriptManager　ID="ScriptManager1"　runat="server">
　　　　<CustomAjaxEvents>
　　　　　　　　<ext:AjaxEvent　Target="myButton"　OnEvent="OnAjaxEvent_Click">
　　　　　　　　　　<EventMask　ShowMask="true"　MinDelay="500"　Msg="正在处理"　/>
　　　　　　　　</ext:AjaxEvent>
　　　　</CustomAjaxEvents>
</ext:ScriptManager>
<script　runat="server"　language="C#">
　　　　protected　void　OnAjaxEvent_Click(object　sender,　AjaxEventArgs　e)
　　　　{
　　　　　　　　　
　　　　}
</script>
<asp:Button　ID="myButton"　runat="server"　Text="点我"　/>

通过上面这种方式，可以把AjaxEvent添加到任何的html元素上（比如：input,div,p,span等等）。

二：AjaxMethod　

Coolite Toolkit所提供的AjaxMethod功能和ASP.NET AJAX的PageMethod是一样的，使用非常简单，详细可参考下面的简单示例：

[AjaxMethod]
public　string　PageMethod()
{
　　　　return　"调用了页面后置方法：PageMethod()";
} 

<ext:ScriptManager　ID="ScriptManager1"　runat="server">
</ext:ScriptManager>

<ext:Button　ID="Button1"　runat="server"　Text="Submit">
　　　　<Listeners>
　　　　　 <Click　Handler="RequestMethod()"　/>
　　　　</Listeners>
</ext:Button>

<script　type="text/javascript">
　　　　function　RequestMethod()　
　　　　{
　　　　　　　　Coolite.AjaxMethods.PageMethod({
　　　　　　　　　　　　success:　function(result)　{
　　　　　　　　　　　　　　　　Ext.Msg.alert('返回提示',　result);
　　　　　　　　　　　　}
　　　　　　　　});
　　　　}
</script>

通过Coolite Toolkit提供的Coolie.AjaxMethods.方法名直接调用后置方法。相互之间传递数据（简单文本串,对象,JSON）支持多种格式，这点和ASP.NET AJAX是一样的。除此之外，Coolite Toolkit还提供了更强大的页面方法调用功能，就是他可以调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。如果要调用母版页的方法，则需要在对应的母版页里提供AjaxMethod方法接口，并为其通过AjaxMethodProxyIDAttribute配置代理生成策略，如所示：(调用母板页例子）

后台代码：（注意特别加上AjaxMethodProxyID，否则无效)

[AjaxMethodProxyID(IDMode　=　AjaxMethodProxyIDMode.None)]
public　partial　class　MyMaster　:　System.Web.UI.MasterPage
{
　　　　[AjaxMethod]
　　　　public　string　PageMethod()
　　　　{
　　　　　　　　return　"调用了母版页的后置方法：PageMethod()";
　　　　}　
}

前台页面调用：（前台的方法与之前用的方法一样，不同的是后台）

<%@　Page　Title=""　Language="C#"　MasterPageFile="~/MyMaster.Master"　AutoEventWireup="true"　
　　　　CodeBehind="MasterDemo.aspx.cs"　Inherits="WebApplication1.MasterDemo"　%>
<asp:Content　ID="Content1"　ContentPlaceHolderID="ContentPlaceHolder1"　runat="server">

　　　　<ext:ScriptManager　ID="ScriptManager1"　runat="server">
　　　　</ext:ScriptManager>

　　　　<ext:Button　ID="Button1"　runat="server"　Text="Submit">
　　　　　　　　<Listeners>
　　　　　　　　　　　　<Click　Handler="RequestMethod()"　/>
　　　　　　　　</Listeners>
　　　　</ext:Button>

　　　　<script　type="text/javascript">
　　　　　　　　function　RequestMethod()　{
　　　　　　　　　　　　Coolite.AjaxMethods.PageMethod({
　　　　　　　　　　　　　　　　success:　function(result)　{
　　　　　　　　　　　　　　　　　　　　Ext.Msg.alert('返回提示',　result);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　});
　　　　　　　　}
　　　　</script>
</asp:Content>

如果是调用用户自定义控件里的方法，方式和母版页相差不大，不同的是UserControl需要设置别名才能成功调用。如下示例：

[AjaxMethodProxyID(IDMode　=　AjaxMethodProxyIDMode.Alias,　Alias　=　"UC")]
public　partial　class　TimeControl　:　System.Web.UI.UserControl
{
　　　　[AjaxMethod]
　　　　public　string　PageMethod()
　　　　{
　　　　　　　　return　DateTime.Now.ToString();
　　　　}
}

客户端使用别名调用如下：(注意：在Hander中Coolite.AjaxMethods后面必须与前台的Alias的值相同）

//注册用户控件
<uc1:TimeControl　ID="TimeControl1"　runat="server"　/>
<ext:Button　ID="btnUserControl"　runat="server"　Text="调用UserControl的方法">
　　　　<Listeners>
　　　　　　　　　　　　<Click　Handler="Coolite.AjaxMethods.UC.PageMethod(
　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　success:function(result)
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　Ext.Msg.alert(result);
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　});"　/>
　　　　　　　　</Listeners>
</ext:Button>

三：Listeners

Listeners在本文前面就用到过，通过Listeners给Ext按扭添加了一个客户端方法Handler，用得多的也就是他的Click事件，其他的我现在也还没用到，这里小记一下。以后用到了他的其他特性后在补充上来。

转载于:https://www.cnblogs.com/mystar/archive/2010/07/30/1788482.html