Coolite : Events 事件AjaxEvents、AjaxMethods、Listeners使用
Coolite Toolkit所提供的很多控件中提供了AjaxEvent，用来实现异步提交等相关功能。
Test.aspx页面中：
<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>
Test.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
if (!IsPostBack)
{
SetTime();
}
}
}
{
SetTime();
}
{
this.Label1.Text = DateTime.Now.ToLongTimeString();
}
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>
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提供从客户端JavaScript代码能够调用服务器端的.NET方法。[AjaxMethod]属性修饰服务器端公众或公众的静态方法服务器方法供客户端JavaScript使用。同时提供了调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。相互传递数据支持多种数据类型（简单文本串,对象,JSON）。
< ext: ScriptManager 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配置代理生成策略，如所示：
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的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