第 6 章 Web 表單的處理• 6-1 ASP.NET的Web 表單• 6-2 Web 表單欄位 - HTML 控制項• 6-3 Web 表單欄位 - Web 控制項• 6-4 再談伺服端控制項

6-1 ASP.NET的Web 表單• 6-1-1 HTML 表單與 Web 表單• 6-1-2 ASP.NET的Web 表單• 6-1-3 ASP.NET的 Page 與控制項

事件

6-1-1 HTML 表單與 Web 表單 -1

• ASP的 HTML 表單處理

6-1-1 HTML 表單與 Web 表單 -2

• ASP.NET的Web 表單處理

6-1-2 ASP.NET的Web 表單 -在 ASP.NET 取得使用者資料

• Web 表單的主要目的是讓使用者輸入資料，在ASP.NET 一共有三種方法取得使用者輸入的資料，如下所示：– 使用 .htm的 HTML 表單網頁，將欄位資料送給伺服端的 ASP.NET 程式。

– 使用 .aspx的 ASP.NET 建立的 Web 表單，將資料送給伺服端其它的 ASP.NET 程式。

– 使用 .aspx的 ASP.NET 建立的 Web 表單，將資料送給伺服端同一個 ASP.NET 程式，換句話說，這個 ASP.NET程式除了擁有 Web 表單外，也包含處理表單資料的程式碼。

6-1-2 ASP.NET的Web 表單 - Web 表單的 Form 控制項

• Web 表單的控制項是置於 <form runat="Server">的 HTML控制項之間，它是一個 HtmlForm 控制項物件，如下所示：<form runat="Server"> ………</form>

• 上述 runat 屬性，這個屬性將 HTML 表單轉換成 ASP.NET的Web 表單， <form runat="Server"> 控制項屬性，如下所示：– method 屬性：控制項值的送出方式，預設是 POST 方法，如果需

要使用 Web 表單預設的顯示狀態管理，值只可以是 POST或GET。

– action 屬性：指定處理 Web 表單控制項資料的 ASP.NET 程式，預設是自已，如果是其它的 ASP.NET 程式，就是其 URL 網址。

6-1-3 ASP.NET的 Page 與控制項事件

• 每當使用者請求 ASP.NET 程式的 Web 表單，或是「表單送回」（ Postback ）即將表單欄位資料送回伺服端，在產生回應的網頁內容時會觸發一系列 Page 物件的事件， Page 物件的主要事件，如下表所示：

事件名稱 說明

Init 初始物件和變數

Load 載入控制項物件，初始控制項屬性

PreReder 在建立控制項前，執行最後的控制項更新

6-2 Web 表單欄位 - HTML 控制項

• 6-2-1 HTML 控制項的基礎• 6-2-2 文字與密碼方塊• 6-2-3 文字區域• 6-2-4 核取方塊• 6-2-5 下拉式清單方塊• 6-2-6 選擇鈕• 6-2-7 隱藏欄位和影像按鈕

6-2-1 HTML 控制項的基礎• HTML 控制項是對應 System.Web.UI.HtmlControls 名稱

空間的物件，這些控制項都對應到 HTML 標籤，如下所示：<input type="TEXT" id="Name" size ="20" runat="Server">

• 上述標籤和 HTML 標籤並沒有什麼不同，其差異只在新增的 runat和 id 兩個屬性，如下表所示：

屬性 說明

runat 屬性值一定是 Server，表示標籤是伺服端控制項，不再是 HTML標籤

id 屬性值是控制項的名稱，伺服端控制項一定需要指定此屬性，而且在整

個 Page物件中名稱需要唯一

6-2-2 文字與密碼方塊• 文字方塊是表單欄位使用最頻繁的欄位，因為它可

以直接傳遞使用者輸入的資料，例如：姓名、地址、電話等資料。密碼欄位只是輸入的字串以星號取代，在使用上和文字方塊並沒有什麼不同，如下所示：<input type="TEXT" id="Name" size ="20" runat="Server">

• 上述標籤建立名為 Name的 HtmlInputText 控制項，如果 type 屬性為 PASSWORD 就是密碼欄位。取得控制項值是使用 Value 屬性，如下所示：Name.Value

