Coolite Toolkit学习笔记:Events

Coolite Toolkit: Events 事件学习AjaxEvents、AjaxMethods、Listeners使用!

AjaxEvents:
Coolite Toolkit所提供的很多控件中提供了AjaxEvent,用来实现异步提交等相关功能。

在CooliteToolkit 的Button控件中使用:
Test.aspx页面中:
<form id="form1" runat="server">
     <ext:ScriptManager ID="ScriptManager1" runat="server"></ext:ScriptManager>
      <div class="msg x-box-mc">
        服务器时间:
          <em><ext:Label ID="Label1" runat="server" /></em>
     </div>
    <ext:Button ID="btnAjaxEvents" runat="server" Text="ext:AjaxEvents" Icon="ApplicationOsxLink">
        <AjaxEvents>
            <Click OnEvent="UpdateTimeStamp">
                <EventMask ShowMask="true" Msg="更新下载中..." MinDelay="500" />
            </Click>
        </AjaxEvents>
    </ext:Button>
Test.cs
protected void Page_Load(object sender, EventArgs e)
        {
            if (!Ext.IsAjaxRequest)
            {
                if (!IsPostBack)
                {
                    SetTime();
                }              
            }
        }
        protected void UpdateTimeStamp(object sender, AjaxEventArgs e)
        {
            SetTime();
        }
        void SetTime()
        {
            this.Label1.Text = DateTime.Now.ToLongTimeString();
        }
在<asp:Button>、html <input> 、<span> 、<div> 上使用:
Test.aspx页面中修改:
<ext:ScriptManager ID="ScriptManager1" runat="server">
      <CustomAjaxEvents>
        <ext:AjaxEvent Target="Button1" OnEvent="UpdateTimeStamp">
          <EventMask ShowMask="true" Msg="更新下载中..." MinDelay="500" />
        </ext:AjaxEvent>
        <ext:AjaxEvent Target="Button2" OnEvent="UpdateTimeStamp">
             <EventMask ShowMask="true" MinDelay="500" Msg="更新下载中..."/>
         </ext:AjaxEvent>
        <ext:AjaxEvent Target="Span1" OnEvent="UpdateTimeStamp">
             <EventMask ShowMask="true" MinDelay="500" Msg="更新下载中..."/>
         </ext:AjaxEvent>
      </CustomAjaxEvents>
</ext:ScriptManager>
<asp:Button ID="Button1" runat="server" Text="aps:AjaxEvents" />
<input id="Button2" type="button" value="Click Me" />
<span id="Span1" style="cursor: pointer;">*Click Me*</span>



AjaxEvent连接到[WebMethod] Web服务使用:
Test.aspx页面中添加:
<ext:Panel
            runat="server"
            Title="Say Hello"
            Width="300"
            Height="185"
            Frame="true"
            ButtonAlign="Center">
            <Body>
                <ext:FormLayout runat="server">
                    <Anchors>
                        <ext:Anchor Horizontal="100%">
                            <ext:TextField ID="txtName" runat="server" FieldLabel="Name" EmptyText="Your name here..." />
                        </ext:Anchor>
                    </Anchors>
                </ext:FormLayout>
            </Body>
            <Buttons>
                <ext:Button runat="server" Text="调用Web服务">
                   <AjaxEvents>
                        <Click
                            Url="TestService.asmx/SayHello1"
                            Type="Load"
                            Method="POST"
                            CleanRequest="true">

                            <ExtraParams>
                                <ext:Parameter Name="name" Value="#{txtName}.getValue()" Mode="Raw" />
                            </ExtraParams>

                        </Click>
                    </AjaxEvents>
                </ext:Button>
</Buttons>
</ext:Panel>

TestService.asmx 中:
using System.Web.Services;
using Coolite.Ext.Web;

[WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(
false)]
   
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    // [System.Web.Script.Services.ScriptService]
    public class TestService : System.Web.Services.WebService
    {
        [WebMethod]
       
public AjaxResponse SayHello1(string name)
        {
            AjaxResponse response =
new AjaxResponse();
           
           
// Return a script to be executed on the client
            response.Script = string.Concat("alert('Hello, ", name, "');");

           
return response;
        }
   }
}


