ASP.NET 中 Button、LinkButton和ImageButton 三種控件的使用詳解

更新時(shí)間：2016年04月20日 11:46:56 作者：dodream

本文主要介紹Button、LinkButton和ImageButton 三種控件的使用方法，并一一舉例演示它們的用法，希望對(duì)大家有所幫助。

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í)間（見圖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)容（見圖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ù)器端（見圖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è)成功信息（見圖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ù)雜的圖片要求可訪問）。
·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ì)話框（見圖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í)例。如果沒有這個(gè)指令，PreviousPage屬性會(huì)把前頁(yè)面作為通用的Page類的實(shí)例返回。

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

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

可以使用服務(wù)器端Form控件的DefaultButton屬性來(lái)指定表單的默認(rèn)按鈕。指定一個(gè)默認(rèn)按鈕，就可以按鍵盤上的回車鍵來(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>

打開代碼清單11中的頁(yè)面，輸入搜索詞，敲擊鍵盤上的回車鍵，表單就會(huì)提交到服務(wù)器端。因?yàn)閎tnSearch按鈕是頁(yè)面的默認(rèn)按鈕，點(diǎn)擊鍵盤上的回車鍵就會(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)以倒序排列（見圖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>