Coolite教程之一:AjaxEvent、AjaxMethod和Listeners

*Listener 是客户端事件，AjaxEvents 是服务器端事件

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