6-2-3 文字區域• 文字區域和文字方塊都是讓使用者輸入資料，

不過文字區域允許輸入一整篇文字內容，特別適用在地址、描述或備註的文字內容，如下所示：<textarea id="Address" rows=5 cols=20 runat="Server"/>

• 上述標籤建立名為 Address的 HtmlTextArea控制項。取得控制項值也是使用 Value 屬性，如下所示：Address.Value

6-2-4 核取方塊• 核取方塊是 Web 表單的開關，可以讓使用者選擇是否開啟

功能或設定某些參數，核取方塊控制項允許複選，如下所示：<input type="CHECKBOX" id="Tel" CHECKED runat="Server">使用電話

<br><input type="CHECKBOX" id="Email" runat="Server">使用電子郵件 <br><input type="CHECKBOX" id="Fax" runat="Server">使用傳真 <br>

• 上述標籤建立三個名為 Tel、 Email和 Fax的HtmlInputCheckBox 控制項。控制項是否選取是使用Checked 屬性，如下所示：If Tel.Checked Then str &= "使用電話來確認 <br>"End If

• 上述程式碼的 Checked 屬性值為 True ，表示使用者選取核取方塊。

6-2-5 下拉式清單方塊• 下拉式清單方塊和選擇鈕欄位的功能十分相似，只是

顯示的方式不同，我們需要指定 value 屬性，因為傳送到伺服器的就是此屬性值，如下所示：<select id="Ship" runat="Server"> <option value="Mail" selected>郵寄 </option> <option value="UPS">UPS</option> <option value="Self">自取 </option></select>

• 上述標籤建立名為 Ship 的下拉式清單方塊，擁有三個選項，其值分別為 Mail、UPS和 Self的HtmlSelect 控制項。控制項值是使用 Value 屬性取得，如下所示：show.innerText = Ship.Value

6-2-6 選擇鈕• 選擇鈕一樣是選擇題，只是顯示的介面不同，目的都是讓

使用者選擇選項，如下所示：<input type="RADIO" id="Card" name="Payment" value="信用卡 " CHECKED runat="Server">信用卡<input type="RADIO" id="Tele" name="Payment" value="劃撥 " runat="Server">劃撥<input type="RADIO" id="Cash" name="Payment" value="到貨付款 " runat="Server">到貨付款 <br>

• 上述標籤建立三個名為 Card、 Tele和 Cash的HtmlInputRadioButton 控制項，屬於同一組選擇鈕。控制項是否選取是使用 Checked 屬性，如下所示：If Card.Checked Then show.innerHTML = Card.Value & "<br>"End If

6-2-7 隱藏欄位和影像按鈕• 隱藏欄位並不會在表單網頁顯示出來，它可以直接傳送指定

的值，即 value 屬性，而不用使用者輸入資料，在 ASP.NET程式常常用來傳遞 Web 應用程式所需的參數，例如：訂單號碼，如下所示：<input type="HIDDEN" id="Order" value="A0001" runat="Server">

• 上述標籤建立名為 Order的HtmlInputHidden 控制項， value屬性是傳遞值。取得控制項值也是使用 Value 屬性。

• 影像按鈕和 HtmlInputButton 按鈕擁有相同的功能，如下所示<input type=image id="ImageButton" src="sample.jpg" OnServerClick="Button1_Click" runat="Server">

• 上述標籤建立名為 ImageButton的HtmlInputImage 影像按鈕控制項， src 屬性指定圖片的 URL 網址，使用 OnServerClick屬性指定事件處理程序。

6-3 Web 表單欄位 - Web 控制項

• 6-3-1 Web 控制項的基礎• 6-3-2 Label 標籤與 TextBox 文字控制項• 6-3-3 CheckBox 核取方塊控制項• 6-3-4 RadioButton 選擇鈕控制項• 6-3-5 DropDownList 下拉式選單控制項• 6-3-6 ListBox 清單方塊控制項• 6-3-7 CheckBoxList 核取方塊清單控制項• 6-3-8 RadioButtonList 選擇鈕清單控制項• 6-3-9 LinkButton與 ImageButton 按鈕控制

