第六章伺服器控制項（一）

第六章伺服器控制項（一） 在本章中，我們介紹工具箱／標準頁籤中的常用控制項，並且探討ASP.NET如何利用Postback完成網頁的事件驅動模型。至於較為複雜的伺服器控制項，則留待下一章中介紹。

大綱 • 6.1 控制項簡介 • 6.1.1 Web伺服器控制項的種類 • 6.1.2 Web伺服器控制項的共通屬性 • 6.2 文字輸出控制項 • 6.2.1 Label控制項 • 6.2.2 Literal控制項 • 6.3 HiddenField隱藏資訊控制項 • 6.4 文字輸入控制項 • 6.4.1 TextBox控制項 • 6.4.2 讀取網頁與PostBack • 6.4.3 AutoPostBack屬性 • 6.5 傳送控制項 • 6.5.1 Button控制項 • 6.5.2 ImageButton控制項 • 6.5.3 LinkButton控制項

大綱 • 6.6 選擇控制項 • 6.6.1 CheckBox多選控制項 • 6.6.2 CheckBoxList多選清單控制項 • 6.6.3 RadioButton選項按鈕（單選）控制項 • 6.6.4 RadioButtonList選項按鈕（單選）清單控制項 • 6.6.5 ListBox控制項 • 6.6.6 DropDownList控制項 • 6.7 多控制項的管理 • 6.7.1 控制項順序與快速切換 • 6.7.2 容器與Panel面板控制項 • 6.8 本章回顧

第六章伺服器控制項（一） • 在本章中，我們將介紹常用的Web伺服器控制項，並介紹何謂PostBack，以及如何應用面板(Panel)來管理眾多控制項。

6.1 控制項簡介 • VWD的工具箱中提供的元件稱之為控制項(Control)，其完整名稱為伺服器控制項(server control)，伺服器控制項在原始碼中，同樣以標籤型式出現，但伺服器端的編譯器能夠理解並處理這些標籤。 • 除了自訂的控制項之外，ASP.NET提供的伺服器控制項可以分為兩大類： • 1.HTML伺服器控制項(HTML Server Controls)： • HTML伺服器控制項是由HTML標籤衍生而來，您可以先在工具箱的HTML頁籤中選取HTML元件，這些HTML元件都是由簡單的HTML標籤所構成 • 當您在網頁中加入了HTML元件後，只需要在原始碼頁籤中，將其標籤加上runat=“server”屬性即可（若無ID或id屬性，則也必須補上，例如Image：HTML伺服器控制項）。 • 如下範例：

6.1 控制項簡介

6.1 控制項簡介 • 經由加入runat=“server”屬性的動作後，該HTML元件已經變成了HTML伺服器控制項 • 換句話說，它可以被伺服器處理，因此，我們可以在撰寫程式時使用它，而代表該控制項的名稱則為其標籤的id屬性值「Text1」。 • 例如我們可以在Page_Load程序中，加入下列敘述，使得「HTML伺服器控制項：文字方塊」的內容初始為「請輸入文字」。 Protected Sub Page_Load(sender As Object, e As System.EventArgs) Text1.Value = "請輸入文字" '並非使用Text屬性 End Sub

6.1 控制項簡介 • 執行後就成為上圖結果，您可以注意到，我們並非使用Text1.Text來設定文字方塊的文字，這是因為它是一個HTML伺服器控制項的文字方塊，其類別為HtmlInputText類別，並且隸屬於System.Web.UI.HtmlControls命名空間，它並不是一個Web伺服器控制項。 • 因此當您查閱HtmlInputText類別的線上說明時，會發現設定方塊中的值，應該是以Value屬性來替代，它並沒有Text屬性。 • 如果您回到VWD的介面中，在「HTML伺服器控制項：文字方塊」上按兩下，會發現它出現的事件程序是客戶端的JavaScript函式Text1_onclick()，而非伺服器端的程序。【註】以上為產生HTML伺服器控制項的方法，以及如何應用HTML伺服器控制項，但在本書中，我們將極少使用HTML伺服器控制項，因為所有的HTML伺服器控制項都可以使用Web伺服器控制項來取代。

