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:TextBox runat="server" ID="txtName"></asp:TextBox>
<asp:Button runat="server" ID="btnOK" Text="确定" />
<CustomDirectEvents>
<ext:DirectEvent Target="btnOk" OnEvent="btnOk_DirectClick"></ext:DirectEvent> //绑定btnOk按钮点击时触发后台btnOk_DirectClick方法
</CustomDirectEvents>
</ext:ResourceManager>
{
//this.txtName.Update(); //当需要设置ASP.NET控件的值时需要调用Update()方法去更新控件的值.
}
<CustomDirectEvents>
<ext:DirectEvent Target="htmlBtn" OnEvent="btnOk_DirectClick"></ext:DirectEvent>
</CustomDirectEvents>
</ext:ResourceManager>
<input type="text" name="txtName" />
<input type="button" value="HTML按钮" 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代码)
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控件显示出来
}
<CustomDirectEvents>
<ext:DirectEvent Target="htmlBtn" Url="Handler\ServerTimeHandler.ashx" Method="POST" Type="Load"></ext:DirectEvent>
</CustomDirectEvents>
</ext:ResourceManager>
{
new Window("Server time", Icon.Time)
{
ID = "MyWindow",
Html = DateTime.Now.ToString()
}.Render();
}
本文参考:https://www.cnblogs.com/youring2/p/3551463.html