伺服器控制项一学习课件

1、1 第六章 伺服器控制 項（一） 在本章中，我們介紹工具箱標準頁籤中的常用控制項，並且 探討ASP.NET如何利用Postback完成網頁的事件驅動模型。 至於較為複雜的伺服器控制項，則留待下一章中介紹。 2 大綱 6.1控制項簡介 6.1.1Web伺服器控制項的種類 6.1.2Web伺服器控制項的共通屬性 6.2文字輸出控制項 6.2.1Label控制項 6.2.2Literal控制項 6.3HiddenField隱藏資訊控制項 6.4文字輸入控制項 6.4.1TextBox控制項 6.4.2讀取網頁與PostBack 6.4.3AutoPostBack屬性 6.5傳送控制項 6.5.1Bu

2、tton控制項 6.5.2ImageButton控制項 6.5.3LinkButton控制項 3 大綱 6.6選擇控制項 6.6.1CheckBox多選控制項 6.6.2CheckBoxList多選清單控制項 6.6.3RadioButton選項按鈕（單選）控制項 6.6.4RadioButtonList選項按鈕（單選）清單控制項 6.6.5ListBox控制項 6.6.6DropDownList控制項 6.7多控制項的管理 6.7.1控制項順序與快速切換 6.7.2容器與Panel面板控制項 6.8本章回顧 4 在本章中，我們將介紹常用的Web伺服器控制項，並介紹何謂PostBack，以及如

3、何 應用面板(Panel)來管理眾多控制項。 第六章 伺服器控制項（一） 5 6.1控制項簡介 VWD的工具箱中提供的元件稱之為控制項(Control)，其完整名稱為伺服器控制項 (server control)，伺服器控制項在原始碼中，同樣以標籤型式出現，但伺服器端的編 譯器能夠理解並處理這些標籤。 除了自訂的控制項之外，ASP.NET提供的伺服器控制項可以分為兩大類： 1.HTML伺服器控制項(HTML Server Controls)： HTML伺服器控制項是由HTML標籤衍生而來，您可以先在工具箱的HTML頁籤中選取 HTML元件，這些HTML元件都是由簡單的HTML標籤所構成 當您在

4、網頁中加入了HTML元件後，只需要在原始碼頁籤中，將其標籤加上 runat=server屬性即可 （若無ID或id屬性，則也必須補上，例如Image：HTML伺 服器控制項）。 如下範例： 6 7 8 6.1控制項簡介 經由加入runat=“server”屬性的動作後，該HTML元件已經變成了 HTML伺服器控制項 換句話說，它可以被伺服器處理，因此，我們可以在撰寫程式時使用它，而 代表該控制項的名稱則為其標籤的id屬性值Text1 例如我們可以在Page_Load程序中，加入下列敘述，使得HTML伺服器 控制項：文字方塊的內容初始為請輸入文字。 Protected Sub Page_Load

5、(ByVal sender As Object, ByVal e As System.EventArgs) Text1.Value = 請輸入文字 並非使用Text屬性 End Sub 9 6.1控制項簡介 執行後就成為上圖結果，您可以注意到，我們並非使用Text1.Text來設定文字方塊的文字，這是 因為它是一個HTML伺服器控制項的文字方塊，其類別為HtmlInputText類別，並且隸屬於 System.Web.UI.HtmlControls命名空間，它並不是一個Web伺服器控制項。 因此當您查閱HtmlInputText類別的線上說明時，會發現設定方塊中的值，應該是以Value屬性 來

6、替代，它並沒有Text屬性。 如果您回到VWD的介面中，在 HTML伺服器控制項：文字方塊上按兩下，會發現它出現的事 件程序是客戶端的JavaScript函式Text1_onclick()，而非伺服器端的程序。 【註】以上為產生HTML伺服器控制項的方法，以及如何應用HTML 伺服器控制項，但在本書中，我們將極少使用HTML伺服器控制項， 因為所有的HTML伺服器控制項都可以使用Web伺服器控制項來取代。 10 6.1控制項簡介 2. Web伺服器控制項(Web Server Controls)： Web伺服器控制項是ASP.NET自己制定的控制項，它可以經由伺服器編譯器的處理而產生一個以 上

