伺服器控制项一

伺服器控制项一第1页/共198页2大綱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 讀取網頁與PostBack6.4.3 AutoPostBack屬性6.5 傳送控制項6.5.1 Button控制項6.5.2 ImageButton控制項6.5.3 LinkButton控制項第2页/共198页3大綱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 本章回顧第3页/共198页4在本章中，我們將介紹常用的Web伺服器控制項，並介紹何謂PostBack，以及如何應用面板(Panel)來管理眾多控制項。第六章

伺服器控制項（一）第4页/共198页56.1 控制項簡介VWD的工具箱中提供的元件稱之為控制項(Control)，其完整名稱為伺服器控制項(servercontrol)，伺服器控制項在原始碼中，同樣以標籤型式出現，但伺服器端的編譯器能夠理解並處理這些標籤。除了自訂的控制項之外，ASP.NET提供的伺服器控制項可以分為兩大類：1.HTML伺服器控制項(HTMLServerControls)：HTML伺服器控制項是由HTML標籤衍生而來，您可以先在工具箱的HTML頁籤中選取HTML元件，這些HTML元件都是由簡單的HTML標籤所構成當您在網頁中加入了HTML元件後，只需要在原始碼頁籤中，將其標籤加上runat="server"屬性即可（若無ID或id屬性，則也必須補上，例如Image：HTML伺服器控制項）。如下範例：第5页/共198页6第6页/共198页7第7页/共198页86.1 控制項簡介經由加入runat=“server”屬性的動作後，該HTML元件已經變成了HTML伺服器控制項換句話說，它可以被伺服器處理，因此，我們可以在撰寫程式時使用它，而代表該控制項的名稱則為其標籤的id屬性值「Text1」例如我們可以在Page_Load程序中，加入下列敘述，使得「HTML伺服器控制項：文字方塊」的內容初始為「請輸入文字」。ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)

Text1.Value="請輸入文字"

'並非使用Text屬性EndSub第8页/共198页96.1 控制項簡介執行後就成為上圖結果，您可以注意到，我們並非使用Text1.Text來設定文字方塊的文字，這是因為它是一個HTML伺服器控制項的文字方塊，其類別為HtmlInputText類別，並且隸屬於System.Web.UI.HtmlControls命名空間，它並不是一個Web伺服器控制項。因此當您查閱HtmlInputText類別的線上說明時，會發現設定方塊中的值，應該是以Value屬性來替代，它並沒有Text屬性。如果您回到VWD的介面中，在「HTML伺服器控制項：文字方塊」上按兩下，會發現它出現的事件程序是客戶端的JavaScript函式Text1_onclick()，而非伺服器端的程序。【註】以上為產生HTML伺服器控制項的方法，以及如何應用HTML伺服器控制項，但在本書中，我們將極少使用HTML伺服器控制項，因為所有的HTML伺服器控制項都可以使用Web伺服器控制項來取代。第9页/共198页106.1 控制項簡介2.Web伺服器控制項(WebServerControls)：Web伺服器控制項是ASP.NET自己制定的控制項，它可以經由伺服器編譯器的處理而產生一個以上的HTML標籤以及些許JavaScript程式碼以完成控制項的功能我們在前幾章中建立的網頁控制項都是屬於Web伺服器控制項。在原始碼頁籤中，Web伺服器控制項會以ASP.NET自訂的標籤格式出現，其標準格式如下：所有Web伺服器控制項的所屬類別都位於System.Web.UI.WebControls命名空間中例如System.Web.UI.WebControls.Button類別代表Web伺服器控制項按鈕的類別。<asp:控制項類別ID="控制項名稱"runat="server"/>第10页/共198页116.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命名空間中。第11页/共198页126.1.1 Web伺服器控制項的種類Web伺服器控制項的種類有很多，並分散於工具箱的各頁籤中，而我們將標準頁籤的各種Web伺服器控制項依照預設順序（非字母排序）整理於表6-1中。第12页/共198页136.1.1Web伺服器控制項的種類第13页/共198页146.1.1Web伺服器控制項的種類第14页/共198页156.1.2

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

Web伺服器控制項的共通屬性第16页/共198页17第17页/共198页186.1.2

