2.3 提交表單數據
ASP.NET Framework包含三個用於向服務器端提交表單的控件：Button、LinkButton和ImageButton。這三個控件擁有同樣的功能，但每種控件的外觀截然不同。
本節學習如何在頁面中使用這三種控件。然後，學習如何關聯客戶端腳本和服務器端Button控件，以及如何使用Button控件把一個表單傳到不是當前頁的頁面。最後，學習如何處理Button控件的Command事件。
2.3.1 使用Button控件
Button控件呈現用來向服務器端提交表單的按鈕。例如，代碼清單2-14中的頁面包含一個Button控件。點擊這個Button控件，則更新由Label控件顯示的時間（見圖2-10）。
代碼清單2-14 ShowButton.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Show Button</title>
</head>
<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>
圖2-10 顯示Button控件
Button控件支持下列屬性（不完全列表）：
q AccessKey——指定一個導向Button控件的鍵。
q CommandArgument——用於指定傳給Command事件的命令參數。
q CommandName——指定傳給Command事件的命令名。
q Enable——用於禁用該Button控件。
q OnClientClick——指定點擊按鈕時執行的客戶端腳本。
q PostBackUrl——用於設置將表單傳給某個頁面。
q TabIndex——設置Button控件的Tab順序。
q Text——用於標註Button控件。
q UseSubmitBehavior——用於使用JavaScript回傳表單。
Button控件支持下面的方法：
q Focus()——用於把初始表單焦點設爲該Button控件。
Button控件還支持下面兩個事件：
q Click——點擊Button控件時引發。
q Command——點擊Button控件時引發。CommandName和CommandArgument傳給這個事件。
2.3.2 使用LinkButton控件
LinkButton控件像Button控件一樣，用於把表單回傳給服務器端。但是，不像Button控件生成一個按鈕，LinkButton控件生成一個鏈接。
代碼清單2-15包含了一個簡單的表單。這個表單包含一個LinkButton控件，用於向服務器端提交表單並顯示錶單字段的內容（見圖2-11）。
代碼清單2-15 ShowLinkButton.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Show LinkButton</title>
</head>
<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-11 顯示LinkButton控件
在後臺，LinkButton控件使用JavaScript把表單傳回服務器端。LinkButton控件生成這樣的超鏈接：
<a id="lnkSubmit" href="javascript:__doPostBack('lnkSubmit','')">Submit</a>
點擊LinkButton調用把表單傳回服務器端的JavaScript _doPostBack()方法。當提交表單時，所有表單字段的值也被傳回給服務器端。
LinkButton控件支持下列屬性（不完全列表）：
q AccessKey——指定一個導向LinkButton控件的鍵。
q CommandArgument——用於指定傳給Command事件的命令參數。
q CommandName——指定傳給Command事件的命令名。
q Enable——用於禁用該LinkButton。
q OnClientClick——指定點擊LinkButton時執行的客戶端腳本。
q PostBackUrl——用於設置將表單傳給某個頁面。
q TabIndex——設置LinkButton控件的Tab順序。
q Text——用於標註LinkButton控件。
Button控件支持下面的方法：
q Focus()——用於把初始表單焦點設爲該LinkButton控件。
Button控件還支持下面兩個事件：
q Click——點擊LinkButton控件時引發。
q Command——點擊LinkButton控件時引發。CommandName和CommandArgument傳給這個事件。
2.3.3 使用ImageButton控件
ImageButton控件類似Button和LinkButton控件，用於把表單傳回服務器端。只是ImageButton控件總是顯示圖片。
代碼清單2-16中的頁面包含一個ImageButton控件，它把一個簡單的表單傳回服務器端（見圖2-12）。
代碼清單2-16 ShowImageButton.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Show ImageButton</title>
</head>
<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>
圖2-12 顯示ImageButton控件
代碼清單2-16中的ImageButton控件包含ImageUrl屬性和AlternateText屬性。ImageUrl屬性包含ImageButton控件顯示的圖片的路徑。AlternateText屬性用於在只顯示文本的瀏覽器中提供圖片的替代文本。
準註解
Web標 輔助功能標準要求每一幅圖片都包含替代文本。此外，要記住有些用戶會關閉瀏覽器的圖片功能，以獲得更快的網上衝浪體驗。
注意，ImageButton控件的Click事件處理程序不同於其他兩個按鈕控件。傳遞給事件處理程序的第二個參數是ImageClickEventArgs類的實例。此類有下面兩個屬性：
X——用戶點擊圖片時的X座標。
Y——用戶點擊圖片時的Y座標。
可以使用ImageButton控件創建簡單的圖像映射。代碼清單2-17中的頁面包含一個顯示一個靶子圖片的ImageButton控件。點擊靶子的中央，就會顯示一個成功信息（見圖2-13）。
代碼清單2-17 ImageButtonTarget.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>ImageButton Target</title>
</head>
<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>
準註解
Web標 ImageButton可以用來創建服務器端的圖像映射。殘障人士不能使用服務器端的圖像映射。創建ImageMap最好的方法是使用用於創建客戶端的圖像映射的ImageMap控件。本章下一節將討論ImageMap控件。
圖2-13 通過ImageButton檢索X座標和Y座標
ImageButton控件支持下列屬性（不完全列表）：
q AccessKey——指定一個導向ImageButton控件的鍵。
q AlternateText——爲圖片提供替代文本（輔助功能要求）。
q DescriptionUrl——用於提供指向包含該圖片詳細描述的頁面的鏈接（複雜的圖片要求可訪問）。
q CommandArgument——用於指定傳給Command事件的命令參數。
q CommandName——指定傳給Command事件的命令名。
q Enable——用於禁用該ImageButton。
q GenerateEmptyAlternateText——爲AlternateText屬性設空字符串值。
q ImageAlign——用於將圖像和頁面中其他HTML元素對齊。可能的值有AbsBottom、AbsMiddle、Baseline、Bottom、Left、Middle、NotSet、Right、TextTop和Top。
q ImageUrl——用於指定圖片的URL。
q OnClientClick——指定點擊ImageButton時執行的客戶端腳本。
q PostBackUrl——用於設置將表單傳給某個頁面。
q TabIndex——設置ImageButton控件的Tab順序。
ImageButton控件支持下面的方法：
q Focus()——用於把初始表單焦點設爲該ImageButton控件。
ImageButton控件還支持下面兩個事件：
q Click——點擊ImageButton控件時引發。
q Command——點擊ImageButton控件時引發。CommandName和CommandArgument被傳給這個事件。
2.3.4 Button控件使用客戶端腳本
三種Button控件都支持OnClientClick屬性。可以使用此屬性來執行點擊按鈕時所需的任何客戶端代碼。代碼清單2-18中的頁面展示瞭如何使用OnClientClick屬性來顯示一個確認對話框（見圖2-14）。
代碼清單2-18 ButtonOnClientClick.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button OnClientClick</title>
</head>
<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>
圖2-14 顯示客戶端確認對話框
代碼清單2-18中的Button控件包含一個OnClientClick屬性，在客戶端點擊該按鈕時，執行JavaScript腳本。該腳本顯示一個確認對話框。如果確認對話框返回False，那麼取消按鈕點擊事件，包含該按鈕的表單也不會傳回服務器端。
像大多數ASP.NET控件一樣，Button控件支持擴展屬性，只需簡單地爲控件添加任意的屬性，就可以處理其他的客戶端事件。如果ASP.NET Framework不能識別控件上聲明的屬性，框架只會簡單地把這個屬性傳給瀏覽器。
例如，代碼清單2-19中的頁面包含一個擁有onmouseover和onmouseout屬性的控鈕控件。把鼠標懸停在按鈕上，按鈕上的文字就會改變。
代碼清單2-19 ButtonExpando.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Expando</title>
</head>
<form id="form1" runat="server">
<div>
<asp:Button
id="btnSubmit"
Text="Submit"
οnmοuseοver="this.value='Click Here!'"
οnmοuseοut="this.value='Submit'"
Runat="server" />
</div>
</form>
註解 在Visual Web Developer中，擴展屬性下面會出現綠色波浪線警告，不過可以安全地忽視這個警告。
2.3.5 執行跨頁面發送
默認情況下，點擊一個按鈕控件，就會把包含這個控件的頁面提交回該頁面本身並重新加載相同頁面。不過，可以使用PostBackUrl屬性把表單數據提交到其他頁面。
例如，代碼清單2-20包含一個搜索表單。該頁中的按鈕把頁面提交到名叫ButtonSearchResult. aspx的另一個頁面。代碼清單2-21包含了ButtonSearchResult.aspx頁面。
代碼清單2-20 ButtonSearch.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Search</title>
</head>
<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>
代碼清單2-21 ButtonSearchResults.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Search Results</title>
</head>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblSearch"
Runat="server" />
</div>
</form>
在代碼清單2-21的Page_Load事件處理程序中，PreviousPage屬性用來得到前一個頁面的引用（代碼清單2-20中的ButtonSearch.aspx頁面）。其次，FindControl()方法用於從前頁面中獲取TextBox控件的txtSearch。最後，輸入在該TextBox中的值顯示在頁面中的Label中。
作爲使用FindControl()方法從前頁面中獲取某個控件的替代方法，可以通過頁面屬性來暴露控件。代碼清單2-22中的頁面通過SearchString屬性暴露了TextBox txtSearch。這個頁面將表單數據發送到代碼清單2-23中的ButtonSearchResultTyped.aspx頁面。
代碼清單2-22 ButtonSearchTyped.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Search Typed</title>
</head>
<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>
代碼清單2-23 ButtonSearchResultTyped.aspx
<%@ Page Language="C#" %>
<%@ PreviousPageType VirtualPath="~/ButtonSearchTyped.aspx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Search Results Typed</title>
</head>
<form id="form1" runat="server">
<div>
<asp:Label
id="lblSearch"
Runat="server" />
</div>
</form>
注意，代碼清單2-23中的頁面包含一個<%@ PreviousPageType %>指令。這個指令把PreviousPage屬性返回的值轉換成ButtonSearchTyped類的實例。如果沒有這個指令，PreviousPage屬性會把前頁面作爲通用的Page類的實例返回。
執行跨頁面提交時，可以使用下面兩種方法中的任意一種方法。第一種方法提供從前頁面獲取值的弱類型方法，第二種方法提供強類型方法。
2.3.6 指定默認按鈕
可以使用服務器端Form控件的DefaultButton屬性來指定表單的默認按鈕。指定一個默認按鈕，就可以按鍵盤上的回車鍵來調用這個按鈕。
例如，代碼清單2-24中的頁面包含一個簡單的搜索表單。<form>標籤設置頁面的默認按鈕爲Button控件的btnSearch。
代碼清單2-24 ButtonDefaultButton.aspx
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Default Button</title>
</head>
<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>
打開代碼清單2-24中的頁面，輸入搜索詞，敲擊鍵盤上的回車鍵，表單就會提交到服務器端。因爲btnSearch按鈕是頁面的默認按鈕，點擊鍵盤上的回車鍵就會執行btnSearch_Click()事件處理程序。
註解 也可以爲Panel控件指定默認按鈕。Panel控件將在本章後面部分討論。
2.3.7 處理Command事件
三種Button控件都支持Click事件和Command事件。這兩個事件之間的不同之外在於可以傳遞一個命令名和一個命令參數給Command事件處理程序，而不能傳給Click事件處理程序。
例如，代碼清單2-25中的頁面包含兩個Button控件和一個BulletedList控件。點擊第一個按鈕，BulletedList控件顯示的項以正序排列；點擊第二個按鈕，BulletedList控件顯示的項以倒序排列（見圖2-15）。
兩個Button控件都包含CommandName和CommandArgument屬性。此外，兩個Button控件都同樣關聯Sort_Command()事件處理程序。該事件處理程序在決定BulletedList控件的元素將如何排序時檢查CommandName和CommandArgument屬性。
代碼清單2-25 ButtonCommand.aspx
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head id="Head1" runat="server">
<title>Button Command</title>
</head>
<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>
圖2-15 處理Command事件
本文來自CSDN博客，轉載請標明出處：http://blog.csdn.net/wyaspnet/archive/2009/07/28/4386032.aspx