7、的HTML標籤以及些許JavaScript程式碼以完成控制項的功能 我們在前幾章中建立的網頁控制項都是屬於Web伺服器控制項。 在原始碼頁籤中，Web伺服器控制項會以ASP.NET自訂的標籤格式出現，其標準格式如下： 所有Web伺服器控制項的所屬類別都位於System.Web.UI.WebControls命名空間中 例如System.Web.UI.WebControls.Button類別代表Web伺服器控制項按鈕的類別。 11 6.1控制項簡介 而Web伺服器控制項的類別都繼承自System.Web.UI.WebControls.WebControl類別，在此 類別中，定義了所有Web伺服器控

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

9、，而我 們將標準頁籤的各種Web伺服器控制項依照預設順序（非字母排序） 整理於表6-1中。 13 6.1.1 Web伺服器控制項的種類 14 6.1.1 Web伺服器控制項的種類 15 6.1.2 Web伺服器控制項的共通屬性 所有的Web伺服器控制項都繼承自System.Web.UI.WebControls 類別，因此WebControls類別的屬性將會是所有的Web伺服器控制 項皆具備的屬性。我們將之整理於表6-2(a)中（但不含定義於 WebControls父類別Control的屬性）： 16 6.1.2 Web伺服器控制項的共通屬性 17 18 6.1.2 Web伺服器控制項的共通屬性

10、 至於Web伺服器控制項（WebControls類別）繼承自Control類別 的屬性就更多了，因為Control類別是所有控制項的基底，因此，我 們只將其重要的屬性整理於表6-2(b)。 19 6.2文字輸出控制項 顯示文字的Web伺服器控制項有Label與Literal Label控制項可以設定文字的樣式變化 Literal控制項無法設定文字的樣式變化。 6.2.1 Label控制項 Label控制項的相關資訊如下： 類別：System.Web.UI.WebControls.Label類別 功能：可產生樣式變化的文字標籤。 輸出的標籤： （搭配style屬性設定CSS），但若設定Assoc

11、iatedControlID屬 性，則變為。 20 6.2.1 Label控制項 類別重要的新增成員： 【AssociatedControlID屬性說明】 當使用AssociatedControlID屬性將標籤控制項與某個控制項產生關聯時，標籤設定的快速鍵 （AccessKey屬性值）將會變成關聯控制項的快速鍵。 21 6.2.1 Label控制項 舉例來說，若L1標籤控制項的AssociatedControlID屬性設定為T1文字方塊控制項，而L1標籤 控制項的AccessKey屬性設定為W，則在執行時，於網頁中按下【Alt】+【W】鍵，游標就會 自動移到T1文字方塊中。 之所以能夠達到此項

12、功能，是因為當設定AssociatedControlID屬性後，標籤控制項將被轉換為 之HTML標 籤輸出，而非，換句話說，此時Label控制項被當作是某個控制項的說明文字。 使用範例：見範例6-1。 22 6.2.2 Literal控制項 Literal控制項的相關資訊如下： 類別：System.Web.UI.WebControls.Literal類別 功能：直接輸出文字（不可產生樣式變化）。 輸出的標籤：無。若不更動Mode屬性，則會將Text屬性值直接輸出。 23 6.2.2 Literal控制項 類別重要的新增成員： 24 6.2.2 Literal控制項 【Mode屬性說明】 若Mo

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

14、spx） 25 6.2.2 Literal控制項 Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。 26 6.2.2 Literal控制項 【註】設定BackColor與ForeColor等色彩屬性時，除了可以直接輸入數值外， 也可以使用選取方式如下： 27 事實上，您也可以直接輸入顏色的英文代碼，例如#0000FF的英文 代碼為Blue。要查閱英文代碼，可於線上說明查閱 System.Drawing.KnownColor列舉型別。 28 6.2.2 Literal控制項 Step2：撰寫Button1_Click事件程序碼如下： 程式部分內容： 範例

15、說明： 僅有兩行敘述，都是連結字串後設定為Literal1與Label3的Text屬性。（因為大部分動作都已經 在屬性視窗中完成設定） Step3：執行程式。 7 8 9 10 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Literal1.Text = TextBox1.Text / 職業類別職業類別 桃園縣桃園縣程式設計程式設計 程式設計程式設計 31 6.2.2 Literal控制項 【原始碼說明】 (1)所有行號都是為了說明而編號，由於已經簡略了許多原始碼，故行號不見得是