Web伺服器控制項的共通屬性至於Web伺服器控制項（WebControls類別）繼承自Control類別的屬性就更多了，因為Control類別是所有控制項的基底，因此，我們只將其重要的屬性整理於表6-2(b)。第18页/共198页196.2 文字輸出控制項顯示文字的Web伺服器控制項有Label與LiteralLabel控制項可以設定文字的樣式變化Literal控制項無法設定文字的樣式變化。6.2.1 Label控制項Label控制項的相關資訊如下：類別：System.Web.UI.WebControls.Label類別功能：可產生樣式變化的文字標籤。輸出的標籤：<span>（搭配style屬性設定CSS），但若設定AssociatedControlID屬性，則變為<label>。第19页/共198页206.2.1 Label控制項類別重要的新增成員：【AssociatedControlID屬性說明】當使用AssociatedControlID屬性將標籤控制項與某個控制項產生關聯時，標籤設定的快速鍵（AccessKey屬性值）將會變成關聯控制項的快速鍵。第20页/共198页216.2.1 Label控制項舉例來說，若L1標籤控制項的AssociatedControlID屬性設定為T1文字方塊控制項，而L1標籤控制項的AccessKey屬性設定為"W"，則在執行時，於網頁中按下【Alt】+【W】鍵，游標就會自動移到T1文字方塊中。之所以能夠達到此項功能，是因為當設定AssociatedControlID屬性後，標籤控制項將被轉換為<labelfor="AssociatedControlID屬性值"accesskey屬性="AccessKey屬性">之HTML標籤輸出，而非<span>，換句話說，此時Label控制項被當作是某個控制項的說明文字。使用範例：見範例6-1。第21页/共198页226.2.2 Literal控制項Literal控制項的相關資訊如下：類別：System.Web.UI.WebControls.Literal類別功能：直接輸出文字（不可產生樣式變化）。輸出的標籤：無。若不更動Mode屬性，則會將Text屬性值直接輸出。第22页/共198页236.2.2 Literal控制項類別重要的新增成員：第23页/共198页246.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）第24页/共198页256.2.2 Literal控制項Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。第25页/共198页266.2.2 Literal控制項【註】設定BackColor與ForeColor等色彩屬性時，除了可以直接輸入數值外，也可以使用選取方式如下：第26页/共198页27事實上，您也可以直接輸入顏色的英文代碼，例如#0000FF的英文代碼為Blue。要查閱英文代碼，可於線上說明查閱System.Drawing.KnownColor列舉型別。第27页/共198页286.2.2 Literal控制項Step2：撰寫Button1_Click事件程序碼如下：程式部分內容：範例說明：僅有兩行敘述，都是連結字串後設定為Literal1與Label3的Text屬性。（因為大部分動作都已經在屬性視窗中完成設定）Step3：執行程式。78910ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)Literal1.Text=TextBox1.Text&TextBox2.TextLabel3.Text=TextBox1.Text&TextBox2.TextEndSub第28页/共198页296.2.2 Literal控制項Step4：於瀏覽器中執行快顯功能表的【檢視原始碼】指令，結果如下。第29页/共198页3012345678910111213141516171819202122…<formname="form1"method="post"action="ch06_01.aspx"id="form1">…<div><spanid="Label1">工作地點</span><inputname="TextBox1"type="text"value="<桃園縣>"id="TextBox1"style="background-color:#FFFF99;"/><br/>

<labelfor="TextBox2"id="Label2"accesskey="N">職業類別</label>

<inputname="TextBox2"type="text"value="程式設計"id="TextBox2"style="color:#0066FF;"/>

<inputtype="submit"name="Button1"value="送出"id="Button1"style="height:21px"/><br/>

<桃園縣>程式設計

<br/>

<spanid="Label3"><桃園縣>程式設計</span></div></form>…第30页/共198页316.2.2 Literal控制項【原始碼說明】(1)所有行號都是為了說明而編號，由於已經簡略了許多原始碼，故行號不見得是真實行號，並且原始碼也經過整理。（往後的範例也將採用此方式說明）(2)第5行與第9行都是Label控制項的輸出，但由於Label2控制項設定了AssociatedControlID與AccessKey屬性，故成為<label>標籤，可作為說明文字（也就是快速鍵對應元件焦點）。(3)第16行是Literal1控制項的輸出，由於設定了Mode屬性為Encode，故字串會經過編碼後才輸出，所以<>被編碼為特定字元。而此編碼功能並不會將空白字元進行編碼，若有需要，應使用範例5-2示範的Replace自行進行替換。(4)這個範例不論是否設定Literal1的Mode屬性，都存在一個問題，您可以試試看在TextBox1中輸入<a>，將會出現潛在危險警告。此錯誤與驗證有關，我們將於第8章介紹。第31页/共198页326.2.2 Literal控制項【範例6-2】改寫範例4-13、5-1，使用不可見的Literal1控制項達到記錄資料的目的。範例6-2：網站目錄ASPNET\ch06\ch06_02\（檔案ch06_02.aspx）Step1：網頁介面設計同範例5-1，但新增一個不可見的Literal控制項。（所有控制項皆採相對定位、其餘屬性參照屬性窗格）。第32页/共198页336.2.2 Literal控制項Step2：撰寫<script>內的程式碼如下：程式部分內容：第33页/共198页346.2.2 Literal控制項56789101112131415161718192021<scriptrunat="server">PrivatenumAsInteger'定義私用的欄位num,非Shared欄位

