【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",