16、真實行號，並且 原始碼也經過整理。（往後的範例也將採用此方式說明） (2)第5行與第9行都是Label控制項的輸出，但由於Label2控制項設定了AssociatedControlID 與AccessKey屬性，故成為標籤，可作為說明文字（也就是快速鍵對應元件焦點）。 (3)第16行是Literal1控制項的輸出，由於設定了Mode屬性為Encode，故字串會經過編碼後才 輸出，所以被編碼為特定字元。而此編碼功能並不會將空白字元進行編碼，若有需要，應使用 範例5-2示範的Replace自行進行替換。 (4)這個範例不論是否設定Literal1的Mode屬性，都存在一個問題，您可以試試看在Tex

17、tBox1中 輸入，將會出現潛在危險警告。此錯誤與驗證有關，我們將於第8章介紹。 32 6.2.2 Literal控制項 【範例6-2】 改寫範例4-13、5-1，使用不可見的Literal1控制項達到記錄資料的目的。 範例6-2： 網站目錄 ASPNETch06ch06_02（檔案ch06_02.aspx） Step1：網頁介面設計同範例5-1，但新增一個不可見的Literal控制項。（所有控制項皆採相對定位、 其餘屬性參照屬性窗格）。 33 6.2.2 Literal控制項 Step2：撰寫內的程式碼如下： 程式部分內容： 34 6.2.2 Literal控制項 5 6 7 8 9 10

18、11 12 13 14 15 16 17 18 19 20 21 Private num As Integer 定義私用的欄位num,非Shared欄位 Sub Addk(ByVal k As Integer) 可將此程序看作是Page類別的方法 num = num + k End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) num = CInt(Literal1.Text) 將將Literal1.Text值取出值取出 Addk(3) Addk(3) num = num

19、 + 1 Label1.Text = num Literal1.Text = CStr(num) 存入新的存入新的Literal1.Text值值 End Sub 35 6.2.2 Literal控制項 範例說明： (1)程式碼和範例4-13非常類似，不過由於我們多了一個不可見的Literal1控制項可應 用。故在執行前，先將Literal1的內容取出作為這次執行時num的初值（第14行）。而 最後則將結果值回存到Literal1的內容中（第19行）。 (2)由於Literal1控制項始終存在，因此不論網頁來回執行幾次，都能夠記錄上一次的值。 並且由於Literal1控制項不可見，因此，使用者並

20、不會看到保留的資訊。 (3)這個範例不會出現範例5-1跨網頁共用變數的問題。因為每一個由他端新開啟的網頁， 都會被配置一個新的Literal1控制項，並且初值為0。 (4)事實上，還有很多方法可以達到此功能，例如HiddenField控制項、ViewState、 Session物件等。 (5)事實上，這個範例可以不使用num欄位變數，而直接使用Literal1控制項來運算， 因為它也是Page的一個成員，只不過您可能需要進行更多的型別轉換。 36 6.2.2 Literal控制項 Step3：執行程式。 37 6.3 HiddenField隱藏資訊控制項 在範例6-2中，我們希望某些資料被保留

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

22、8 6.3 HiddenField隱藏資訊控制項 【範例6-3】 改寫範例6-2，以HiddenField控制項取代不可見的Literal1控制項。 39 6.3 HiddenField隱藏資訊控制項 範例6-3： 網站目錄 ASPNETch06ch06_03（檔案ch06_03.aspx） Step1：網頁介面設計同範例6-2，但去除Literal1控制項、新增一個 HiddenField控制項。（所有控制項皆採相對定位、其餘屬性參照屬性窗格）。 40 6.3 HiddenField隱藏資訊控制項 Step2：撰寫內的程式碼如下： 程式部分內容： 41 6.3 HiddenField隱藏資訊

23、控制項 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 Private num As Integer 定義私用的欄位num,非Shared欄位 Sub Addk(ByVal k As Integer) 可將此程序看作是Page類別的方法 num = num + k End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) num = CInt(HiddenField1.Value) 將將HiddenField1值取出值取出 Addk

