Ext.Net通過DirectEvents進行服務器端異步的事件處理?!綞xt.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",
新聞熱點
疑難解答