ASP.NET 中 Button、LinkButton和ImageButton 三種控制項的使用詳解_基礎應用

ASP.NET Framework包含三個用於向伺服器端提交表單的控制項：Button、LinkButton和ImageButton。這三個控制項擁有同樣的功能，但每種控制項的外觀介面不同。

本文就帶著大家學習如何在頁面中使用這三種控制項。然後，學習如何關聯用戶端指令碼和伺服器端Button控制項，以及如何使用Button控制項把一個表單傳到不是當前頁的頁面。最後，學習如何處理Button控制項的Command事件。

一、使用Button控制項

Button控制項用來向伺服器端提交表單的按鈕。例如，代碼清單1中的頁麵包含一個Button控制項。點擊這個Button控制項，則更新由Label控制項顯示的時間（見圖1）。

代碼清單1  ShowButton.aspx

複製代碼 代碼如下:

<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——指定一個導向Button控制項的鍵。
·CommandArgument——用於指定傳給Command事件的命令參數。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該Button控制項。
·OnClientClick——指定點擊按鈕時執行的用戶端指令碼。
·PostBackUrl——用於設定將表單傳給某個頁面。
·TabIndex——設定Button控制項的Tab順序。
·Text——用於標註Button控制項。
·UseSubmitBehavior——用於使用JavaScript回傳表單。

Button控制項支援下面的方法：

·Focus()——用於把初始表單焦點設為該Button控制項。

Button控制項還支援下面兩個事件：

·Click——點擊Button控制項時引發。
·Command——點擊Button控制項時引發。CommandName和CommandArgument傳給這個事件。

二、使用LinkButton控制項

LinkButton控制項象Button控制項一樣，用於把表單回傳給伺服器端。但是，不像Button控制項產生一個按鈕，LinkButton控制項產生一個連結。

代碼清單2包含了一個簡單的表單。這個表單包含一個LinkButton控制項，用於向伺服器端提交表單並顯示表單欄位的內容（見圖2）。

代碼清單2  ShowLinkButton.aspx

複製代碼 代碼如下:

<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控制項

在後台，LinkButton控制項使用JavaScript把表單傳回伺服器端。LinkButton控制項產生這樣的超連結：

複製代碼 代碼如下:

<a id="lnkSubmit" href="javascript:__doPostBack('lnkSubmit','')">Submit</a>

點擊LinkButton調用把表單傳回伺服器端的JavaScript _doPostBack()方法。當提交表單時，所有表單欄位的值也被傳回給伺服器端。

LinkButton控制項支援下列屬性（不完全列表）：

·AccessKey——指定一個導向LinkButton控制項的鍵。
·CommandArgument——用於指定傳給Command事件的命令參數。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該LinkButton。
·OnClientClick——指定點擊LinkButton時執行的用戶端指令碼。
·PostBackUrl——用於設定將表單傳給某個頁面。
·TabIndex——設定LinkButton控制項的Tab順序。
·Text——用於標註LinkButton控制項。

Button控制項支援下面的方法：

·Focus()——用於把初始表單焦點設為該LinkButton控制項。

Button控制項還支援下面兩個事件：

·Click——點擊LinkButton控制項時引發。
·Command——點擊LinkButton控制項時引發。CommandName和CommandArgument傳給這個事件。

三、使用ImageButton控制項

ImageButton控制項類似Button和LinkButton控制項，用於把表單傳回伺服器端。只是ImageButton控制項總是顯示圖片。

代碼清單3 中的頁麵包含一個ImageButton控制項，它把一個簡單的表單傳回伺服器端（見圖3）。

代碼清單3  ShowImageButton.aspx

複製代碼 代碼如下:

<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屬性用於在只顯示文本的瀏覽器中提供圖片的替代文本。

註解：協助工具功能標準要求每一幅圖片都包含替代文本。此外，要記住有些使用者會關閉瀏覽器的圖片功能，以獲得更快的網上衝浪體驗。

注意，ImageButton控制項的Click事件處理常式不同於其他兩個按鈕控制項。傳遞給事件處理常式的第二個參數是ImageClickEventArgs類的執行個體。此類有下面兩個屬性：

X——使用者點擊圖片時的X座標。

Y——使用者點擊圖片時的Y座標。

可以使用ImageButton控制項建立簡單的影像地圖。代碼清單4中的頁麵包含一個顯示一個靶子圖片的ImageButton控制項。點擊靶子的中央，就會顯示一個成功資訊（見圖4）。

代碼清單4  ImageButtonTarget.aspx

複製代碼 代碼如下:

<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可以用來建立伺服器端的影像地圖。殘障人士不能使用伺服器端的影像地圖。建立ImageMap最好的方法是使用用於建立用戶端的影像地圖的ImageMap控制項。本章下一節將討論ImageMap控制項。

圖4通過ImageButton檢索X座標和Y座標

ImageButton控制項支援下列屬性（不完全列表）：

·AccessKey——指定一個導向ImageButton控制項的鍵。
·AlternateText——為圖片提供替代文本（協助工具功能要求）。
·DescriptionUrl——用於提供指向包含該圖片詳細描述的頁面的連結（複雜的圖片要求可訪問）。
·CommandArgument——用於指定傳給Command事件的命令參數。
·CommandName——指定傳給Command事件的命令名。
·Enable——用于禁用該ImageButton。
·GenerateEmptyAlternateText——為AlternateText屬性設Null 字元串值。
·ImageAlign——用於將映像和頁面中其他HTML元素對齊。可能的值有AbsBottom、AbsMiddle、Baseline、Bottom、Left、Middle、NotSet、Right、TextTop和Top。
·ImageUrl——用於指定圖片的URL。
·OnClientClick——指定點擊ImageButton時執行的用戶端指令碼。
·PostBackUrl——用於設定將表單傳給某個頁面。
·TabIndex——設定ImageButton控制項的Tab順序。