項

6-3-1 Web 控制項的基礎• Web 控制項是一組比 HTML 控制項提供更多內建

功能的控制項，它不僅提供建立網頁表單的元素，還包括資料顯示的控制項，它是一組和 HTML 標籤完全無關的控制項，其語法是使用 XML 標籤的寫法，如下所示：<asp:TextBox id="name" Width="200px" runat="Server"/>

• 上述 Web 控制項使用 asp 字頭的 XML 標籤，是對應 System.Web.UI.WebControns 名稱空間的控制項物件，「 : 」號後是控制項種類， id 屬性為控制項名稱， runat 屬性，指明是在伺服端處理。

6-3-2 Label 標籤與 TextBox 文字控制項

• Label 標籤控制項的目的是在網頁顯示文字內容，轉換成 HTML 標籤是 <span> 標籤，如下所示：<asp:Label id="Lname" Width="200px" BorderStyle="solid"

BorderColor="#ccccff" runat="Server"/>

• TextBox 文字控制項是 HTML 標籤的文字方塊和文字區域，如下所示：<asp:TextBox id="name" runat="Server"/>

<asp:TextBox id="pass" TextMode="Password" runat="Server"/>

<asp:TextBox id="address" TextMode="Multiline" Rows="3"

runat="Server"/>

6-3-3 CheckBox 核取方塊控制項

• CheckBox 核取方塊控制項是一個複選題，可以建立一組切換開關，如下所示：<asp:CheckBox id="Tel" Text="使用電話 " runat="Server"/>’

• CheckBox 控制項的處理和 HtmlInputCheckBox控制項相同，只需使用 If 條件檢查 Checked 屬性，就可以知道是否勾選核取方塊，如下所示：If Tel.Checked Then

str &= " 使用電話來確認 <br>"

End If

6-3-4 RadioButton 選擇鈕控制項

• RadioButton 選擇鈕控制項是一個單選題，提供一組選項，只可以選擇其中之一，如下所示：<asp:RadioButton id="Tele" Text="劃撥 " GroupName="Payment" runat="server"/>

• RadioButton 控制項和 HtmlInputRadioButton 控制項相同，只需使用 If ElseIf 多條件檢查 Checked 屬性，就可以知道使用者是否選取，如下所示：If Card.Checked Then show.Text = Card.Text & "<br>"Else If Tele.Checked Then show.Text = Tele.Text & "<br>"Else If Cash.Checked Then show.Text = Cash.Text & "<br>"End If

6-3-5 DropDownList 下拉式選單控制項

• DropDownList 下拉式選單控制項是一個單選題，相當於單選的 HtmlSelect 控制項，如下所示：<asp:DropDownList id="Ship" Width="100px" runat="Server">

<asp:ListItem Text="郵寄 " Value="Mail"/>

<asp:ListItem Text="快遞 " Value="UPS"/>

<asp:ListItem Text=" 自取 " Value="Self"/>

</asp:DropDownList>

• 使用 Text和 Value 屬性取得選項名稱和值，如下所示：Ship.SelectedItem.Text

Ship.SelectedItem.Value

6-3-6 ListBox 清單方塊控制項 -1

• ListBox 清單方塊控制項可以設定單選或複選，其顯示方式如同複選的 HtmlSelect 控制項，如下所示<asp:ListBox id="Gift" SelectionMode="Multiple" runat="Server"> <asp:ListItem Text="滑鼠 " Value="1" Selected="True"/> <asp:ListItem Text="鍵盤 " Value="2"/> <asp:ListItem Text="喇叭 " Value="3"/> <asp:ListItem Text="麥克風 " Value="4"/></asp:ListBox>

6-3-6 ListBox 清單方塊控制項 -2

• 單選的 ListBox 控制項，其取得選取選項的方式和 DropDownList 控制項相同，以此例為複選，需要使用 For迴路取得使用者選取的選項，如下所示：For i = 0 to Gift.Items.Count-1

If Gift.Items(i).Selected Then

str = str & Gift.Items(i).Text & "<br>"

End If

Next

6-3-7 CheckBoxList 核取方塊清單控制項