6.1 控制項簡介 • 2. Web伺服器控制項(Web Server Controls)： • Web伺服器控制項是ASP.NET自己制定的控制項，它可以經由伺服器編譯器的處理而產生一個以上的HTML標籤以及些許JavaScript程式碼以完成控制項的功能 • 我們在前幾章中建立的網頁控制項都是屬於Web伺服器控制項。 • 在原始碼頁籤中，Web伺服器控制項會以ASP.NET自訂的標籤格式出現，其標準格式如下： • 所有Web伺服器控制項的所屬類別都位於System.Web.UI.WebControls命名空間中 • 例如System.Web.UI.WebControls.Button類別代表Web伺服器控制項按鈕的類別。 <asp:控制項類別 ID="控制項名稱" runat="server" />

6.1 控制項簡介 • 而Web伺服器控制項的類別都繼承自System.Web.UI.WebControls.WebControl類別，在此類別中，定義了所有Web伺服器控制項的屬性和方法，而它又繼承自System.Web.UI.Control類別，Control類別則定義了所有伺服器控制項共用的屬性和方法。 • 在工具箱的標準頁籤中，所有的控制項都是Web伺服器控制項。但並非所有的Web伺服器控制項都位於標準頁籤中，有些會位於其他標籤中 • 例如驗證控制項也是Web伺服器控制項，其中範圍驗證控制項所屬之類別為System.Web.UI.WebControls.RangeValidator類別，同樣位於System.Web.UI.WebControls命名空間中。

6.1.1 Web伺服器控制項的種類 • Web伺服器控制項的種類有很多，並分散於工具箱的各頁籤中，而我們將標準頁籤的各種Web伺服器控制項依照字母順序，整理於表6-1中。

6.1.1 Web伺服器控制項的種類

6.1.2Web伺服器控制項的共通屬性 • 所有的Web伺服器控制項都繼承自System.Web.UI.WebControls類別，因此WebControls類別的屬性將會是所有的Web伺服器控制項皆具備的屬性。我們將之整理於表6-2(a)中（但不含定義於WebControls父類別Control的屬性）：

6.1.2Web伺服器控制項的共通屬性

6.1.2Web伺服器控制項的共通屬性 • 至於Web伺服器控制項（WebControls類別）繼承自Control類別的屬性就更多了，因為Control類別是所有控制項的基底，因此，我們只將其重要的屬性整理於表6-2(b)。

6.2 文字輸出控制項 • 顯示文字的Web伺服器控制項有Label與Literal • Label控制項可以設定文字的樣式變化 • Literal控制項無法設定文字的樣式變化 • 6.2.1 Label控制項 • Label控制項的相關資訊如下： • 類別：System.Web.UI.WebControls.Label類別 • 功能：可產生樣式變化的文字標籤。 • 輸出的標籤： • <span>（搭配style屬性設定CSS製作文字效果），但若設定AssociatedControlID屬性，則變為<label>。

6.2.1 Label控制項 • 類別重要的新增成員： • 【AssociatedControlID屬性說明】 • 當使用AssociatedControlID屬性將標籤控制項與某個控制項產生關聯時，標籤設定的快速鍵（AccessKey屬性值）將會變成關聯控制項的快速鍵。

6.2.1 Label控制項 • 舉例來說，若L1標籤控制項的AssociatedControlID屬性設定為T1文字方塊控制項，而L1標籤控制項的AccessKey屬性設定為“W”，則在執行時，於網頁中按下【Alt】+【W】鍵，游標就會自動移到T1文字方塊中。 • 之所以能夠達到此項功能，是因為當設定AssociatedControlID屬性後，標籤控制項將被轉換為<label for="AssociatedControlID屬性值" accesskey屬性="AccessKey屬性">之HTML標籤輸出，而非<span>，換句話說，此時Label控制項被當作是某個控制項的說明文字。 • 使用範例：見範例6-1。

6.2.2 Literal控制項 • Literal控制項的相關資訊如下： • 類別： System.Web.UI.WebControls.Literal類別 • 功能：直接輸出文字（不可產生樣式變化）。 • 輸出的標籤：無。若不更動Mode屬性，則會將Text屬性值直接輸出。

6.2.2 Literal控制項 • 類別重要的新增成員：

