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

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

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

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


圖 1 是單擊“Click Me!”按鈕時(shí) HTML 頁(yè)面的屏幕快照。



圖 1：?jiǎn)螕簟癈lick Me!”按鈕時(shí)顯示的彈出式對(duì)話(huà)框

對(duì)于以上 HTML 頁(yè)面中的客戶(hù)端腳本，有幾點(diǎn)值得注意。首先，客戶(hù)端腳本塊包含在 HTML 注釋?zhuān)ǎ┲�。之所以這樣，是因?yàn)槿绻�不將腳本塊放入 HTML 注釋中，那些不能識(shí)別腳本的舊式瀏覽器就會(huì)顯示


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

RegisterStartupScript() 方法可用于添加要在加載頁(yè)面后運(yùn)行的腳本塊。通過(guò)這種方法添加的腳本塊位于 Web 窗體的結(jié)尾處，因?yàn)楸仨氃谀_本運(yùn)行前定義腳本要修改的 HTML 元素。也就是說(shuō)，如果您要使用客戶(hù)端腳本將焦點(diǎn)設(shè)置到文本框，必須確保文本框的 HTML 標(biāo)記位于設(shè)置該文本框的焦點(diǎn)的腳本之前。例如，下面的 HTML 將顯示一個(gè)文本框，并將焦點(diǎn)設(shè)置到該文本框：


相反，以下 HTML 不會(huì)將焦點(diǎn)設(shè)置到文本框，因?yàn)槲谋究蚴窃谀_本塊“之后”定義的：


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


請(qǐng)記住下面兩件事：首先，Enabled 和 PopupMessage 屬性保存在 ViewState 中，這樣在回傳時(shí)這些值可以始終保持一致； 其次，在 OnPreRender() 方法中，用于腳本塊的關(guān)鍵字是文本 intoPopupMessage: 加上控件的 UniqueID 屬性。如果使用一個(gè)硬編碼的關(guān)鍵字，則當(dāng)頁(yè)面中有多個(gè)控件時(shí)，只有第一個(gè)控件能夠注冊(cè)其腳本塊，因此只顯示一個(gè)彈出式對(duì)話(huà)框。通過(guò)在腳本塊關(guān)鍵字中使用 UniqueID，就能保證該控件的每個(gè)實(shí)例都能獲取其腳本塊。

在注冊(cè)腳本塊之前，代碼首先檢查三個(gè)條件：

沒(méi)有使用同一關(guān)鍵字注冊(cè)的腳本。這當(dāng)然是不可能的，因?yàn)槊總�(gè)控件實(shí)例都應(yīng)該有一個(gè) UniqueID 屬性值。但是，不妨先練習(xí)使用 IsStartupScriptRegistered() 方法，然后再花時(shí)間創(chuàng)建和注冊(cè)啟動(dòng)腳本。
控件的 Enabled 屬性為 True。
頁(yè)面沒(méi)有被回傳。這段代碼只允許彈出式對(duì)話(huà)框在第一次加載頁(yè)面時(shí)顯示，而不是在每次回傳頁(yè)面時(shí)都顯示。我們還可以增添更為靈活的功能，即為該控件添加一個(gè)布爾屬性，以允許用戶(hù)指定是否在回傳時(shí)也生成彈出式對(duì)話(huà)框。
如果滿(mǎn)足這三個(gè)條件，則腳本被指定，并且 PopupMessage 屬性值被插入到腳本中適當(dāng)?shù)奈恢�。最后，調(diào)用 Page 屬性的 RegisterStartupScript() 方法，傳入關(guān)鍵字及腳本代碼。

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

ClientSideControls，包含 PopupGreeting 服務(wù)器控件
ClientSideTester，包括一個(gè)為測(cè)試 ClientSideControls 而設(shè)計(jì)的 ASP.NET Web 應(yīng)用程序
ClientSideControls 項(xiàng)目編譯后的程序集名為 ClientSideControls.dll。要在您自己的 ASP.NET Web 應(yīng)用程序中使用 PopupGreeting 服務(wù)器控件，請(qǐng)將 ClientSideControls.dll 文件添加到您的 Web 應(yīng)用程序的引用中。然后，在設(shè)計(jì)器中，右鍵單擊 Toolbox（工具箱）并選擇“Add/Remove Items . . .”（添加/刪除項(xiàng)），再次選擇 ClientSideControls.dll 文件。這樣就向 Toolbox（工具箱）中添加了名為 PopupGreeting 的新項(xiàng)。然后，您可以從 Toolbox（工具箱）將該控件拖到設(shè)計(jì)器中。

圖 2 顯示了 PopupGreeting 控件添加到 Toolbox（工具箱）并添加到設(shè)計(jì)器后，Visual Studio .NET 的屏幕快照。Toolbox（工具箱）中的 PopupGreeting 控件用紅色線圈出，設(shè)計(jì)器中的 PopupGreeting 輸出用藍(lán)色線圈出，在屏幕快照右側(cè)的“Properties”（屬性）窗格中可以查看 PopupGreeting 的屬性。



圖 2：PopupGreeting 服務(wù)器控件已添加到 ASP.NET Web 窗體頁(yè)面

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

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

在開(kāi)始之前，請(qǐng)注意這種方法通常只適用于從 System.Web.UI.WebControls.WebControl 類(lèi)導(dǎo)出的服務(wù)器控件，因?yàn)閺倪@個(gè)類(lèi)導(dǎo)出的控件會(huì)發(fā)送某些 HTML 元素。不發(fā)送 HTML 元素的服務(wù)器控件（如上一節(jié)中的 PopupGreeting 服務(wù)器控件），則不必寫(xiě)出 HTML 元素屬性，因?yàn)檫@些控件運(yùn)行時(shí)不會(huì)寫(xiě)出 HTML 元素。

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

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

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

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

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

首先，在 Visual Studio .NET 中創(chuàng)建一個(gè)新的 Web Control Library（Web 控件庫(kù)）項(xiàng)目，或者在 ClientSideControls 項(xiàng)目中添加一個(gè)新的 Web Custom Control（Web 自定義控件）。ConfirmButton 類(lèi)的完整源代碼如下所示：

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 中是否存在該項(xiàng)目 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 類(lèi)是從 Button 類(lèi)導(dǎo)出的。由于 Button 類(lèi)已包含 Button Web 控件使用的所有屬性和方法，因此我們所做的只是添加屬性和方法，以在用戶(hù)單擊按鈕時(shí)顯示一個(gè)確認(rèn)對(duì)話(huà)框�，F(xiàn)在我們需要一個(gè)屬性，即 PopupMessage，它是要在確認(rèn)彈出式對(duì)話(huà)框中顯示的消息。默認(rèn)情況下，這條消息是“Are you sure you want to continue?”（您確定要繼續(xù)嗎？）如果使用 ConfirmButton 來(lái)確認(rèn)刪除，可能需要將該消息更改為“This action will permanently delete the selected item. Are you sure you want to do this?”（此操作將永久刪除所選項(xiàng)。您確定要繼續(xù)嗎？）

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


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



圖 3：操作中的 ConfirmButton

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

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

我們還在文中介紹了兩個(gè)簡(jiǎn)單的服務(wù)器控件，它們都利用了客戶(hù)端腳本來(lái)改進(jìn)其功能。PopupGreeting 控件在頁(yè)面首次加載時(shí)顯示一個(gè)模式彈出式對(duì)話(huà)框，ConfirmButton Web 控件在用戶(hù)單擊按鈕提交表單時(shí)，提示用戶(hù)進(jìn)行確認(rèn)。

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