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

 

注：本文转载至Bēniaǒ成长笔记