ASP.NET如何使用Button、LinkButton和ImageButton控件

ASP.NET如何使用Button、LinkButton和ImageButton控件，很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細講解，有這方面需求的人可以來學習下，希望你能有所收獲。

一、使用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屬性設空字符串值。
·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事件

看完上述內容是否對您有幫助呢？如果還想對相關知識有進一步的了解或閱讀更多相關文章，請關注億速云行業資訊頻道，感謝您對億速云的支持。