Coolite入门学习---Ajax方法的使用(二)

在使用Coolite控件时,页面必须要声明一个ScriptManager控件,ScriptManager对Ext控件提供了统一的管理。

先上一张猥琐的界面截图~~

 

Coolite入门学习---Ajax方法的使用(二)

例子如下:

Coolite入门学习---Ajax方法的使用(二) 前台
 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>
Coolite入门学习---Ajax方法的使用(二) 后台
 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控件进行事件的监听。

  

  

 

 

你可能感兴趣的:(Ajax)