SubAddk(ByValkAsInteger)'可將此程序看作是Page類別的方法

num=num+kEndSub

ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)

num=CInt(Literal1.Text)'將Literal1.Text值取出

Addk(3)Addk(3)num=num+1Label1.Text=num

Literal1.Text=CStr(num)'存入新的Literal1.Text值

EndSub</script>第34页/共198页356.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的一個成員，只不過您可能需要進行更多的型別轉換。第35页/共198页366.2.2 Literal控制項Step3：執行程式。第36页/共198页376.3 HiddenField隱藏資訊控制項在範例6-2中，我們希望某些資料被保留，但不顯示在網頁中，當時我們採用的是不可見的Literal控制項，事實上，任何可存放資料的控制項只要設定為不可見，都可以達到此目的，只不過Literal控制項消耗的系統資源相對較少而已。除了使用不可見的控制項保存資料外，我們也可以採用HiddenField控制項來記錄資料。但這種做法會讓客戶端瀏覽器在執行【檢視原始碼】後，看到我們保留的資料，因此只適合資料不具保密性，也不怕被竄改時使用。HiddenField控制項的相關資訊如下：類別：System.Web.UI.WebControls.HiddenField類別功能：建立一個隱藏資訊。輸出的標籤：<inputtype="hidden">。類別重要的新增成員：第37页/共198页386.3 HiddenField隱藏資訊控制項【範例6-3】改寫範例6-2，以HiddenField控制項取代不可見的Literal1控制項。第38页/共198页396.3 HiddenField隱藏資訊控制項範例6-3：網站目錄ASPNET\ch06\ch06_03\（檔案ch06_03.aspx）Step1：網頁介面設計同範例6-2，但去除Literal1控制項、新增一個HiddenField控制項。（所有控制項皆採相對定位、其餘屬性參照屬性窗格）。第39页/共198页406.3 HiddenField隱藏資訊控制項Step2：撰寫<script>內的程式碼如下：程式部分內容：第40页/共198页416.3 HiddenField隱藏資訊控制項56789101112131415161718192021<scriptrunat="server">PrivatenumAsInteger'定義私用的欄位num,非Shared欄位

SubAddk(ByValkAsInteger)'可將此程序看作是Page類別的方法

num=num+kEndSub

ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)

num=CInt(HiddenField1.Value)

'將HiddenField1值取出

Addk(3)Addk(3)num=num+1Label1.Text=num

HiddenField1.Value=CStr(num)

'存入新的HiddenField1值

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

<inputtype="hidden">標籤。第43页/共198页446.4 文字輸入控制項輸入文字的Web伺服器控制項為TextBox控制項。相對於HTML中，有單行、密碼、多行等輸入文字的介面，在ASP.NET的Web伺服器控制項中，全部都交由TextBox控制項來完成。6.4.1 TextBox控制項TextBox控制項的相關資訊如下：類別：System.Web.UI.WebControls.TextBox類別功能：可產生文字方塊。輸出的標籤：<inputtype="text或password"/>或<textarea>。第44页/共198页456.4 文字輸入控制項類別重要的新增成員：第45页/共198页466.4.1 TextBox控制項第46页/共198页476.4.1 TextBox控制項【Rows、Columns屬性說明】Height、Width、Rows、Columns都可以設定文字方塊的外觀長寬，前者以像素為單位，後者以字元為單位，但同時設定時，Height、Width會比Rows、Columns優先考慮。故透過介面拉動文字方塊大小後，才設定Rows、Columns就會變成無作用（除非先刪除Height、Width屬性值）。使用範例：見範例6-4、6-5、6-6。第47页/共198页486.4.1 TextBox控制項【範例6-4】設計一個網頁，包含三種不同的文字方塊，並處理多行文字方塊的換行字元問題。範例6-4：網站目錄ASPNET\ch06\ch06_04\（檔案ch06_04.aspx）Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性參照屬性窗格）。第48页/共198页496.4.1 TextBox控制項第49页/共198页506.4.1 TextBox控制項Step2：撰寫兩個事件程序如下：程式部分內容：第50页/共198页517891011121314151617181920212223242526ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)DimstrAsNewString("")

str=TextBox1.Text&"您好<br/>"IfInformation.IsNumeric(TextBox2.Text)=FalseThenstr&="請輸入數字密碼"Label4.Text=strButton2_Click(sender,e)'呼叫

Return'離開程序

