Coolite Toolkit 学习笔记一

    技术2025-12-07  2

    刚刚接触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#">

    protectedvoid 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#">protectedvoid 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)]publicpartialclass MyMaster : System.Web.UI.MasterPage{    [AjaxMethod]    publicstring 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")]publicpartialclass TimeControl : System.Web.UI.UserControl{    [AjaxMethod]    publicstring 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>

     

    本文来自博客,转载请标明出处:http://blog.csdn.net/yucuihaimeng/archive/2010/04/11/5473876.aspx

    最新回复(0)