slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
第六章 伺服器控制項(一) PowerPoint Presentation
Download Presentation
第六章 伺服器控制項(一)

Loading in 2 Seconds...

play fullscreen
1 / 197

第六章 伺服器控制項(一) - PowerPoint PPT Presentation


  • 144 Views
  • Uploaded on

第六章 伺服器控制項(一). 在本章中,我們介紹工具箱/標準頁籤中的常用控制項,並且探討 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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about '第六章 伺服器控制項(一)' - more


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

第六章伺服器控制項(一)

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

slide2
大綱
  • 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控制項
slide3
大綱
  • 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 本章回顧
slide4
第六章伺服器控制項(一)
  • 在本章中,我們將介紹常用的Web伺服器控制項,並介紹何謂PostBack,以及如何應用面板(Panel)來管理眾多控制項。
slide5
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伺服器控制項)。
      • 如下範例:
slide8
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

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

【註】以上為產生HTML伺服器控制項的方法,以及如何應用HTML伺服器控制項,但在本書中,我們將極少使用HTML伺服器控制項,因為所有的HTML伺服器控制項都可以使用Web伺服器控制項來取代。

slide10
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" />

slide11
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
6.1.1 Web伺服器控制項的種類
  • Web伺服器控制項的種類有很多,並分散於工具箱的各頁籤中,而我們將標準頁籤的各種Web伺服器控制項依照字母順序,整理於表6-1中。
6 1 2 web
6.1.2Web伺服器控制項的共通屬性
  • 所有的Web伺服器控制項都繼承自System.Web.UI.WebControls類別,因此WebControls類別的屬性將會是所有的Web伺服器控制項皆具備的屬性。我們將之整理於表6-2(a)中(但不含定義於WebControls父類別Control的屬性):
6 1 2 web2
6.1.2Web伺服器控制項的共通屬性
  • 至於Web伺服器控制項(WebControls類別)繼承自Control類別的屬性就更多了,因為Control類別是所有控制項的基底,因此,我們只將其重要的屬性整理於表6-2(b)。
slide19
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
6.2.1 Label控制項
  • 類別重要的新增成員:
  • 【AssociatedControlID屬性說明】
    • 當使用AssociatedControlID屬性將標籤控制項與某個控制項產生關聯時,標籤設定的快速鍵(AccessKey屬性值)將會變成關聯控制項的快速鍵。
6 2 1 label1
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
6.2.2 Literal控制項
  • Literal控制項的相關資訊如下:
    • 類別: System.Web.UI.WebControls.Literal類別
    • 功能:直接輸出文字(不可產生樣式變化)。
    • 輸出的標籤:無。若不更動Mode屬性,則會將Text屬性值直接輸出。
6 2 2 literal1
6.2.2 Literal控制項
  • 類別重要的新增成員:
6 2 2 literal2
6.2.2 Literal控制項
    • 【Mode屬性說明】
      • 若Mode設定為PassThrough,則Text的內容不會被修改就輸出。
      • 若Mode設定為Encode,則Text的內容會轉換成HTML編碼的字串,例如「<」、「>」等都會被更動為「&lt;」、「&gt;」。
      • 若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 literal3