ImageButton控制項支援下面的方法：

·Focus()——用於把初始表單焦點設為該ImageButton控制項。

ImageButton控制項還支援下面兩個事件：

·Click——點擊ImageButton控制項時引發。
·Command——點擊ImageButton控制項時引發。CommandName和CommandArgument被傳給這個事件。

四、Button控制項使用用戶端指令碼

三種Button控制項都支援OnClientClick屬性。可以使用此屬性來執行點擊按鈕時所需的任何用戶端代碼。代碼清單5的頁面展示了如何使用OnClientClick屬性來顯示一個確認對話方塊（見圖5）。

代碼清單5  ButtonOnClientClick.aspx

複製代碼 代碼如下:

<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顯示用戶端確認對話方塊

代碼清單5中的Button控制項包含一個OnClientClick屬性，在用戶端點擊該按鈕時，執行JavaScript指令碼。該指令碼顯示一個確認對話方塊。如果確認對話方塊返回False，那麼取消按鈕點擊事件，包含該按鈕的表單也不會傳回伺服器端。

像大多數ASP.NET控制項一樣，Button控制項支援擴充屬性，只需簡單地為控制項添加任意的屬性，就可以處理其他的用戶端事件。如果ASP.NET Framework不能識別控制項上聲明的屬性，架構只會簡單地把這個屬性傳給瀏覽器。

例如，代碼清單6中的頁麵包含一個擁有onmouseover和onmouseout屬性的控鈕控制項。把滑鼠移至上方在按鈕上，按鈕上的文字就會改變。

代碼清單6  ButtonExpando.aspx

複製代碼 代碼如下:

<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中，擴充屬性下面會出現綠色波浪線警告，不過可以安全地忽視這個警告。

五、執行跨網頁公佈

預設情況下，點擊一個按鈕控制項，就會把包含這個控制項的頁面提交回該頁面本身並重新載入相同頁面。不過，可以使用PostBackUrl屬性把表單資料提交到其他頁面。

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

代碼清單7  ButtonSearch.aspx

複製代碼 代碼如下:

<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

複製代碼 代碼如下:

<form id="form1" runat="server">
<div>
    <asp:Label id="lblSearch" Runat="server" />
</div>
</form>

在代碼清單8的Page_Load事件處理常式中，PreviousPage屬性用來得到前一個頁面的引用（代碼清單7中的ButtonSearch.aspx頁面）。其次，FindControl()方法用於從前頁面中擷取TextBox控制項的txtSearch。最後，輸入在該TextBox中的值顯示在頁面中的Label中。

作為使用FindControl()方法從前頁面中擷取某個控制項的替代方法，可以通過頁面屬性來暴露控制項。代碼清單9中的頁面通過SearchString屬性暴露了TextBox txtSearch。這個頁面將表單資料發送到代碼清單10中的ButtonSearchResultTyped.aspx頁面。

代碼清單9  ButtonSearchTyped.aspx

複製代碼 代碼如下:

<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

複製代碼 代碼如下:

<form id="form1" runat="server">
<div>
    <asp:Label id="lblSearch" Runat="server" />
</div>
</form>

注意，代碼清單10中的頁麵包含一個<%@ PreviousPageType %>指令。這個指令把PreviousPage屬性返回的值轉換成ButtonSearchTyped類的執行個體。如果沒有這個指令，PreviousPage屬性會把前頁面作為通用的Page類的執行個體返回。

執行跨頁面提交時，可以使用下面兩種方法中的任意一種方法。第一種方法提供從前頁面擷取值的弱類型方法，第二種方法提供強型別方法。

六、指定預設按鈕

可以使用伺服器端Form控制項的DefaultButton屬性來指定表單的預設按鈕。指定一個預設按鈕，就可以按鍵盤上的斷行符號鍵來調用這個按鈕。

例如，代碼清單11中的頁麵包含一個簡單的搜尋表單。<form>標籤設定頁面的預設按鈕為Button控制項的btnSearch。

代碼清單11  ButtonDefaultButton.aspx

複製代碼 代碼如下:

<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中的頁面，輸入搜尋字詞，敲擊鍵盤上的斷行符號鍵，表單就會提交到伺服器端。因為btnSearch按鈕是頁面的預設按鈕，點擊鍵盤上的斷行符號鍵就會執行btnSearch_Click()事件處理常式。

註解：也可以為Panel控制項指定預設按鈕。Panel控制項將在本章後面部分討論。

七、處理Command事件

三種Button控制項都支援Click事件和Command事件。這兩個事件之間的不同之外在於可以傳遞一個命令名和一個命令參數給Command事件處理常式，而不能傳給Click事件處理常式。

例如，代碼清單12中的頁麵包含兩個Button控制項和一個BulletedList控制項。點擊第一個按鈕，BulletedList控制項顯示的項以正序排列；點擊第二個按鈕，BulletedList控制項顯示的項以倒序排列（見圖6）。

兩個Button控制項都包含CommandName和CommandArgument屬性。此外，兩個Button控制項都同樣關聯Sort_Command()事件處理常式。該事件處理常式在決定BulletedList控制項的元素將如何排序時檢查CommandName和CommandArgument屬性。 

代碼清單12  ButtonCommand.aspx

複製代碼 代碼如下:

<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事件