Coolite入门学习---Ajax方法的使用（二）
在使用Coolite控件时，页面必须要声明一个ScriptManager控件，ScriptManager对Ext控件提供了统一的管理。
先上一张猥琐的界面截图~~
例子如下：
前台
1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" 2 ViewStateEncryptionMode="Never" EnableViewStateMac="false" %> 3 4 <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %> 5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 6 <html xmlns="http://www.w3.org/1999/xhtml"> 7 <head runat="server"> 8 <link href="CSS/DefaulStyleSheet.css" rel="stylesheet" type="text/css" /> 9 <title>CooliteDemo</title> 10 <script type="text/javascript" language="javascript"> 11 function ShowSometing() { 12 Ext.Msg.alert("", "执行了前台的JS方法"); 13 } 14 </script> 15 </head> 16 <body> 17 <form id="form1" runat="server"> 18 <ext:ScriptManager ID="MainScriptManager" runat="server"> 19 <CustomAjaxEvents> 20 <ext:AjaxEvent Target="Button2" OnEvent="Button2_Click"> 21 <EventMask ShowMask="true" MinDelay="500" Msg="正在更新，请稍等.." /> 22 </ext:AjaxEvent> 23 </CustomAjaxEvents> 24 </ext:ScriptManager> 25 <ext:Panel ID="FramePanel" runat="server" Title="Title"> 26 <Body> 27 <ext:FormLayout ID="FormLayout1" runat="server" Cls="Common_Padding"> 28 <ext:Anchor> 29 <ext:TextField ID="TextField1" runat="server" FieldLabel="文本域1"> 30 </ext:TextField> 31 </ext:Anchor> 32 <ext:Anchor> 33 <ext:TextField ID="TextField2" runat="server" FieldLabel="文本域2"> 34 </ext:TextField> 35 </ext:Anchor> 36 <ext:Anchor> 37 <ext:Button runat="server" ID="Front" Text="前台"> 38 <Listeners> 39 <Click Handler="ShowSometing();" /> 40 </Listeners> 41 </ext:Button> 42 </ext:Anchor> 43 <ext:Anchor> 44 <ext:Button runat="server" ID="Button1" Text="后台"> 45 <AjaxEvents> 46 <Click OnEvent="Button_Click"> 47 </Click> 48 </AjaxEvents> 49 </ext:Button> 50 </ext:Anchor> 51 <ext:Anchor> 52 <ext:Panel runat="server"> 53 <Body> 54 <input type="button" runat="server" id="Button2" value="这货带遮罩效果" /> 55 </Body> 56 </ext:Panel> 57 </ext:Anchor> 58 </ext:FormLayout> 59 </Body> 60 </ext:Panel> 61 </form> 62 </body> 63 </html>1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Web.UI; 6 using System.Web.UI.WebControls; 7 using Common.Security; 8 using System.Net; 9 using Coolite.Ext.Web; 10 11 public partial class _Default : System.Web.UI.Page 12 { 13 protected void Page_Load(object sender, EventArgs e) 14 { 15 if (!IsPostBack) 16 { 17 18 } 19 } 20 21 [AjaxMethod] 22 protected void Button_Click(object sender,EventArgs e) 23 { 24 Ext.Msg.Alert("", "执行了后台的AjaxMethod").Show(); 25 } 26 27 protected void Button2_Click(object sender, EventArgs e) 28 { 29 Ext.Msg.Alert("", "罩住了~").Show(); 30 } 31 }
coolite中主要的事件绑定方法包含在上述例子中，来逐个看看：
<ext:Button runat="server" ID="Front" Text="前台"> <Listeners> <Click Handler="ShowSometing();" /> </Listeners> </ext:Button>Coolite中使用Listeners标签用来控制监听对象，可以再Listener中指定相应时间的标签，如上方代码中点击Click后执行ShowSometing前台js方法。
<ext:Button runat="server" ID="Button1" Text="后台"> <AjaxEvents> <Click OnEvent="Button_Click"> </Click> </AjaxEvents> </ext:Button>在Button中同意可以调用Ajax方法，具体写法如上方代码所示，后台的Button_Click方法需要用[AjaxMethod]属性修饰。
<ext:ScriptManager ID="MainScriptManager" runat="server"> <CustomAjaxEvents> <ext:AjaxEvent Target="Button2" OnEvent="Button2_Click"> <EventMask ShowMask="true" MinDelay="500" Msg="正在更新，请稍等.." /> </ext:AjaxEvent> </CustomAjaxEvents> </ext:ScriptManager> <ext:Panel runat="server"> <Body> <input type="button" runat="server" id="Button2" value="这货带遮罩效果" /> </Body> </ext:Panel>上述的两种方法都是对Coolite控件的事件绑定，同样我么有也可以用ScriptManager直接对普通的HTML控件进行事件的监听。