24、(3) Addk(3) num = num + 1 Label1.Text = num HiddenField1.Value = CStr(num) 存入新的存入新的HiddenField1值值 End Sub 42 6.3 HiddenField隱藏資訊控制項 範例說明： (1)程式碼和範例6-2非常類似，不過這次改用HiddenField控制項來存放資訊。同樣地，這個程 式也可以不使用num欄位變數。 (2)在執行時，若於瀏覽器執行【檢視原始碼】後，會看到HiddenField控制項產生的標籤，因此，不具有保密性。這個方法並不常被程式設計師採用，想要在每一 次網頁來回時保留資訊，大多採用的

25、是ViewState及Session物件。 不過ASP.NET時常採用這個技巧來保留資訊（但經過編碼）。例如您在【檢視原始碼】中，也會 看到其餘兩個標籤，這是由ASP.NET自動產生的，我們會在後面說明 這兩個標籤的用處。 Step3：執行程式。 【程式執行結果】：（同範例6-2） 43 6.3 HiddenField隱藏資訊控制項 Step4：於瀏覽器執行【檢視原始碼】會看到下列 標籤。 44 6.4文字輸入控制項 輸入文字的Web伺服器控制項為TextBox控制項。相對於HTML中，有單行、密碼、多 行等輸入文字的介面，在ASP.NET的Web伺服器控制項中，全部都交由TextBox控制

26、項來完成。 6.4.1TextBox控制項 TextBox控制項的相關資訊如下： 類別：System.Web.UI.WebControls.TextBox類別 功能：可產生文字方塊。 輸出的標籤： 或。 45 6.4文字輸入控制項 類別重要的新增成員： 46 6.4.1 TextBox控制項 47 6.4.1 TextBox控制項 【Rows、Columns屬性說明】 Height、Width、Rows、Columns 都可以設定文字方塊的外觀 長寬，前者以像素為單位，後者以字元為單位，但同時設定時， Height、Width會比Rows、Columns優先考慮。 故透過介面拉動文字方塊大小後

27、，才設定Rows、Columns就會變 成無作用（除非先刪除Height、Width屬性值）。 使用範例：見範例6-4、6-5、6-6。 48 6.4.1 TextBox控制項 【範例6-4】 設計一個網頁，包含三種不同的文字方塊，並處理多行文字方塊的換行字元問題。 範例6-4： 網站目錄 ASPNETch06ch06_04（檔案ch06_04.aspx） Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性 參照屬性窗格）。 49 6.4.1 TextBox控制項 50 6.4.1 TextBox控制項 Step2：撰寫兩個事件程序如下： 程式部分內容： 51 7 8

28、9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Protected Sub Button1_Click (ByVal sender As Object, ByVal e As System.EventArgs) Dim str As New String() str = TextBox1.Text )來取代。 Step3：執行程式。 53 54 6.4.1 TextBox控制項 TextChanged事件 當資料回傳給伺服器端時，若文字方塊內容與上次回傳時不同，則會產生TextChanged事件，並且 ASP.NET會自動執行實體名_T

29、extChanged()程序。 【範例6-5】 設計一個留言網頁，若留言重複或空白，則出現警告訊息，並且不輸出留言。（輸出後，不清除舊留 言，除非使用者自己按下【清除】鈕） 範例6-5： 網站目錄 ASPNETch06ch06_05（檔案ch06_05.aspx） Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性參照屬性窗格）。 55 56 6.4.1 TextBox控制項 Step2：撰寫四個程序如下：（要產生TextBox1_TextChanged()程序，可以直接在TextBox1控制 項上面按兩下） 7 8 9 10 11 12 13 14 15 16 17

30、18 19 20 Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = Label2.Text = End Sub Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) If Label2.Text = Then Label1.Text = 請勿重複輸入相同的留言 End If If TextBox1.Text = Then Label1.Text = 請勿輸入

31、空白留言 Label2.Text = End If End Sub 57 6.4.1 TextBox控制項 範例說明： (1)第710行：每一次執行網頁時，都一定會先執行Page_Load，清除 Label1與Label2的文字。 21 22 23 24 25 26 27 28 29 30 31 Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) TextBox1.Text = Label2.Text = End Sub Protected Sub TextBox1_TextChang

