【Ext.Net学习笔记】03：Ext.Net DirectEvents用法详解、DirectMethods用法详解

Ext.Net通过DirectEvents进行服务器端异步的事件处理。【Ext.Net学习笔记】02：Ext.Net用法概览、Ext.Net MessageBus用法、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);//将当期线程挂起3000毫秒，即3秒            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)        {            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>

不需要进行多余的代码处理，只要这两行配置就可以完成在出发时间前进行提醒：

Ext.Net DirectEvents除了能够在Ext.Net中很方便的使用之外，还可以结合asp.net控件、HTML控件进行使用。

在ASP.NET控件上面使用DirectEvents

我们在ASP.NET中实现无刷新的页面请求的时候，通常会用到UpdatePanel，现在Ext.Net为我们提供了另外一种渠道：通过DirectEvents来实现无刷新的页面请求。

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

首先，我在页面放上一个文本框和按钮，当我们点击确定按钮的时候，希望在后台能够取到文本框的值。

接下来才是见证奇迹的时刻：

<ext:ResourceManager runat="server">    <CustomDirectEvents>        <ext:DirectEvent Target="btnOK"            OnEvent="btnOK_DirectClick">        </ext:DirectEvent>    </CustomDirectEvents></ext:ResourceManager>

我们来配置一个DirectEvent，通过这个DirectEvent来执行服务器端的事件方法，我们来看看服务器端的代码：

protected void btnOK_DirectClick(object sender, Ext.Net.DirectEventArgs e){    string name = this.txtName.Text;    X.MessageBox.Alert("提示", "按钮被点击，输入框的值为：" + name).Show();}

通过这段代码，我们会取到文本框输入的值，并在客户端弹出一个提示框，并且这个过程是无刷新的。效果如下：

在HTML控件上面使用DirectEvents

ASP.NET控件可以用，HTML控件同样可以使用DirectEvents（真的是万能哦）。来看看如何在HTML按钮中使用DirectEvents吧，为了演示，我在上面页面中的按钮替换成HTML按钮：

<input type="button" value="确定" id="htmlBtn" />

然后再ResourceManager节点中配置：

<ext:ResourceManager runat="server">    <CustomDirectEvents>        <ext:DirectEvent Target="htmlBtn"            OnEvent="btnOK_DirectClick">            </ext:DirectEvent>    </CustomDirectEvents></ext:ResourceManager>

这样就完成了。当我们点击这个HTML按钮的时候，你会看到和上面一样的效果。

DirectEvents调用WebService

DirectEvents除了可以异步执行页面中的事件，还可以远程调用WebService。

新建一个Web服务文件，文件名为ExtNetService。

    [WebService(Namespace = "http://tempuri.org/")]    [WebServiceBinding(ConformsTo = Wsiprofiles.BasicProfile1_1)]    [System.ComponentModel.ToolboxItem(false)]    public class ExtNetService : System.Web.Services.WebService    {        [WebMethod]        public DirectResponse GetServerTimeWindow()        {            new Window("Server time", Icon.Time)            {                ID = "MyWindow",                Html = DateTime.Now.ToString()            }.Render();            return new DirectResponse();        }    }

这是我们定义的Service程序，然后来配置DirectEvents：

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

然后点击htmlBtn按钮，这个时候会打开一个来自服务器端的小窗口：

注意这个例子，如果你去跟踪一下请求过程，你会发现这里其实是远程的调用了这个WebService，这里和一般的URL请求是一样的，因此DirectEvents一样可以调用一般处理程序(.ashx)

DirectEvents调用一般处理程序（.ashx）

既然可以远程调用一个WebService，那么远程调用一个一般处理程序肯定是没有问题的。

首先来看看一般处理程序的代码：

public class ServerTimeHandler : IHttpHandler{    public void ProcessRequest(HttpContext context)    {        new Window("Server time", Icon.Time)        {            ID = "MyWindow",