6.2.2 Literal控制項
  • Step1:網頁介面設計如下(所有控制項皆採相對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 2 2 literal4
6.2.2 Literal控制項
  • 【註】設定BackColor與ForeColor等色彩屬性時,除了可以直接輸入數值外,也可以使用選取方式如下:
slide27
事實上,您也可以直接輸入顏色的英文代碼,例如#0000FF的英文代碼為Blue。要查閱英文代碼,可於線上說明查閱System.Drawing.KnownColor列舉型別。事實上,您也可以直接輸入顏色的英文代碼,例如#0000FF的英文代碼為Blue。要查閱英文代碼,可於線上說明查閱System.Drawing.KnownColor列舉型別。
6 2 2 literal5
6.2.2 Literal控制項
  • Step2:撰寫Button1_Click事件程序碼如下:
    • 程式部分內容:
  • 範例說明:
    • 僅有兩行敘述,都是連結字串後設定為Literal1與Label3的Text屬性。(因為大部分動作都已經在屬性窗格中完成設定)
  • Step3:執行程式。
6 2 2 literal6
6.2.2 Literal控制項
  • Step4:於瀏覽器中執行快顯功能表的【檢視原始檔】指令,結果如下。
6 2 2 literal7
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 literal8
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 literal9
6.2.2 Literal控制項
  • Step2:撰寫<script>內的程式碼如下:
    • 程式部分內容:
6 2 2 literal11
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 literal12
6.2.2 Literal控制項
  • Step3:執行程式。
6 3 hiddenfield
6.3 HiddenField隱藏資訊控制項
  • 在範例6-2中,我們希望某些資料被保留,但不顯示在網頁中,當時我們採用的是不可見的Literal控制項,事實上,任何可存放資料的控制項只要設定為不可見,都可以達到此目的,只不過Literal控制項消耗的系統資源相對較少而已。
  • 除了使用不可見的控制項保存資料外,我們也可以採用HiddenField控制項來記錄資料。
    • 但這種做法會讓客戶端瀏覽器在執行【檢視原始檔】後,看到我們保留的資料,因此只適合資料不具保密性,也不怕被竄改時使用。
  • HiddenField控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.HiddenField類別
    • 功能:建立一個隱藏資訊。
    • 輸出的標籤: <input type="hidden">。
    • 類別重要的新增成員:
6 3 hiddenfield1
6.3 HiddenField隱藏資訊控制項
  • 【範例6-3】
    • 改寫範例6-2,以HiddenField控制項取代不可見的Literal1控制項。
6 3 hiddenfield2
6.3 HiddenField隱藏資訊控制項
  • 範例6-3:
    • 網站目錄 ASPNET\ch06\ch06_03\(檔案ch06_03.aspx)
    • Step1:網頁介面設計同範例6-2,但去除Literal1控制項、新增一個HiddenField控制項。(所有控制項皆採相對定位、其餘屬性參照屬性窗格)。
6 3 hiddenfield3
6.3 HiddenField隱藏資訊控制項
  • Step2:撰寫<script>內的程式碼如下:
    • 程式部分內容:
6 3 hiddenfield5
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 hiddenfield6
6.3 HiddenField隱藏資訊控制項
  • Step4:於瀏覽器執行【檢視原始檔】會看到下列<input type="hidden">標籤。
slide44
6.4 文字輸入控制項
  • 輸入文字的Web伺服器控制項為TextBox控制項。相對於HTML中,有單行、密碼、多行等輸入文字的介面,在ASP.NET的Web伺服器控制項中,全部都交由TextBox控制項來完成。
  • 6.4.1 TextBox控制項
  • TextBox控制項的相關資訊如下:
    • 類別: System.Web.UI.WebControls.TextBox類別
    • 功能:可產生文字方塊。
    • 輸出的標籤:
      • <input type="text或password" />或<textarea>。
slide45
6.4 文字輸入控制項
  • 類別重要的新增成員:
6 4 1 textbox1
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 textbox2
6.4.1 TextBox控制項
  • 【範例6-4】
    • 設計一個網頁,包含三種不同的文字方塊,並處理多行文字方塊的換行字元問題。
  • 範例6-4:
    • 網站目錄 ASPNET\ch06\ch06_04\(檔案ch06_04.aspx)
    • Step1:網頁介面設計如下(所有控制項皆採絕對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 4 1 textbox4
6.4.1 TextBox控制項
  • Step2:撰寫兩個事件程序如下:
    • 程式部分內容:
6 4 1 textbox5
6.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(" ", "&nbsp;")來取代。
  • Step3:執行程式。
6 4 1 textbox6
6.4.1 TextBox控制項
  • TextChanged事件
    • 當資料回傳給伺服器端時,若文字方塊內容與上次回傳時不同,則會產生TextChanged事件,並且ASP.NET會自動執行「實體名_TextChanged()」程序。
  • 【範例6-5】
    • 設計一個留言網頁,若留言重複或空白,則出現警告訊息,並且不輸出留言。(輸出後,不清除舊留言,除非使用者自己按下【清除】鈕)
  • 範例6-5:
    • 網站目錄 ASPNET\ch06\ch06_05\(檔案ch06_05.aspx)
    • Step1:網頁介面設計如下(所有控制項皆採絕對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 4 1 textbox7
6.4.1 TextBox控制項
  • Step2:撰寫四個程序如下:(要產生TextBox1_TextChanged()程序,可以直接在TextBox1控制項上面按兩下)
6 4 1 textbox8
6.4.1 TextBox控制項
  • 範例說明:
    • (1)第7~10行:每一次執行網頁時,都一定會先執行Page_Load,清除Label1與Label2的文字。
6 4 1 textbox9
6.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的內容。
6 4 1 textbox10
6.4.1 TextBox控制項
  • (5)這個範例告訴我們一件事實,每一次執行程式時,不一定只會執行一個事件程序,並且TextBox1_TextChanged會比Button1_Click還先執行,故我們可以擴充圖5-6的網頁生命週期,將本範例的網頁生命週期繪製如下圖。

圖6-1 範例6-5的網頁生命週期

6 4 1 textbox11
6.4.1 TextBox控制項
  • Step3:執行程式。
6 4 1 textbox12
6.4.1 TextBox控制項
  • 上述的執行過程,其網頁生命週期一共有三次,過程可以繪製如圖6-2,圖中標號了1,2,3,只有三次是傳送資料到伺服器端,並且第1次只有標頭資料,並無其他資料,而第2次與第3次則稱之為PostBack。
6 4 2 postback
6.4.2 讀取網頁與PostBack
  • 在圖6-2中,第一次讀取網頁使用的是GET method,第二次與第三次都是POST method,這是HTTP資料傳輸的兩大方法。
    • GET較無保密性,資料會放在網址列的後面,以「?」區隔網址與資料,多筆資料間則以「&」加以區隔。
    • 而POST則會經過編碼包裝成一個封包(Package)來傳送。要在伺服器端判斷該次客戶端傳送過來的資訊是使用GET還是POST,可以讀取Page.Request.HttpMethod來達成
      • 例如您可以在範例6-5中,增加一個標籤來顯示Page.Request.HttpMethod的值,就可以判斷出每次客戶端送出要求時,使用的是哪一個方法。
  • 在ASP.NET的規劃下,除了第一次讀取網頁時使用GET method,其餘都是使用POST method,因此每一個Web Form的<asp:form>輸出時,輸出的HTML原始碼就包含下列資訊,代表未來將使用POST method傳送資訊。

<form name="表單名稱" method="post" action="網頁本身的網址" id="表單名稱">

…所有的控制項對應的HTML標籤…

</form>

6 4 2 postback1
6.4.2 讀取網頁與PostBack
  • 因此,我們可以將圖6-2重新繪製如圖6-3與6-4,來解釋每一次網頁之間的傳遞過程。

圖6-3

ASP.NET每一次網頁之間的傳遞過程

6 4 2 postback2
6.4.2 讀取網頁與PostBack
  • 在圖6-3中,每一次的POST在ASP.NET中稱之為PostBack,因為對於ASP.NET來說資料是回傳到伺服器端,故PostBack一般翻譯為「回傳」,而它將發生在第二次以後的每次傳送。而ASP.NET之所以能夠使用事件驅動方式來設計,主要就是因為它可以藉由PostBack來執行對應的事件程序。
  • 【註】
    • 伺服器端的Page物件可以透過IsPostBack屬性,判斷此次網頁被要求執行,是PostBack還是第一次連線。

圖6-4 ASP.NET的行為循環

6 4 2 postback3
6.4.2 讀取網頁與PostBack
  • 要進行POST回傳資料(不考慮GET方式),客戶端只有兩種方式可以達成:
    • 1.在<form>標籤中,包含一個<input type=“submit”>形成的按鈕。按下該按鈕後,就會將包含在<form>內的資料POST送往到伺服器action對應的目標檔案。
    • 2.使用JavaScript的指令進行POST送出資料到伺服器。
      • 而Button控制項的輸出就是一個<input type="submit">,故而範例6-5必須等到按下Button1或Button2按鈕時,客戶端才會送出資料到伺服器端,而不是文字方塊內容變動時就送出資料。
6 4 3 autopostback
6.4.3 AutoPostBack屬性
  • 在前面我們已經說過,除了使用JavaScript之外,要回傳(PostBack)資料給伺服器,只能透過submit按鈕(也就是Button控制項)完成。
  • 而有些時候,我們希望在某個元件發生特定變化時,就能夠自動回傳(PostBack)資料給伺服器,以便伺服器立即作出反應(例如選擇元件在項目選取與未選取時加以出現某些提示訊息)。
    • 遇到這種需求,我們可以將控制項的AutoPostBack屬性設定為True,就可以達到目的了。
    • 而設定AutoPostBack屬性後,實際上在進行AutoPostBack時,ASP.NET是利用JavaScript的指令來完成的。
6 4 3 autopostback1
6.4.3 AutoPostBack屬性
    • 不過,每一種控制項發生AutoPostBack的時機有些不同
      • 例如選擇元件可以在控制項選擇改變時就自動AutoPostBack
      • 但文字方塊控制項則必須要等到焦點移開文字方塊後,才會自動AutoPostBack,這主要原因是在於它必須確保您已經完成了所有文字的輸入(否則每輸入一個字就來回讀取網頁一次,將會造成伺服器的負擔太大)。
    • 我們透過一個範例來進行詳細的探討。
  • 【範例6-6】
    • 製作一個累加器,當使用者在文字方塊中輸入數值後,只要一將焦點離開文字方塊,就立即執行加法並將結果呈現在旁邊的標籤中。
  • 範例6-6:
    • 網站目錄 ASPNET\ch06\ch06_06\(檔案ch06_06.aspx)
6 4 3 autopostback2
6.4.3 AutoPostBack屬性
  • Step1:網頁介面設計如下(所有控制項皆採絕對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 4 3 autopostback3
6.4.3 AutoPostBack屬性
  • Step2:撰寫TextBox1_TextChanged程序如下:
    • 程式部分內容:
  • 範例說明:
    • 這個程式沒有按鈕,所以也沒有Button_Click程序。在TextBox1控制項上按兩下即可產生上述程序,然後加入程式碼用以累加與清除內容。
  • Step3:執行程式。
6 4 3 autopostback4
6.4.3 AutoPostBack屬性
  • Step4:重新執行程式,並於第一次執行後,於瀏覽器中執行快顯功能表的【檢視原始檔】指令,結果如下。
6 4 3 autopostback5
6.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函式。
6 4 3 autopostback6
6.4.3 AutoPostBack屬性
    • 3.第17~18行是將取得的兩個參數設定給第4、5行的二個隱藏欄位,以便於回傳給伺服器時一起回送。
    • 4.第19行是最重要的一行,它是將表單資料進行傳送伺服器的動作,submit()也就是JavaScript中,用以產生PostBack行為的函式。
  • (4)上述JavaScript程式碼對於一般初學者而言,是非常困難的,不過您不用擔心,我們只需要設定控制項的AutoPostBack屬性為True,ASP.NET就會自動幫我們在回傳給客戶端的資料中加入這些必要的JavaScript程式碼,一行程式也不用寫。
slide76
6.5 傳送控制項
  • 除了使用AutoPostBack方式自動回傳表單資料給伺服器,一般常使用的方式仍是以submit按鈕來完成資料的傳送。而在ASP.NET中,與按鈕有關的控制項一共有Button、ImageButton與LinkButton等三種控制項。
  • 6.5.1 Button控制項
  • Button控制項就是我們在前面常使用的按鈕控制項,它以文字按鈕的外觀呈現於網頁中。並且會在輸出時,轉換為<form>標籤內的<input type="submit">標籤。
  • Button控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.Button類別
    • 功能:產生文字型式的按鈕。
    • 輸出的標籤:
      • <input type="submit">。若UseSubmitBehavior屬性設定為False,則輸出為<input type="button">,並使用JavaScript進行submit動作。
    • 類別重要的新增成員:
slide78
【PostBackUrl屬性說明】
    • 在ASP.NET的規劃中,Web Form對應的<form>標籤之action屬性將永遠記載為網頁本身的網址。
    • 如果想要進行網頁轉向,則可以使用Response.Redirect,但如果想要同時POST表單資料,則應該使用PostBackUrl屬性來完成。
    • 一般我們並不建議這麼做,除非是想要POST的目標網頁是非ASP.NET網頁,例如PHP、傳統ASP、JSP等。在ASP.NET中,我們較常使用的方式仍舊是單一網頁型式並以事件驅動模型來開發,如此較為單純。
6 5 1 button
6.5.1 Button控制項
    • 使用範例:見之前的眾範例及範例6-7。
  • 【範例6-7】
    • 設計一個網頁,包含三個按鈕,功能為對樂透球號進行不同的顯示方式。
  • 範例6-7:
    • 網站目錄 ASPNET\ch06\ch06_07\(檔案ch06_07.aspx)
    • Step1:網頁介面設計如下(所有控制項皆採相對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 5 1 button2
6.5.1 Button控制項
  • 屬性窗格切換到事件頁籤,並將三個按鈕的Command事件都設定為Button1_Command。
  • Step2:撰寫<script>內的程式碼如下:
    • 程式部分內容:
6 5 1 button3
6.5.1 Button控制項
  • 範例說明:
    • (1)第11~28行:Button1_Command會在按鈕被按下後執行。其中利用「e.CommandName」判斷是哪一個按鈕被按下,當然如果您想要使用sender來判斷也可以。
6 5 1 button4
6.5.1 Button控制項
      • 這個範例是本書第一次示範事件物件e的使用方式,而此時的e之型別為CommandEventArgs類別,您可以查閱它有兩個屬性CommandArgument與CommandName屬性,恰好對應按鈕物件的同名屬性。而由於CommandName屬性回傳值型別為String,故可以直接用來在Select…Case中當作條件值。
    • (2)第30~35行:由於CommandArgument屬性的型別為Object(事實上,它是為了要對應可能出現的不定數量之參數而如此宣告),因此第17行先使用CStr()將之轉換後呼叫SortBy()程序。由於必定要經過排序,故先排序後再決定是否需要反轉。
  • Step3:執行程式。
6 5 2 imagebutton
6.5.2 ImageButton控制項
  • ImageButton控制項可以製作圖片型式的按鈕,您必須設定圖片的來源位址,並且傳送時也可以接收到滑鼠游標在按下圖片按鈕時的座標。
  • ImageButton控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.ImageButton類別
    • 重要的繼承類別:
      • 本類別繼承自System.Web.UI.WebControls.Image類別
    • 功能:產生圖片型式的按鈕。
    • 輸出的標籤:<input type="image">。
    • 類別重要的新增成員:
6 5 2 imagebutton2
6.5.2 ImageButton控制項
  • 使用範例:見範例6-8。
6 5 3 linkbutton
6.5.3 LinkButton控制項
  • LinkButton控制項可以製作超鏈結型式的按鈕,事實上,它就是一個超鏈結,外觀上與HyperLink 控制項相同,但功能接近於Button控制項。
  • 它的輸出是一個<a>錨標籤,不過href並不像一般超鏈結直接設定目標網址,而是執行一個內嵌的JavaScript,並呼叫__doPostBack函式進行回傳動作。
  • LinkButton控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.LinkButton類別
    • 功能:產生超鏈結型式的按鈕。
    • 輸出的標籤:
      • a href="javascript:__doPostBack('名稱','')">文字</a>。
    • 類別重要的新增成員:
6 5 3 linkbutton1
6.5.3 LinkButton控制項
  • 使用範例:見範例6-8。
6 5 3 linkbutton2
6.5.3 LinkButton控制項
  • 【範例6-8】
    • 圖形按鈕及超鏈結按鈕的練習。
  • 範例6-8:
    • 網站目錄 ASPNET\ch06\ch06_08\(檔案ch06_08.aspx)
    • 【預備資源】:新網站建立後,將Time.jpg複製到網站目錄中
    • Step1:網頁介面設計如下(所有控制項皆採相對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 5 3 linkbutton3
6.5.3 LinkButton控制項
  • 【加入圖片的方式:ImageUrl屬性】
    • 先在介面中加入ImageButton1控制項,然後到屬性窗格中,點選該控制項的ImageUrl屬性值,如下圖。
6 5 3 linkbutton5
6.5.3 LinkButton控制項
  • Step2:撰寫兩個事件程序如下:
  • 範例說明:
    • (1)第11~13行:按下超鏈結按鈕後會執行LinkButton1_Click事件程序。
    • (2)第7~9行:按下圖片按鈕後會執行ImageButton1_Click事件程序,其中e.X與e.Y是取出滑鼠按下時的座標。
  • Step3:執行程式。
slide96
6.6 選擇控制項
  • ASP.NET提供的選擇控制項種類眾多,包含單選、複選、選單等種類,有時我們會希望在選取某些項目時立即作出反應,此時通常搭配該控制項的AutoPostBack屬性來完成。
  • 6.6.1 CheckBox多選控制項
    • CheckBox控制項將會在網頁中出現一個核取方塊,使用者可以勾選該方塊,代表選取對應的項目。
  • CheckBox控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.CheckBox類別
    • 功能:可產生一個核取方塊(包含其說明文字)。
    • 輸出的標籤:
      • 核取方塊以<input type=“checkbox” />標籤出現。 說明文字以<label for="方塊名稱">說明文字</label>標籤出現。
    • 類別重要的新增成員:
6 6 1 checkbox
6.6.1 CheckBox多選控制項
    • 使用範例:見範例6-9。
  • 【範例6-9】
    • 核取方塊的練習。
  • 範例6-9:
    • 網站目錄 ASPNET\ch06\ch06_09\(檔案ch06_09.aspx)
    • Step1:網頁介面設計如下(所有控制項皆採相對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 6 1 checkbox2
6.6.1 CheckBox多選控制項
  • 範例說明:
    • (1)第7~13行:點選CheckBox3時,會自動立即執行(因為已經設定該控制項的AutoPostBack屬性為True),藉由CheckBox3.Checked判斷選項是否被選取。
    • (2)第15~31行:按下按鈕後會執行,第16~20行是當三個選項都未被按下時執行。
  • Step3:執行程式。
6 6 2 checkboxlist
6.6.2 CheckBoxList多選清單控制項
  • 假設我們有許多的核取方塊需要出現在網頁中,並且它們具有同一性質且允許複選(例如使用者可選擇索取1~12月中任幾個月的交易資料),此時除了可以使用CheckBox控制項一個一個的建立選項之外,也可以直接使用CheckBoxList控制項,建立核取方塊清單。
  • CheckBoxList控制項中的每個選項合起來會形成一個ListItemCollection集合,並且還可以動態繫結XML或資料庫檔案,自動設定各選項的文字。
  • CheckBoxList控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.CheckBoxList類別
    • 重要繼承類別:本類別繼承自System.Web.UI.WebControls.ListControl類別
    • 其他重要的類別: ListControl.Items屬性的型別則為ListItemCollection類別。
    • 功能:可產生核取方塊清單。
6 6 2 checkboxlist1
6.6.2 CheckBoxList多選清單控制項
  • 輸出的標籤(1):
    • 若設定為Table配置方式,則整個清單包含在<table>表格內,垂直顯示時,表格的每一列<tr>只有一個儲存格<td>,水平顯示時,則只有一個<tr>,但有多個儲存格<td>。而每一個核取方塊選項都包含在一個儲存格內。
  • 輸出的標籤(2):
    • 若設定為Flow配置方式,垂直顯示時,使用<br />分隔各選項,水平顯示時,沒有任何標籤作為區隔。
  • 輸出的標籤(3):
    • 核取方塊選項則同樣採用<input type="checkbox" />、說明文字同樣採用<label>標籤出現。而每一個選項的id名稱與name名稱都不相同(以_與$分隔遞增編號)。
  • CheckBoxList類別重要的新增成員:
6 6 2 checkboxlist2
6.6.2 CheckBoxList多選清單控制項
  • ListControl類別重要的新增成員:
6 6 2 checkboxlist4
6.6.2 CheckBoxList多選清單控制項
  • 【Items 屬性說明】
    • ListControl.Items屬性的回傳值是一個ListItemCollection集合,它的每一個元素都是一個ListItem物件,並且可以透過多種方法進行加入、移除元素,或者尋找特定元素。
    • 這個集合與範例5-9的集合類似,也是一種key-value集合,但此處的兩個欄位分別稱為Text與Value。我們將相關方法與屬性整理於表6-11(c)。
6 6 2 checkboxlist5
6.6.2 CheckBoxList多選清單控制項
  • ListItemCollection類別(ListControl.Items屬性的型別)重要的成員:
6 6 2 checkboxlist6
6.6.2 CheckBoxList多選清單控制項
  • 而由於ListItemCollection集合中,每個項目都是一個ListItem類別的物件,故我們也將ListItem類別的重要屬性列於下表。
6 6 2 checkboxlist7
6.6.2 CheckBoxList多選清單控制項
    • ListItem類別重要的成員:
    • 使用範例:見範例6-10、6-11。
  • 【範例6-10】
    • 使用核取方塊清單製作同範例6-9的網頁。
6 6 2 checkboxlist8
6.6.2 CheckBoxList多選清單控制項
  • 範例6-10:
    • 網站目錄ASPNET\ch06\ch06_10\(檔案ch06_10.aspx)
    • Step1:除了CheckBoxList控制項之外,其餘控制項皆與範例6-9相同。您可以複製範例6-9的所有檔案後,更改檔名,刪除事件程序,然後刪除三個CheckBox控制項即可完成下圖介面。
    • Step2:在工具箱中拖曳CheckBoxList控制項至標籤與按鈕之間,然後會出現CheckBoxList1控制項,點選旁邊的【編輯項目】指令。
6 6 2 checkboxlist9
6.6.2 CheckBoxList多選清單控制項
  • Step3:加入第一個ListItem項目到CheckBoxList控制項。
6 6 2 checkboxlist10
6.6.2 CheckBoxList多選清單控制項
  • Step4:仿照Step3,陸續加入另外兩個ListItem項目到CheckBoxList控制項。
    • 分別為(Text="鍵盤滑鼠"、Value="U2")、 (Text="螢幕"、Value="Q"),結果如下,最後按下【確定】鈕。
6 6 2 checkboxlist11
6.6.2 CheckBoxList多選清單控制項
  • Step5:回到介面後,您會發現剛才設計的項目已經出現了,不過預設為垂直排列。
6 6 2 checkboxlist12
6.6.2 CheckBoxList多選清單控制項
  • Step6:為了要和範例6-9的水平排列方式相同,我們設定CheckBoxList1控制項的RepeatDirection屬性為Horizontal,結果如圖。
6 6 2 checkboxlist13
6.6.2 CheckBoxList多選清單控制項
  • Step7:設定CheckBoxList1控制項的AutoPostBack屬性為True。
  • Step8:撰寫兩個事件程序如下:(產生程序方式,請在CheckBoxList1控制項上按兩下以及在Button1控制項上按兩下)
    • 程式部分內容:
6 6 2 checkboxlist15
6.6.2 CheckBoxList多選清單控制項
  • 範例說明:
    • (1)第7~13行:只要按下任何一個項目,都會自動立即執行(因為已經設定AutoPostBack屬性為True),第8~12行與範例6-9的第8~12行功能完全相同,是用來判斷第三個項目是否被選取。但此處必須藉由判斷CheckBoxList1.Items(2).Selected來判斷,CheckBoxList1.Items是一個集合,其內共有0、1、2三個ListItem項目,也就是我們剛才編輯的三個項目。
    • (2)第15~27行:按下按鈕後會執行,功能和範例6-9的第16~20行相同,不過此處以CheckBoxList1.SelectedIndex回傳值來判定是否有選項被選取,若有選項被選取,則回傳值為0、1或2。而第22~26行則是以迴圈方式檢查每一個項目是否被選取。明顯地,由於可以利用迴圈來撰寫程式,當項目很多時,使用CheckBoxList控制項的程式會較為簡潔。
  • Step9:執行程式。
    • 【程式執行結果】:與範例6-9相同,但不論是按下哪一個選項(不一定是最右邊那一個),都會發生PostBack動作。
6 6 2 checkboxlist16
6.6.2 CheckBoxList多選清單控制項
  • 【範例6-11】
    • 使用XML檔案作為資料來源,改寫範例6-10。
  • 範例6-11:
    • 網站目錄 ASPNET\ch06\ch06_11\(檔案ch06_11.aspx)
    • Step0:預先準備好一個XML檔案,檔名為list.xml,放置於\ch06\ch06_11\中,其內容如下(您可以在VWD中,於方案總管中加入新項目,項目為XML檔):
    • Step1:同範例6-10。

<?xml version="1.0" encoding="utf-8" ?>

<root>

<item num="U1" ProductName="電腦主機" />

<item num="U2" ProductName="鍵盤滑鼠" />

<item num="Q" ProductName="螢幕" />

</root>

6 6 2 checkboxlist17
6.6.2 CheckBoxList多選清單控制項
  • Step2:同範例6-10,在工具箱中拖曳CheckBoxList控制項至標籤與按鈕之間,然後會出現CheckBoxList1控制項,但此時點選旁邊的【選擇資料來源】指令。
6 6 2 checkboxlist18
6.6.2 CheckBoxList多選清單控制項
  • Step3:設定資料來源為list.xml。
6 6 2 checkboxlist20
6.6.2 CheckBoxList多選清單控制項
  • Step4:此時回到介面中,您會發現它並不會馬上顯示每個項目的文字,這是因為我們採用的XML繫結方式是一種動態繫結,換句話說,在執行時,XML檔案的內容才會被取出來作為選項文字。
6 6 2 checkboxlist21
6.6.2 CheckBoxList多選清單控制項
  • Step5:上圖中,會出現一個XmlDataSource1物件,它在執行時並不是一個可見元件,而功能則是作為將XML檔與CheckBoxList1控制項繫結在一起的橋樑,使得CheckBoxList1控制項可以讀取XML檔案內的資料。
  • Step6:和範例6-10的Step6相同,將CheckBoxList1控制項的RepeatDirection屬性設定為Horizontal。
  • Step7:和範例6-10的Step7相同,將CheckBoxList1控制項的AutoPostBack屬性設定為True。
  • Step8:撰寫兩個事件程序,程式內容與範例6-10的Step8完全相同:(產生程序方式,請在CheckBoxList1控制項上按兩下以及在Button1控制項上按兩下)
  • Step9:執行程式。
    • 【程式執行結果】:與範例6-10完全相同。
6 6 3 radiobutton
6.6.3 RadioButton選項按鈕(單選)控制項
  • 有些時候我們希望某些選項只允許使用者選取其中一個選項,此時,我們可以利用RadioButton控制項(稱之為選項按鈕)來完成。
  • RadioButton類別由於繼承了CheckBox類別,故大多數的屬性都與CheckBox類別相同,而它並沒有新增的事件。
  • RadioButton控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.RadioButton類別
    • 功能:產生選項按鈕。
    • 重要的繼承類別:
      • 本類別繼承自System.Web.UI.WebControls.CheckBox類別
    • 輸出的標籤:<input type="radio" name="群組名" />。
6 6 3 radiobutton1
6.6.3 RadioButton選項按鈕(單選)控制項
  • 類別重要的新增成員:
  • 【GroupName 屬性說明】
    • 單選在HTML中,是依照<input type="radio" name="群組名" />的群組名作為單選依據。所有群組名相同的選項按鈕,最多只能選取其中一個。
6 6 3 radiobutton2
6.6.3 RadioButton選項按鈕(單選)控制項
      • 而GroupName的屬性值在輸出時,就會變成name="群組名“
      • 若未設定GroupName屬性值,則預設將會輸出為name=“控制項名稱”,雖然控制項的名稱一定會不同,但我們不能確保沒有其他RadioButton控制項的屬性曾被設定為該名稱
        • (例如RadioButton9的GroupName的屬性設定為RadioButton1,若RadioButton1未設定GroupName屬性,則結果會被視為同一組),故最好是每一個RadioButton控制項都自行設定GroupName屬性,自行分組
        • 若真的只有一個選項想要單純自成一組,也應該設定。
    • 使用範例:見範例6-12。
  • 【範例6-12】
    • 選項按鈕的練習,將範例6-9的選項改為同一組之單選,並設定另一組選項按鈕。
6 6 3 radiobutton3
6.6.3 RadioButton選項按鈕(單選)控制項
  • 範例6-12:
    • 網站目錄 ASPNET\ch06\ch06_12\(檔案ch06_12.aspx)
    • Step1:網頁介面設計如下(所有控制項皆採相對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 6 3 radiobutton5
6.6.3 RadioButton選項按鈕(單選)控制項
  • Step2:撰寫三個事件程序如下:(在兩個按鈕上按兩下,在RadioButton3控制項上按兩下產生)
    • 程式部分內容:
6 6 3 radiobutton7
6.6.3 RadioButton選項按鈕(單選)控制項
  • 範例說明:
    • (1)第7~13行:邏輯上與範例6-9相同,只不過控制項由CheckBox3改為RadioButton3。不過這個程序應該同時讓RadioButton1,2,3同時都能夠於AutoPostBack時執行,故下個步驟應該做些設定。
6 6 3 radiobutton8
6.6.3 RadioButton選項按鈕(單選)控制項
    • (2)第15~34行:第15~30行邏輯上與範例6-9相同,只不過各控制項由CheckBox改為RadioButton。第31行則可以換為RadioButton4.Checked = False,因為兩者必定同時發生(我們已經預選了RadioButton4,故要改為不選,除非是選取了RadioButton5)。
    • (3)第36~43行:回復到原本的初始狀態,除此之外,我們無法在執行時,透過使用者的操作使RadioButton1,2,3由選取了某一個之後又改為都不選。
  • Step3:由於會使得RadioButton3產生變化,可能是因為按下了RadioButton1或RadioButton2,因此在屬性窗格中,切換到事件頁籤,將RadioButton1與RadioButton2的CheckedChanged 事件也設定為RadioButton3_CheckedChanged(也就是使三個選項按鈕共用同一個事件程序)
6 6 4 radiobuttonlist
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • 同樣地,當有多個或多組選項按鈕時,使用RadioButtonList選項按鈕(單選)會讓程式撰寫更為簡潔,尤其是同一組選項按鈕原本就具有單選性質,每一個選項會影響同組的另一個選項,故使用清單將事件程序統一較為適當。
  • RadioButtonList類別與CheckBoxList類別都是繼承自ListControl類別,故相關的屬性與方法、事件請參閱表6-11(a)(b)(c)(d)。
  • RadioButtonList控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.RadioButtonList類別
    • 重要繼承類別:
      • 本類別繼承自System.Web.UI.WebControls.ListControl類別
    • 其他重要的類別:
      • ListControl.Items屬性的型別則為ListItemCollection類別。
    • 功能:可產生選項按鈕清單。
6 6 4 radiobuttonlist1
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • 輸出的標籤(1):若設定為Table配置方式,則整個清單包含在<table>表格內,與CheckBoxList排列方式相同,不再累述。
  • 輸出的標籤(2):若設定為Flow配置方式,垂直顯示時,使用<br />分隔各選項,水平顯示時,沒有任何標籤作為區隔。
  • 輸出的標籤(3):選項按鈕則採用<input type=“radio” name=“控制項名稱” />,因為沒有GroupName屬性,故採用name=“控制項名稱”即可達到同一組的目的。
    • 說明文字同樣採用<label>標籤出現。
    • 重要事項說明:一個選項按鈕清單內的所有選項都必定被設定為同一組(只有一個可被選取),並沒有GroupName屬性可設定。
6 6 4 radiobuttonlist2
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • RadioButtonList類別重要的新增成員:
  • ListControl類別重要的新增成員請見表6-11(b)。
  • ListItemCollection類別(ListControl.Items屬性的型別)重要的成員見表6-11(c) 。
  • ListItem類別重要的成員見表6-11(d) 。
  • 使用範例:見範例6-13。
6 6 4 radiobuttonlist3
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • 【範例6-13】
    • 使用按鈕選項清單製作同範例6-12的網頁。
  • 範例6-13:
    • 網站目錄 ASPNET\ch06\ch06_13\(檔案ch06_13.aspx)
    • Step1:除了RadioButtonList控制項之外,其於控制項皆同範例6-12。故複製範例6-12的所有檔案後,先刪除事件程序以及RadioButton控制項即可完成下圖介面。
6 6 4 radiobuttonlist4
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • Step2:在工具箱中拖曳RadioButtonList控制項至標籤與按鈕之間,然後會出現RadioButtonList1控制項,點選旁邊的【編輯項目】指令,然後參考範例6-10的Step3、4設定相關選項,結果如圖。
6 6 4 radiobuttonlist5
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • Step3:設定RadioButtonList1控制項的RepeatDirection屬性為Horizontal,結果如圖。
6 6 4 radiobuttonlist6
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • Step4:仿照Step2加入另外一個RadioButtonList2控制項,但編輯ListItem時,將一般會員的Selected設定為True。
6 6 4 radiobuttonlist7
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • Step5:仿照Step3,設定RadioButtonList2控制項的RepeatDirection屬性為Horizontal,結果如圖。
  • Step6:設定RadioButtonList1控制項的AutoPostBack屬性為True。
  • Step7:更改檔名為ch06_13.aspx。
6 6 4 radiobuttonlist8
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • Step7:撰寫三個事件程序如下:(產生程序方式,請在RadioButtonList1控制項上按兩下以及在兩個按鈕控制項上按兩下)
    • 程式部分內容:
6 6 4 radiobuttonlist9
6.6.4 RadioButtonList選項按鈕(單選)清單控制項
  • 範例說明:
    • (1)第7~13行:與範例6-10相同,只不過控制項改為RadioButtonList1。
    • (2)第15~30行:其中第15~26行與範例6-10相同,只不過控制項改為RadioButtonList1。第27~29行則是判斷是否為VIP會員。
    • (3)第32~37行:ClearSelection方法可以進行清除選取狀態,所有清單內的選項都會被設定為不選。因此,第36行必須再將預選項目選上。
  • Step8:執行程式。
    • 【程式執行結果】:與範例6-12相同。
6 6 5 listbox
6.6.5 ListBox控制項
  • ListBox控制項可以用來製作一連串的選項,使用者可以在清單中選擇所需要的選項,稱之為『清單方塊』。同時ListBox控制項也允許設定為「單選」或「複選」。
  • 事實上,ListBox類別也是繼承自ListControl類別,它並沒有新增的事件,表6-11(b)(c)(d)的屬性、方法、事件都可以使用。
  • 而其中ListControl.Items屬性則為ListItemCollection集合,因此選項也是以ListItem方式出現,並且構成一個集合。
  • ListBox控制項的相關資訊如下:
    • 類別: System.Web.UI.WebControls.ListBox類別
    • 功能:產生單一或多重項目的清單方塊控制項。
    • ListBox控制項外觀如右。
6 6 5 listbox1
6.6.5 ListBox控制項
  • 重要的繼承類別:
    • 本類別繼承自System.Web.UI.WebControls.ListControl類別
  • 其他重要的類別:
    • ListControl.Items屬性的型別則為ListItemCollection類別。
  • 輸出的標籤:
    • 包含<select>與<option>標籤,其中<option>標籤是用來表示每一個選項。
    • <select size="顯示列數"><option value="值">文字</option>…</select>
  • 類別重要的新增成員:
6 6 5 listbox2
6.6.5 ListBox控制項
  • 使用範例:見範例6-14。
6 6 6 dropdownlist
6.6.6 DropDownList控制項
  • DropDownList控制項可以用來製作下拉式清單,使用者可以按下拉鈕,在清單中選擇所需要的單一選項,故稱之為『下拉式清單』。
  • 事實上,DropDownList類別也是繼承自ListControl類別,它並沒有新增的事件,表6-11(b)(c)(d)的屬性、方法、事件都可以使用。
  • 而其中ListControl.Items屬性則為ListItemCollection集合,因此選項也是以ListItem方式出現,並且構成一個集合。
  • DropDownList控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.DropDownList類別
    • 功能:產生單一選擇的下拉式清單控制項。
    • DropDownList控制項外觀如右。
6 6 6 dropdownlist1
6.6.6 DropDownList控制項
  • 重要的繼承類別:
    • 本類別繼承自System.Web.UI.WebControls.ListControl類別
  • 其他重要的類別:
    • ListControl.Items屬性的型別則為ListItemCollection類別。
  • 輸出的標籤:
    • 包含<select>與<option>標籤,其中<option>標籤是用來表示每一個選項。
    • <select><option value=“值”>文字</option>…</select>,
      • 其中<select>不設定size屬性(預設值為1),就能夠出現『下拉式清單』。
6 6 6 dropdownlist2
6.6.6 DropDownList控制項
  • 類別重要的新增成員:
6 6 6 dropdownlist3
6.6.6 DropDownList控制項
    • 使用範例:見範例6-14。
  • 【範例6-14】
    • 『下拉式清單』與『清單方塊』的練習,在介面設計時,設定複選的清單方塊內容,並透過程式自動將下拉式清單設定與為清單方塊具有相同的內容,然後多加一個選項(動態新增項目)。
  • 範例6-14:
    • 網站目錄 ASPNET\ch06\ch06_14\(檔案ch06_14.aspx)
6 6 6 dropdownlist4
6.6.6 DropDownList控制項
  • Step1:網頁介面設計如下(所有控制項皆採絕對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 6 6 dropdownlist5
6.6.6 DropDownList控制項
  • Step2:編輯ListBox1控制項的Items,共五個項目(ListItem)。如圖:
6 6 6 dropdownlist6
6.6.6 DropDownList控制項
  • Step3:設定DropDownList1控制項的AutoPostBack屬性為True,但不編輯其項目內容。
  • Step4:撰寫四個事件程序如下:(在兩個按鈕上按兩下,在DropDownList1控制項上按兩下產生)
    • 程式部分內容:
6 6 6 dropdownlist9
6.6.6 DropDownList控制項
  • 範例說明:
    • (1)第7~24行:由於每次網頁被讀取時都會執行Page_Load,而我們想要作的事只有在第一次網頁被讀取時才需要,故在第8~10行,利用Page.IsPostBack屬性判斷是否為第一次讀取網頁(其餘都屬於PostBack)。
6 6 6 dropdownlist10
6.6.6 DropDownList控制項
  • (2)第13~15行:以迴圈方式,將ListBox1.Items中的每一個ListItem加入到DropDownList1.Items中。
  • (3)第17~23行:動態新增一個DropDownList1.Items中的ListItem。
  • (4)第26~32行:由於已經設定AutoPostBack,故會在下拉式清單的選擇項目改變時,自動執行,若選到最後一個項目,則於Label3顯示相關訊息。
  • (5)第34~41行:按下Button2按鈕後執行,取出於DropDownList1選取的項目並於Label1顯示訂購的項目。
  • (6)第43~50行:按下Button1按鈕後執行,取出於ListBox1選取的項目並於Label1顯示訂購的項目(可能不只一樣)。
6 6 6 dropdownlist11
6.6.6 DropDownList控制項
  • Step5:執行程式。
slide168
6.7 多控制項的管理
  • 當網頁上的控制項越來越多時,常常必須對控制項進行控管,例如控制項的順序,是否顯示控制項等等。在本節中,我們將示範如何管理多控制項。
  • 6.7.1 控制項順序與快速切換
    • 建立Web Form網頁時,會自動產生一個<form>標籤,事實上,它也是一個控制項。只不過,它不是Web伺服器控制項,而是HTML伺服器控制項,預設名稱為form1。由於設計Web Form網頁時所有的控制項都是放入其中,故我們可以藉由form1控制項進行一些預設的設定。
    • 使用滑鼠操作網頁並不需要進行特別的設定,可自行利用滑鼠的游標改變目前的焦點(Focus),或者按下某一個滑鼠按鈕。
6 7 1
6.7.1 控制項順序與快速切換
  • 但有時候,為了方便使用者操作,我們也會考慮下列幾項鍵盤操作:
    • 1.快速鍵(AccessKey屬性):
      • 可使用控制項的AccessKey屬性設定該控制項的對應快速鍵。
    • 2.預設焦點(form1.DefaultFocus屬性):
      • 網頁的預設焦點代表的是XHTML被傳送到客戶端解讀為網頁型式後,預設可輸入文字的第一個元件是哪一個。
      • 例如假設我們有一個帳號與一個密碼欄位,當密碼輸入錯誤時,希望使用者修改密碼(帳號欄位並未清除),此時可以將回傳時的預設焦點設定在密碼欄位。
      • 而要設定預設焦點,則只要設定form1控制項的DefaultFocus屬性即可。
        • 【註】 form1控制項的DefaultFocus屬性將會在輸出時,產生一段JavaScript程式碼,並於網頁被瀏覽器解讀後立即執行,其中將包含執行一個WebForm_AutoFocus函式。
6 7 11
6.7.1 控制項順序與快速切換
  • 3.預設按鈕(form1.DefaultButton屬性):
    • 表單中可能包含不只一個按鈕,若超過一個按鈕時,按下【Enter】鍵代表的按鈕稱之為「預設按鈕」。而要設定預設按鈕,則只要設定form1控制項的DefaultButton屬性即可。
      • 【註】form1控制項的DefaultButton屬性將會在輸出時,設定<form1>的onkeypress屬性,並執行一個JavaScript程式碼來完成預設按鈕的作用。
6 7 12
6.7.1 控制項順序與快速切換
    • 4.【Tab】鍵順序(TabIndex屬性):
      • 若網頁中包含多個控制項,則按下【Tab】鍵可以切換到不同控制項進行操作,但其順序則可能因為當初加入控制項時的順序而導致不同的結果,尤其是使用絕對位置配置控制項時更難預測控制項輸出在HTML原始碼中的順序。
      • 不過我們也可以設定每一個控制項的TabIndex屬性來進行元件順序的控制,該屬性的預設值為0,只要依照數字加以遞增就可以完成設定。
  • 【範例6-15】
    • 在表單中加入兩個文字方塊、一個單選清單控制項、兩個按鈕,其預設焦點第一次放在帳號文字方塊,其餘則放置於密碼文字方塊,預設按鈕設為【登入】鈕,並設定各控制項的【Tab】鍵順序。
6 7 13
6.7.1 控制項順序與快速切換
  • 範例6-15:
    • 網站目錄 ASPNET\ch06\ch06_15\(檔案ch06_15.aspx)
    • Step1:網頁介面設計如下(所有控制項皆採絕對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 7 15
6.7.1 控制項順序與快速切換
  • Step2:撰寫兩個事件程序如下:(在兩個按鈕上按兩下產生)
    • 程式部分內容:
6 7 16
6.7.1 控制項順序與快速切換
  • 範例說明:
    • (1)第7~20行:我們假設密碼為「gogo」字串才是正確的密碼,此時執行第9~12行。若密碼不正確,且帳號欄位TextBox1已經輸入文字,則設定預設焦點在TextBox2密碼欄位。
    • (2)第22~27行:按下【清除】鈕時執行的程序。
  • Step3:執行程式。
6 7 2 panel
6.7.2 容器與Panel面板控制項
  • 容器(Container)是一種特殊的控制項特性,一個控制項若具有容器特性,代表它可以包含其他許多控制項,判別方式很簡單,只要控制項具有Controls屬性,就可以透過Controls.Add(子控制項)方式加入其他子控制項。
    • 舉例來說,Panel面板控制項就具有容器特性,其他如PlaceHolder與View等控制項也具有容器性質。而面板中也可以包含內部面板,進行巢狀化管理。
  • Panel面板控制項將會在輸出時成為<div>標籤,並且可以統一管理其內的控制項之外觀。
  • Panel面板也可以設定本身的外觀與捲軸,甚至可隱藏面板(隱藏時沒有對應的HTML標籤輸出),這些動作將會同時影響到其內的控制項。
  • Panel面板控制項的相關資訊如下:
    • 類別:System.Web.UI.WebControls.Panel類別
    • 功能:產生一個面板以統一其內的控制項外觀。
    • 輸出的標籤: <div>…其內控制項所產生之標籤…</div>。
    • 類別重要的新增成員:
6 7 2 panel2
6.7.2 容器與Panel面板控制項
    • 使用範例:範例6-16。
  • 【範例6-16】
    • 設計一個多重選單,即時將使用者想要選擇的次選單顯示出來。
  • 範例6-16:
    • 網站目錄 ASPNET\ch06\ch06_16\(檔案ch06_16.aspx)
    • Step1:先將網頁介面設計如下(所有控制項皆採相對定位)並設定屬性(其餘屬性參照屬性窗格)。
6 7 2 panel4
6.7.2 容器與Panel面板控制項
  • Step2:拖曳Panel控制項到中央空白處。
6 7 2 panel5
6.7.2 容器與Panel面板控制項
  • Step3:此時會出現Panel1控制項,將之調整長寬為適當長寬,如下圖。
6 7 2 panel6
6.7.2 容器與Panel面板控制項
  • Step4:將RadioButtonList1控制項拖曳至Panel1控制項內部,如下圖。
6 7 2 panel7
6.7.2 容器與Panel面板控制項
  • Step5:使用同樣方式(Step2~4),加入另外兩個Panel2、Panel3控制項,並將RadioButtonList2、RadioButtonList3控制項分別拖曳至Panel內部,結果如右圖。
  • Step6:於屬性窗格中設定Panel1、Panel2、Panel3控制項的BackColor(背景顏色)為Yellow、Pink、Cyan,以便於調整位置。
6 7 2 panel8
6.7.2 容器與Panel面板控制項
  • Step7:透過【格式/位置】指令,將所有控制項都設定為絕對位置。然後調整到下圖位置。(其中,Panel2、Panel3控制項重疊置放)
6 7 2 panel9
6.7.2 容器與Panel面板控制項
  • 【重疊置放技巧】
    • 在上圖中,想要將Panel2與Panel3控制項重疊置放,光靠拖曳並不容易達成,此時可以善用屬性窗格來完成
    • 例如您可以將Panel2大小、位置定位後,然後切換到原始碼分頁中,觀察Panel2的標籤<asp:Panel ID="Panle2">的屬性,然後將Height、top、left、Width等屬性記錄起來,抄寫到<asp:Panel ID="Panle3">的屬性欄位中即可。
6 7 2 panel10
6.7.2 容器與Panel面板控制項
  • Step8:於屬性窗格中設定Panel1、Panel2、Panel3控制項的GroupingText屬性值為「職位」、「選手」、「選手」。接著您會發現面板出現了框線,若框線與面板區域大小差別過大,則進行調整面板的大小,結果如下圖。
  • Step9:於屬性窗格中設定Panel3控制項的.Visible屬性值為False。
6 7 2 panel11
6.7.2 容器與Panel面板控制項
  • Step10:撰寫三個事件程序如下:(在兩個按鈕上按兩下,在RadioButtonList1控制項上按兩下產生)
    • 程式部分內容:
6 7 2 panel12
6.7.2 容器與Panel面板控制項
  • 範例說明:
    • (1)第7~15行:由於已經設定AutoPostBack,故按下RadioButtonList1的選項就會自動執行,依照選取項目決定右方要顯示哪一個面板。
    • (2)第17~26行:依照顯示面板(Visible屬性),決定被選取的對象為哪一位選手。
    • (3)第28~39行:回歸初始化狀態。
  • Step11:執行程式。
slide195
6.8 本章回顧
  • 在本章中,我們首先介紹了控制項的分類,其中Web伺服器控制項的基底類別是System.Web.UI.WebControls.WebControl,當中規範了許多屬性,這些屬性大多為各種Web伺服器控制項可使用的屬性(除非在繼承之後覆寫為不可使用)。
    • 而ASP.NET使用物件導向的繼承特色開發各種控制項,因此,有些類別在控制項的使用方面是非常重要的,例如ListControl類別對於清單性質的控制項非常重要。
  • 在本章中,我們介紹的控制項包含文字輸出入控制項、隱藏控制項、選擇控制項、傳送控制項、面板控制項等等。
    • 其中具有清單性質的控制項通常都是利用集合來存放其中的項目。
    • 而面板控制項更能有效地統一管理眾多控制項。
slide196
6.9 本章回顧
  • 有些控制項具有特別的事件,要使得事件發生時就立即產生反應,應該要設定該控制項的AutoPostBack屬性(除了按鈕性質的控制項之外),否則我們並不建議撰寫事件處理程序,以免伺服器端必須執行按鈕的事件又必須執行該控制項的事件(如此容易因為執行順序的預估錯誤,而導致程式結果不如預期)。
  • 當網頁包含了許多控制項時,為了方便使用者操作,您可以利用AccessKey屬性設定快速鍵,或利用DefaultFocus及DefaultButton屬性設定預設焦點及預設按鈕。
  • 並且每一個控制項的TabIndex屬性,也將對應到輸出時控制項的【Tab】鍵切換順序。