ASP.NET Framework包含三個(gè)用于向服務(wù)器端提交表單的控件：Button、LinkButton和ImageButton。這三個(gè)控件擁有同樣的功能，但每種控件的外觀界面不同。

本文就帶著大家學(xué)習(xí)如何在頁(yè)面中使用這三種控件。然后，學(xué)習(xí)如何關(guān)聯(lián)客戶(hù)端腳本和服務(wù)器端Button控件，以及如何使用Button控件把一個(gè)表單傳到不是當(dāng)前頁(yè)的頁(yè)面。最后，學(xué)習(xí)如何處理Button控件的Command事件。

一、使用Button控件

Button控件用來(lái)向服務(wù)器端提交表單的按鈕。例如，代碼清單1中的頁(yè)面包含一個(gè)Button控件。點(diǎn)擊這個(gè)Button控件，則更新由Label控件顯示的時(shí)間（見(jiàn)圖1）。

代碼清單1  ShowButton.aspx

圖1  顯示Button控件

Button控件支持下列屬性（不完全列表）：

·AccessKey——指定一個(gè)導(dǎo)向Button控件的鍵。
·CommandArgument——用于指定傳給Command事件的命令參數(shù)。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該Button控件。
·OnClientClick——指定點(diǎn)擊按鈕時(shí)執(zhí)行的客戶(hù)端腳本。
·PostBackUrl——用于設(shè)置將表單傳給某個(gè)頁(yè)面。
·TabIndex——設(shè)置Button控件的Tab順序。
·Text——用于標(biāo)注Button控件。
·UseSubmitBehavior——用于使用JavaScript回傳表單。

Button控件支持下面的方法：

·Focus()——用于把初始表單焦點(diǎn)設(shè)為該Button控件。

Button控件還支持下面兩個(gè)事件：

·Click——點(diǎn)擊Button控件時(shí)引發(fā)。
·Command——點(diǎn)擊Button控件時(shí)引發(fā)。CommandName和CommandArgument傳給這個(gè)事件。

二、使用LinkButton控件

LinkButton控件象Button控件一樣，用于把表單回傳給服務(wù)器端。但是，不像Button控件生成一個(gè)按鈕，LinkButton控件生成一個(gè)鏈接。

代碼清單2包含了一個(gè)簡(jiǎn)單的表單。這個(gè)表單包含一個(gè)LinkButton控件，用于向服務(wù)器端提交表單并顯示表單字段的內(nèi)容（見(jiàn)圖2）。

代碼清單2  ShowLinkButton.aspx

圖2 顯示LinkButton控件

在后臺(tái)，LinkButton控件使用JavaScript把表單傳回服務(wù)器端。LinkButton控件生成這樣的超鏈接：

點(diǎn)擊LinkButton調(diào)用把表單傳回服務(wù)器端的JavaScript _doPostBack()方法。當(dāng)提交表單時(shí)，所有表單字段的值也被傳回給服務(wù)器端。

LinkButton控件支持下列屬性（不完全列表）：

·AccessKey——指定一個(gè)導(dǎo)向LinkButton控件的鍵。
·CommandArgument——用于指定傳給Command事件的命令參數(shù)。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該LinkButton。
·OnClientClick——指定點(diǎn)擊LinkButton時(shí)執(zhí)行的客戶(hù)端腳本。
·PostBackUrl——用于設(shè)置將表單傳給某個(gè)頁(yè)面。
·TabIndex——設(shè)置LinkButton控件的Tab順序。
·Text——用于標(biāo)注LinkButton控件。

Button控件支持下面的方法：

·Focus()——用于把初始表單焦點(diǎn)設(shè)為該LinkButton控件。

Button控件還支持下面兩個(gè)事件：

·Click——點(diǎn)擊LinkButton控件時(shí)引發(fā)。
·Command——點(diǎn)擊LinkButton控件時(shí)引發(fā)。CommandName和CommandArgument傳給這個(gè)事件。

三、使用ImageButton控件

ImageButton控件類(lèi)似Button和LinkButton控件，用于把表單傳回服務(wù)器端。只是ImageButton控件總是顯示圖片。

代碼清單3 中的頁(yè)面包含一個(gè)ImageButton控件，它把一個(gè)簡(jiǎn)單的表單傳回服務(wù)器端（見(jiàn)圖3）。

代碼清單3  ShowImageButton.aspx

圖3顯示ImageButton控件

代碼清單3中的ImageButton控件包含ImageUrl屬性和AlternateText屬性。ImageUrl屬性包含ImageButton控件顯示的圖片的路徑。AlternateText屬性用于在只顯示文本的瀏覽器中提供圖片的替代文本。