32、ed(ByVal sender As Object, ByVal e As System.EventArgs) Dim str As New String() str &= 您的留言如下: & TextBox1.Text Label2.Text = str.Replace(vbCrLf, ) 處理換行字元 End Sub 58 6.4.1 TextBox控制項 (2)第2731行：如果使用者修改了TextBox1文字方塊的內容時，當資訊回傳到伺服器 時，會先執行TextBox1_TextChanged程序（在執行完Page_Load之後）。而在本範 例，資訊要回傳到伺服器，只有按下Button

33、1或Button2兩種可能。請注意，在本程序 中，修改了Label2的內容。 (3)第1220行：若是按下Button1【送出】鈕，則會執行Button1_Click1程序，此時 若Label2.Text為空字串，代表前面只執行了Page_Load，而未執行 TextBox1_TextChanged程序，也就是文字方塊內容其實並未改變，故第14行顯示勿 輸入重複留言。而若TextBox1.Text為空字串（不論Label2.Text是否為空字串），都 在第17行將警告訊息改為勿輸入空白。兩個If成立任一個，都會將Label2設為空字串， 故只有在未輸入重複留言且未輸入空白時，才會利用Label

34、2顯示收到的留言訊息。 (4)第2225行：若是按下Button2【清除】鈕，則清除兩個欄位。至於Label1為何不 用清除，這是因為在Page_Load執行時已經清除，而所有程式只有在執行 Button1_Click程序時才可能改變Label1的內容，但Button1_Click與Button2_Click 只會執行其中一個，故不需要清除Label1的內容。 59 6.4.1 TextBox控制項 (5)這個範例告訴我們一件事實，每一次執行程式時，不一定只會執 行一個事件程序，並且TextBox1_TextChanged會比 Button1_Click還先執行，故我們可以擴充圖5-6的網頁生

35、命週期， 將本範例的網頁生命週期繪製如下圖。 圖6-1 範例6-5 的網頁生命週期 60 6.4.1 TextBox控制項 Step3：執行程式。 61 6.4.1 TextBox控制項 上述的執行過程，其網頁生命週期一共有三次，過程可以繪製如圖6-2，圖 中標號了1,2,3，只有三次是傳送資料到伺服器端，並且第1次只有標頭資料， 並無其他資料，而第2次與第3次則稱之為PostBack。 62 圖6-2 範例6-5執行過 程中的三次網頁生命 週期 63 6.4.2 讀取網頁與PostBack 在圖6-2中，第一次讀取網頁使用的是GET method，第二次與第三 次都是POST method，

36、這是HTTP資料傳輸的兩大方法。 GET較無保密性，資料會放在網址列的後面，以?區隔網址與資料， 多筆資料間則以&加以區隔。 而POST則會經過編碼包裝成一個封包(Package)來傳送。要在伺服器 端判斷該次客戶端傳送過來的資訊是使用GET還是POST，可以讀取 Page.Request.HttpMethod來達成 例如您可以在範例6-5中，增加一個標籤來顯示 Page.Request.HttpMethod的值，就可以判斷出每次客戶端送出 要求時，使用的是哪一個方法。 在ASP.NET的規劃下，除了第一次讀取網頁時使用GET method， 其餘都是使用POST method，因此每一個We

37、b Form的 輸出時，輸出的HTML原始碼就包含下列資訊，代表未 來將使用POST method傳送資訊。 .有的控制項對應的HTML標籤 64 6.4.2 讀取網頁與PostBack 因此，我們可以將圖6-2重新繪製如圖6-3與6-4，來解釋每一次網頁之間的傳遞過程。 圖6-3 ASP.NET每一 次網頁之間的傳遞過 程 65 6.4.2 讀取網頁與PostBack 在圖6-3中，每一次的POST在ASP.NET中稱之為PostBack，因為對於ASP.NET來說資料是回傳到伺 服器端，故PostBack一般翻譯為回傳，而它將發生在第二次以後的每次傳送。而ASP.NET之所以 能夠使用事件

38、驅動方式來設計，主要就是因為它可以藉由PostBack來執行對應的事件程序。 【註】 伺服器端的Page物件可以透過IsPostBack屬性，判斷此次網頁被要求執行，是PostBack還是第 一次連線。 圖6-4 ASP.NET的行為循環 66 6.4.2 讀取網頁與PostBack 要進行POST回傳資料（不考慮GET方式），客戶端只有兩種方式可以達成： 1.在標籤中，包含一個形成的按鈕。按下該按鈕後，就會將包含 在內的資料POST送往到伺服器action對應的目標檔案。 2.使用JavaScript的指令進行POST送出資料到伺服器。 而Button控制項的輸出就是一個，故而範例6-5必須

