Ext.NET 基础学习笔记01 (事件)

1.客户端事件:

<Listeners>

　　<Click Handler="Ext.MessageBox.alert('提示','hello world');"></Click>　　　　//使用Handler属性指向一段JS代码

　　<Click Fn="fnSave"></Click>　　　　//使用Fn属性指向一个JS方法

</Listeners>

--简写:<ext:Button runat="server" ID="btn2" Text="发布消息" Handler="fnButtonHandler"></ext:Button>　　//按钮点击时触发fnButtonHandler的JS方法

<Script>

　　var fnSave = function(){....};

</Script>

2.服务端事件处理:

2.1 Ext.Net服务器事件需要在DirectEvents中定义，它是Ext.Net独有的。

DirectEvents将被回发到服务器进行处理，并将处理结果展示在页面中（如果有更新页面的话）。

 <DirectEvents>
          <Click OnEvent="btnSave_DirectClick">
                   <EventMask ShowMask="true" Msg="正在载入..."></EventMask>　　　　//遮盖层可有可无
          </Click>
</DirectEvents>

--简写<ext:Button runat="server" ID="btnPublish" Text="消息发布者" OnDirectClick="btnSave_DirectClick"></ext:Button>

后台C#代码:

        protected void btnSave_DirectClick(object sender, DirectEventArgs e)
        {
            X.MessageBox.Alert("Show", "DirectEvent has been for be trigger").Show();
        }

2.2 DirectEvents事件参数传递　　

     <DirectEvents>
                <Click OnEvent="btnSave_DirectClick">
                        <ExtraParams>
                            <ext:Parameter Name="param1" Value="自定义参数"></ext:Parameter>  　　//传递参数到后台的btnSave_DirectClick方法
                        </ExtraParams>
               </Click>
      </DirectEvents>

 ----后台btnSave_DirectClick方法接收参数

     string para = e.ExtraParams["param1"];

     X.MessageBox.Alert("Show", para).Show();

3.处理服务器返回的数据

 3.1 从服务器端返回数据后调用客户端的JS代码

   <ext:Window runat="server" ID="winMain" Title="Ext.net.DirectEvents" Width="300" Height="200">
            <Buttons>
                <ext:Button runat="server" ID="btnSave" Text="Save">
                    <DirectEvents>
                        <Click OnEvent="btnOk_DirectClick" Success="fnSuccess">　　　　//点击按钮触发后台btnOk_DirectClick方法,调用成功后执行客户端的fnSuccess JS函数
                            <EventMask Msg="正在处理..." ShowMask="true"></EventMask>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Buttons>
     </ext:Window>

     var fnSuccess = function (response, result) {
            alert(result.extraParamsResponse.data);
      };

 

   C#代码:   

  protected void btnOk_DirectClick(object sender, DirectEventArgs e)
   {
            Thread.Sleep(2000);

            //X.MessageBox.Alert("提示", "按钮被点击").Show();

             e.ExtraParamsResponse.Add(new Ext.Net.Parameter("data", "abc"));　　　　//添加Ext响应参数,用于给前台获取

  }

3.2 confirmation配置

 <Click OnEvent="btnOk_DirectClick" Success="fnSuccess">
            <EventMask Msg="正在处理..." ShowMask="true"></EventMask>
             <Confirmation ConfirmRequest="true" Title="提示" Message="确定要提交到服务器?"></Confirmation>　　//触发btnOk_DirectClick事件之前弹出确认框,让用户选择是否确定要提交到服务器处理
 </Click>

4.通过DirectEvents来实现无刷新的页面请求

   4.1 采用ASP.NET控件时:

       <asp:Label ID="Label1" runat="server">名称:</asp:Label>
        <asp:TextBox runat="server" ID="txtName"></asp:TextBox>
        <asp:Button runat="server" ID="btnOK" Text="确定" />

        <ext:ResourceManager ID="ResourceManager1" runat="server">
            <CustomDirectEvents>
                <ext:DirectEvent Target="btnOk" OnEvent="btnOk_DirectClick"></ext:DirectEvent>　　　　//绑定btnOk按钮点击时触发后台btnOk_DirectClick方法

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
            </CustomDirectEvents>
        </ext:ResourceManager>

   

       C#后台代码:

        protected void btnOk_DirectClick(object sender, DirectEventArgs e)
        {

　　     //this.txtName.Text = "Jack";
            //this.txtName.Update();　　　　　　　　　　　　　　　　　　//当需要设置ASP.NET控件的值时需要调用Update()方法去更新控件的值.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(Update()方法是Ext.Net中的静态方法)

 

            string name = this.txtName.Text;

            X.MessageBox.Alert("提示", "按钮被点击,文本框的值是:" + name).Show();
        }

   

   4.2 采用HTML控件时:

        <ext:ResourceManager ID="ResourceManager1" runat="server">
      　　  <CustomDirectEvents>
       　　     <ext:DirectEvent Target="htmlBtn" OnEvent="btnOk_DirectClick"></ext:DirectEvent>
     　　   </CustomDirectEvents>
        </ext:ResourceManager>

 

         <label>名字:</label>
        <input type="text" name="txtName" />
        <input type="button" value="HTML按钮" id="htmlBtn" />

 

        后台C#代码:

        protected void btnOk_DirectClick(object sender, DirectEventArgs e)
        {

            string name = Request.Form["txtName"];

            X.MessageBox.Alert("提示", "按钮被点击,文本框的值是:" + name).Show();
        }

5.DirectEvents调用WebServices

  

   <input type="button" value="获取" id="htmlBtn" />

　<ext:ResourceManager runat="server">

        <CustomDirectEvents>
            <ext:DirectEvent Target="htmlBtn" Url="WebServices/ExtNetService.asmx/GetServerTimeWindow"
                Method="POST" Type="Load">
            </ext:DirectEvent>
        </CustomDirectEvents>
    </ext:ResourceManager>

    后台C#(Webservices代码)

        [WebMethod]
        public DirectResponse GetServerTimeWindow()
        {
            new Window("Server Time", Icon.Time)　　　　　　　　　 //创建一个Ext.Net控件
            {
                ID = "MyWindow",
                Html = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss")
            }.Render();　　　　　　　　　　　　　　　　　　　　　　// Render()方法让Ext.Net控件显示出来

            return new DirectResponse();
        }

 

6.DirectEvents调用一般处理程序

 

       <input type="button" value="获取" id="htmlBtn" />

       <ext:ResourceManager runat="server">
          <CustomDirectEvents>
              <ext:DirectEvent Target="htmlBtn" Url="HandlerServerTimeHandler.ashx" Method="POST" Type="Load"></ext:DirectEvent>
          </CustomDirectEvents>
       </ext:ResourceManager>

 

        后台一般处理程序(ashx)代码:

        public void ProcessRequest(HttpContext context)
        {
            new Window("Server time", Icon.Time)
            {
                ID = "MyWindow",
                Html = DateTime.Now.ToString()
            }.Render();

            new DirectResponse().Return();
        }

    

 

本文参考:https://www.cnblogs.com/youring2/p/3551463.html