Coolite Toolkit学习笔记一:AjaxEvent、AjaxMethod和Listeners (转载)

一:AjaxEvent
      Coolite Toolkit所提供的AjaxEvent可以应用在很多的控件中,实现异步提交等相关功能。比如使用在Coolite Toolkit的Button控件中,通过该控件提供的机制就可以方便的使用。
 1 <script runat="server" language="C#">
 2     protected void OnAjaxEvent_Click(object  sender, AjaxEventArgs e)
 3      {
 4           
 5      }
 6 </script>
 7 <ext:Button ID="Button1" runat="server" Text="Submit">
 8     <AjaxEvents>
 9         <Click OnEvent="OnAjaxEvent_Click"></Click>
10     </AjaxEvents>
11 </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(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();
    }
}

 客户端使用别名调用如下:

<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事件,其他的我现在也还没用到,这里小记一下。以后用到了他的其他特性后在补充上来。

注:本文内容参考于官方文档和示例整理而成,只当是自己记录的一份学习笔记,供大家一起交流学习心得。
Coolite Toolkit官方网站:http://www.coolite.com/

转载于:https://www.cnblogs.com/dthom/articles/1566238.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值