AjaxMethod
一个AjaxMethod提供从客户端JavaScript代码能够调用服务器端的.NET方法。[AjaxMethod]属性修饰服务器端公众或公众的静态方法服务器方法供客户端JavaScript使用。同时提供了调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。相互传递数据支持多种数据类型(简单文本串,对象,JSON)。
调用静态方法AjaxMethod并返回一个字符串(超快速+最佳性能)
<ext:ScriptManager runat="server" />
<script runat="server">
    [AjaxMethod]
    public static string GetTimeStamp4()
    {
        return DateTime.Now.ToLongTimeString();
    }
</script>

<ext:Button runat="server" Text="Click Me" Icon="Lightning">
    <Listeners>
        <Click Handler="
            Coolite.AjaxMethods.GetTimeStamp4({
                success: function(result) {
                    Ext.Msg.alert('Server Time', result);
                }
            });" />
    </Listeners>

</ext:Button>
在自定义用户控件中的使用:
using Coolite.Ext.Web;
namespace LearnCoolit.Web
{
    [AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.Alias, Alias = "UC")]
    public partial class UserControlTest : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
        }
        [AjaxMethod]
        public string PageMethod()
        {
            return DateTime.Now.ToString();
        }
    }
}
Page:
       <ext:ScriptManager ID="ScriptManager1" runat="server" AjaxMethodNamespace="CompanyX" />
        <uc1:UserControlTest ID="UserControlTest1" runat="server" />
        <ext:Button ID="btnUserControl" runat="server" Text="调用UserControl的方法">
            <Listeners>
                <Click Handler="CompanyX.UC.PageMethod(
            {
                success:function(result)
                {
                    Ext.Msg.alert(result);
                }
            });" />
            </Listeners>
        </ext:Button>


要调用母版页的方法,则需要在对应的母版页里提供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>
Listeners


Listeners的Click事件 <ext:MenuPanel runat="server" Title="Menu panel with selection saving" Icon="ArrowSwitch">
    <Menu runat="server">
     <Items>
   <ext:MenuItem runat="server" Text="Point 1" Icon="ArrowRight" />
   <ext:MenuItem runat="server" Text="Point 2" Icon="ArrowRight" />
     </Items>
     <Listeners>
   <ItemClick Fn="MenuItemClick" />
     </Listeners>                                           
    </Menu>                                       
</ext:MenuPanel>

 

<ext:Panel ID="CenterPanel" runat="server" Title="Center" BodyStyle="padding:20px;" />

 

1:通过Listeners给Ext按扭(或Ext Control)添加了一个客户端方法Handler
            <ext:Button ID="Button1" runat="server" Text="Click Me #1" >
                <Listeners>
                    <Click Handler="Ext.Msg.alert('Confirm', 'You Clicked Button1');" />
                </Listeners>
            </ext:Button>
or
   <script type="text/javascript" >
    function test() {
        Ext.Msg.alert('Confirm', 'You Clicked Button1');
    }
</script>
                    <Click Handler="test" />
or
                    <Click Fn="test" />

2:通过代码隐藏给Ext按扭添加了一个客户端方法

 

 

 

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        // Define a generic JavaScript function to use later
        string fn = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";

        // 2. Click Listener from Code-Behind
        this.Button2.Listeners.Click.Handler = fn;
    }
</script>
<ext:Button ID="Button2" runat="server" Text="Click Me #2" />

or以下方式添加:
       // 3. Click Listener using .On() method
        this.Button2.On("click", "function(el){" + fn + "}");


        // 4. Click Listener using .AddListener() method
        this.Button2.AddListener("click", "function(el){" + fn + "}");


        // 5. Click Listener which only fires once (set from code-behind)
        this.Button2.Listeners.Click.Handler = fn;
        this.Button2.Listeners.Click.Single = true;

3:添加一组客户端Click事件
    <script type="text/javascript">
        function MenuItemClick(menuItem) {
            CenterPanel.body.update(String.format("Clicked: {0}", menuItem.text)).highlight();           
        }
    </script>

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

原文地址:http://hi.baidu.com/czh0221/blog/item/d712918bfab6c0d9fc1f10ff.html

posted @ 2009-11-01 00:58  Andy  阅读(760)  评论(0编辑  收藏  举报