6.2.2 Literal控制項 • 【Mode屬性說明】 • 若Mode設定為PassThrough，則Text的內容不會被修改就輸出。 • 若Mode設定為Encode，則Text的內容會轉換成HTML編碼的字串，例如「<」、「>」等都會被更動為「<」、「>」。 • 若Mode設定為Transform，則Text的內容中不支援的標籤會被移除（一般使用於非HTML的瀏覽器，例如WML裝置）。 • 使用範例：見範例6-1、6-2。 • 【範例6-1】 • 設計一個網頁，使用某一個Label標籤描述某一個文字方塊，並設定快捷鍵為【Alt】+【N】鍵，按下按鈕後，將輸入的文字使用Literal 控制項及Label標籤輸出。 • 範例6-1： • 網站目錄 ASPNET\ch06\ch06_01\（檔案ch06_01.aspx）

6.2.2 Literal控制項 • Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。

6.2.2 Literal控制項 • 【註】設定BackColor與ForeColor等色彩屬性時，除了可以直接輸入數值外，也可以使用選取方式如下：

事實上，您也可以直接輸入顏色的英文代碼，例如#0000FF的英文代碼為Blue。要查閱英文代碼，可於線上說明查閱System.Drawing.KnownColor列舉型別。事實上，您也可以直接輸入顏色的英文代碼，例如#0000FF的英文代碼為Blue。要查閱英文代碼，可於線上說明查閱System.Drawing.KnownColor列舉型別。

6.2.2 Literal控制項 • Step2：撰寫Button1_Click事件程序碼如下： • 程式部分內容： • 範例說明： • 僅有兩行敘述，都是連結字串後設定為Literal1與Label3的Text屬性。（因為大部分動作都已經在屬性窗格中完成設定） • Step3：執行程式。

6.2.2 Literal控制項 • Step4：於瀏覽器中執行快顯功能表的【檢視原始檔】指令，結果如下。

6.2.2 Literal控制項 • 【原始碼說明】 • (1)所有行號都是為了說明而編號，由於已經簡略了許多原始碼，故行號不見得是真實行號，並且原始碼也經過整理。（往後的範例也將採用此方式說明） • (2)第5行與第9行都是Label控制項的輸出，但由於Label2控制項設定了AssociatedControlID與AccessKey屬性，故成為<label>標籤，可作為說明文字（也就是快速鍵對應元件焦點）。 • (3)第15行是Literal1控制項的輸出，由於設定了Mode屬性為Encode，故字串會經過編碼後才輸出，所以<>被編碼為特定字元。而此編碼功能並不會將空白字元進行編碼，若有需要，應使用範例5-2示範的Replace自行進行替換。 • (4)這個範例不論是否設定Literal1的Mode屬性，都存在一個問題，您可以試試看在TextBox1中輸入<a>，將會出現潛在危險警告。此錯誤與驗證有關，我們將於第8章介紹。

6.2.2 Literal控制項 • 【範例6-2】 • 改寫範例4-13、5-1，使用不可見的Literal1控制項達到記錄資料的目的。 • 範例6-2： • 網站目錄 ASPNET\ch06\ch06_02\（檔案ch06_02.aspx） • Step1：網頁介面設計同範例5-1，但新增一個不可見的Literal控制項。（所有控制項皆採相對定位、其餘屬性參照屬性窗格）。

6.2.2 Literal控制項 • Step2：撰寫<script>內的程式碼如下： • 程式部分內容：

6.2.2 Literal控制項

6.2.2 Literal控制項 • 範例說明： • (1)程式碼和範例4-13非常類似，不過由於我們多了一個不可見的Literal1控制項可應用。故在執行前，先將Literal1的內容取出作為這次執行時num的初值（第14行）。而最後則將結果值回存到Literal1的內容中（第19行）。 • (2)由於Literal1控制項始終存在，因此不論網頁來回執行幾次，都能夠記錄上一次的值。並且由於Literal1控制項不可見，因此，使用者並不會看到保留的資訊。 • (3)這個範例不會出現範例5-1跨網頁共用變數的問題。因為每一個由他端新開啟的網頁，都會被配置一個新的Literal1控制項，並且初值為0。 • (4)事實上，還有很多方法可以達到此功能，例如HiddenField控制項、ViewState、Session物件等。 • (5)事實上，這個範例可以不使用num欄位變數，而直接使用Literal1控制項來運算，因為它也是Page的一個成員，只不過您可能需要進行更多的型別轉換。