39、等到按下 Button1或Button2按鈕時，客戶端才會送出資料到伺服器端，而不是文字方塊內容變動時就送 出資料。 67 6.4.3 AutoPostBack屬性 在前面我們已經說過，除了使用JavaScript之外，要回傳(PostBack) 資料給伺服器，只能透過submit按鈕（也就是Button控制項）完成。 而有些時候，我們希望在某個元件發生特定變化時，就能夠自動回傳 (PostBack)資料給伺服器，以便伺服器立即作出反應（例如選擇元件 在項目選取與未選取時加以出現某些提示訊息） 。 遇到這種需求，我們可以將控制項的AutoPostBack屬性設定為True， 就可以達到目的了。

40、 而設定AutoPostBack屬性後，實際上在進行AutoPostBack時， ASP.NET是利用JavaScript的指令來完成的。 68 6.4.3 AutoPostBack屬性 不過，每一種控制項發生AutoPostBack的時機有些不同 例如選擇元件可以在控制項選擇改變時就自動AutoPostBack 但文字方塊控制項則必須要等到焦點移開文字方塊後，才會自動AutoPostBack，這主要原因是 在於它必須確保您已經完成了所有文字的輸入（否則每輸入一個字就來回讀取網頁一次，將會造 成伺服器的負擔太大） 我們透過一個範例來進行詳細的探討。 【範例6-6】 製作一個累加器，當使用者在文

41、字方塊中輸入數值後，只要一將焦點離開文字方塊，就立即執行加法 並將結果呈現在旁邊的標籤中。 範例6-6： 網站目錄 ASPNETch06ch06_06（檔案ch06_06.aspx） 69 6.4.3 AutoPostBack屬性 Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性參照屬性窗格）。 70 6.4.3 AutoPostBack屬性 Step2：撰寫TextBox1_TextChanged程序如下： 程式部分內容： 範例說明： 這個程式沒有按鈕，所以也沒有Button_Click程序。在TextBox1控制項上按兩下即可產生上述 程序，然後加入程式碼用以累加