注解：輔助功能標(biāo)準(zhǔn)要求每一幅圖片都包含替代文本。此外，要記住有些用戶(hù)會(huì)關(guān)閉瀏覽器的圖片功能，以獲得更快的網(wǎng)上沖浪體驗(yàn)。

注意，ImageButton控件的Click事件處理程序不同于其他兩個(gè)按鈕控件。傳遞給事件處理程序的第二個(gè)參數(shù)是ImageClickEventArgs類(lèi)的實(shí)例。此類(lèi)有下面兩個(gè)屬性：

X——用戶(hù)點(diǎn)擊圖片時(shí)的X坐標(biāo)。

Y——用戶(hù)點(diǎn)擊圖片時(shí)的Y坐標(biāo)。

可以使用ImageButton控件創(chuàng)建簡(jiǎn)單的圖像映射。代碼清單4中的頁(yè)面包含一個(gè)顯示一個(gè)靶子圖片的ImageButton控件。點(diǎn)擊靶子的中央，就會(huì)顯示一個(gè)成功信息（見(jiàn)圖4）。

代碼清單4  ImageButtonTarget.aspx

注解：ImageButton可以用來(lái)創(chuàng)建服務(wù)器端的圖像映射。殘障人士不能使用服務(wù)器端的圖像映射。創(chuàng)建ImageMap最好的方法是使用用于創(chuàng)建客戶(hù)端的圖像映射的ImageMap控件。本章下一節(jié)將討論ImageMap控件。

圖4通過(guò)ImageButton檢索X坐標(biāo)和Y坐標(biāo)

ImageButton控件支持下列屬性（不完全列表）：

·AccessKey——指定一個(gè)導(dǎo)向ImageButton控件的鍵。
·AlternateText——為圖片提供替代文本（輔助功能要求）。
·DescriptionUrl——用于提供指向包含該圖片詳細(xì)描述的頁(yè)面的鏈接（復(fù)雜的圖片要求可訪問(wèn)）。
·CommandArgument——用于指定傳給Command事件的命令參數(shù)。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該ImageButton。
·GenerateEmptyAlternateText——為AlternateText屬性設(shè)空字符串值。
·ImageAlign——用于將圖像和頁(yè)面中其他HTML元素對(duì)齊?？赡艿闹涤蠥bsBottom、AbsMiddle、Baseline、Bottom、Left、Middle、NotSet、Right、TextTop和Top。
·ImageUrl——用于指定圖片的URL。
·OnClientClick——指定點(diǎn)擊ImageButton時(shí)執(zhí)行的客戶(hù)端腳本。
·PostBackUrl——用于設(shè)置將表單傳給某個(gè)頁(yè)面。
·TabIndex——設(shè)置ImageButton控件的Tab順序。

ImageButton控件支持下面的方法：

·Focus()——用于把初始表單焦點(diǎn)設(shè)為該ImageButton控件。

ImageButton控件還支持下面兩個(gè)事件：

·Click——點(diǎn)擊ImageButton控件時(shí)引發(fā)。
·Command——點(diǎn)擊ImageButton控件時(shí)引發(fā)。CommandName和CommandArgument被傳給這個(gè)事件。

四、Button控件使用客戶(hù)端腳本

三種Button控件都支持OnClientClick屬性?？梢允褂么藢傩詠?lái)執(zhí)行點(diǎn)擊按鈕時(shí)所需的任何客戶(hù)端代碼。代碼清單5的頁(yè)面展示了如何使用OnClientClick屬性來(lái)顯示一個(gè)確認(rèn)對(duì)話(huà)框（見(jiàn)圖5）。

代碼清單5  ButtonOnClientClick.aspx

圖5顯示客戶(hù)端確認(rèn)對(duì)話(huà)框

代碼清單5中的Button控件包含一個(gè)OnClientClick屬性，在客戶(hù)端點(diǎn)擊該按鈕時(shí)，執(zhí)行JavaScript腳本。該腳本顯示一個(gè)確認(rèn)對(duì)話(huà)框。如果確認(rèn)對(duì)話(huà)框返回False，那么取消按鈕點(diǎn)擊事件，包含該按鈕的表單也不會(huì)傳回服務(wù)器端。

像大多數(shù)ASP.NET控件一樣，Button控件支持?jǐn)U展屬性，只需簡(jiǎn)單地為控件添加任意的屬性，就可以處理其他的客戶(hù)端事件。如果ASP.NET Framework不能識(shí)別控件上聲明的屬性，框架只會(huì)簡(jiǎn)單地把這個(gè)屬性傳給瀏覽器。

例如，代碼清單6中的頁(yè)面包含一個(gè)擁有onmouseover和onmouseout屬性的控鈕控件。把鼠標(biāo)懸停在按鈕上，按鈕上的文字就會(huì)改變。

代碼清單6  ButtonExpando.aspx