• CheckBoxList 核取方塊清單控制項是一組 CheckBox控制項，這是一個複選的控制項，提供屬性可以輕鬆編排多個 CheckBox 控制項，如下所示：<asp:CheckBoxList id="Gift" runat="Server">

<asp:ListItem Text="滑鼠 " Value="1" Selected="True"/>

<asp:ListItem Text="鍵盤 " Value="2"/>

<asp:ListItem Text="喇叭 " Value="3"/>

<asp:ListItem Text="麥克風 " Value="4"/>

</asp:CheckBoxList>

• CheckBoxList 控制項取得選項方式和複選的 ListBox控制項相同。

6-3-8 RadioButtonList 選擇鈕清單控制項

• RadioButtonList 選擇鈕清單控制項是一組 RadioButton控制項，這是一個單選的控制項，提供屬性可以輕鬆編排多個 RadioButton 控制項，如下所示：<asp:RadioButtonList id="Payment" runat="Server">

<asp:ListItem Text="信用卡 " Value="1" Selected="True"/>

<asp:ListItem Text="劃撥 " Value="2"/>

<asp:ListItem Text="喇叭 " Value="3"/>

<asp:ListItem Text=" 到貨付款 " Value="4"/>

</asp:RadioButtonList>

• RadioButtonList 控制項取得選項方式和 DropDownList控制項相同。

6-3-9 LinkButton與ImageButton 按鈕控制項 -1

• Button 按鈕控制項– Button 按鈕控制項就是 HtmlButton和

HtmlInputButton 控制項，如下所示：<asp:Button id="Button0" Text=" 按一下 " OnClick="button_Click"

runat="Server"/>

<asp:Button id="Button" Text=" 按一下 "

CommandName="排序 "

CommandArgument="由小到大 "

OnCommand="Command_Click" runat="server"/>

6-3-9 LinkButton與ImageButton 按鈕控制項 -2

• LinkButton 控制項– LinkButton 控制項的功能是 Button 控制項，但是顯示外觀是超連結，如下所示：

<asp:LinkButton id="Button1" Text=" 按一下 " OnClick="button1_Click"

runat="Server"/>

– 上述標籤建立名為 Button1的 LinkButton 控制項，其相關屬性與事件和 Button 控制項相同。

6-3-9 LinkButton與ImageButton 按鈕控制項 -3

• ImageButton 控制項– ImageButton 控制項的功能也是一個 Button

控制項，只是以圖片顯示按鈕，如下所示：<asp:ImageButton id="Button2" ImageUrl="sample.jpg"

OnClick="button2_Click" runat="Server"/>

6-4 再談伺服端控制項• 6-4-1 超連結控制項• 6-4-2 圖片控制項• 6-4-3 表格控制項• 6-4-4 在控制項套用 CSS

6-4-1 超連結控制項• Web 表單伺服端 HTML 控制項的 HtmlAnchor和Web 控制項的 HyperLink 都可以建立超連結。首先是 HtmlAnchor 控制項，如下所示：<a id="Link1" runat="Server"></a>

• 上述標籤建立名為 Link1的 HtmlAnchor 控制項。如果使用 Web 控制項，如下所示：<asp:HyperLink id="Link2" Text=" 數位聯合 "

runat="Server"/>

6-4-2 圖片控制項• Web 表單伺服端 HTML 控制項的 HtmlImage和Web 控制項的 Image 都可以在網頁上顯示圖片。首先是 HtmlImage 控制項，如下所示：<img id="Digit1" src="0.gif" runat="Server"/>

• 上述標籤建立名為 Digit1的 HtmlImage 控制項。如果使用 Web 控制項，如下所示：<asp:Image id="Digit" ImageUrl="0.gif" AlternateText=" 數字 0"

runat="Server"/>

6-4-3 表格控制項 -HtmlTable、 HtmlTableRow和

HtmlTableCell 控制項• HtmlTable、 HtmlTableRow和 HtmlTableCell 控制

項– HtmlTable、 HtmlTableRow和 HtmlTableCell 控制項是

HTML 控制項，對應 HTML 表格標籤的 <table>、 <tr>和 <td> ，只是加上 id和 runat 屬性，如下所示：

