ASP.NET Framework包含三個(gè)用于向服務(wù)器端提交表單的控件:Button、LinkButton和ImageButton。這三個(gè)控件擁有同樣的功能,但每種控件的外觀界面不同。
本文就帶著大家學(xué)習(xí)如何在頁(yè)面中使用這三種控件。然后,學(xué)習(xí)如何關(guān)聯(lián)客戶端腳本和服務(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
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Button id="btnSubmit" Text="Submit" OnClick="btnSubmit_Click" Runat="server" /> br />br />
asp:Label id="lblTime" Runat="server" />
/div>
/form>

圖1 顯示Button控件
Button控件支持下列屬性(不完全列表):
·AccessKey——指定一個(gè)導(dǎo)向Button控件的鍵。
·CommandArgument——用于指定傳給Command事件的命令參數(shù)。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該Button控件。
·OnClientClick——指定點(diǎn)擊按鈕時(shí)執(zhí)行的客戶端腳本。
·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
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Label id="lblFirstName" Text="First Name:" AssociatedControlID="txtFirstName" Runat="server" /> br />
asp:TextBox id="txtFirstName" Runat="server" />br />br />
asp:Label id="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" Runat="server" />br />
asp:TextBox id="txtLastName" Runat="server" />br />br />
asp:LinkButton id="lnkSubmit" Text="Submit" OnClick="lnkSubmit_Click" Runat="server" />br />br />
asp:Label id="lblResults" Runat="server" />
/div>
/form>

圖2 顯示LinkButton控件
在后臺(tái),LinkButton控件使用JavaScript把表單傳回服務(wù)器端。LinkButton控件生成這樣的超鏈接:
復(fù)制代碼 代碼如下:
a id="lnkSubmit" href="javascript:__doPostBack('lnkSubmit','')">Submit/a>
點(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í)行的客戶端腳本。
·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控件類似Button和LinkButton控件,用于把表單傳回服務(wù)器端。只是ImageButton控件總是顯示圖片。
代碼清單3 中的頁(yè)面包含一個(gè)ImageButton控件,它把一個(gè)簡(jiǎn)單的表單傳回服務(wù)器端(見(jiàn)圖3)。
代碼清單3 ShowImageButton.aspx
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Label id="lblFirstName" Text="First Name:" AssociatedControlID="txtFirstName" Runat="server" />br />
asp:TextBox id="txtFirstName" Runat="server" />br />br />
asp:Label id="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" Runat="server" />br />
asp:TextBox id="txtLastName" Runat="server" />br />br />
asp:ImageButton id="btnSubmit" ImageUrl="Submit.gif" AlternateText="Submit Form" Runat="server" OnClick="btnSubmit_Click" />br />br />
asp:Label id="lblResults" Runat="server" />
/div>
/form>

圖3顯示ImageButton控件
代碼清單3中的ImageButton控件包含ImageUrl屬性和AlternateText屬性。ImageUrl屬性包含ImageButton控件顯示的圖片的路徑。AlternateText屬性用于在只顯示文本的瀏覽器中提供圖片的替代文本。
注解:輔助功能標(biāo)準(zhǔn)要求每一幅圖片都包含替代文本。此外,要記住有些用戶會(huì)關(guān)閉瀏覽器的圖片功能,以獲得更快的網(wǎng)上沖浪體驗(yàn)。
注意,ImageButton控件的Click事件處理程序不同于其他兩個(gè)按鈕控件。傳遞給事件處理程序的第二個(gè)參數(shù)是ImageClickEventArgs類的實(shí)例。此類有下面兩個(gè)屬性:
X——用戶點(diǎn)擊圖片時(shí)的X坐標(biāo)。
Y——用戶點(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
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:ImageButton id="btnTarget" ImageUrl="Target.gif" Runat="server" OnClick="btnTarget_Click" />br />br />
asp:Label id="lblResult" Runat="server" />
/div>
/form>
注解:ImageButton可以用來(lái)創(chuàng)建服務(wù)器端的圖像映射。殘障人士不能使用服務(wù)器端的圖像映射。創(chuàng)建ImageMap最好的方法是使用用于創(chuàng)建客戶端的圖像映射的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í)行的客戶端腳本。
·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控件使用客戶端腳本
三種Button控件都支持OnClientClick屬性。可以使用此屬性來(lái)執(zhí)行點(diǎn)擊按鈕時(shí)所需的任何客戶端代碼。代碼清單5的頁(yè)面展示了如何使用OnClientClick屬性來(lái)顯示一個(gè)確認(rèn)對(duì)話框(見(jiàn)圖5)。
代碼清單5 ButtonOnClientClick.aspx
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Button id="btnDelete" Text="Delete Website" OnClick="btnDelete_Click" OnClientClick="return confirm('Are you sure?');" Runat="server" />br />br />
asp:Label id="lblResult" Runat="server" />
/div>
/form>

圖5顯示客戶端確認(rèn)對(duì)話框
代碼清單5中的Button控件包含一個(gè)OnClientClick屬性,在客戶端點(diǎn)擊該按鈕時(shí),執(zhí)行JavaScript腳本。該腳本顯示一個(gè)確認(rèn)對(duì)話框。如果確認(rèn)對(duì)話框返回False,那么取消按鈕點(diǎn)擊事件,包含該按鈕的表單也不會(huì)傳回服務(wù)器端。
像大多數(shù)ASP.NET控件一樣,Button控件支持?jǐn)U展屬性,只需簡(jiǎn)單地為控件添加任意的屬性,就可以處理其他的客戶端事件。如果ASP.NET Framework不能識(shí)別控件上聲明的屬性,框架只會(huì)簡(jiǎn)單地把這個(gè)屬性傳給瀏覽器。
例如,代碼清單6中的頁(yè)面包含一個(gè)擁有onmouseover和onmouseout屬性的控鈕控件。把鼠標(biāo)懸停在按鈕上,按鈕上的文字就會(huì)改變。
代碼清單6 ButtonExpando.aspx
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Button id="btnSubmit" Text="Submit" onmouseover="this.value='Click Here!'" onmouseout="this.value='Submit'" Runat="server" />
/div>
/form>
注解:在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
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Label id="lblSearch" Text="Search:" Runat="server" />
asp:TextBox id="txtSearch" Runat="server" />
asp:Button id="btnSearch" Text="Go!" PostBackUrl="ButtonSearchResults.aspx" Runat="server" />
/div>
/form>
代碼清單8 ButtonSearchResults.aspx
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Label id="lblSearch" Runat="server" />
/div>
/form>
在代碼清單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
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Label id="lblSearch" Text="Search:" Runat="server" />
asp:TextBox id="txtSearch" Runat="server" />
asp:Button id="btnSearch" Text="Go!" PostBackUrl="ButtonSearchResultsTyped.aspx" Runat="server" />
/div>
/form>
代碼清單10 ButtonSearchResultTyped.aspx
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Label id="lblSearch" Runat="server" />
/div>
/form>
注意,代碼清單10中的頁(yè)面包含一個(gè)%@ PreviousPageType %>指令。這個(gè)指令把PreviousPage屬性返回的值轉(zhuǎn)換成ButtonSearchTyped類的實(shí)例。如果沒(méi)有這個(gè)指令,PreviousPage屬性會(huì)把前頁(yè)面作為通用的Page類的實(shí)例返回。
執(zhí)行跨頁(yè)面提交時(shí),可以使用下面兩種方法中的任意一種方法。第一種方法提供從前頁(yè)面獲取值的弱類型方法,第二種方法提供強(qiáng)類型方法。
六、指定默認(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
復(fù)制代碼 代碼如下:
form id="form1" defaultbutton="btnSearch" runat="server">
div>
asp:Label id="lblSearch" Text="Search:" AssociatedControlID="txtSearch" Runat="server" />
asp:TextBox id="txtSearch" Runat="server" />
asp:Button id="btnSearch" Text="Search" OnClick="btnSearch_Click" Runat="server" />
asp:Button id="btnCancel" Text="Cancel" Runat="server" /> hr />
asp:Label id="lblResult" Runat="server" />
/div>
/form>
打開(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
復(fù)制代碼 代碼如下:
form id="form1" runat="server">
div>
asp:Button id="btnSortAsc" Text="Sort ASC" CommandName="Sort" CommandArgument="ASC" OnCommand="Sort_Command" Runat="server" />
asp:Button id="btnSortDESC" Text="Sort DESC" CommandName="Sort" CommandArgument="DESC" OnCommand="Sort_Command" Runat="server" />br />br />
asp:BulletedList id="bltGroceries" Runat="server" />
/div>
/form>

圖6處理Command事件
您可能感興趣的文章:- asp.net下linkbutton的前后臺(tái)使用方法
- asp.net button 綁定多個(gè)參數(shù)
- 關(guān)于asp.net button按鈕的OnClick和OnClientClick事件
- js觸發(fā)asp.net的Button的Onclick事件應(yīng)用
- 在ASP.NET 2.0中操作數(shù)據(jù)之二十三:基于用戶對(duì)修改數(shù)據(jù)進(jìn)行限制
- 在ASP.NET 2.0中操作數(shù)據(jù)之二十四:分頁(yè)和排序報(bào)表數(shù)據(jù)
- 在ASP.NET 2.0中操作數(shù)據(jù)之二十五:大數(shù)據(jù)量時(shí)提高分頁(yè)的效率
- 在ASP.NET 2.0中操作數(shù)據(jù)之二十六:排序自定義分頁(yè)數(shù)據(jù)
- 在ASP.NET 2.0中操作數(shù)據(jù)之二十七:創(chuàng)建自定義排序用戶界面
- 在ASP.NET 2.0中操作數(shù)據(jù)之二十八:GridView里的Button