注解：在Visual Web Developer中，擴(kuò)展屬性下面會(huì)出現(xiàn)綠色波浪線警告，不過(guò)可以安全地忽視這個(gè)警告。

五、執(zhí)行跨頁(yè)面發(fā)送

默認(rèn)情況下，點(diǎn)擊一個(gè)按鈕控件，就會(huì)把包含這個(gè)控件的頁(yè)面提交回該頁(yè)面本身并重新加載相同頁(yè)面。不過(guò)，可以使用PostBackUrl屬性把表單數(shù)據(jù)提交到其他頁(yè)面。

例如，代碼清單7包含一個(gè)搜索表單。該頁(yè)中的按鈕把頁(yè)面提交到名叫ButtonSearchResult. aspx的另一個(gè)頁(yè)面。代碼清單8包含了ButtonSearchResult.aspx頁(yè)面。

代碼清單7  ButtonSearch.aspx

代碼清單8  ButtonSearchResults.aspx

在代碼清單8的Page_Load事件處理程序中，PreviousPage屬性用來(lái)得到前一個(gè)頁(yè)面的引用（代碼清單7中的ButtonSearch.aspx頁(yè)面）。其次，F(xiàn)indControl()方法用于從前頁(yè)面中獲取TextBox控件的txtSearch。最后，輸入在該TextBox中的值顯示在頁(yè)面中的Label中。

作為使用FindControl()方法從前頁(yè)面中獲取某個(gè)控件的替代方法，可以通過(guò)頁(yè)面屬性來(lái)暴露控件。代碼清單9中的頁(yè)面通過(guò)SearchString屬性暴露了TextBox txtSearch。這個(gè)頁(yè)面將表單數(shù)據(jù)發(fā)送到代碼清單10中的ButtonSearchResultTyped.aspx頁(yè)面。

代碼清單9  ButtonSearchTyped.aspx

代碼清單10  ButtonSearchResultTyped.aspx

注意，代碼清單10中的頁(yè)面包含一個(gè)<%@ PreviousPageType %>指令。這個(gè)指令把PreviousPage屬性返回的值轉(zhuǎn)換成ButtonSearchTyped類(lèi)的實(shí)例。如果沒(méi)有這個(gè)指令，PreviousPage屬性會(huì)把前頁(yè)面作為通用的Page類(lèi)的實(shí)例返回。

執(zhí)行跨頁(yè)面提交時(shí)，可以使用下面兩種方法中的任意一種方法。第一種方法提供從前頁(yè)面獲取值的弱類(lèi)型方法，第二種方法提供強(qiáng)類(lèi)型方法。

六、指定默認(rèn)按鈕

可以使用服務(wù)器端Form控件的DefaultButton屬性來(lái)指定表單的默認(rèn)按鈕。指定一個(gè)默認(rèn)按鈕，就可以按鍵盤(pán)上的回車(chē)鍵來(lái)調(diào)用這個(gè)按鈕。

例如，代碼清單11中的頁(yè)面包含一個(gè)簡(jiǎn)單的搜索表單。<form>標(biāo)簽設(shè)置頁(yè)面的默認(rèn)按鈕為Button控件的btnSearch。

代碼清單11  ButtonDefaultButton.aspx

打開(kāi)代碼清單11中的頁(yè)面，輸入搜索詞，敲擊鍵盤(pán)上的回車(chē)鍵，表單就會(huì)提交到服務(wù)器端。因?yàn)閎tnSearch按鈕是頁(yè)面的默認(rèn)按鈕，點(diǎn)擊鍵盤(pán)上的回車(chē)鍵就會(huì)執(zhí)行btnSearch_Click()事件處理程序。

注解：也可以為Panel控件指定默認(rèn)按鈕。Panel控件將在本章后面部分討論。

七、處理Command事件

三種Button控件都支持Click事件和Command事件。這兩個(gè)事件之間的不同之外在于可以傳遞一個(gè)命令名和一個(gè)命令參數(shù)給Command事件處理程序，而不能傳給Click事件處理程序。

例如，代碼清單12中的頁(yè)面包含兩個(gè)Button控件和一個(gè)BulletedList控件。點(diǎn)擊第一個(gè)按鈕，BulletedList控件顯示的項(xiàng)以正序排列；點(diǎn)擊第二個(gè)按鈕，BulletedList控件顯示的項(xiàng)以倒序排列（見(jiàn)圖6）。

兩個(gè)Button控件都包含CommandName和CommandArgument屬性。此外，兩個(gè)Button控件都同樣關(guān)聯(lián)Sort_Command()事件處理程序。該事件處理程序在決定BulletedList控件的元素將如何排序時(shí)檢查CommandName和CommandArgument屬性。 

代碼清單12  ButtonCommand.aspx

圖6處理Command事件

最新評(píng)論