Coolite Toolkit 学习笔记一

      刚刚接触Coolite Toolkit，在这里留下自己学习的理解，也希望对以后新接触的朋友有点帮助，可以少走点弯路。不过我也要声明一点，因为我也是初学，可能会有一些理解不当的地方，所以看到了的朋友，提醒下我，大家共同学习，共同进步~~~

 

      Coolite Toolkit的官方网站：http://coolite.com/(这里的资料全英文的)

    不过还好啦，还有个中文社区：http://www.coolite.net.cn

  

一. Coolite Toolkit的简介

      Coolite Toolkit实际上就是一套控件，它提供了很多专业的Asp.net输入/验证/显示控件，和页面布局的框架，同时完全支持ajax，因为它是所有的组件是居于ExtJS上封装出来，让开发人员在可视化的设计器内进行方面的属性配置。不同于一般的第三方空间如devexpress,

netAdvantage，虽然提供非常多功能，但运行起来特别占用资源，时间一长服务器/客户端都会非常忙，Coolite采用的是纯javascript开发的，所有控件脚本图片资源加起来6M，所以性能非常好。

 

二.在自己的项目中应用Coolite Toolkit

     要使用Coolite Toolkit需要把它引入到自己的项目中。从官方网http://www.coolite.com/download/上可以下载到最新的Coolite安装包。上面有两个版本（Community edition 和Professional edition），不过好像都是一样的，随便用一个就可以了，不过我当时下载下来的时候只是有dll文件，没有.msi文件。

      接下来就是安装了，具体的安装过程，可以在官方网站http://examples.coolite.com/上左边的树形目录第一个节点“Getting Started”下面的OverView中写的很详细，另外在下载下来的压缩文件里有个ReadMe.txt文件，里面有一样的步骤。

 

三.开始正式学习Coolite Toolkit

     1.Events

      (1)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等等）。

(2)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>

(3)Listeners

      (未完)