<table id="NewTable" Border="2" runat="Server"> <tr id="row1" runat="Server"> <td id="column1" runat="Server"> </td> <td id="column2" runat="Server"> </td> ………………… </tr> ……………………</table>

6-4-3 表格控制項 -HtmlTable、 HtmlTableRow和

HtmlTableCell 控制項• VB.NET 程式碼處理表格，例如：新增表格的列和儲存格，其程式碼如下所示：Dim objRow As HtmlTableRow = New HtmlTableRow()Dim objCell As HtmlTableCell = New HtmlTableCell()objCell.Controls.Add(New LiteralControl("……"))objRow.Cells.Add(objCell)NewTable.Rows.Add(objRow)

• 上述程式碼建立 HtmlTableRow和HtmlTableCell 物件，然後使用 Add 方法新增 objCell 物件的內容，這是 LiteralControl 物件的文字內容，其參數是文字內容的字串，將 objCell 新增到 objRow ，最後將objRow 新增到 HtmlTable 物件 NewTable。

6-4-3 表格控制項 -Table、 TableRow和 TableCell

控制項• Table、 TableRow和 TableCell 控制項是 Web 控

制項，對應 HTML 表格標籤的 <table>、 <tr> 和<td> ，表格Web 控制項標籤，如下所示：<asp:Table id="NewTable" border="2" runat="Server">

<asp:TableRow>

<asp:TableCell> </asp:TableCell>

<asp:TableCell> </asp:TableCell>

…………………

</asp:TableRow>

……………………

</asp:Table>

6-4-3 表格控制項 -Table、 TableRow和 TableCell

控制項• VB.NET 程式碼處理表格，例如：新增表格的

列和儲存格，其程式碼如下所示：Dim objRow As TableRow = New TableRow()

Dim objCell As TableCell = New TableCell()

objCell.Controls.Add(New LiteralControl("………"))

objRow.Cells.Add(objCell)

NewTable.Rows.Add(objRow)

• 上述程式碼和前面的 HTML 控制項相同，只是改為 TableRow和 TableCell 物件。

6-4-4 在控制項套用 CSS-Classes

• Web 表單的伺服端控制項在轉換輸出到瀏覽程式，顯示的仍然是HTML 標籤，一樣可以使用 CSS美化控制項的顯示，首先定義 CSS 樣式名稱的 Classes ，如下所示：

<style>.spanStyle { font: 12pt 細明體 ; font-weight:500; color:orange; }.buttonStyle { font: 18pt 標楷體 ; background-color:lightgreen; border-color:black; width:150 }.button1Style{ font: 14pt 新細明體 ; background-color:yellow; border-style:dashed; border-color:red; width:100; } </style>

6-4-4 在控制項套用 CSS- HTML 控制項套用 CSS

• 在HTML 控制項可以使用 class 屬性套用樣式名稱，如下所示：<span class="spanStyle" runat="server">在HTML 控制項套用 CSS</span>

<button id="Button2" class="buttonStyle" runat="Server">

第二個按鈕 </button>

• 如果使用局部套用樣式，請在 style 屬性指定，如下所示：<button id="Button1"

style="font: 12pt 細明體 ;color:red;background-color:lightblue;

border-color:green;height=40;width:200"

onmouseover="this.style.backgroundColor='yellow'"

onmouseout="this.style.backgroundColor='lightblue'"

runat="Server">移到我這裡 -使用CSS</button>

6-4-4 在控制項套用 CSS-Web控制項套用 CSS

• 在Web 控制項可以使用 CSSClass 屬性套用樣式名稱，如下所示：<asp:Button id="Button4" Text=" 第四個按鈕 " CSSClass="button1Style"

runat="Server"/>

• 如果使用局部套用樣式，也是在 Style 屬性指定，如下所示：<asp:Label id="Laddress" Width="300px" BorderStyle="solid"

BorderColor="#ccccff" Text="在Web 控制項套用 CSS"

Style="font: 16pt 細明體 ;font-weight:700;color:red"

runat="Server"/>

<asp:Button id="Button3" Text=" 第三個按鈕 "

Style="background-color:lightblue;color:purple" runat="Server"/>