第5章 Web表單程式設計模型 5-1 Web表單程式設計模型 5-2 ASP.NET的Page物件 5-3 ASP.NET執行Script的控制項 5-4 ASP.NET的輸出控制項 5-5 設定伺服端控制項的樣式 5-6 動態產生伺服端控制項 5-7 Visual Web Developer建立Web表單
5-1 Web表單程式設計模型 5-1-1 Web表單程式設計模型 5-1-2 隱藏程式碼模型
5-1-1 Web表單程式設計模型-說明 ASP.NET的Web表單可以建立跨平台和跨瀏覽程式Web應用程式的輸入介面，其使用的技術如同在VB、JBuilder等視覺化開發工具建立Windows應用程式的「GUI」（Graphics UserInterface）介面。 Web表單程式設計模型是一種事件驅動程式設計模型（Event-driven Programming Model），使用伺服端控制項建立Web表單的使用介面。當產生事件時，ASP.NET程式可以建立對應的事件處理程序來處理事件。
5-1-1 Web表單程式設計模型-架構 <%@ Page Language="VB" %> <!-- 事件處理程序 --> <script Runat="server"> Sub button1_Click(Sender As Object, E As Eventargs) label1.Text = "按下Button控制項<br>" End Sub </script> <!-- Web表單 --> <html> <head Runat="server"><title>Ch5-1-1.aspx</title></head> <body> <form Id="form1" Runat="server"> <asp:Button Id="button1" Text="按下按鈕" OnClick="button1_Click" Runat="Server"/><br> <asp:Label Id="label1" Runat="server"/> </form> </body> </html>
5-1-1 Web表單程式設計模型-架構說明 程式是第1章Visual Web Developer的Web Form範本程式架構，架構主要分成兩個部分，如下所示： 第一部分：<script>標籤的事件處理程序或函數。 第二部分：<form Runat="server">標籤建立Web表單，內含Form表單標籤和伺服端控制項（Server Controls）。
5-1-1 Web表單程式設計模型-Head標頭標籤 在ASP.NET 2.0版的<head>標籤，可以改為<head Runat="server">的HtmlHead控制項物件，如下所示： <head Runat="server"> …… </head> Head標頭標籤可以建立HtmlHead物件，我們可以使用ASP.NET程式來指定HtmlTitle物件的標題文字（即<title>標籤）和CSS樣式，如下所示： Page.Header.Title = "Ch5-1-1Head.aspx" 程式碼使用Title屬性指定頁面的標題文字。
5-1-1 Web表單程式設計模型-Form表單標籤 Web表單的伺服端控制項是置於<form Runat="server">的HTML控制項之間，它就是HtmlForm控制項物件，如下所示： <form Runat="server"> ……… </form> Web表單和HTML表單差異只在Runat屬性，此屬性將HTML表單轉換成ASP.NET的Web表單。
5-1-1 Web表單程式設計模型-伺服端控制項 Web表單是由伺服端控制項（Server Controls）組成，它是一種伺服端可程式化物件，用來建立ASP.NET程式的使用介面。 ASP.NET伺服端控制項的語法類似HTML標籤，可以設定控制項的屬性，主要分為兩種，如下所示： HTML控制項：對應System.Web.UI.HtmlControls名稱空間的物件，這些控制項直接對應HTML標籤，只是新增Id和Runat屬性，例如：前述的<head>和<form>標籤。 Web控制項：對應System.Web.UI.WebControls名稱空間的控制項物件，它是使用asp字頭的XML標籤，例如：Button、TextBox或RadioButton等。
5-1-1 Web表單程式設計模型-處理伺服端控制項的事件 Sub button1_Click(Sender As Object, _ E As Eventargs) label1.Text = "按下Button控制項<br>" End Sub
5-1-2 隱藏程式碼模型-說明 ASP.NET 2.0版支援隱藏程式碼模型（Code Behind Model），可以將事件處理程序獨立成類別檔案。 簡單的說，隱藏程式碼模型的ASP.NET程式是將第5-1-1節程式架構的兩大部分都獨立成檔案。
5-1-2 隱藏程式碼模型-ASP.NET程式 在ASP.NET程式本身只包含伺服端控制項的Web表單，Page指引指令可以指定事件處理程式所在的類別檔案，如下所示： <%@ Page Language="VB" CodeFile="Ch5_1_2.vb" Inherits="Ch5_1_2" %> Page指引指令Inherits屬性指定Partial類別名稱，CodeFile屬性指定類別檔案是在Ch5_1_2.vb。
5-1-2 隱藏程式碼模型-Partial類別 Ch5_1_2.vb類別架構如下所示： Imports Microsoft.VisualBasic Partial Class Ch5_1_2 Inherits System.Web.UI.Page Protected Sub button1_Click(ByVal Sender _ As Object, ByVal E As System.EventArgs) ……… End Sub End Class 類別檔案宣告Partial類別Ch5_1_2，它是繼承自Page類別，內含控制項的事件處理程序button1_Click()。
5-2 ASP.NET的Page物件-說明 ASP.NET的Web表單程式設計模型屬於事件驅動程式設計（類似VB或VB.NET），我們建立的每一頁ASP.NET程式，在編譯後就是建立一個System.Web.UI.Page物件，即Page物件。 事實上，ASP.NET程式除了Web表單控制項產生的事件外，當使用者請求ASP.NET程式，在載入和執行ASP.NET時，也會觸發一系列Page物件的事件。
5-2 ASP.NET的Page物件-事件 Page物件的常用事件，如下表所示：
5-3 ASP.NET執行Script的控制項 5-3-1 Button按鈕控制項 5-3-2 LinkButton控制項 5-3-3 ImageButton控制項
5-3-1 Button按鈕控制項-標籤 Button控制項是一個顯示按鈕外觀的控制項，它是最常用來執行Script程序或函數的控制項，按一下可以產生Click或Command事件，如下所示： <asp:Button Id="button1" Text="Command按鈕" CommandName="排序" CommandArgument="由小到大" OnCommand="Command_Click" Runat="server"/> <asp:Button Id="button2" Text="Button按鈕" OnClick="button2_Click" Runat="server"/>
5-3-1 Button按鈕控制項-屬性
5-3-1 Button按鈕控制項-事件 當按下Button控制項button1時，可以產生Command事件，它是傳遞命令名稱和參數到事件處理程序。 Web表單可以建立多個Button控制項，但只使用一個事件處理程序，程序使用命令名稱和參數來分辨出是按下哪一個按鈕，如下所示： Sub Command_Click(Sender As Object, _ CE As CommandEventArgs) show.Text = "按下Button控制項: " & _ CE.CommandName & "/" & _ CE.CommandArgument End Sub
5-3-2 LinkButton控制項 LinkButton控制項提供Button控制項的功能，只是顯示外觀是一個超連結文字，如下所示： <asp:LinkButton Id="button0" Text="LinkButton控制項“ OnClick="button0_Click“ Runat="server"/> 標籤建立名為button0的LinkButton控制項，其相關屬性與事件處理程序和Button控制項相同。
5-3-3 ImageButton控制項-標籤 ImageButton控制項的功能也和Button控制項相同，只是改為圖片來顯示按鈕，如下所示： <asp:ImageButton Id="button0" ImageUrl="back.gif" OnClick="button0_Click“ Runat="server"/> 標籤建立名為button0的ImageButton控制項。
5-3-3 ImageButton控制項-屬性 其相關屬性和Button控制項相似，只差Text屬性，但是多了繼承自Image類別的屬性，如下表所示：
5-3-3 ImageButton控制項-事件 ImageButton控制項的Click事件處理程序和Button控制項稍有不同，第2個參數是ImageClickEventArgs，而不是Eventargs，如下所示： Sub button0_Click(Sender As Object, _ ICE As ImageClickEventArgs) show.Text = _ "按下ImageButton控制項<br>" End Sub
5-4 ASP.NET的輸出控制項 5-4-1 Label標籤控制項 5-4-2 Panel控制項 5-4-3 GenericControl控制項 5-4-4 Image圖片控制項 5-4-5 表格控制項 5-4-6 清單控制項
5-4-1 Label標籤控制項 Label標籤控制項是ASP.NET主要的輸出控制項，可以在網頁定義一塊顯示區域來輸出所需的內容，轉換成HTML標籤就是<span>標籤，如下所示： <asp:Label Id="label1" Runat="server"> <p>ASP.NET伺服端控制項提供輸出資料的控制項， 其HTML控制項，可以顯示圖片、表格和清單網頁元素。</p> </asp:Label> <asp:Label Id="label2" Runat="server"/>
5-4-2 Panel控制項 Panel控制項如同是一個容器，它的功能類似HTML標籤的<div>，主要的目的是群組其他控制項，以便建立一塊網頁的輸出區域，來靈活控制網頁內容的顯示樣式，或切換顯示，如下所示： <asp:Panel id="panel" BackColor="Yellow" ForeColor="Blue" Runat="server"> <asp:Label id="label" Runat="server"> ……… </asp:Label> <asp:Button Id="button1" Text="更改內容" OnClick="changeText" Runat="server"/> </asp:Panel>
5-4-3 GenericControl控制項 HTML控制項<div>和<span>是HtmlGenericControl物件，它也是一種輸出控制項，可以在<div>和<span>控制項顯示其他事件處理產生的執行結果，如下所示： <div Id="show1" Runat="server"/> <span Id="show2" Runat="server"/> <div>和<span>標籤是HTML控制項。在建立好HTML控制項後，就可以在事件處理程序指定標籤內容，也就是控制項的值，如下所示： show1.innerText = "顯示innerText的內容" show2.innerHTML="<b>顯示innerHTML的內容</b>"
5-4-4 Image圖片控制項-標籤 伺服端HTML控制項的HtmlImage和Web控制項的Image都可以在網頁上顯示圖片。首先是HtmlImage控制項，如下所示： <img Id="image1" Src="email1.gif" Runat="server"/> 標籤建立名為image1的HtmlImage控制項。如果使用Image控制項，如下所示： <asp:Image Id="image0“ ImageUrl="back1.gif" AlternateText="返回1“
5-4-4 Image圖片控制項-屬性
5-4-5 表格控制項-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>
5-4-5 表格控制項-Table、TableRow和TableCell控制項 Table、TableRow和TableCell控制項是Web控制項，可以對應HTML表格標籤的<table>、<tr>和<td>。表格Web控制項標籤，如下所示： <asp:Table Id="newtable" Border="2" Runat="server"> <asp:TableRow Runat="server"> <asp:TableCell Runat="server"> </asp:TableCell> ………………… </asp:TableRow> …………………… </asp:Table>
5-4-6 清單控制項-標籤 BulletedList控制項可以建立符號字元或數字開頭的清單項目，每一個項目是一個ListItem控制項，可以是文字、LinkButton或超連結項目，如下所示： <asp:BulletedList Id="bl1" BulletStyle="Circle" Runat="server"> <asp:ListItem Text="ASP.NET"/> <asp:ListItem Text="PHP"/> <asp:ListItem Text="JSP"/> </asp:BulletedList>
5-4-6 清單控制項-屬性1 BulletedList控制項相關屬性說明，如下表所示：
5-4-6 清單控制項-屬性2 ListItem控制項的相關屬性，如下表所示：
5-4-6 清單控制項-事件 BulletedList控制項的模式如果是LinkButton，我們可以使用OnClick屬性指定事件處理程序，如下所示： Sub bl3_Click(Sender As Object, _ BLE As BulletedListEventArgs) If BLE.Index = 0 Then label.Text = "按下LinkButton1" End If If BLE.Index = 1 Then label.Text = "按下LinkButton2" End Sub
5-5 設定伺服端控制項的樣式 5-5-1 在控制項套用CSS 5-5-2 伺服端的樣式屬性
5-5-1 在控制項套用CSS-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>
5-5-1 在控制項套用CSS-HTML控制項套用CSS 在HTML控制項可以使用Class屬性套用CSS樣式名稱，如下所示： <span Class="spanStyle" Runat="server"> 在HTML控制項套用CSS</span><br> <button Id="button2" Class="buttonStyle" Runat="server">第二個按鈕</button> <span>標籤使用Class屬性套用spanStyle樣式名稱，HtmlButton控制項是套用buttonStyle樣式名稱。
5-5-1 在控制項套用CSS-Web控制項套用CSS 在Web控制項是使用CSSClass屬性來套用CSS樣式名稱，如下所示： <asp:Button Id="button3“ Text="第三個按鈕“ CSSClass="button1Style“ Runat="server"/> Button控制項使用CSSClass屬性套用button1Style樣式名稱。
5-5-2 伺服端的樣式屬性-使用 例如：在Label控制項指定樣式屬性，如下所示： <asp:Label Id="label1" Font-Size="11pt" BackColor="#CC9999" Runat="server"> <p>ASP.NET伺服端控制項提供輸出資料的控制項， 其HTML控制項，可以顯示圖片、表格和清單網頁元素。</p> </asp:Label> Label控制項指定Font-Size和BackColor屬性。
5-5-2 伺服端的樣式屬性-屬性1
5-5-2 伺服端的樣式屬性-屬性2
5-6 動態產生伺服端控制項-建立控制項物件 伺服端控制項本身是一種物件，所以我們可以使用程式碼建立控制項物件，如下所示： Dim label1 As New Label Dim label2 As New Label Dim button0 As New Button 程式碼建立名為label1和label2的Label控制項物件，和名為button0的Button控制項物件，使用New關鍵字，以控制項名稱的型態來建立控制項物件。
5-6 動態產生伺服端控制項-新增至Page物件 在建立好控制項物件之後，我們可以將它新增至Page物件，或是後面的PlaceHolder控制項。首先是新增至Page物件，如下所示： Page.Controls.Add(label1) 程式碼使用Add()方法將控制項新增至Page物件的Controls集合物件，其位置是新增至Page物件控制項的最後。
5-6 動態產生伺服端控制項-新增至PlaceHolder控制項 控制項如果是新增至Page物件，它就是置於最後，如果想在Web表單的指定位置新增控制項，可以使用PlaceHolder控制項，如下所示： <asp:PlaceHolder Id="place0" Runat="server"/><p> <asp:PlaceHolder Id="place1" Runat="server"/> 標籤可以建立2個PlaceHolder控制項，如此，就可以將控制項新增至PlaceHolder的Controls集合物件，如下所示： place1.Controls.Add(label2) place0.Controls.Add(button0)
5-6 動態產生伺服端控制項-新增控制項的事件處理 對於擁有事件處理的控制項來說，例如：Button控制項，我們一樣可以使用程式碼指定控制項事件的事件處理程式，如下所示： AddHandler button0.Click, Addressof button0_Click 程式碼使用AddHandler關鍵字新增控制項的事件處理，在「,」號前新增Button控制項button0的Click事件，之後Addressof指定事件處理程序名稱為button0.Click()的程序。
5-7 Visual Web Developer建立Web表單 Visual Web Developer提供視覺化方式來建立Web表單，在建立Web表單的ASP.NET程式後，我們就可以在Web表單新增控制項。 在Web表單新增控制項 設定控制項的屬性 新增控制項的事件處理程序