EndIfstr&="您的留言如下:<br/>"&TextBox3.Text

Label4.Text=str.Replace(vbCrLf,"<br/>")'處理換行字元

Button2_Click(sender,e)'呼叫EndSubProtectedSubButton2_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)TextBox1.Text=""TextBox2.Text=""TextBox3.Text=""EndSub第51页/共198页526.4.1 TextBox控制項範例說明：(1)由於TextMode屬性的設定，因此三個文字方塊將呈現不同功能。TextBox1的寬度雖然較長，但仍舊只能輸入6個Unicode字元（因為MaxLength屬性設定為6）。(2)Button2按鈕是用來清除文字方塊的內容。而Button2_Click()也可以讓其他其他程式碼呼叫，不過必須輸入正確的引數，因此在第14、19行將獲得的參數當作引數傳遞即可。(3)第18行是將換行字元替換為<br/>，否則在瀏覽器中，不會出現換行效果。而換行字元是我們在TextBox3中，輸入文字時使用【Enter】鍵造成的，因此這是一個不可見的特殊字元，VB為這些常數規劃了Microsoft.VisualBasic.Constants類別，其中的vbCrLf欄位可用來在程式中代表換行字元。至於如果輸入文字中包含空白字元，則請參閱範例5-2，使用Replace(""," ")來取代。Step3：執行程式。第52页/共198页53第53页/共198页546.4.1 TextBox控制項TextChanged事件當資料回傳給伺服器端時，若文字方塊內容與上次回傳時不同，則會產生TextChanged事件，並且ASP.NET會自動執行「實體名_TextChanged()」程序。【範例6-5】設計一個留言網頁，若留言重複或空白，則出現警告訊息，並且不輸出留言。（輸出後，不清除舊留言，除非使用者自己按下【清除】鈕）範例6-5：網站目錄ASPNET\ch06\ch06_05\（檔案ch06_05.aspx）Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性參照屬性窗格）。第54页/共198页55第55页/共198页566.4.1 TextBox控制項Step2：撰寫四個程序如下：（要產生TextBox1_TextChanged()程序，可以直接在TextBox1控制項上面按兩下）7891011121314151617181920ProtectedSubPage_Load(ByValsenderAsObject,ByValeAsSystem.EventArgs)Label1.Text=""Label2.Text=""EndSub

ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)IfLabel2.Text=""ThenLabel1.Text="請勿重複輸入相同的留言"EndIfIfTextBox1.Text=""ThenLabel1.Text="請勿輸入空白留言"Label2.Text=""EndIfEndSub第56页/共198页576.4.1 TextBox控制項範例說明：(1)第7~10行：每一次執行網頁時，都一定會先執行Page_Load，清除Label1與Label2的文字。2122232425262728293031ProtectedSubButton2_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)TextBox1.Text=""Label2.Text=""EndSub

ProtectedSubTextBox1_TextChanged(ByValsenderAsObject,ByValeAsSystem.EventArgs)DimstrAsNewString("")str&="您的留言如下:<br/>"&TextBox1.TextLabel2.Text=str.Replace(vbCrLf,"<br/>")'處理換行字元EndSub第57页/共198页586.4.1 TextBox控制項(2)第27~31行：如果使用者修改了TextBox1文字方塊的內容時，當資訊回傳到伺服器時，會先執行TextBox1_TextChanged程序（在執行完Page_Load之後）。而在本範例，資訊要回傳到伺服器，只有按下Button1或Button2兩種可能。請注意，在本程序中，修改了Label2的內容。(3)第12~20行：若是按下Button1【送出】鈕，則會執行Button1_Click1程序，此時若Label2.Text為空字串，代表前面只執行了Page_Load，而未執行TextBox1_TextChanged程序，也就是文字方塊內容其實並未改變，故第14行顯示勿輸入重複留言。而若TextBox1.Text為空字串（不論Label2.Text是否為空字串），都在第17行將警告訊息改為勿輸入空白。兩個If成立任一個，都會將Label2設為空字串，故只有在未輸入重複留言且未輸入空白時，才會利用Label2顯示收到的留言訊息。(4)第22~25行：若是按下Button2【清除】鈕，則清除兩個欄位。至於Label1為何不用清除，這是因為在Page_Load執行時已經清除，而所有程式只有在執行Button1_Click程序時才可能改變Label1的內容，但Button1_Click與Button2_Click只會執行其中一個，故不需要清除Label1的內容。第58页/共198页596.4.1 TextBox控制項(5)這個範例告訴我們一件事實，每一次執行程式時，不一定只會執行一個事件程序，並且TextBox1_TextChanged會比Button1_Click還先執行，故我們可以擴充圖5-6的網頁生命週期，將本範例的網頁生命週期繪製如下圖。圖6-1範例6-5的網頁生命週期第59页/共198页606.4.1 TextBox控制項Step3：執行程式。第60页/共198页616.4.1 TextBox控制項上述的執行過程，其網頁生命週期一共有三次，過程可以繪製如圖6-2，圖中標號了1,2,3，只有三次是傳送資料到伺服器端，並且第1次只有標頭資料，並無其他資料，而第2次與第3次則稱之為PostBack。第61页/共198页62圖6-2範例6-5執行過程中的三次網頁生命週期第62页/共198页636.4.2 讀取網頁與PostBack在圖6-2中，第一次讀取網頁使用的是GETmethod，第二次與第三次都是POSTmethod，這是HTTP資料傳輸的兩大方法。GET較無保密性，資料會放在網址列的後面，以「?」區隔網址與資料，多筆資料間則以「&」加以區隔。而POST則會經過編碼包裝成一個封包(Package)來傳送。要在伺服器端判斷該次客戶端傳送過來的資訊是使用GET還是POST，可以讀取Page.Request.HttpMethod來達成例如您可以在範例6-5中，增加一個標籤來顯示Page.Request.HttpMethod的值，就可以判斷出每次客戶端送出要求時，使用的是哪一個方法。在ASP.NET的規劃下，除了第一次讀取網頁時使用GETmethod，其餘都是使用POSTmethod，因此每一個WebForm的<asp:form>輸出時，輸出的HTML原始碼就包含下列資訊，代表未來將使用POSTmethod傳送資訊。<formname="表單名稱"method="post"action="網頁本身的網址"id="表單名稱">