6.2.2 Literal控制項 • Step3：執行程式。

6.3 HiddenField隱藏資訊控制項 • 在範例6-2中，我們希望某些資料被保留，但不顯示在網頁中，當時我們採用的是不可見的Literal控制項，事實上，任何可存放資料的控制項只要設定為不可見，都可以達到此目的，只不過Literal控制項消耗的系統資源相對較少而已。 • 除了使用不可見的控制項保存資料外，我們也可以採用HiddenField控制項來記錄資料。 • 但這種做法會讓客戶端瀏覽器在執行【檢視原始檔】後，看到我們保留的資料，因此只適合資料不具保密性，也不怕被竄改時使用。 • HiddenField控制項的相關資訊如下： • 類別：System.Web.UI.WebControls.HiddenField類別 • 功能：建立一個隱藏資訊。 • 輸出的標籤： <input type="hidden">。 • 類別重要的新增成員：

6.3 HiddenField隱藏資訊控制項 • 【範例6-3】 • 改寫範例6-2，以HiddenField控制項取代不可見的Literal1控制項。

6.3 HiddenField隱藏資訊控制項 • 範例6-3： • 網站目錄 ASPNET\ch06\ch06_03\（檔案ch06_03.aspx） • Step1：網頁介面設計同範例6-2，但去除Literal1控制項、新增一個HiddenField控制項。（所有控制項皆採相對定位、其餘屬性參照屬性窗格）。

6.3 HiddenField隱藏資訊控制項 • Step2：撰寫<script>內的程式碼如下： • 程式部分內容：

6.3 HiddenField隱藏資訊控制項

6.3 HiddenField隱藏資訊控制項 • 範例說明： • (1)程式碼和範例6-2非常類似，不過這次改用HiddenField控制項來存放資訊。同樣地，這個程式也可以不使用num欄位變數。 • (2)在執行時，若於瀏覽器執行【檢視原始檔】後，會看到HiddenField控制項產生的<input type="hidden">標籤，因此，不具有保密性。這個方法並不常被程式設計師採用，想要在每一次網頁來回時保留資訊，大多採用的是ViewState及Session物件。不過ASP.NET時常採用這個技巧來保留資訊（但經過編碼）。例如您在【檢視原始檔】中，也會看到其餘兩個<input type="hidden">標籤，這是由ASP.NET自動產生的，我們會在後面說明這兩個標籤的用處。 • Step3：執行程式。 • 【程式執行結果】：（同範例6-2）

6.3 HiddenField隱藏資訊控制項 • Step4：於瀏覽器執行【檢視原始檔】會看到下列<input type="hidden">標籤。

6.4 文字輸入控制項 • 輸入文字的Web伺服器控制項為TextBox控制項。相對於HTML中，有單行、密碼、多行等輸入文字的介面，在ASP.NET的Web伺服器控制項中，全部都交由TextBox控制項來完成。 • 6.4.1 TextBox控制項 • TextBox控制項的相關資訊如下： • 類別： System.Web.UI.WebControls.TextBox類別 • 功能：可產生文字方塊。 • 輸出的標籤： • <input type="text或password" />或<textarea>。

6.4 文字輸入控制項 • 類別重要的新增成員：

6.4.1 TextBox控制項

6.4.1 TextBox控制項 • 【Rows、Columns屬性說明】 • Height、Width、Rows、Columns 都可以設定文字方塊的外觀長寬，前者以像素為單位，後者以字元為單位，但同時設定時，Height、Width會比Rows、Columns優先考慮。 • 故透過介面拉動文字方塊大小後，才設定Rows、Columns就會變成無作用（除非先刪除Height、Width屬性值）。 • 使用範例：見範例6-4、6-5、6-6。

6.4.1 TextBox控制項 • 【範例6-4】 • 設計一個網頁，包含三種不同的文字方塊，並處理多行文字方塊的換行字元問題。 • 範例6-4： • 網站目錄 ASPNET\ch06\ch06_04\（檔案ch06_04.aspx） • Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性參照屬性窗格）。

6.4.1 TextBox控制項

6.4.1 TextBox控制項 • Step2：撰寫兩個事件程序如下： • 程式部分內容：

第六章 伺服器控制項（一）