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

1.客户端事件:

　　<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方法

　　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>

后台C#代码:

protected void btnOk_DirectClick(object sender, DirectEventArgs e)
{

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

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

5.DirectEvents调用WebServices

　<ext:ResourceManager runat="server">

后台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调用一般处理程序

<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