從 ASP.NET 服務(wù)器控件插入客戶端腳本(引自MSDN中文網(wǎng)站）
2024-07-10 12:57:28
供稿：網(wǎng)友
簡(jiǎn)介
盡管從技術(shù)角度講，microsoft? asp.net 服務(wù)器控件的所有功能都可以在服務(wù)器端執(zhí)行，但通常情況下通過添加客戶端腳本可以大大增強(qiáng)服務(wù)器控件的可用性。例如，asp.net 驗(yàn)證 web 控件可以在服務(wù)器端執(zhí)行所有的驗(yàn)證檢查。但是，對(duì)于高版本瀏覽器，驗(yàn)證 web 控件也會(huì)發(fā)送客戶端腳本，以在客戶端進(jìn)行驗(yàn)證。這就是說，這些瀏覽器的用戶可以獲得響應(yīng)效果更好的動(dòng)態(tài)體驗(yàn)。
在開發(fā) asp.net 服務(wù)器控件時(shí)，您不妨問問自己，如何才能通過使用客戶端腳本來增強(qiáng)可用性。一旦找到可行的方案，其他要做的就是增強(qiáng)服務(wù)器控件的功能，以使其發(fā)送合適的客戶端腳本。
asp.net 服務(wù)器控件可以發(fā)送兩種客戶端腳本：
客戶端腳本塊
客戶端 html 屬性
客戶端腳本塊通常是用 javascript 編寫的，其中通常包含在發(fā)生特定的客戶端事件時(shí)執(zhí)行的函數(shù)。客戶端 html 屬性提供將客戶端事件與客戶端腳本聯(lián)系在一起的方法。例如，以下的 html 頁面中包含了客戶端腳本塊，腳本塊中包含了名為 doclick() 的函數(shù)。該頁面同時(shí)還包含一個(gè)按鈕（通過 html 元素創(chuàng)建），這個(gè)按鈕的 onclick 屬性與 doclick() 函數(shù)綁定。也就是說，只要用戶單擊該按鈕，就開始執(zhí)行 doclick() 函數(shù)中的客戶端代碼。在本示例中，將顯示一個(gè)彈出式對(duì)話框（圖 1）。
圖 1 是單擊“click me!”按鈕時(shí) html 頁面的屏幕快照。
圖 1：?jiǎn)螕簟癱lick me!”按鈕時(shí)顯示的彈出式對(duì)話框
對(duì)于以上 html 頁面中的客戶端腳本，有幾點(diǎn)值得注意。首先，客戶端腳本塊包含在 html 注釋（）中。之所以這樣，是因?yàn)槿绻粚⒛_本塊放入 html 注釋中，那些不能識(shí)別腳本的舊式瀏覽器就會(huì)顯示
在這段代碼中， 標(biāo)記中的 onclick="displaypopup()" 用于指明在單擊按鈕時(shí)，javascript 函數(shù) displaypopup() 應(yīng)該運(yùn)行。
registerstartupscript() 方法可用于添加要在加載頁面后運(yùn)行的腳本塊。通過這種方法添加的腳本塊位于 web 窗體的結(jié)尾處，因?yàn)楸仨氃谀_本運(yùn)行前定義腳本要修改的 html 元素。也就是說，如果您要使用客戶端腳本將焦點(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)頁面中有多個(gè)控件時(shí)，只有第一個(gè)控件能夠注冊(cè)其腳本塊，因此只顯示一個(gè)彈出式對(duì)話框。通過在腳本塊關(guān)鍵字中使用 uniqueid，就能保證該控件的每個(gè)實(shí)例都能獲取其腳本塊。
在注冊(cè)腳本塊之前，代碼首先檢查三個(gè)條件：
沒有使用同一關(guān)鍵字注冊(cè)的腳本。這當(dāng)然是不可能的，因?yàn)槊總€(gè)控件實(shí)例都應(yīng)該有一個(gè) uniqueid 屬性值。但是，不妨先練習(xí)使用 isstartupscriptregistered() 方法，然后再花時(shí)間創(chuàng)建和注冊(cè)啟動(dòng)腳本。
控件的 enabled 屬性為 true。
頁面沒有被回傳。這段代碼只允許彈出式對(duì)話框在第一次加載頁面時(shí)顯示，而不是在每次回傳頁面時(shí)都顯示。我們還可以增添更為靈活的功能，即為該控件添加一個(gè)布爾屬性，以允許用戶指定是否在回傳時(shí)也生成彈出式對(duì)話框。
如果滿足這三個(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 窗體頁面
發(fā)送 asp.net 服務(wù)器 web 控件的 html 屬性
如上所述，有兩種方法可以通過服務(wù)器控件發(fā)送客戶端腳本：
通過使用客戶端腳本塊
通過 html 元素屬性
在上一節(jié)中，我們探討了如何使用 page 類的 registerstartupscript() 和 registerclientscriptblock() 方法向 asp.net web 頁面添加客戶端腳本塊。在最后這一節(jié)，我們了解如何將 html 元素屬性添加到服務(wù)器控件的 html 元素。
在開始之前，請(qǐng)注意這種方法通常只適用于從 system.web.ui.webcontrols.webcontrol 類導(dǎo)出的服務(wù)器控件，因?yàn)閺倪@個(gè)類導(dǎo)出的控件會(huì)發(fā)送某些 html 元素。不發(fā)送 html 元素的服務(wù)器控件（如上一節(jié)中的 popupgreeting 服務(wù)器控件），則不必寫出 html 元素屬性，因?yàn)檫@些控件運(yùn)行時(shí)不會(huì)寫出 html 元素。
webcontrol 類包含一個(gè)將 html 元素屬性添加到由 web 控件發(fā)出的 html 元素的方法。該方法稱為 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)用戶單擊此按鈕時(shí)，將顯示一個(gè)彈出式對(duì)話框，詢問用戶是否確定要繼續(xù)操作。用戶可以單擊“取消”，不提交窗體。此項(xiàng)功能對(duì)用于刪除信息的按鈕特別有用，因?yàn)樽罱K用戶（或網(wǎng)站管理員）可能會(huì)在無意中單擊鼠標(biāo)刪除數(shù)據(jù)庫中的條目，如果沒有機(jī)會(huì)取消，將是非常令人煩惱的事。
為了減少工作量，我們從 system.web.ui.webcontrols.button 類中導(dǎo)出 confirmbutton web 控件，因?yàn)檫@個(gè)類本身已完成了涉及呈現(xiàn)提交按鈕的所有繁重工作。在導(dǎo)出的類中，我們只需添加一個(gè)屬性，這樣用戶可以指定確認(rèn)消息，然后覆蓋按鈕的 addattributestorender() 方法，并添加一個(gè)屬性以處理客戶端事件 onclick。
首先，在 visual studio .net 中創(chuàng)建一個(gè)新的 web control library（web 控件庫）項(xiàng)目，或者在 clientsidecontrols 項(xiàng)目中添加一個(gè)新的 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 中是否存在該項(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 類是從 button 類導(dǎo)出的。由于 button 類已包含 button web 控件使用的所有屬性和方法，因此我們所做的只是添加屬性和方法，以在用戶單擊按鈕時(shí)顯示一個(gè)確認(rèn)對(duì)話框。現(xiàn)在我們需要一個(gè)屬性，即 popupmessage，它是要在確認(rèn)彈出式對(duì)話框中顯示的消息。默認(rèn)情況下，這條消息是“are you sure you want to continue?”（您確定要繼續(xù)嗎？）如果使用 confirmbutton 來確認(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í)行的客戶端 javascript，然后通過傳入的 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 編碼。也就是說，asp.net web 頁面中如果包含 popupmessage 屬性被設(shè)置為“do you want to continue?”（要繼續(xù)嗎？）的 confirmbutton，該頁面將發(fā)送以下 html 標(biāo)記：
如果您不熟悉 javascript 的 confirm(string) 函數(shù)，那么請(qǐng)您注意，該函數(shù)只接受一個(gè)字符串參數(shù)，并顯示一個(gè)帶有特定字符串的模式對(duì)話框。該對(duì)話框中包含兩個(gè)按鈕：“確定”和“取消”。如果單擊“確定”，confirm() 函數(shù)返回 true，否則返回 false。請(qǐng)注意，onclick 事件將返回 confirm() 函數(shù)調(diào)用的結(jié)果。當(dāng)通過單擊提交按鈕來提交表單時(shí)，如果提交按鈕的 onclick 事件返回 false，則表單未被提交。因此，只有在用戶確認(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() 方法的客戶端腳本塊中創(chuàng)建一個(gè)函數(shù)，然后調(diào)整 onclick 屬性以調(diào)用該函數(shù)。
小結(jié)
在本文中，我們探討了兩種通過 asp.net 服務(wù)器控件插入客戶端腳本的方法。第一種方法是使用 page 類的 registerstartupscript() 和 registerclientscriptblock() 方法插入客戶端腳本塊。第二種方法是向 html 元素的屬性添加客戶端腳本。后者通過覆蓋 web 服務(wù)器控件的 addattributestorender() 方法，并使用 htmltextwriter 的 addattribute() 方法來完成。
我們還在文中介紹了兩個(gè)簡(jiǎn)單的服務(wù)器控件，它們都利用了客戶端腳本來改進(jìn)其功能。popupgreeting 控件在頁面首次加載時(shí)顯示一個(gè)模式彈出式對(duì)話框，confirmbutton web 控件在用戶單擊按鈕提交表單時(shí)，提示用戶進(jìn)行確認(rèn)。
您可以在自己的服務(wù)器控件中插入客戶端腳本，這將顯著改善用戶體驗(yàn)。本文提供的兩個(gè)服務(wù)器控件相對(duì)比較簡(jiǎn)單，在可用性和獨(dú)創(chuàng)性上沒有什么突出之處。metabuilders.com 中展示了很多利用從 asp.net 服務(wù)器控件中插入客戶端腳本而實(shí)現(xiàn)的功能，這些功能會(huì)給您留下深刻印象。在 metabuilders.com，您可以找到一些服務(wù)器控件，它們有的可以自動(dòng)將焦點(diǎn)添加到文本框，有的可以在兩個(gè)下拉列表之間傳遞條目，有的可以向下拉列表中添加或刪除條目，還有的可以在一系列下拉列表中顯示父子關(guān)系的數(shù)據(jù)，等等。最大的好處是，這些控件是免費(fèi)的，并包括完整的源代碼。
