Ext.Net通过DirectEvents进行服务器端异步的事件处理。我们在 Ext.Net用法概览 这篇中已经简单的介绍了DirectEvents,今天我们将详细的介绍一下DirectEvents。
DirectEvents异步执行服务器端事件
我们首先来看一下Ext.Net DirectEvents的一个最简单用法,通过点击按钮触发服务器端的事件处理方法,并在前台弹出一个提示框。
<ext:Window runat="server" ID="win1"
Title="Ext.Net DirectEvents"
Width="300" Height="200">
<Buttons>
<ext:Button runat="server" ID="btnOK"
Text="确定" Icon="Accept"
OnDirectClick="btnOK_DirectClick">
</ext:Button>
</Buttons>
</ext:Window>
这里添加了OnDirectEvents事件,它的一个简写方式,完整的写法如下:
<ext:Button runat="server" ID="btnOK"
Text="确定" Icon="Accept">
<DirectEvents
> <Click OnEvent="btnOK_DirectClick"></Click> </DirectEvents
>
</ext:Button>
事件处理方法如下:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
X.MessageBox.Alert("提示", "按钮被点击").Show();
}
编译代码并刷新页面,点击按钮,我们会看到如下效果:
显示Mask遮罩层
上面的代码已经演示了如何使用DirectEvents执行服务器端的事件,DirectEvents是通过异步方式执行服务器端代码的,那么,我们通常会希望在执行的时候客户端显示一个遮罩层,阻止用户进行其他操作,这点Ext.Net已经为我们想到了。
<ext:Button runat="server" ID="btnOK"
Text="确定" Icon="Accept">
<DirectEvents>
<Click OnEvent="btnOK_DirectClick">
<
EventMask ShowMask="true" Msg="正在处理..."></EventMask
>
</Click>
</DirectEvents>
</ext:Button>
然后我们在服务器端事件处理方法中让程序休息一下:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
System.Threading.Thread.Sleep(3000); X.MessageBox.Alert("提示", "按钮被点击").Show();
}
这样当我们再点击按钮的时候,会看到如下效果:
为事件添加自定义参数
Ext.Net DirectEvents 还允许我们为事件添加自定义参数。
<ext:Button runat="server" ID="btnOK"
Text="确定" Icon="Accept">
<DirectEvents>
<Click OnEvent="btnOK_DirectClick">
<EventMask ShowMask="true" Msg="正在处理..."></EventMask>
<ExtraParams
> <ext:Parameter Name="name" Value="btnOK"></ext:Parameter> </ExtraParams
>
</Click>
</DirectEvents>
</ext:Button>
在这里,我们将传给处理方法一个名称为name的参数,看一下服务器端的处理:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
System.Threading.Thread.Sleep(3000);
string btnName = e.ExtraParams["name"
];
X.MessageBox.Alert("提示", btnName + "被点击").Show();
}
在服务器端,我们通过e.ExtraParams来访问这些参数。
处理服务器返回的数据
Ext.Net DirectEvents 可以通过添加一个客户端回调方法来处理服务器返回的数据。
<ext:Button runat="server" ID="btnOK"
Text="确定" Icon="Accept">
<DirectEvents>
<Click OnEvent="btnOK_DirectClick" Success="fnSuccess">
<EventMask ShowMask="true" Msg="正在处理..."></EventMask>
<ExtraParams>
<ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
在配置中添加一个success配置,表示在执行成功以后调用fnSuccess方法,fnSuccess方法的定义如下:
function fnSuccess(response, result) {
alert(result.extraParamsResponse.data);
}
接下来看看服务器端如何返回数据的:
protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e)
{
//System.Threading.Thread.Sleep(3000); //string btnName = e.ExtraParams["name"];
//X.MessageBox.Alert("提示", btnName + "被点击").Show(); e.ExtraParamsResponse.Add(new Ext.Net.Parameter("data", "abc"));
}
通过这样的处理,我们就可以从服务器返回数据,并在客户端通过js代码进行处理了。
confirmation配置
confirmation配置是用来在触发事件之前进行提示,有用户决定是否提交服务器进行处理的。
它的用法很简单,却很实用。
<ext:Button runat="server" ID="btnOK"
Text="确定" Icon="Accept">
<DirectEvents>
<Click OnEvent="btnOK_DirectClick" Success="fnSuccess">
<EventMask ShowMask="true" Msg="正在处理..."></EventMask>
<ExtraParams>
<ext:Parameter Name="name" Value="btnOK"></ext:Parameter>
</ExtraParams>
<
Confirmation ConfirmRequest
="true"
Title="提示" Message
="确定要提交服务器吗?">
</Confirmation>
</Click>
</DirectEvents>
</ext:Button>