一:AjaxEvent
Coolite Toolkit所提供的AjaxEvent可以应用在很多的控件中,实现异步提交等相关功能。比如使用在Coolite Toolkit的Button控件中,通过该控件提供的机制就可以方便的使用。
01 | <script runat= "server" language= "C#" > |
02 | protected void OnAjaxEvent_Click( object sender, AjaxEventArgs e) |
07 | <ext:Button ID= "Button1" runat= "server" Text= "Submit" > |
09 | <Click OnEvent= "OnAjaxEvent_Click" ></Click> |
如果需要使用在标准控件或是其他的html标签元素上,则需要通过Coolite Toolkit所提供的ScriptManager来实现了,下面简单演示将AjaxEvent使用在官方的Button控件上。
01 | <ext:ScriptManager ID= "ScriptManager1" runat= "server" > |
03 | <ext:AjaxEvent Target= "myButton" OnEvent= "OnAjaxEvent_Click" > |
04 | <EventMask ShowMask= "true" MinDelay= "500" Msg= "正在处理" /> |
08 | <script runat= "server" language= "C#" > |
09 | protected void OnAjaxEvent_Click( object sender, AjaxEventArgs e) |
14 | <Asp:Button ID= "myButton" runat= "server" Text= "点我" /> |
通过上面这种方式,可以把AjaxEvent添加到任何的html元素上(比如:input,div,p,span等等)。
二:AjaxMethod
Coolite Toolkit所提供的AjaxMethod功能和Asp.NET AJAX的PageMethod是一样的,使用非常简单,详细可参考下面的简单示例:
02 | public string PageMethod() |
04 | return "调用了页面后置方法:PageMethod()" ; |
07 | <ext:ScriptManager ID= "ScriptManager1" runat= "server" > |
10 | <ext:Button ID= "Button1" runat= "server" Text= "Submit" > |
12 | <Click Handler= "RequestMethod()" /> |
16 | <script type= "text/javascript" > |
17 | function RequestMethod() |
19 | Coolite.AjaxMethods.PageMethod({ |
20 | success: function(result) { |
21 | Ext.Msg.alert( '返回提示' , result); |
通过Coolite Toolkit提供的Coolie.AjaxMethods.方法名直接调用后置方法。相互之间传递数据(简单文本串,对象,JSON)支持多种格式,这点和Asp.NET AJAX是一样的。除此之外,Coolite Toolkit还提供了更强大的页面方法调用功能,就是他可以调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。如果要调用母版页的方法,则需要在对应的母版页里提供AjaxMethod方法接口,并为其通过AjaxMethodProxyIDAttribute配置代理生成策略,如所示:(调用母板页例子)
后台代码:(注意特别加上AjaxMethodProxyID,否则无效)
1 | [AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.None)] |
2 | public partial class MyMaster : System.Web.UI.MasterPage |
5 | public string PageMethod() |
7 | return "调用了母版页的后置方法:PageMethod()" ; |
前台页面调用:(前台的方法与之前用的方法一样,不同的是后台)
01 | <%@ Page Title= "" Language= "C#" MasterPageFile= "~/MyMaster.Master" AutoEventWireup= "true" |
02 | CodeBehind= "MasterDemo.aspx.cs" Inherits= "WebApplication1.MasterDemo" %> |
03 | <asp:Content ID= "Content1" ContentPlaceHolderID= "ContentPlaceHolder1" runat= "server" > |
05 | <ext:ScriptManager ID= "ScriptManager1" runat= "server" > |
08 | <ext:Button ID= "Button1" runat= "server" Text= "Submit" > |
10 | <Click Handler= "RequestMethod()" /> |
14 | <script type= "text/javascript" > |
15 | function RequestMethod() { |
16 | Coolite.AjaxMethods.PageMethod({ |
17 | success: function(result) { |
18 | Ext.Msg.alert( '返回提示' , result); |
如果是调用用户自定义控件里的方法,方式和母版页相差不大,不同的是UserControl需要设置别名才能成功调用。如下示例:
1 | [AjaxMethodProxyID(IDMode = AjaxMethodProxyIDMode.Alias, Alias = "<SPAN style=" BACKGROUND-COLOR: #ffffff; COLOR: #ff0000 ">UC</SPAN>" )] |
2 | public partial class TimeControl : System.Web.UI.UserControl |
5 | public string PageMethod() |
7 | return DateTime.Now.ToString(); |
客户端使用别名调用如下:(注意:在Hander中Coolite.AjaxMethods后面必须与前台的Alias的值相同)
02 | <uc1:TimeControl ID= "TimeControl1" runat= "server" /> |
03 | <ext:Button ID= "btnUserControl" runat= "server" Text= "调用UserControl的方法" > |
05 | <Click Handler="Coolite.AjaxMethods.UC.PageMethod( |
07 | success:function(result) |
09 | Ext.Msg.alert(result); |
三:Listeners
Listeners在本文前面就用到过,通过Listeners给Ext按扭添加了一个客户端方法Handler,用得多的也就是他的Click事件,其他的我现在也还没用到,这里小记一下。以后用到了他的其他特性后在补充上来。