asp.net 3.5控件和組件開發技術之客戶端回發/回調揭密

本文摘錄自《縱向切入ASP.NET 3.5控件和組件開發技術》。

對于服務端控件元素，比如ASP.NET的Button標準服務端控件在提交時可以自動把請求發送到服務端處理，這樣的控件我們不用自己處理它們的事件回發；但對于呈現不引起回發的HTML元素，如“文本框”（TextBox）或“鏈接按鈕”（LinkButton），而希望由控件啟動回發，則可以在ASP.NET中通過依靠客戶端腳本的事件結構進行編程來實現這一功能。 完整地處理一個事件則還需要回發和捕捉。捕捉是ipostBackEventHandler接口的事情，上一節講得比較清楚了，這一節主要講回發（客戶端回發請求到服務端）。下面就以一些常用的HTML標記展開分析客戶端回發機制，以及各種HTML標記的回發形式。5.2.2.1 設置HTML Button標記的類型為submit如上節的PostBackEventControl控件例子就是采用設置HTML Button標記的類型為submit的方式從客戶端提交回發的。回發代碼如下：output.Write("<INPUT TYPE=submit name=" + this.UniqueID + " Value='單擊我' />");INPUT是標準的HTML標記控件，它默認情況下沒有runat="server"，并且這些控件默認情況下只能處理一些客戶端方法。INPUT的TYPE屬性表示該標記的控件類型，如：type=button表示按鈕；type=submit表示可提交表單功能的按鈕；type=text表示文本框控件；type=file表示上傳文件控件等。這里主要說明的是當type=submit類型的控件表示提交按鈕時，它顯示的樣式與type=button的效果一樣，不同的是單擊它后可以提交表單到服務器，且不需要另外的代碼，ASP.NET默認情況下是提交表單到當前頁面。type=submit提交功能是從IE 3.0版開始支持的，只要瀏覽器版本不小于此版本都可使用該功能。5.2.2.2 使用方法GetPostBackEventReference 得到回發腳本1．為HTML客戶端控件增加回發功能一般頁面中的按鈕并不都是type=submit類型的，大部分是type=button類型的按鈕，把上面5.2.2.1節的代碼段中的type=submit修改成type=button，修改后的代碼如下：output.Write("<INPUT TYPE=button name=" + this.UniqueID + " Value='[使用提交按鈕]' />");由于此代碼段中的按鈕的type屬性由sumbit改成了一般按鈕類型button，則此按鈕輸出后將不再具有回發到服務端的功能。為了使一般按鈕也具有回發的功能，ASP.NET提供了Page.ClientScript.GetPostBackEventReference方法。ClientScript類型為ClientScriptManager，該類主要功能是在Web應用程序中定義用于管理客戶端腳本的方法。GetPostBackEvent Reference方法體結構如下：GetCallbackEventReference(String, String, String, String, String, Boolean)此方法功能是獲取一個對客戶端函數的引用；調用該方法時，將啟動一個對服務器事件的客戶端回調。此重載方法的客戶端函數包含指定的目標、參數、客戶端腳本、上下文、錯誤處理程序和布爾值。在期望不執行回發而從客戶端運行服務器代碼的情況下，可以使用ClientScriptManager類來調用客戶端回調。這稱為對服務器執行帶外回調。在客戶端回調中，客戶端腳本函數向ASP.NET網頁發送異步請求。網頁修改其正常生命周期來處理回調。使用GetCallbackEvent Reference方法獲取一個對客戶端函數的引用，當調用該函數時，它將啟動一個對服務器端事件的客戶端回調。使用GetCallbackEventReference方法對上面代碼增加回調客戶端功能，修正后的代碼如下：output.Write("<INPUT type=button name=/"{0}/" value='[使用Page.ClientScript對象方法]' onclick=/"{1}/">", this.UniqueID, Page.ClientScript.GetPostBackEvent Reference(this, ""));Page.ClientScript.GetPostBackEventReference方法的第一個參數傳遞當前控件引用，在實際應用中可以傳遞任意控件引用，包括子控件；第二個參數為可選的命令參數，這里設置為null，一般同時處理多個按鈕時可以設置該參數為不同的命令名稱。另外，Page.ClientScript對象還有個非常重要的方法GetCallbackEventReference。使用GetCallbackEventReference方法獲取一個對客戶端函數的引用，當調用該函數時，它將啟動一個對服務器端事件的客戶端回調，可以支持設置客戶端回調方法名稱等，在這里僅簡單提一下，在后面還有專門章節介紹ASP.NET控件開發對客戶端的支持。轉入正題，在代碼中增加按鈕的onclick單擊事件，當單擊按鈕時會調用GetPostBackEvent Reference方法返回的一串客戶端腳本，并且在頁面中生成一個客戶端方法和兩個type=hidden的隱藏域控件。下面是以上代碼呈現到客戶端的HTML代碼：<INPUT type=button name="PostBackFromClientControl1"value='[使用Page. ClientScript對象方法]'onclick="__doPostBack('PostBackFromClientControl1','')"><div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /></div><script type="text/javascript"> //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]></script>從上面最終輸出的HTML源代碼可以看到，Button控件的單擊事件會執行一個名為_doPostBack的方法，并且此方法也是自動生成在頁面中的。在_doPostBack方法中把事件目標對象eventTarget（調用GetPostBackEventReference方法時傳遞的第一個參數，為當前控件）賦值給當前Form對象，把事件參數對象eventArgument（調用GetPostBackEventReference方法時傳遞的第二個參數），最后調用Form對象的提交方法，提交窗體，到這里就實現了我們想要的回發功能。還要注意到以下兩句自動生成的代碼：<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /><input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />這是兩個隱藏域類型控件，主要用來存儲事件目標對象和事件參數對象的值。還有，在以上的script標記之間，有個嵌套的//<![CDATA[ //]]> 子句，該句與純控件開發技術無關。該句的功能是通知HTML讀取器下面這段不是HTML的內容，需要按附加的轉義字符分開保存，以防代碼解析出錯。2．為服務端控件生成回發腳本Page.ClientScript.GetPostBackEventReference方法還可以為服務端控件生成自己的回發腳本，可以從客戶端回發。ASP.NET標準的Button服務端控件最終生成的HTML標記無非也是生成一個type=submit類型的控件。對于服務端控件也可以設置客戶端回發功能。比如在使用Button控件時把UseSubmitBehavior屬性設置為false，則禁用按鈕的自動提交功能，就可以使用GetPostBackEventReference方法返回Button控件的客戶端回發事件腳本，代碼如下所示：string strPostBackCode =this.Page.ClientScript.GetPostBackEventReference(button1,”edit”);然后把Button的客戶事件與生成的回發事件腳本進行關聯：this.button1.Attributes[“onclick”] = strPostBackCode;其他服務端控件也是這樣設置的。5.2.2.3 使用方法GetPostBackClientHyperlink得到回發腳本這種方式的原理與GetPostBackEventReference類似。該方法的功能是獲取一個腳本引用，與前者有一點區別是在其開頭附加一個Javascript: 前綴，該前綴屬于JavaScript基本語法，常用來在非腳本語言（如HTML）源代碼中告訴瀏覽器該前綴后面的格式串作為JavaScript腳本語言來解析，如：javascript:alert（‘hello’）即表示彈出一個“hello”對話框。該引用可在客戶端事件中回發到指定控件的服務器，回發時使用指定的事件參數和一個布爾值指示是否為事件驗證注冊該回發。方法體結構如下：GetPostBackClientHyperlink(Control, String, Boolean)跟GetPostBackEventReference相同，第一個參數為事件目標對象；第二個參數為可選參數；第三個參數表示是否為驗證注冊回發事件。下面看一個應用示例，代碼如下：string href = Page.ClientScript.GetPostBackClientHyperlink(this, "");output.AddAttribute(HtmlTextWriterAttribute.Href, href);output.RenderBeginTag(HtmlTextWriterTag.A);output.Write("[使用Page.ClientScript對象的GetPostBackClientHyperlink方法]");output.RenderEndTag();與前面不同，這里是輸出一個HTML的<a>標簽。相信讀者已經猜到GetPostBackClientHyperlink的應用場景了（通過方法名***Hyperlink就能夠看得出它是專為哪個控件使用的功能）。直接看一下最終生成的客戶端的HTML源代碼：<a href="javascript:__doPostBack('PostBackFromClientControl1','')">[使用Page.ClientScript對象的GetPostBackClientHyperlink方法]</a><div> <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" /> <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" /></div><script type="text/javascript"> //<![CDATA[ var theForm = document.forms['form1']; if (!theForm) { theForm = document.form1; } function __doPostBack(eventTarget, eventArgument) { if (!theForm.onsubmit || (theForm.onsubmit() != false)) { theForm.__EVENTTARGET.value = eventTarget; theForm.__EVENTARGUMENT.value = eventArgument; theForm.submit(); } } //]]></script>從上面代碼可以看到，除了這句：href="javascript:__doPostBack('PostBackFromClientControl1','')"鏈接觸發方式與前面Button控件的onclick觸發方式有些不同外，其他的代碼完全正確一樣。另外，ASP.NET會自動處理可重用部分代碼，比如當頁面中有多個可提交元素時，處理頁面提交的公共方法_doPostBack在當前頁面中總是生成一個，不會生成冗余。關于GetPostBackClientHyperlink方法的使用就講這么多。本節主要講幾種常用HTML標簽的調用客戶端回發的方式以及客戶端回發的原理。注意，使用GetPostBackEventReference方法和GetPostBackClientHyperlink方法定義客戶端回發事件。這些方法啟用客戶端腳本函數，在調用這些函數時，它們將促使服務器向該頁回發。客戶端回發與客戶端回調的區別在于網頁處理客戶端回發事件要用完一個正常的生命周期，而GetCallbackEventReference是異步請求，在客戶端回調中，客戶端腳本函數向ASP.NET網頁發送異步請求，網頁修改其正常生命周期來處理回調。兩者調用是有些區別的。