….有的控制項對應的HTML標籤…</form>第63页/共198页646.4.2 讀取網頁與PostBack因此，我們可以將圖6-2重新繪製如圖6-3與6-4，來解釋每一次網頁之間的傳遞過程。圖6-3ASP.NET每一次網頁之間的傳遞過程第64页/共198页656.4.2 讀取網頁與PostBack在圖6-3中，每一次的POST在ASP.NET中稱之為PostBack，因為對於ASP.NET來說資料是回傳到伺服器端，故PostBack一般翻譯為「回傳」，而它將發生在第二次以後的每次傳送。而ASP.NET之所以能夠使用事件驅動方式來設計，主要就是因為它可以藉由PostBack來執行對應的事件程序。【註】伺服器端的Page物件可以透過IsPostBack屬性，判斷此次網頁被要求執行，是PostBack還是第一次連線。圖6-4ASP.NET的行為循環第65页/共198页666.4.2 讀取網頁與PostBack要進行POST回傳資料（不考慮GET方式），客戶端只有兩種方式可以達成：1.在<form>標籤中，包含一個<inputtype="submit">形成的按鈕。按下該按鈕後，就會將包含在<form>內的資料POST送往到伺服器action對應的目標檔案。2.使用JavaScript的指令進行POST送出資料到伺服器。而Button控制項的輸出就是一個<inputtype="submit">，故而範例6-5必須等到按下Button1或Button2按鈕時，客戶端才會送出資料到伺服器端，而不是文字方塊內容變動時就送出資料。第66页/共198页676.4.3 AutoPostBack屬性在前面我們已經說過，除了使用JavaScript之外，要回傳(PostBack)資料給伺服器，只能透過submit按鈕（也就是Button控制項）完成。而有些時候，我們希望在某個元件發生特定變化時，就能夠自動回傳(PostBack)資料給伺服器，以便伺服器立即作出反應（例如選擇元件在項目選取與未選取時加以出現某些提示訊息）。遇到這種需求，我們可以將控制項的AutoPostBack屬性設定為True，就可以達到目的了。而設定AutoPostBack屬性後，實際上在進行AutoPostBack時，ASP.NET是利用JavaScript的指令來完成的。第67页/共198页686.4.3 AutoPostBack屬性不過，每一種控制項發生AutoPostBack的時機有些不同例如選擇元件可以在控制項選擇改變時就自動AutoPostBack但文字方塊控制項則必須要等到焦點移開文字方塊後，才會自動AutoPostBack，這主要原因是在於它必須確保您已經完成了所有文字的輸入（否則每輸入一個字就來回讀取網頁一次，將會造成伺服器的負擔太大）我們透過一個範例來進行詳細的探討。【範例6-6】製作一個累加器，當使用者在文字方塊中輸入數值後，只要一將焦點離開文字方塊，就立即執行加法並將結果呈現在旁邊的標籤中。範例6-6：網站目錄ASPNET\ch06\ch06_06\（檔案ch06_06.aspx）第68页/共198页696.4.3 AutoPostBack屬性Step1：網頁介面設計如下（所有控制項皆採絕對定位）並設定屬性（其餘屬性參照屬性窗格）。第69页/共198页706.4.3 AutoPostBack屬性Step2：撰寫TextBox1_TextChanged程序如下：程式部分內容：範例說明：這個程式沒有按鈕，所以也沒有Button_Click程序。在TextBox1控制項上按兩下即可產生上述程序，然後加入程式碼用以累加與清除內容。Step3：執行程式。78910ProtectedSubTextBox1_TextChanged(ByValsenderAsObject,ByValeAsSystem.EventArgs)Label1.Text=CStr(CInt(Label1.Text)+CInt(TextBox1.Text))TextBox1.Text=""EndSub第70页/共198页71第71页/共198页726.4.3 AutoPostBack屬性Step4：重新執行程式，並於第一次執行後，於瀏覽器中執行快顯功能表的【檢視原始碼】指令，結果如下。1234567891011121314…<formname="form1"method="post"action="ch06_06.aspx"id="form1"><div><inputtype="hidden"name="__EVENTTARGET"id="__EVENTTARGET"value=""/><inputtype="hidden"name="__EVENTARGUMENT"id="__EVENTARGUMENT"value=""/><inputtype="hidden"name="__LASTFOCUS"id="__LASTFOCUS"value=""/></div><scripttype="text/javascript">//<![CDATA[vartheForm=document.forms['form1'];if(!theForm){theForm=document.form1;}第72页/共198页73151617181920212223242526272829303132333435function__doPostBack(eventTarget,eventArgument){if(!theForm.onsubmit||(theForm.onsubmit()!=false)){theForm.__EVENTTARGET.value=eventTarget;theForm.__EVENTARGUMENT.value=eventArgument;theForm.submit();}}//]]></script><scriptsrc="/ch06_06/WebResource.axd?d=Rv27NON6rxtFiA1VUkfCEA2&t=633777789737343750"type="text/javascript"></script><div><inputname="TextBox1"type="text"id="TextBox1"onchange="javascript:setTimeout('__doPostBack(\'TextBox1\',\'\')',0)"onkeypress="if(WebForm_TextBoxKeyHandler(event)==false)returnfalse;"style="top:22px;left:10px;position:absolute;height:20px;width:74px"/></div></form>…第73页/共198页746.4.3 AutoPostBack屬性【原始碼說明】(1)上述原始碼已經刪減許多，而留下來的全都是為了完成文字方塊內容改變時得以自動進行AutoPostBack所產生的HTML與JavaScript。(2)首先，第29行的onchange是當文字方塊內容發生變化時要執行的內嵌JavaScript事件函式。由於setTimeout函式的緣故，所以它會在0秒後呼叫__doPostBack(\‘TextBox1\’,\‘\’)函式。(3)至於__doPostBack函式則被定義在第15~20行，它有兩個參數，第一個為取得事件目標，第二個為取得事件參數。1.利用theForm變數取得網頁中的form1物件。2.第16行：此時是否為form1發生onsubmit事件，若是則不必利用JavaScript進行處理而離開__doPostBack函式。第74页/共198页756.4.3 AutoPostBack屬性3.第17~18行是將取得的兩個參數設定給第4、5行的二個隱藏欄位，以便於回傳給伺服器時一起回送。4.第19行是最重要的一行，它是將表單資料進行傳送伺服器的動作，submit()也就是JavaScript中，用以產生PostBack行為的函式。(4)上述JavaScript程式碼對於一般初學者而言，是非常困難的，不過您不用擔心，我們只需要設定控制項的AutoPostBack屬性為True，ASP.NET就會自動幫我們在回傳給客戶端的資料中加入這些必要的JavaScript程式碼，一行程式也不用寫。第75页/共198页766.5 傳送控制項除了使用AutoPostBack方式自動回傳表單資料給伺服器，一般常使用的方式仍是以submit按鈕來完成資料的傳送。而在ASP.NET中，與按鈕有關的控制項一共有Button、ImageButton與LinkButton等三種控制項。6.5.1 Button控制項Button控制項就是我們在前面常使用的按鈕控制項，它以文字按鈕的外觀呈現於網頁中。並且會在輸出時，轉換為<form>標籤內的<inputtype="submit">標籤。Button控制項的相關資訊如下：類別：System.Web.UI.WebControls.Button類別功能：產生文字型式的按鈕。輸出的標籤：<inputtype=“submit”>。若UseSubmitBehavior屬性設定為False，則輸出為<inputtype=“button”>，並使用JavaScript進行submit動作。類別重要的新增成員：第76页/共198页77第77页/共198页78【PostBackUrl屬性說明】在ASP.NET的規劃中，WebForm對應的<form>標籤之action屬性將永遠記載為網頁本身的網址。如果想要進行網頁轉向，則可以使用Response.Redirect，但如果想要同時POST表單資料，則應該使用PostBackUrl屬性來完成。一般我們並不建議這麼做，除非是想要POST的目標網頁是非ASP.NET網頁，例如PHP、傳統ASP、JSP等。在ASP.NET中，我們較常使用的方式仍舊是單一網頁型式並以事件驅動模型來開發，如此較為單純。第78页/共198页796.5.1 Button控制項使用範例：見之前的眾範例及範例6-7。【範例6-7】設計一個網頁，包含三個按鈕，功能為對樂透球號進行不同的顯示方式。範例6-7：網站目錄ASPNET\ch06\ch06_07\（檔案ch06_07.aspx）Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。第79页/共198页806.5.1 Button控制項第80页/共198页816.5.1 Button控制項屬性窗格切換到事件頁籤，並將三個按鈕的Command事件都設定為Button1_Command。Step2：撰寫<script>內的程式碼如下：程式部分內容：第81页/共198页825678910111213141516171819202122232425262728<scriptrunat="server">

