從 ASP.NET 伺服器控制項插入用戶端指令碼(引自MSDN中文網站）

asp.net|插入|伺服器|指令碼|用戶端|控制項|中文 簡介
儘管從技術角度講，Microsoft? ASP.NET 伺服器控制項的所有功能都可以在伺服器端執行，但通常情況下通過添加用戶端指令碼可以大大增強伺服器控制項的可用性。例如，ASP.NET 驗證 Web 控制項可以在伺服器端執行所有的驗證檢查。但是，對於高版本瀏覽器，驗證 Web 控制項也會發送用戶端指令碼，以在用戶端進行驗證。這就是說，這些瀏覽器的使用者可以獲得響應效果更好的動態體驗。

在開發 ASP.NET 伺服器控制項時，您不妨問問自己，如何才能通過使用用戶端指令碼來增強可用性。一旦找到可行的方案，其他要做的就是增強伺服器控制項的功能，以使其發送合適的用戶端指令碼。

ASP.NET 伺服器控制項可以發送兩種用戶端指令碼：

用戶端指令碼塊
用戶端 HTML 屬性
用戶端指令碼塊通常是用 JavaScript 編寫的，其中通常包含在發生特定的用戶端事件時執行的函數。用戶端 HTML 屬性提供將用戶端事件與用戶端指令碼聯絡在一起的方法。例如，以下的 HTML 頁面中包含了用戶端指令碼塊，指令碼塊中包含了名為 doClick() 的函數。該頁面同時還包含一個按鈕（通過 HTML 元素建立），這個按鈕的 onclick 屬性與 doClick() 函數綁定。也就是說，只要使用者單擊該按鈕，就開始執行 doClick() 函數中的用戶端代碼。在本樣本中，將顯示一個彈出式對話方塊（圖 1）。


圖 1 是單擊“Click Me!”按鈕時 HTML 頁面的螢幕快照。



圖 1：單擊“Click Me!”按鈕時顯示的彈出式對話方塊

對於以上 HTML 頁面中的用戶端指令碼，有幾點值得注意。首先，用戶端指令碼塊包含在 HTML 注釋（）中。之所以這樣，是因為如果不將指令碼塊放入 HTML 注釋中，那些不能識別指令碼的舊式瀏覽器就會顯示


在這段代碼中， 標記中的 onclick="displayPopup()" 用於指明在單擊按鈕時，JavaScript 函數 displayPopup() 應該運行。

RegisterStartupScript() 方法可用於添加要在載入頁面後啟動並執行指令碼塊。通過這種方法添加的指令碼塊位於 Web Form的結尾處，因為必須在指令碼運行前定義指令碼要修改的 HTML 元素。也就是說，如果您要使用用戶端指令碼將焦點設定到文字框，必須確保文字框的 HTML 標籤位於設定該文字框的焦點的指令碼之前。例如，下面的 HTML 將顯示一個文字框，並將焦點設定到該文字框：


相反，以下 HTML 不會將焦點設定到文字框，因為文字框是在指令碼塊“之後”定義的：


因此，RegisterStartupScript() 方法將 "; scriptBlock = scriptBlock.Replace("%%POPUP_MESSAGE%%", this.PopupMessage); Page.RegisterStartupScript(scriptKey, scriptBlock); } } } }


請記住下面兩件事：首先，Enabled 和 PopupMessage 屬性儲存在 ViewState 中，這樣在回傳時這些值可以始終保持一致； 其次，在 OnPreRender() 方法中，用於指令碼塊的關鍵字是文本 intoPopupMessage: 加上控制項的 UniqueID 屬性。如果使用一個硬式編碼關鍵字，則當頁面中有多個控制項時，只有第一個控制項能夠註冊其指令碼塊，因此只顯示一個彈出式對話方塊。通過在指令碼塊關鍵字中使用 UniqueID，就能保證該控制項的每個執行個體都能擷取其指令碼塊。

在註冊指令碼塊之前，代碼首先檢查三個條件：

沒有使用同一關鍵字註冊的指令碼。這當然是不可能的，因為每個控制項執行個體都應該有一個 UniqueID 屬性值。但是，不妨先練習使用 IsStartupScriptRegistered() 方法，然後再花時間建立和註冊啟動指令碼。
控制項的 Enabled 屬性為 True。
頁面沒有被回傳。這段代碼只允許彈出式對話方塊在第一次載入頁面時顯示，而不是在每次回傳頁面時都顯示。我們還可以增添更為靈活的功能，即為該控制項添加一個布爾屬性，以允許使用者指定是否在回傳時也產生彈出式對話方塊。
如果滿足這三個條件，則指令碼被指定，並且 PopupMessage 屬性值被插入到指令碼中適當的位置。最後，調用 Page 屬性的 RegisterStartupScript() 方法，傳入關鍵字及指令碼代碼。

PopupGreeting 代碼可以從本文結尾處提供的下載中獲得。該下載包括名為 ClientSideControlsAndTester 的 Visual Studio .NET 解決方案，其中包含兩個項目：

ClientSideControls，包含 PopupGreeting 伺服器控制項
ClientSideTester，包括一個為測試 ClientSideControls 而設計的 ASP.NET Web 應用程式
ClientSideControls 項目編譯後的程式集名為 ClientSideControls.dll。要在您自己的 ASP.NET Web 應用程式中使用 PopupGreeting 伺服器控制項，請將 ClientSideControls.DLL 檔案添加到您的 Web 應用程式的引用中。然後，在設計器中，按右鍵 Toolbox（工具箱）並選擇“Add/Remove Items . . .”（添加/刪除項），再次選擇 ClientSideControls.DLL 檔案。這樣就向 Toolbox（工具箱）中添加了名為 PopupGreeting 的新項。然後，您可以從 Toolbox（工具箱）將該控制項拖到設計器中。

圖 2 顯示了 PopupGreeting 控制項添加到 Toolbox（工具箱）並添加到設計器後，Visual Studio .NET 的螢幕快照。Toolbox（工具箱）中的 PopupGreeting 控制項用紅色線圈出，設計器中的 PopupGreeting 輸出用藍色線圈出，在螢幕快照右側的“Properties”（屬性）窗格中可以查看 PopupGreeting 的屬性。



圖 2：PopupGreeting 伺服器控制項已添加到 ASP.NET Web Form頁面

發送 ASP.NET 伺服器 Web 控制項的 HTML 屬性
如上所述，有兩種方法可以通過伺服器控制項發送用戶端指令碼：

通過使用用戶端指令碼塊
通過 HTML 元素屬性
在上一節中，我們探討了如何使用 Page 類的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法向 ASP.NET Web 頁面添加用戶端指令碼塊。在最後這一節，我們瞭解如何將 HTML 元素屬性添加到伺服器控制項的 HTML 元素。

在開始之前，請注意這種方法通常只適用於從 System.Web.UI.WebControls.WebControl 類匯出的伺服器控制項，因為從這個類匯出的控制項會發送某些 HTML 元素。不發送 HTML 元素的伺服器控制項（如上一節中的 PopupGreeting 伺服器控制項），則不必寫出 HTML 元素屬性，因為這些控制項運行時不會寫出 HTML 元素。

WebControl 類包含一個將 HTML 元素屬性添加到由 Web 控制項發出的 HTML 元素的方法。該方法稱為 AddAttributesToRender()，它只有一個輸入參數，即 HtmlTextWriter 的執行個體。要向 Web 控制項添加 HTML 屬性，您可以使用 HtmlTextWriter 的以下兩個方法之一：

AddAttribute()
AddStyleAttribute()
AddAttribute() 方法用於將 title、class、style 和 onclick 等 HTML 屬性添加到 HTML 元素。AddStyleAttribute() 用於將樣式設定添加到 HTML 元素，如 background-color、color 和 font-size 等。

AddAttribute() 有幾個重載表單，但在代碼中，我們將使用以下表單：AddAttribute(HtmlTextWriterAttribute, value)。第一個參數，即 HtmlTextWriterAttribute，應該是 HtmlTextWriterAttribute 枚舉的成員。該枚舉包含像 Align、Bgcolor、Class 和 Onclick 等項。您可以在 .NET Framework Class Library，HtmlTextWriterAttribute Enumeration 中找到完整的列表。value 輸入參數用於指定分配給特定 HTML 屬性的值。最後，如果您想添加一個 HtmlTextWriterAttribute 枚舉中未定義的 HTML 屬性，可以使用 AddAttribute() 方法的替代形式 AddAttribute(attributeName, value)，其中的 attributeName 和 value 均為字串。

為了運用該資訊，我們建立一個作為確認按鈕的伺服器 Web 控制項。確認按鈕是一種提交按鈕，當使用者單擊此按鈕時，將顯示一個彈出式對話方塊，詢問使用者是否確定要繼續操作。使用者可以單擊“取消”，不提交表單。此項功能對用於刪除資訊的按鈕特別有用，因為終端使用者（或網站管理員）可能會在無意中單擊滑鼠刪除資料庫中的條目，如果沒有機會取消，將是非常令人煩惱的事。

為了減少工作量，我們從 System.Web.UI.WebControls.Button 類中匯出 ConfirmButton Web 控制項，因為這個類本身已完成了涉及呈現提交按鈕的所有繁重工作。在匯出的類中，我們只需添加一個屬性，這樣使用者可以指定確認訊息，然後覆蓋按鈕的 AddAttributesToRender() 方法，並添加一個屬性以處理用戶端事件 onclick。

首先，在 Visual Studio .NET 中建立一個新的 Web Control Library（Web 控制項陳列庫）項目，或者在 ClientSideControls 項目中添加一個新的 Web Custom Control（Web 自訂控制項）。ConfirmButton 類的完整原始碼如下所示：

using System; using System.Web.UI; using System.Web.UI.WebControls; using System.ComponentModel; namespace ClientSideControls { /// /// ConfirmButton 的摘要描述。 /// [DefaultProperty("Text"), ToolboxData("<{0}:ConfirmButton runat=server>")] public class ConfirmButton : Button { [Bindable(true), Category("Appearance"), DefaultValue("")] public string PopupMessage { get { // 檢查 ViewState 中是否存在該項目 object popupMessage = this.ViewState["PopupMessage"]; if (popupMessage != null) return this.ViewState["PopupMessage"].ToString(); else return "Are you sure you want to continue?"; } set { // 指定 ViewState 變數 ViewState["PopupMessage"] = value; } } protected override void AddAttributesToRender(HtmlTextWriter writer) { base.AddAttributesToRender(writer); string script = @"return confirm(""%%POPUP_MESSAGE%%"");"; script = script.Replace("%%POPUP_MESSAGE%%", this.PopupMessage.Replace("\"", "\\\"")); writer.AddAttribute(HtmlTextWriterAttribute.Onclick, script); } } }
首先要注意的是，ConfirmButton 類是從 Button 類匯出的。由於 Button 類已包含 Button Web 控制項使用的所有屬性和方法，因此我們所做的只是添加屬性和方法，以在使用者單擊按鈕時顯示一個確認對話方塊。現在我們需要一個屬性，即 PopupMessage，它是要在確認彈出式對話方塊中顯示的訊息。預設情況下，這條訊息是“Are you sure you want to continue?”（您確定要繼續嗎？）如果使用 ConfirmButton 來確認刪除，可能需要將該訊息更改為“This action will permanently delete the selected item. Are you sure you want to do this?”（此操作將永久刪除所選項。您確定要繼續嗎？）

我們只需覆蓋一個方法，即 AddAttributesToRender()。在此方法中，我們只要構建當觸發 元素的 onclick 事件時要執行的用戶端 JavaScript，然後通過傳入的 HtmlTextWriter 對象的 AddAttribute() 方法添加這段 JavaScript。關於這個方法，有一點要注意，必須將 PopupMessage 屬性值中的所有雙引號執行個體替換為轉義雙引號（即 \"）。另外還要注意，預設情況下，AddAttribute() 會對第二個參數中的字元進行 HTML 編碼。也就是說，ASP.NET Web 頁面中如果包含 PopupMessage 屬性被設定為“Do you want to continue?”（要繼續嗎？）的 ConfirmButton，該頁面將發送以下 HTML 標籤：


如果您不熟悉 JavaScript 的 confirm(string) 函數，那麼請您注意，該函數只接受一個字串參數，並顯示一個帶有特定字串的強制回應對話方塊。該對話方塊中包含兩個按鈕：“確定”和“取消”。如果單擊“確定”，confirm() 函數返回 True，否則返回 False。請注意，onclick 事件將返回 confirm() 函數調用的結果。當通過單擊提交按鈕來提交表單時，如果提交按鈕的 onclick 事件返回 False，則表單未被提交。因此，只有在使用者確認後，可以使用 confirm() 函數提交表單。有關 confirm() 的詳細資料，請參閱 ASP Warrior 網站中的 Javascript Confirm Form Submission。



圖 3：操作中的 ConfirmButton

ConfirmButton 在按鈕的 onclick 事件處理常式中使用了內嵌的 JavaScript，還可以在 ConfirmButton 的 OnPreRender() 方法的用戶端指令碼塊中建立一個函數，然後調整 onclick 屬性以調用該函數。

小結
在本文中，我們探討了兩種通過 ASP.NET 伺服器控制項插入用戶端指令碼的方法。第一種方法是使用 Page 類的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法插入用戶端指令碼塊。第二種方法是向 HTML 元素的屬性添加用戶端指令碼。後者通過覆蓋 Web 伺服器控制項的 AddAttributesToRender() 方法，並使用 HtmlTextWriter 的 AddAttribute() 方法來完成。

我們還在文中介紹了兩個簡單的伺服器控制項，它們都利用了用戶端指令碼來改進其功能。PopupGreeting 控制項在頁面首次載入時顯示一個模式彈出式對話方塊，ConfirmButton Web 控制項在使用者單擊按鈕提交表單時，提示使用者進行確認。

您可以在自己的伺服器控制項中插入用戶端指令碼，這將顯著改善使用者體驗。本文提供的兩個伺服器控制項相對比較簡單，在可用性和獨創性上沒有什麼突出之處。MetaBuilders.com 中展示了很多利用從 ASP.NET 伺服器控制項中插入用戶端指令碼而實現的功能，這些功能會給您留下深刻印象。在 MetaBuilders.com，您可以找到一些伺服器控制項，它們有的可以自動將焦點添加到文字框，有的可以在兩個下拉式清單之間傳遞條目，有的可以向下拉式清單中添加或刪除條目，還有的可以在一系列下拉式清單中顯示父子關係的資料，等等。最大的好處是，這些控制項是免費的，並包括完整的原始碼。