Ext.Net学习笔记05：Ext.Net DirectEvents用法详解

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>

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

今天就介绍这么多，明天继续学习更加实用的功能。

起飞网原创首发，转载请注明出处。

原文链接：http://www.qeefee.com/article/extnet-learn-05-directevents-in-detail