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>

不需要進行多余的代碼處理，只要這兩行配置就可以完成在出發時間前進行提醒：

今天就介紹這么多，明天繼續學習更加實用的功能。