簡介
盡管從技術角度講，Microsoft? ASP.NET 服務器控件的所有功能都可以在服務器端執(zhí)行，但通常情況下通過添加客戶端腳本可以大大增強服務器控件的可用性。例如，ASP.NET 驗證 Web 控件可以在服務器端執(zhí)行所有的驗證檢查。但是，對于高版本瀏覽器，驗證 Web 控件也會發(fā)送客戶端腳本，以在客戶端進行驗證。這就是說，這些瀏覽器的用戶可以獲得響應效果更好的動態(tài)體驗。

在開發(fā) ASP.NET 服務器控件時，您不妨問問自己，如何才能通過使用客戶端腳本來增強可用性。一旦找到可行的方案，其他要做的就是增強服務器控件的功能，以使其發(fā)送合適的客戶端腳本。

ASP.NET 服務器控件可以發(fā)送兩種客戶端腳本：

客戶端腳本塊
客戶端 HTML 屬性
客戶端腳本塊通常是用 JavaScript 編寫的，其中通常包含在發(fā)生特定的客戶端事件時執(zhí)行的函數(shù)�？蛻舳� HTML 屬性提供將客戶端事件與客戶端腳本聯(lián)系在一起的方法。例如，以下的 HTML 頁面中包含了客戶端腳本塊，腳本塊中包含了名為 doClick() 的函數(shù)。該頁面同時還包含一個按鈕（通過 HTML 元素創(chuàng)建），這個按鈕的 onclick 屬性與 doClick() 函數(shù)綁定。也就是說，只要用戶單擊該按鈕，就開始執(zhí)行 doClick() 函數(shù)中的客戶端代碼。在本示例中，將顯示一個彈出式對話框（圖 1）。


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



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

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


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

RegisterStartupScript() 方法可用于添加要在加載頁面后運行的腳本塊。通過這種方法添加的腳本塊位于 Web 窗體的結尾處，因為必須在腳本運行前定義腳本要修改的 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() 方法，然后再花時間創(chuàng)建和注冊啟動腳本。
控件的 Enabled 屬性為 True。
頁面沒有被回傳。這段代碼只允許彈出式對話框在第一次加載頁面時顯示，而不是在每次回傳頁面時都顯示。我們還可以增添更為靈活的功能，即為該控件添加一個布爾屬性，以允許用戶指定是否在回傳時也生成彈出式對話框。
如果滿足這三個條件，則腳本被指定，并且 PopupMessage 屬性值被插入到腳本中適當?shù)奈恢�。最后，調用 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 窗體頁面

發(fā)送 ASP.NET 服務器 Web 控件的 HTML 屬性
如上所述，有兩種方法可以通過服務器控件發(fā)送客戶端腳本：

通過使用客戶端腳本塊
通過 HTML 元素屬性
在上一節(jié)中，我們探討了如何使用 Page 類的 RegisterStartupScript() 和 RegisterClientScriptBlock() 方法向 ASP.NET Web 頁面添加客戶端腳本塊。在最后這一節(jié)，我們了解如何將 HTML 元素屬性添加到服務器控件的 HTML 元素。

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

WebControl 類包含一個將 HTML 元素屬性添加到由 Web 控件發(fā)出的 HTML 元素的方法。該方法稱為 AddAttributesToRender()，它只有一個輸入?yún)��?shù)，即 HtmlTextWriter 的實例。要向 Web 控件添加 HTML 屬性，您可以使用 HtmlTextWriter 的以下兩個方法之一：

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

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

為了運用該信息，我們創(chuàng)建一個作為確認按鈕的服務器 Web 控件。確認按鈕是一種提交按鈕，當用戶單擊此按鈕時，將顯示一個彈出式對話框，詢問用戶是否確定要繼續(xù)操作。用戶可以單擊“取消”，不提交窗體。此項功能對用于刪除信息的按鈕特別有用，因為最終用戶（或網(wǎng)站管理員）可能會在無意中單擊鼠標刪除數(shù)據(jù)庫中的條目，如果沒有機會取消，將是非常令人煩惱的事。

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

首先，在 Visual Studio .NET 中創(chuàng)建一個新的 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 控件使用的所有屬性和方法，因此我們所做的只是添加屬性和方法，以在用戶單擊按鈕時顯示一個確認對話框�，F(xiàn)在我們需要一個屬性，即 PopupMessage，它是要在確認彈出式對話框中顯示的消息。默認情況下，這條消息是“Are you sure you want to continue?”（您確定要繼續(xù)嗎？）如果使用 ConfirmButton 來確認刪除，可能需要將該消息更改為“This action will permanently delete the selected item. Are you sure you want to do this?”（此操作將永久刪除所選項。您確定要繼續(xù)嗎？）

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


如果您不熟悉 JavaScript 的 confirm(string) 函數(shù)，那么請您注意，該函數(shù)只接受一個字符串參數(shù)，并顯示一個帶有特定字符串的模式對話框。該對話框中包含兩個按鈕：“確定”和“取消”。如果單擊“確定”，confirm() 函數(shù)返回 True，否則返回 False。請注意，onclick 事件將返回 confirm() 函數(shù)調用的結果。當通過單擊提交按鈕來提交表單時，如果提交按鈕的 onclick 事件返回 False，則表單未被提交。因此，只有在用戶確認后，可以使用 confirm() 函數(shù)提交表單。有關 confirm() 的詳細信息，請參閱 ASP Warrior 網(wǎng)站中的 Javascript Confirm Form Submission。



圖 3：操作中的 ConfirmButton

ConfirmButton 在按鈕的 onclick 事件處理程序中使用了內嵌的 JavaScript，還可以在 ConfirmButton 的 OnPreRender() 方法的客戶端腳本塊中創(chuàng)建一個函數(shù)，然后調整 onclick 屬性以調用該函數(shù)。

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

我們還在文中介紹了兩個簡單的服務器控件，它們都利用了客戶端腳本來改進其功能。PopupGreeting 控件在頁面首次加載時顯示一個模式彈出式對話框，ConfirmButton Web 控件在用戶單擊按鈕提交表單時，提示用戶進行確認。

您可以在自己的服務器控件中插入客戶端腳本，這將顯著改善用戶體驗。本文提供的兩個服務器控件相對比較簡單，在可用性和獨創(chuàng)性上沒有什么突出之處。MetaBuilders.com 中展示了很多利用從 ASP.NET 服務器控件中插入客戶端腳本而實現(xiàn)的功能，這些功能會給您留下深刻印象。在 MetaBuilders.com，您可以找到一些服務器控件，它們有的可以自動將焦點添加到文本框，有的可以在兩個下拉列表之間傳遞條目，有的可以向下拉列表中添加或刪除條目，還有的可以在一系列下拉列表中顯示父子關系的數(shù)據(jù)，等等。最大的好處是，這些控件是免費的，并包括完整的源代碼。