Dimballs()AsInteger={37,14,20,6,38,42}DimspecBallAsInteger=15'若需從檔案載入球號,可以撰寫於Page_Load程序中

ProtectedSubButton1_Command(ByValsenderAsObject,ByValeAsSystem.Web.UI.WebControls.CommandEventArgs)Label1.Text="球號":Label2.Text="特別號:"SelectCasee.CommandName

Case"Original"Label1.Text&="(原始順序):"Case"Sort"SortBy(CStr(e.CommandArgument))Label1.Text&="(排序):"CaseElseLabel1.Text&="發生錯誤"EndSelect

ForEachnumInballsLabel1.Text&=CStr(num)&""Next

Label2.Text&=CStr(specBall)EndSub第82页/共198页836.5.1 Button控制項範例說明：(1)第11~28行：Button1_Command會在按鈕被按下後執行。其中利用「e.CommandName」判斷是哪一個按鈕被按下，當然如果您想要使用sender來判斷也可以。2930313233343536SubSortBy(ByValcommandArgAsString)Array.Sort(balls)'遞增排序

IfcommandArg="遞減"ThenArray.Reverse(balls)'已遞增故反向即可

EndIfEndSub</script>第83页/共198页846.5.1 Button控制項這個範例是本書第一次示範事件物件e的使用方式，而此時的e之型別為CommandEventArgs類別，您可以查閱它有兩個屬性CommandArgument與CommandName屬性，恰好對應按鈕物件的同名屬性。而由於CommandName屬性回傳值型別為String，故可以直接用來在Select…Case中當作條件值。(2)第30~35行：由於CommandArgument屬性的型別為Object（事實上，它是為了要對應可能出現的不定數量之參數而如此宣告），因此第17行先使用CStr()將之轉換後呼叫SortBy()程序。由於必定要經過排序，故先排序後再決定是否需要反轉。Step3：執行程式。第84页/共198页85第85页/共198页866.5.2 ImageButton控制項ImageButton控制項可以製作圖片型式的按鈕，您必須設定圖片的來源位址，並且傳送時也可以接收到滑鼠游標在按下圖片按鈕時的座標。ImageButton控制項的相關資訊如下：類別：System.Web.UI.WebControls.ImageButton類別重要的繼承類別：本類別繼承自System.Web.UI.WebControls.Image類別功能：產生圖片型式的按鈕。輸出的標籤：<inputtype="image">。類別重要的新增成員：第86页/共198页876.5.2 ImageButton控制項第87页/共198页886.5.2 ImageButton控制項使用範例：見範例6-8。第88页/共198页896.5.3 LinkButton控制項LinkButton控制項可以製作超鏈結型式的按鈕，事實上，它就是一個超鏈結，外觀上與HyperLink控制項相同，但功能接近於Button控制項。它的輸出是一個<a>錨標籤，不過href並不像一般超鏈結直接設定目標網址，而是執行一個內嵌的JavaScript，並呼叫__doPostBack函式進行回傳動作。LinkButton控制項的相關資訊如下：類別：System.Web.UI.WebControls.LinkButton類別功能：產生超鏈結型式的按鈕。輸出的標籤：<ahref="javascript:__doPostBack('名稱','')">文字</a>。類別重要的新增成員：第89页/共198页906.5.3 LinkButton控制項使用範例：見範例6-8。第90页/共198页916.5.3 LinkButton控制項【範例6-8】圖形按鈕及超鏈結按鈕的練習。範例6-8：網站目錄ASPNET\ch06\ch06_08\（檔案ch06_08.aspx）【預備資源】：Time.jpg事先位於\ch06\ch06_08\目錄中Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。第91页/共198页926.5.3 LinkButton控制項【加入圖片的方式：ImageUrl屬性】先在介面中加入ImageButton1控制項，然後到屬性窗格中，點選該控制項的ImageUrl屬性值，如下圖。第92页/共198页936.5.3 LinkButton控制項第93页/共198页946.5.3 LinkButton控制項Step2：撰寫兩個事件程序如下：範例說明：(1)第11~13行：按下超鏈結按鈕後會執行LinkButton1_Click事件程序。(2)第7~9行：按下圖片按鈕後會執行ImageButton1_Click事件程序，其中e.X與e.Y是取出滑鼠按下時的座標。Step3：執行程式。78910111213ProtectedSubImageButton1_Click(ByValsenderAsObject,ByValeAsSystem.Web.UI.ImageClickEventArgs)Label1.Text="您按下了圖片按鈕,按下時的游標座標為("&e.X&","&e.Y&")"EndSubProtectedSubLinkButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)Label1.Text="您按下了鏈結按鈕"EndSub第94页/共198页95第95页/共198页966.6 選擇控制項ASP.NET提供的選擇控制項種類眾多，包含單選、複選、選單等種類，有時我們會希望在選取某些項目時立即作出反應，此時通常搭配該控制項的AutoPostBack屬性來完成。6.6.1 CheckBox多選控制項CheckBox控制項將會在網頁中出現一個核取方塊，使用者可以勾選該方塊，代表選取對應的項目。CheckBox控制項的相關資訊如下：類別：System.Web.UI.WebControls.CheckBox類別功能：可產生一個核取方塊（包含其說明文字）。輸出的標籤：核取方塊以<inputtype="checkbox"/>標籤出現。

