• 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控件进行事件的监听。

      

      

     

  • 相关阅读:
    线程安全的简单理解
    单链表 之 判断两链表是否交叉
    React组件间的通信
    input type=file美化
    Array.prototype.slice.call(arguments)
    ES5 数组方法every和some
    nodejs学习之表单提交(1)
    ES5 数组方法reduce
    ES5 数组方法map
    ES5 数组方法forEach
  • 原文地址:https://www.cnblogs.com/nightcat/p/2707510.html
Copyright © 2020-2023  润新知