42、與清除內容。 Step3：執行程式。 7 8 9 10 Protected Sub TextBox1_TextChanged(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = CStr(CInt(Label1.Text) + CInt(TextBox1.Text) TextBox1.Text = End Sub 71 72 6.4.3 AutoPostBack屬性 Step4：重新執行程式，並於第一次執行後，於瀏覽器中執行快顯功能表的【檢視原始碼】指令，結果 如下。 1 2 3 4 5 6 7 8 9 10 1

43、1 12 13 14 / 74 6.4.3 AutoPostBack屬性 【原始碼說明】 (1)上述原始碼已經刪減許多，而留下來的全都是為了完成文字方塊內容改變時得以自動進行 AutoPostBack所產生的HTML與JavaScript。 (2)首先，第29行的onchange是當文字方塊內容發生變化時要執行的內嵌JavaScript事件函式。由 於setTimeout函式的緣故，所以它會在0秒後呼叫_doPostBack(TextBox1,)函式。 (3)至於_doPostBack函式則被定義在第1520行，它有兩個參數，第一個為取得事件目標，第二 個為取得事件參數。 1. 利用theFo

44、rm變數取得網頁中的 form1物件。 2. 第16行：此時是否為form1發生onsubmit事件，若是則不必利用JavaScript進行處理而離 開_doPostBack函式。 75 6.4.3 AutoPostBack屬性 3. 第1718行是將取得的兩個參數設定給第4、5行的二個隱藏欄位，以便 於回傳給伺服器時一起回送。 4. 第19行是最重要的一行，它是將表單資料進行傳送伺服器的動作， submit()也就是JavaScript中，用以產生PostBack行為的函式。 (4)上述JavaScript程式碼對於一般初學者而言，是非常困難的，不過您不用擔 心，我們只需要設定控制項的Aut

45、oPostBack屬性為True，ASP.NET就會自動 幫我們在回傳給客戶端的資料中加入這些必要的JavaScript程式碼，一行程式 也不用寫。 76 6.5傳送控制項 除了使用AutoPostBack方式自動回傳表單資料給伺服器，一般常使用的方式仍是以 submit按鈕來完成資料的傳送。而在ASP.NET中，與按鈕有關的控制項一共有 Button、ImageButton與LinkButton等三種控制項。 6.5.1Button控制項 Button控制項就是我們在前面常使用的按鈕控制項，它以文字按鈕的外觀呈現於網頁 中。並且會在輸出時，轉換為標籤內的標籤。 Button控制項的相關資訊如

46、下： 類別：System.Web.UI.WebControls.Button類別 功能：產生文字型式的按鈕。 輸出的標籤： 。若UseSubmitBehavior屬性設定為False，則輸出為 ，並使用JavaScript進行submit動作。 類別重要的新增成員： 77 78 【PostBackUrl屬性說明】 在ASP.NET的規劃中，Web Form對應的標籤之action屬性將永 遠記載為網頁本身的網址。 如果想要進行網頁轉向，則可以使用Response.Redirect，但如果想要同 時POST表單資料，則應該使用PostBackUrl屬性來完成。 一般我們並不建議這麼做，除非是想要

47、POST的目標網頁是非ASP.NET網頁， 例如PHP、傳統ASP、JSP等。在ASP.NET中，我們較常使用的方式仍舊是 單一網頁型式並以事件驅動模型來開發，如此較為單純。 79 6.5.1 Button控制項 使用範例：見之前的眾範例及範例6-7。 【範例6-7】 設計一個網頁，包含三個按鈕，功能為對樂透球號進行不同的顯示方式。 範例6-7： 網站目錄 ASPNETch06ch06_07（檔案ch06_07.aspx） Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。 80 6.5.1 Button控制項 81 6.5.1 Button控制項 屬性

48、窗格切換到事件頁籤，並將三個按鈕的Command事件都設定為Button1_Command。 Step2：撰寫內的程式碼如下： 程式部分內容： 82 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 Dim balls() As Integer = 37, 14, 20, 6, 38, 42 Dim specBall As Integer = 15 若需從檔案載入球號,可以撰寫於Page_Load程序中 Protected Sub Button1_Command(ByVal sender As Object,

49、ByVal e As System.Web.UI.WebControls.CommandEventArgs) Label1.Text = 球號 : Label2.Text = 特別號: Select Case e.CommandName Case Original Label1.Text &= (原始順序): Case Sort SortBy(CStr(e.CommandArgument) Label1.Text &= (排序): Case Else Label1.Text &= 發生錯誤 End Select For Each num In balls Label1.Text &= CStr

50、(num) & Next Label2.Text &= CStr(specBall) End Sub 83 6.5.1 Button控制項 範例說明： (1)第1128行：Button1_Command會在按鈕被按下後執行。其中利用 e.CommandName判斷是哪一個按鈕被按下，當然如果您想要使用 sender來判斷也可以。 29 30 31 32 33 34 35 36 Sub SortBy(ByVal commandArg As String) Array.Sort(balls) 遞增排序 If commandArg = 遞減 Then Array.Reverse(balls) 已遞增

51、故反向即可 End If End Sub 84 6.5.1 Button控制項 這個範例是本書第一次示範事件物件e的使用方式，而此時的e之型別 為CommandEventArgs類別，您可以查閱它有兩個屬性 CommandArgument與CommandName屬性，恰好對應按鈕物件 的同名屬性。而由於CommandName屬性回傳值型別為String，故 可以直接用來在SelectCase中當作條件值。 (2)第3035行：由於CommandArgument屬性的型別為Object（事實 上，它是為了要對應可能出現的不定數量之參數而如此宣告），因此第17 行先使用CStr()將之轉換後呼叫S

52、ortBy()程序。由於必定要經過排序，故先 排序後再決定是否需要反轉。 Step3：執行程式。 85 86 6.5.2 ImageButton控制項 ImageButton控制項可以製作圖片型式的按鈕，您必須設定圖片的來源位址，並且傳送時也可以接收到滑 鼠游標在按下圖片按鈕時的座標。 ImageButton控制項的相關資訊如下： 類別：System.Web.UI.WebControls.ImageButton類別 重要的繼承類別： 本類別繼承自System.Web.UI.WebControls.Image類別 功能：產生圖片型式的按鈕。 輸出的標籤：。 類別重要的新增成員： 87 6.5.2

53、 ImageButton控制項 88 6.5.2 ImageButton控制項 使用範例：見範例6-8。 89 6.5.3 LinkButton控制項 LinkButton控制項可以製作超鏈結型式的按鈕，事實上，它就是一 個超鏈結，外觀上與HyperLink 控制項相同，但功能接近於Button 控制項。 它的輸出是一個錨標籤，不過href並不像一般超鏈結直接設定目 標網址，而是執行一個內嵌的JavaScript，並呼叫_doPostBack函 式進行回傳動作。 LinkButton控制項的相關資訊如下： 類別：System.Web.UI.WebControls.LinkButton類別 功能

54、：產生超鏈結型式的按鈕。 輸出的標籤： 文字。 類別重要的新增成員： 90 6.5.3 LinkButton控制項 使用範例：見範例6-8。 91 6.5.3 LinkButton控制項 【範例6-8】 圖形按鈕及超鏈結按鈕的練習。 範例6-8： 網站目錄 ASPNETch06ch06_08（檔案ch06_08.aspx） 【預備資源】：Time.jpg事先位於ch06ch06_08目錄中 Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。 92 6.5.3 LinkButton控制項 【加入圖片的方式：ImageUrl屬性】 先在介面中加入ImageB

55、utton1控制項，然後到屬性窗格中，點選該控制項的ImageUrl屬性值， 如下圖。 93 6.5.3 LinkButton控制項 94 6.5.3 LinkButton控制項 Step2：撰寫兩個事件程序如下： 範例說明： (1)第1113行：按下超鏈結按鈕後會執行LinkButton1_Click事 件程序。 (2)第79行：按下圖片按鈕後會執行ImageButton1_Click事件程 序，其中e.X與e.Y是取出滑鼠按下時的座標。 Step3：執行程式。 7 8 9 10 11 12 13 Protected Sub ImageButton1_Click(ByVal sender A

56、s Object, ByVal e As System.Web.UI.ImageClickEventArgs) Label1.Text = 您按下了圖片按鈕,按下時的游標座標為( & e.X & , & e.Y & ) End Sub Protected Sub LinkButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Label1.Text = 您按下了鏈結按鈕 End Sub 95 96 6.6選擇控制項 ASP.NET提供的選擇控制項種類眾多，包含單選、複選、選單等種類，有時我們會希望 在選取某些項目時立

57、即作出反應，此時通常搭配該控制項的AutoPostBack屬性來完成。 6.6.1CheckBox多選控制項 CheckBox控制項將會在網頁中出現一個核取方塊，使用者可以勾選該方塊，代表選取對應 的項目。 CheckBox控制項的相關資訊如下： 類別：System.Web.UI.WebControls.CheckBox類別 功能：可產生一個核取方塊（包含其說明文字）。 輸出的標籤： 核取方塊以標籤出現。 說明文字以說明文字標籤出現。 類別重要的新增成員： 97 98 6.6.1 CheckBox多選控制項 使用範例：見範例6-9。 【範例6-9】 核取方塊的練習。 範例6-9： 網站目錄 A

58、SPNETch06ch06_09（檔案ch06_09.aspx） Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性 （其餘屬性參照屬性窗格）。 99 Step2：撰寫兩個事件程序如下： 程式部分內容： 7 8 9 10 11 12 13 Protected Sub CheckBox3_CheckedChanged(ByVal sender As Object, ByVal e As System.EventArgs) If CheckBox3.Checked = True Then CheckBox3.Text = 螢幕(螢幕為代購, 不適用永久保固) Else CheckBo

59、x3.Text = 螢幕 End If End Sub 100 6.6.1 CheckBox多選控制項 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) If (CheckBox1.Checked Or CheckBox2.Checked _ Or CheckBox3.Checked) = False Then Label1.Text = 請選擇至少一樣產品 Return En

60、d If Label1.Text = 您所訂購的產品如下: If CheckBox1.Checked = True Then Label1.Text &= CheckBox1.Text & End If If CheckBox2.Checked = True Then Label1.Text &= CheckBox2.Text & End If If CheckBox3.Checked = True Then Label1.Text &= CheckBox3.Text.Substring(0, 2) & End If End Sub 101 6.6.1 CheckBox多選控制項 範例說明：