說明文字以<labelfor="方塊名稱">說明文字</label>標籤出現。類別重要的新增成員：第96页/共198页97第97页/共198页986.6.1 CheckBox多選控制項使用範例：見範例6-9。

【範例6-9】核取方塊的練習。範例6-9：網站目錄ASPNET\ch06\ch06_09\（檔案ch06_09.aspx）Step1：網頁介面設計如下（所有控制項皆採相對定位）並設定屬性（其餘屬性參照屬性窗格）。第98页/共198页99Step2：撰寫兩個事件程序如下：程式部分內容：78910111213ProtectedSubCheckBox3_CheckedChanged(ByValsenderAsObject,ByValeAsSystem.EventArgs)IfCheckBox3.Checked=TrueThenCheckBox3.Text="螢幕(螢幕為代購,不適用永久保固)"ElseCheckBox3.Text="螢幕"EndIfEndSub第99页/共198页1006.6.1 CheckBox多選控制項141516171819202122232425262728293031ProtectedSubButton1_Click(ByValsenderAsObject,ByValeAsSystem.EventArgs)If(CheckBox1.CheckedOrCheckBox2.Checked_OrCheckBox3.Checked)=FalseThenLabel1.Text="請選擇至少一樣產品"ReturnEndIfLabel1.Text="您所訂購的產品如下:<br/>"IfCheckBox1.Checked=TrueThenLabel1.Text&=CheckBox1.Text&"<br/>"EndIfIfCheckBox2.Checked=TrueThenLabel1.Text&=CheckBox2.Text&"<br/>"EndIfIfCheckBox3.Checked=TrueThenLabel1.Text&=CheckBox3.Text.Substring(0,2)&"<br/>"EndIfEndSub第100页/共198页1016.6.1 CheckBox多選控制項範例說明：(1)第7~13行：點選CheckBox3時，會自動立即執行（因為已經設定該控制項的AutoPostBack屬性為True），藉由CheckBox3.Checked判斷選項是否被選取。(2)第15~31行：按下按鈕後會執行，第16~20行是當三個選項都未被按下時執行。Step3：執行程式。第101页/共198页102第102页/共198页1036.6.2 CheckBoxList多選清單控制項假設我們有許多的核取方塊需要出現在網頁中，並且它們具有同一性質且允許複選（例如使用者可選擇索取1~12月中任幾個月的交易資料），此時除了可以使用CheckBox控制項一個一個的建立選項之外，也可以直接使用CheckBoxList控制項，建立核取方塊清單。CheckBoxList控制項中的每個選項合起來會形成一個ListItemCollection集合，並且還可以動態繫結XML或資料庫檔案，自動設定各選項的文字。CheckBoxList控制項的相關資訊如下：類別：System.Web.UI.WebControls.CheckBoxList類別重要繼承類別：本類別繼承自System.Web.UI.WebControls.ListControl類別其他