ASP.NET開發(fā)大全第5章.Web窗體的基本控件

1、PAGE 218PAGE PAGE 203第5章 Web窗體的基本控件與ASP不同的是，ASP.NET提供了大量的控件，這些控件能夠輕松的實現(xiàn)一個交互復(fù)雜的Web應(yīng)用功能。在傳統(tǒng)的ASP開發(fā)中，讓開發(fā)人員最為煩惱的是代碼的重用性太低，以及事件代碼和頁面代碼不能很好的分開。而在ASP.NET中，控件不僅解決了代碼重用性的問題，對于初學(xué)者而言，控件還簡單易用并能夠輕松上手、投入開發(fā)。5.1 控件的屬性每個控件都有一些公共屬性，例如字體顏色、邊框的顏色、樣式等。在Visual Studio 2008中，當(dāng)開發(fā)人員將鼠標(biāo)選擇了相應(yīng)的控件后，屬性欄中會簡單的介紹該屬性的作用。如圖5-1所示。圖5-1 控

2、件的屬性屬性欄用來設(shè)置控件的屬性，當(dāng)控件在頁面被初始化時，這些將被應(yīng)用到控件?？丶膶傩砸部梢酝ㄟ^編程的方法在頁面相應(yīng)代碼區(qū)域編寫，示例代碼如下所示。 protected void Page_Load(object sender, EventArgs e) Label1.Visible = false;/在Page_Load中設(shè)置Label1的可見性 上述代碼編寫了一個Page_Load（頁面加載事件），當(dāng)頁面初次被加載時，會執(zhí)行Page_Load中的代碼。這里通過編程的方法對控件的屬性進(jìn)行更改，當(dāng)頁面加載時，控件的屬性會被應(yīng)用并呈現(xiàn)在瀏覽器。5.2 簡單控件ASP.NET提供了諸多控件，這些

3、控件包括簡單控件、數(shù)據(jù)庫控件、登錄控件等強(qiáng)大的控件。在ASP.NET中，簡單控件是最基礎(chǔ)也是經(jīng)常被使用的控件，簡單控件包括標(biāo)簽控件（Label）、超鏈接控件（HyperLink）以及圖像控件（Image）等。5.2.1 標(biāo)簽控件（Label）在Web應(yīng)用中，希望顯式的文本不能被用戶更改，或者當(dāng)觸發(fā)事件時，某一段文本能夠在運行時更改，則可以使用標(biāo)簽控件（Label）。開發(fā)人員可以非常方便的將標(biāo)簽控件拖放到頁面，拖放到頁面后，該頁面將自動生成一段標(biāo)簽控件的聲明代碼，示例代碼如下所示。 上述代碼中，聲明了一個標(biāo)簽控件，并將這個標(biāo)簽控件的ID屬性設(shè)置為默認(rèn)值Label1。由于該控件是服務(wù)器端控件，所以

4、在控件屬性中包含runat=“server”屬性。該代碼還將標(biāo)簽控件的文本初始化為Label，開發(fā)人員能夠配置該屬性進(jìn)行不同文本內(nèi)容的呈現(xiàn)。注意：通常情況下，控件的ID也應(yīng)該遵循良好的命名規(guī)范，以便維護(hù)。同樣，標(biāo)簽控件的屬性能夠在相應(yīng)的.cs代碼中初始化，示例代碼如下所示。 protected void Page_PreInit(object sender, EventArgs e) Label1.Text = Hello World;/標(biāo)簽賦值 上述代碼在頁面初始化時為Label1的文本屬性設(shè)置為“Hello World”。值得注意的是，對于Label標(biāo)簽，同樣也可以顯式HTML樣式，示例代

5、碼如下所示。 protected void Page_PreInit(object sender, EventArgs e) Label1.Text = Hello WorldA Html Code;/輸出 HTML Label1.Font.Size = FontUnit.XXLarge;/設(shè)置字體大小 上述代碼中，Label1的文本屬性被設(shè)置為一串HTML代碼，當(dāng)Label文本被呈現(xiàn)時，會以HTML效果顯式，運行結(jié)果如圖5-2所示。圖5-2 Label的Text屬性的使用如果開發(fā)人員只是為了顯示一般的文本或者HTML效果，不推薦使用Label控件，因為當(dāng)服務(wù)器控件過多，會導(dǎo)致性能問題。使用靜

6、態(tài)的HTML文本能夠讓頁面解析速度更快。5.2.2 超鏈接控件（HyperLink）超鏈接控件相當(dāng)于實現(xiàn)了HTML代碼中的“”效果，當(dāng)然，超鏈接控件有自己的特點，當(dāng)拖動一個超鏈接控件到頁面時，系統(tǒng)會自動生成控件聲明代碼，示例代碼如下所示。 HyperLink上述代碼聲明了一個超鏈接控件，相對于HTML代碼形式，超鏈接控件可以通過傳遞指定的參數(shù)來訪問不同的頁面。當(dāng)觸發(fā)了一個事件后，超鏈接的屬性可以被改變。超鏈接控件通常使用的兩個屬性如下所示：ImageUrl：要顯式圖像的URL。NavigateUrl：要跳轉(zhuǎn)的URL。1ImageUrl屬性設(shè)置ImageUrl屬性可以設(shè)置這個超鏈接是以文本形式顯

7、式還是以圖片文件顯式，示例代碼如下所示。 HyperLink 上述代碼將文本形式顯示的超鏈接變?yōu)榱藞D片形式的超鏈接，雖然表現(xiàn)形式不同，但是不管是圖片形式還是文本形式，全都實現(xiàn)的相同的效果。2Navigate屬性Navigate屬性可以為無論是文本形式還是圖片形式的超鏈接設(shè)置超鏈接屬性，即即將跳轉(zhuǎn)的頁面，示例代碼如下所示。 HyperLink 上述代碼使用了圖片超鏈接的形式。其中圖片來自“/images/cms.jpg”，當(dāng)點擊此超鏈接控件后，瀏覽器將跳到URL為“”的頁面。3動態(tài)跳轉(zhuǎn)在前面的小結(jié)講解了超鏈接控件的優(yōu)點，超鏈接控件的優(yōu)點在于能夠?qū)丶M(jìn)行編程，來按照用戶的意愿跳轉(zhuǎn)到自己跳轉(zhuǎn)的頁面

8、。以下代碼實現(xiàn)了當(dāng)用戶選擇QQ時，會跳轉(zhuǎn)到騰訊網(wǎng)站，如果選擇SOHU，則會跳轉(zhuǎn)到SOHU頁面，示例代碼如下所示。 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) if (DropDownList1.Text = qq)/如果選擇qq HyperLink1.Text = qq;/文本為qq HyperLink1.NavigateUrl = ;/URL為 else/選擇sohu HyperLink1.Text = sohu;/文本為sohu HyperLink1.NavigateUrl =

9、;/URL為 上述代碼使用了DropDownList控件，當(dāng)用戶選擇不同的值時，對HyperLink1控件進(jìn)行操作。當(dāng)用戶選擇qq，則為HyperLink1控件配置連接為。注意：與標(biāo)簽控件相同的是，如果只是為了單純的實現(xiàn)超鏈接，同樣不推薦使用HyperLink控件，因為過多的使用服務(wù)器控件同樣有可能造成性能問題。5.2.3 圖像控件（Image）圖像控件用來在Web窗體中顯示圖像，圖像控件常用的屬性如下：AlternateText：在圖像無法顯式時顯示的備用文本。ImageAlign：圖像的對齊方式。ImageUrl：要顯示圖像的URL。當(dāng)圖片無法顯示的時候，圖片將被替換成AlternateT

10、ext屬性中的文字，ImageAlign屬性用來控制圖片的對齊方式，而ImageUrl屬性用來設(shè)置圖像連接地址。同樣，HTML中也可以使用來替代圖像控件，圖像控件具有可控性的優(yōu)點，就是通過編程來控制圖像控件，圖像控件基本聲明代碼如下所示。 除了顯示圖形以外，Image控件的其他屬性還允許為圖像指定各種文本，各屬性如下所示。ToolTip：瀏覽器顯式在工具提示中的文本。GenerateEmptyAlternateText：如果將此屬性設(shè)置為true，則呈現(xiàn)的圖片的alt屬性將設(shè)置為空。開發(fā)人員能夠為Image控件配置相應(yīng)的屬性以便在瀏覽時呈現(xiàn)不同的樣式，創(chuàng)建一個Image控件也可以直接通過編寫H

11、TML代碼進(jìn)行呈現(xiàn)，示例代碼如下所示。 上述代碼設(shè)置了一個圖片，并當(dāng)圖片失效的時候提示圖片連接失效。注意：當(dāng)雙擊圖像控件時，系統(tǒng)并沒有生成事件所需要的代碼段，這說明Image控件不支持任何事件。5.3 文本框控件（TextBox）在Web開發(fā)中，Web應(yīng)用程序通常需要和用戶進(jìn)行交互，例如用戶注冊、登錄、發(fā)帖等，那么就需要文本框控件（TextBox）來接受用戶輸入的信息。開發(fā)人員還可以使用文本框控件制作高級的文本編輯器用于HTML，以及文本的輸入輸出。5.3.1 文本框控件的屬性通常情況下，默認(rèn)的文本控件（TextBox）是一個單行的文本框，用戶只能在文本框中輸入一行內(nèi)容。通過修改該屬性，則可以

12、將文本框設(shè)置為多行/或者是以密碼形式顯示，文本框控件常用的控件屬性如下所示。AutoPostBack：在文本修改以后，是否自動重傳Columns：文本框的寬度。EnableViewState：控件是否自動保存其狀態(tài)以用于往返過程。MaxLength：用戶輸入的最大字符數(shù)。ReadOnly：是否為只讀。Rows：作為多行文本框時所顯式的行數(shù)。TextMode：文本框的模式，設(shè)置單行，多行或者密碼。Wrap：文本框是否換行。1AutoPostBack（自動回傳）屬性在網(wǎng)頁的交互中，如果用戶提交了表單，或者執(zhí)行了相應(yīng)的方法，那么該頁面將會發(fā)送到服務(wù)器上，服務(wù)器將執(zhí)行表單的操作或者執(zhí)行相應(yīng)方法后，再呈

13、現(xiàn)給用戶，例如按鈕控件、下拉菜單控件等。如果將某個控件的AutoPostBack屬性設(shè)置為true時，則如果該控件的屬性被修改，那么同樣會使頁面自動發(fā)回到服務(wù)器。2EnableViewState（控件狀態(tài)）屬性ViewState是ASP.NET中用來保存Web控件回傳狀態(tài)的一種機(jī)制，它是由ASP.NET頁面框架管理的一個隱藏字段。在回傳發(fā)生時，ViewState數(shù)據(jù)同樣將回傳到服務(wù)器，ASP.NET框架解析ViewState字符串并為頁面中的各個控件填充該屬性。而填充后，控件通過使用ViewState將數(shù)據(jù)重新恢復(fù)到以前的狀態(tài)。在使用某些特殊的控件時，如數(shù)據(jù)庫控件，來顯示數(shù)據(jù)庫。每次打開頁面執(zhí)

14、行一次數(shù)據(jù)庫往返過程是非常不明智的。開發(fā)人員可以綁定數(shù)據(jù)，在加載頁面時僅對頁面設(shè)置一次，在后續(xù)的回傳中，控件將自動從ViewState中重新填充，減少了數(shù)據(jù)庫的往返次數(shù)，從而不使用過多的服務(wù)器資源。在默認(rèn)情況下，EnableViewState的屬性值通常為true。3其他屬性上面的兩個屬性是比較重要的屬性，其他的屬性也經(jīng)常使用。MaxLength：在注冊時可以限制用戶輸入的字符串長度。ReadOnly：如果將此屬性設(shè)置為true，那么文本框內(nèi)的值是無法被修改的。TextMode：此屬性可以設(shè)置文本框的模式，例如單行、多行和密碼形式。默認(rèn)情況下，不設(shè)置TextMode屬性，那么文本框默認(rèn)為單行。

15、5.3.2 文本框控件的使用在默認(rèn)情況下，文本框為單行類型，同時文本框模式也包括多行和密碼，示例代碼如下所示。 上述代碼演示了三種文本框的使用方法，上述代碼運行后的結(jié)果如圖5-3所示。圖5-3 文本框的三種形式文本框無論是在Web應(yīng)用程序開發(fā)還是Windows應(yīng)用程序開發(fā)中都是非常重要的。文本框在用戶交互中能夠起到非常重要的作用。在文本框的使用中，通常需要獲取用戶在文本框中輸入的值或者檢查文本框?qū)傩允欠癖桓膶?。?dāng)獲取用戶的值的時候，必須通過一段代碼來控制。文本框控件HTML頁面示例代碼如下所示。 上述代碼聲明了一個文本框控件和一個按鈕控件，當(dāng)用戶單擊按鈕控件時，就需要實現(xiàn)標(biāo)簽控件的文本改變。為

16、了實現(xiàn)相應(yīng)的效果，可以通過編寫cs文件代碼進(jìn)行邏輯處理，示例代碼如下所示：namespace _5_3/頁面命名空間 public partial class _Default : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e)/頁面加載時觸發(fā) protected void Button1_Click(object sender, EventArgs e)/雙擊按鈕時觸發(fā)的事件 Label1.Text = TextBox1.Text;/標(biāo)簽控件的值等于文本框中控件的值 上述代碼中，當(dāng)雙擊按鈕時，就會

17、觸發(fā)一個按鈕事件，這個事件就是將文本框內(nèi)的值賦值到標(biāo)簽內(nèi)，運行結(jié)果如圖5-4所示。圖5-4 文本框控件的使用同樣，雙擊文本框控件，會觸發(fā)TextChange事件。而當(dāng)運行時，當(dāng)文本框控件中的字符變化后，并沒有自動回傳，是因為默認(rèn)情況下，文本框的AutoPostBack屬性被設(shè)置為false。當(dāng)AutoPostBack屬性被設(shè)置為true時，文本框的屬性變化，則會發(fā)生回傳，示例代碼如下所示。 protected void TextBox1_TextChanged(object sender, EventArgs e)/文本框事件 Label1.Text = TextBox1.Text;/控件相互

18、賦值 上述代碼中，為TextBox1添加了TextChanged事件。在TextChanged事件中，并不是每一次文本框的內(nèi)容發(fā)生了變化之后，就會重傳到服務(wù)器，這一點和WinForm是不同的，因為這樣會大大的降低頁面的效率。而當(dāng)用戶將文本框中的焦點移出導(dǎo)致TextBox就會失去焦點時，才會發(fā)生重傳。5.4 按鈕控件（Button，LinkButton，ImageButton）在Web應(yīng)用程序和用戶交互時，常常需要提交表單、獲取表單信息等操作。在這其間，按鈕控件是非常必要的。按鈕控件能夠觸發(fā)事件，或者將網(wǎng)頁中的信息回傳給服務(wù)器。在ASP.NET中，包含三類按鈕控件，分別為Button、LinkB

19、utton、ImageButton。5.4.1 按鈕控件的通用屬性按鈕控件用于事件的提交，按鈕控件包含一些通用屬性，按鈕控件的常用通用屬性包括有：Causes Validation：按鈕是否導(dǎo)致激發(fā)驗證檢查。CommandArgument：與此按鈕管理的命令參數(shù)。CommandName：與此按鈕關(guān)聯(lián)的命令。ValidationGroup：使用該屬性可以指定單擊按鈕時調(diào)用頁面上的哪些驗證程序。如果未建立任何驗證組，則會調(diào)用頁面上的所有驗證程序。下面的語句聲明了三種按鈕，示例代碼如下所示。 /普通的按鈕 LinkButton/Link類型的按鈕 /圖像類型的按鈕對于三種按鈕，他們起到的作用基本相同

20、，主要是表現(xiàn)形式不同，如圖5-5所示。圖5-5 三種按鈕類型5.4.2 Click單擊事件這三種按鈕控件對應(yīng)的事件通常是Click單擊和Command命令事件。在Click單擊事件中，通常用于編寫用戶單擊按鈕時所需要執(zhí)行的事件，示例代碼如下所示。 protected void Button1_Click(object sender, EventArgs e) Label1.Text = 普通按鈕被觸發(fā);/輸出信息 protected void LinkButton1_Click(object sender, EventArgs e) Label1.Text = 連接按鈕被觸發(fā);/輸出信息 pr

21、otected void ImageButton1_Click(object sender, ImageClickEventArgs e) Label1.Text = 圖片按鈕被觸發(fā);/輸出信息 上述代碼分別為三種按鈕生成了事件，其代碼都是將Label1的文本設(shè)置為相應(yīng)的文本，運行結(jié)果如圖5-6所示。圖5-6 按鈕的Click事件5.4.3 Command命令事件按鈕控件中，Click事件并不能傳遞參數(shù)，所以處理的事件相對簡單。而Command事件可以傳遞參數(shù)，負(fù)責(zé)傳遞參數(shù)的是按鈕控件的CommandArgument和CommandName屬性。如圖5-7所示。圖5-7 CommandArgu

22、ment和CommandName屬性將CommandArgument和CommandName屬性分別設(shè)置為Hello!和Show，單擊創(chuàng)建一個Command事件并在事件中編寫相應(yīng)代碼，示例代碼如下所示。 protected void Button1_Command(object sender, CommandEventArgs e) if (e.CommandName = Show)/如果CommandNmae屬性的值為Show，則運行下面代碼 Label1.Text = e.CommandArgument.ToString();/CommandArgument屬性的值賦值給Label1 注意

23、：當(dāng)按鈕同時包含Click和Command事件時，通常情況下會執(zhí)行Command事件。Command有一些Click不具備的好處，就是傳遞參數(shù)。可以對按鈕的CommandArgument和CommandName屬性分別設(shè)置，通過判斷CommandArgument和CommandName屬性來執(zhí)行相應(yīng)的方法。這樣一個按鈕控件就能夠?qū)崿F(xiàn)不同的方法，使得多個按鈕與一個處理代碼關(guān)聯(lián)或者一個按鈕根據(jù)不同的值進(jìn)行不同的處理和響應(yīng)。相比Click單擊事件而言，Command命令事件具有更高的可控性。5.5 單選控件和單選組控件（RadioButton和RadioButtonList）在投票等系統(tǒng)中，通常需要

24、使用單選控件和單選組控件。顧名思義，在單選控件和單選組控件的項目中，只能在有限種選擇中進(jìn)行一個項目的選擇。在進(jìn)行投票等應(yīng)用開發(fā)并且只能在選項中選擇單項時，單選控件和單選組控件都是最佳的選擇。5.5.1 單選控件（RadioButton）單選控件可以為用戶選擇某一個選項，單選控件常用屬性如下所示。Checked：控件是否被選中。GroupName：單選控件所處的組名。TextAlign：文本標(biāo)簽相對于控件的對齊方式。單選控件通常需要Checked屬性來判斷某個選項是否被選中，多個單選控件之間可能存在著某些聯(lián)系，這些聯(lián)系通過GroupName進(jìn)行約束和聯(lián)系，示例代碼如下所示。 上述代碼聲明了兩個單

25、選控件，并將GroupName屬性都設(shè)置為“choose”。單選控件中最常用的事件是CheckedChanged，當(dāng)控件的選中狀態(tài)改變時，則觸發(fā)該事件，示例代碼如下所示。 protected void RadioButton1_CheckedChanged(object sender, EventArgs e) Label1.Text = 第一個被選中; protected void RadioButton2_CheckedChanged(object sender, EventArgs e) Label1.Text = 第二個被選中; 上述代碼中，當(dāng)選中狀態(tài)被改變時，則觸發(fā)相應(yīng)的事件。運行結(jié)

26、果如圖5-8所示。圖5-8 單選控件的使用與TextBox文本框控件相同的是，單選控件不會自動進(jìn)行頁面回傳，必須將AutoPostBack屬性設(shè)置為true時才能在焦點丟失時觸發(fā)相應(yīng)的CheckedChanged事件。5.5.2 單選組控件（RadioButtonList）與單選控件相同，單選組控件也是只能選擇一個項目的控件，而與單選控件不同的是，單選組控件沒有GroupName屬性，但是卻能夠列出多個單選項目。另外，單選組控件所生成的代碼也比單選控件實現(xiàn)的相對較少。單選組控件添加項如圖5-9所示。圖5-9 單選組控件添加項添加項目后，系統(tǒng)自動在.aspx頁面聲明服務(wù)器控件代碼，代碼如下所示。

27、 Choose1 Choose2 Choose3 上述代碼使用了單選組控件進(jìn)行單選功能的實現(xiàn)，單選組控件還包括一些屬性用于樣式和重復(fù)的配置。單選組控件的常用屬性如下所示：DataMember：在數(shù)據(jù)集用做數(shù)據(jù)源時做數(shù)據(jù)綁定。DataSource：向列表填入項時所使用的數(shù)據(jù)源。DataTextFiled：提供項文本的數(shù)據(jù)源中的字段。DataTextFormat：應(yīng)用于文本字段的格式。DataValueFiled：數(shù)據(jù)源中提供項值的字段。Items：列表中項的集合。RepeatColumn：用于布局項的列數(shù)。RepeatDirection：項的布局方向。RepeatLayout：是否在某個表或者流

28、中重復(fù)。同單選控件一樣，雙擊單選組控件時系統(tǒng)會自動生成該事件的聲明，同樣可以在該事件中確定代碼。當(dāng)選擇一項內(nèi)容時，提示用戶所選擇的內(nèi)容，示例代碼如下所示。 protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) Label1.Text = RadioButtonList1.Text;/文本標(biāo)簽段的值等于選擇的控件的值 5.6 復(fù)選框控件和復(fù)選組控件（CheckBox和CheckBoxList）當(dāng)一個投票系統(tǒng)需要用戶能夠選擇多個選擇項時，則單選框控件就不符合要求了。ASP.NET還提供了復(fù)選

29、框控件和復(fù)選組控件來滿足多選的要求。復(fù)選框控件和復(fù)選組控件同單選框控件和單選組控件一樣，都是通過Checked屬性來判斷是否被選擇。5.6.1 復(fù)選框控件（CheckBox）同單選框控件一樣，復(fù)選框也是通過Check屬性判斷是否被選擇，而不同的是，復(fù)選框控件沒有GroupName屬性，示例代碼如下所示。 上述代碼中聲明了兩個復(fù)選框控件。對于復(fù)選框空間，并沒有支持的GroupName屬性，當(dāng)雙擊復(fù)選框控件時，系統(tǒng)會自動生成方法。當(dāng)復(fù)選框控件的選中狀態(tài)被改變后，會激發(fā)該事件。示例代碼如下所示。 protected void CheckBox1_CheckedChanged(object sende

30、r, EventArgs e) Label1.Text = 選框1被選中;/當(dāng)選框1被選中時 protected void CheckBox2_CheckedChanged(object sender, EventArgs e) Label1.Text = 選框2被選中,并且字體變大;/當(dāng)選框2被選中時 Label1.Font.Size = FontUnit.XXLarge; 上述代碼分別為兩個選框設(shè)置了事件，設(shè)置了當(dāng)選擇選框1時，則文本標(biāo)簽輸出“選框1被選中” ，如圖5-10所示。當(dāng)選擇選框2時，則輸出“選框2被選中，并且字體變大”，運行結(jié)果如圖5-11所示。 圖5-10 選框1被選中 圖5

31、-11 選框2被選中對于復(fù)選框而言，用戶可以在復(fù)選框控件中選擇多個選項，所以就沒有必要為復(fù)選框控件進(jìn)行分組。在單選框控件中，相同組名的控件只能選擇一項用于約束多個單選框中的選項，而復(fù)選框就沒有約束的必要。5.6.2 復(fù)選組控件（CheckBoxList）同單選組控件相同，為了方便復(fù)選控件的使用，.NET服務(wù)器控件中同樣包括了復(fù)選組控件，拖動一個復(fù)選組控件到頁面可以同單選組控件一樣添加復(fù)選組列表。添加在頁面后，系統(tǒng)生成代碼如下所示。 Choose1 Choose2 Choose3 上述代碼中，同樣增加了3個項目提供給用戶選擇，復(fù)選組控件最常用的是SelectedIndexChanged事件。當(dāng)控

32、件中某項的選中狀態(tài)被改變時，則會觸發(fā)該事件。示例代碼如下所示。 protected void CheckBoxList1_SelectedIndexChanged(object sender, EventArgs e) if (CheckBoxList1.Items0.Selected)/判斷某項是否被選中 Label1.Font.Size = FontUnit.XXLarge;/更改字體大小 if (CheckBoxList1.Items1.Selected)/判斷是否被選中 Label1.Font.Size = FontUnit.XLarge;/更改字體大小 if (CheckBoxLis

33、t1.Items2.Selected) Label1.Font.Size = FontUnit.XSmall; 上述代碼中，CheckBoxList1.Items0.Selected是用來判斷某項是否被選中，其中Item數(shù)組是復(fù)選組控件中項目的集合，其中Items0是復(fù)選組中的第一個項目。上述代碼用來修改字體的大小，如圖5-12所示，當(dāng)選擇不同的選項時，字體的大小也不相同，運行結(jié)果如圖5-13所示。 圖5-12 選擇大號字體 圖5-13 選擇小號字體正如圖5-12、5-13所示，當(dāng)用戶選擇不同的選項時，Label標(biāo)簽的字體的大小會隨之改變。注意：復(fù)選組控件與單選組控件不同的是，不能夠直接獲取復(fù)

34、選組控件某個選中項目的值，因為復(fù)選組控件返回的是第一個選擇項的返回值，只能夠通過Item集合來獲取選擇某個或多個選中的項目值。5.7 列表控件（DropDownList，ListBox和BulletedList）在Web開發(fā)中，經(jīng)常會需要使用列表控件，讓用戶的輸入更加簡單。例如在用戶注冊時，用戶的所在地是有限的集合，而且用戶不喜歡經(jīng)常鍵入，這樣就可以使用列表控件。同樣列表控件還能夠簡化用戶輸入并且防止用戶輸入在實際中不存在的數(shù)據(jù)，如性別的選擇等。5.7.1 DropDownList列表控件列表控件能在一個控件中為用戶提供多個選項，同時又能夠避免用戶輸入錯誤的選項。例如，在用戶注冊時，可以選擇性

35、別是男，或者女，就可以使用DropDownList列表控件，同時又避免了用戶輸入其他的信息。因為性別除了男就是女，輸入其他的信息說明這個信息是錯誤或者是無效的。下列語句聲明了一個DropDownList列表控件，示例代碼如下所示。 1 2 3 4 5 6 7 上述代碼創(chuàng)建了一個DropDownList列表控件，并手動增加了列表項。同時DropDownList列表控件也可以綁定數(shù)據(jù)源控件。DropDownList列表控件最常用的事件是SelectedIndexChanged，當(dāng)DropDownList列表控件選擇項發(fā)生變化時，則會觸發(fā)該事件，示例代碼如下所示。 protected void Dr

36、opDownList1_SelectedIndexChanged1(object sender, EventArgs e) Label1.Text = 你選擇了第 + DropDownList1.Text + 項; 上述代碼中，當(dāng)選擇的項目發(fā)生變化時則會觸發(fā)該事件，如圖5-14所示。當(dāng)用戶再次進(jìn)行選擇時，系統(tǒng)會將更改標(biāo)簽1中的文本，如圖5-15所示。 圖5-14 選擇第三項 5-15 選擇第一項當(dāng)用戶選擇相應(yīng)的項目時，就會觸發(fā)SelectedIndexChanged事件，開發(fā)人員可以通過捕捉相應(yīng)的用戶選中的控件進(jìn)行編程處理，這里就捕捉了用戶選擇的數(shù)字進(jìn)行字體大小的更改。5.7.2 ListBo

37、x列表控件相對于DropDownList控件而言，ListBox控件可以指定用戶是否允許多項選擇。設(shè)置SelectionMode屬性為Single時，表明只允許用戶從列表框中選擇一個項目，而當(dāng)SelectionMode屬性的值為Multiple時，用戶可以按住Ctrl鍵或者使用Shift組合鍵從列表中選擇多個數(shù)據(jù)項。當(dāng)創(chuàng)建一個ListBox列表控件后，開發(fā)人員能夠在控件中添加所需的項目，添加完成后示例代碼如下所示。 1 2 3 4 5 6 從結(jié)構(gòu)上看，ListBox列表控件的HTML樣式代碼和DropDownList控件十分相似。同樣，SelectedIndexChanged也是ListBox

38、列表控件中最常用的事件，雙擊ListBox列表控件，系統(tǒng)會自動生成相應(yīng)的代碼。同樣，開發(fā)人員可以為ListBox控件中的選項改變后的事件做編程處理，示例代碼如下所示。 protected void ListBox1_SelectedIndexChanged(object sender, EventArgs e) Label1.Text = 你選擇了第 + ListBox1.Text + 項; 上述代碼中，當(dāng)ListBox控件選擇項發(fā)生改變后，該事件就會被觸發(fā)并修改相應(yīng)Label標(biāo)簽中文本，如圖5-16所示。上面的程序同樣實現(xiàn)了DropDownList中程序的效果。不同的是，如果需要實現(xiàn)讓用戶選

39、擇多個ListBox項，只需要設(shè)置SelectionMode屬性為“Multiple”即可，如圖5-17所示。 圖5-16 ListBox單選 圖5-17 SelectionMode屬性當(dāng)設(shè)置了SelectionMode屬性后，用戶可以按住Ctrl鍵或者使用Shift組合鍵選擇多項。同樣，開發(fā)人員也可以編寫處理選擇多項時的事件，示例代碼如下所示。 protected void ListBox1_SelectedIndexChanged1(object sender, EventArgs e) Label1.Text += ,你選擇了第 + ListBox1.Text + 項; 上述代碼使用了“

40、+=”運算符，在觸發(fā)SelectedIndexChanged事件后，應(yīng)用程序?qū)長abel1標(biāo)簽賦值，如圖5-18所示。當(dāng)用戶每選一項的時候，就會觸發(fā)該事件，如圖5-19所示。 圖5-18 單選效果 圖5-19 多選效果從運行結(jié)果可以看出，當(dāng)單選時，選擇項返回值和選擇的項相同，而當(dāng)選擇多項的時候，返回值同第一項相同。所以，在選擇多項時，也需要使用Item集合獲取和遍歷多個項目。5.7.3 BulletedList列表控件BulletedList與上述列表控件不同的是，BulleteList控件可呈現(xiàn)項目符號或編號。對BulleteList屬性的設(shè)置為呈現(xiàn)項目符號，則當(dāng)BulletedList被

41、呈現(xiàn)在頁面時，列表前端會則會顯式項目符號或者特殊符號，效果如圖5-20所示。圖5-20 BulletedList顯式效果BulletedList可以通過設(shè)置BulletStyle屬性來編輯列表前的符號樣式，常用的BulletStyle項目符號編號樣式如下所示。Circle：項目符號設(shè)置為。CustomImage：項目符號為自定義圖片。Disc：項目符號設(shè)置為。LowerAlpha：項目符號為小寫字母格式，如a、b、c等。LowerRoman：項目符號為羅馬數(shù)字格式，如i、ii等。NotSet：表示不設(shè)置，此時將以Disc樣式為默認(rèn)樣式。Numbered：項目符號為1、2、3、4等。Square

42、：項目符號為黑方塊。UpperAlpha：項目符號為大寫字母格式，如A、B、C等。UpperRoman：項目符號為大寫羅馬數(shù)字格式如、等。同樣，BulletedList控件也同DropDownList以及ListBox相同，可以添加事件。不同的是生成的事件是Click事件，代碼如下所示。 protected void BulletedList1_Click(object sender, BulletedListEventArgs e) Label1.Text += ,你選擇了第 + BulletedList1.Itemse.Index.ToString() + 項; DropDownList和

43、ListBox生成的事件是SelectedIndexChanged，當(dāng)其中的選擇項被改變時，則觸發(fā)該事件。而BulletedList控件生成的事件是Click，用于在其中提供邏輯以執(zhí)行特定的應(yīng)用程序任務(wù)。5.8 面板控件（Panel）面板控件就好像是一些控件的容器，可以將一些控件包含在面板控件內(nèi)，然后對面板控制進(jìn)行操作來設(shè)置在面板控件內(nèi)的所有控件是顯示還是隱藏，從而達(dá)到設(shè)計者的特殊目的。當(dāng)創(chuàng)建一個面板控件時，系統(tǒng)會生成相應(yīng)的HTML代碼，示例代碼如下所示。 面板控件的常用功能就是顯示或隱藏一組控件，示例HTML代碼如下所示。 This is a Panel! 上述代碼創(chuàng)建了一個Panel控件，

44、 Panel控件默認(rèn)屬性為隱藏，并在控件外創(chuàng)建了一個Button控件Button1，當(dāng)用戶單擊外部的按鈕控件后將顯示Panel控件，cs代碼如下所示。 protected void Button1_Click(object sender, EventArgs e) Panel1.Visible = true;/Panel控件顯示可見 當(dāng)頁面初次被載入時，Panel控件以及Panel控件內(nèi)部的服務(wù)器控件都為隱藏，如圖5-21所示。當(dāng)用戶單擊Button1時，則Panel控件可見性為可見，則頁面中的Panel控件以及Panel控件中的所有服務(wù)器控件也都為可見，如圖5-22所示。 圖5-21 Pan

45、el控件隱藏 圖5-22 Panel被顯示將TextBox控件和Button控件放到Panel控件中，可以為Panel控件的DefaultButton屬性設(shè)置為面板中某個按鈕的ID來定義一個默認(rèn)的按鈕。當(dāng)用戶在面板中輸入完畢，可以直接按Enter鍵來傳送表單。并且，當(dāng)設(shè)置了Panel控件的高度和寬度時，當(dāng)Panel控件中的內(nèi)容高度或?qū)挾瘸^時，還能夠自動出現(xiàn)滾動條。Panel控件還包含一個GroupText屬性，當(dāng)Panel控件的GroupText屬性被設(shè)置時，Panel將會被創(chuàng)建一個帶標(biāo)題的分組框，效果如圖5-23所示。圖5-23 Panel控件的GroupText屬性GroupText屬性

46、能夠進(jìn)行Panel控件的樣式呈現(xiàn)，通過編寫GroupText屬性能夠更加清晰的讓用戶了解Panel控件中服務(wù)器控件的類別。例如當(dāng)有一組服務(wù)器用于填寫用戶的信息時，可以將Panel控件的GroupText屬性編寫成為“用戶信息”，讓用戶知道該區(qū)域是用于填寫用戶信息的。5.9 占位控件（PlaceHolder）在傳統(tǒng)的ASP開發(fā)中，通常在開發(fā)頁面的時候，每個頁面有很多相同的元素，例如導(dǎo)航欄、GIF圖片等。使用ASP進(jìn)行應(yīng)用程序開發(fā)通常使用include語句在各個頁面包含其他頁面的代碼，這樣的方法雖然解決了相同元素的很多問題，但是代碼不夠美觀，而且時常會出現(xiàn)問題。ASP.NET中可以使用PlaceH

47、older來解決這個問題，與面板控件Panel控件相同的是，占位控件PlaceHolder也是控件的容器，但是在HTML頁面呈現(xiàn)中本身并不產(chǎn)生HTML，創(chuàng)建一個PlaceHolder控件代碼如下所示。 在CS頁面中，允許用戶動態(tài)的在PlaceHolder上創(chuàng)建控件，CS頁面代碼如下所示。 protected void Page_Load(object sender, EventArgs e) TextBox text = new TextBox();/創(chuàng)建一個TextBox對象 text.Text = NEW; this.PlaceHolder1.Controls.Add(text);/為占位

48、控件動態(tài)增加一個控件 上述代碼動態(tài)的創(chuàng)建了一個TextBox控件并顯示在占位控件中，運行效果如圖5-24所示。圖5-24 PlaceHolder控件的使用開發(fā)人員不僅能夠通過編程在PlaceHolder控件中添加控件，開發(fā)人員同樣可以在PlaceHolder控件中拖動相應(yīng)的服務(wù)器控件進(jìn)行控件呈現(xiàn)和分組。5.10 日歷控件（Calendar）在傳統(tǒng)的Web開發(fā)中，日歷是最復(fù)雜也是最難實現(xiàn)的功能，好在ASP.NET中提供了強(qiáng)大的日歷控件來簡化日歷控件的開發(fā)。日歷控件能夠?qū)崿F(xiàn)日歷的翻頁、日歷的選取以及數(shù)據(jù)的綁定，開發(fā)人員能夠在博客、OA等應(yīng)用的開發(fā)中使用日歷控件從而減少日歷應(yīng)用的開發(fā)。5.10.1

49、日歷控件的樣式日歷控件通常在博客、論壇等程序中使用，日歷控件不僅僅只是顯式了一個日歷，用戶還能夠通過日歷控件進(jìn)行時間的選取。在ASP.NET中，日歷控件還能夠和數(shù)據(jù)庫進(jìn)行交互操作，實現(xiàn)復(fù)雜的數(shù)據(jù)綁定。開發(fā)人員能夠?qū)⑷諝v控件拖動在主窗口中，在主窗口的代碼視圖下會自動生成日歷控件的HTML代碼，示例代碼如下所示。 ASP.NET通過上述簡單的代碼就創(chuàng)建了一個強(qiáng)大的日歷控件，其效果如圖5-25所示。圖5-25 日歷控件日歷控件通常用于顯示月歷，日歷控件允許用戶選擇日期和移動到下一頁或上一頁。通過設(shè)置日歷控件的屬性，可以更改日歷控件的外觀。常用的日歷控件的屬性如下所示：DayHeaderStype：月

50、歷中顯示一周中每一天的名稱和部分的樣式。DayStyle：所顯示的月份中各天的樣式。NextPrevStyle：標(biāo)題欄左右兩端的月導(dǎo)航所在部分的樣式。OtherMonthDayStyle：上一個月和下一個月的樣式。SelectedDayStyle：選定日期的樣式。SelectorStyle：位于月歷控件左側(cè)，包含用于選擇一周或整個月的連接的列樣式。ShowDayHeader：顯示或隱藏一周中的每一天的部分。ShowGridLines：顯示或隱藏一個月中的每一天之間的網(wǎng)格線。ShowNextPrevMonth：顯示或隱藏到下一個月或上一個月的導(dǎo)航控件。ShowTitle：顯示或隱藏標(biāo)題部分。Ti

51、tleStyle：位于月歷頂部，包含月份名稱和月導(dǎo)航連接的標(biāo)題欄樣式。TodayDayStyle：當(dāng)前日期的樣式。WeekendDayStyle：周末日期的樣式。Visual Studio還為開發(fā)人員提供了默認(rèn)的日歷樣式從而能夠選擇自動套用格式進(jìn)行樣式控制，如圖5-26所示。圖5-26 使用系統(tǒng)樣式除了上述樣式可以設(shè)置以外，ASP.NET還為用戶設(shè)計了若干樣式，若開發(fā)人員覺得設(shè)置樣式非常困難，則可以使用系統(tǒng)默認(rèn)的樣式進(jìn)行日歷控件的樣式呈現(xiàn)。5.10.2 日歷控件的事件同所有的控件相同，日歷控件也包含自身的事件，常用的日歷控件的事件包括有：DayRender：當(dāng)日期被顯示時觸發(fā)該事件。Selec

52、tionChanged：當(dāng)用戶選擇日期時觸發(fā)該事件。VisibleMonthChanged：當(dāng)所顯示的月份被更改時觸發(fā)該事件。在創(chuàng)建日歷控件中每個日期單元格時，則會觸發(fā)DayRender事件。當(dāng)用戶選擇月歷中的日期時，則會觸發(fā)SelectionChanged事件，同樣，當(dāng)雙擊日歷控件時，會自動生成該事件的代碼塊。當(dāng)對當(dāng)前月份進(jìn)行切換，則會激發(fā)VisibleMonthChanged事件。開發(fā)人員可以通過一個標(biāo)簽來接受當(dāng)前事件，當(dāng)選擇月歷中的某一天，則此標(biāo)簽顯示當(dāng)前日期，示例代碼如下所示。 protected void Calendar1_SelectionChanged(object sende

53、r, EventArgs e) Label1.Text = 現(xiàn)在的時間是: + Calendar1.SelectedDate.Year.ToString() + 年 + Calendar1.SelectedDate.Month.ToString()+月 + Calendar1.SelectedDate.Day.ToString()+號 + Calendar1.SelectedDate.Hour.ToString()+點; 在上述代碼中，當(dāng)用戶選擇了月歷中的某一天時，則標(biāo)簽中的文本會變?yōu)楫?dāng)前的日期文本，如“現(xiàn)在的時間是xx”之類。在進(jìn)行邏輯編程的同時，也需要對日歷控件的樣式做稍許更改，日歷控件的

54、HTML代碼如下所示。 上述代碼中的日歷控件選擇的是ASP.NET的默認(rèn)樣式，如圖5-27所示。當(dāng)確定了日歷控件樣式后，并編寫了相應(yīng)的SelectionChanged事件代碼后，就可以通過日歷控件獲取當(dāng)前時間，或者對當(dāng)前時間進(jìn)行編程，如圖5-28所示。 圖5-27 日歷控件 圖5-28 選擇一個日期5.11 廣告控件（AdRotator）在Web應(yīng)用開發(fā)中，廣告總是必不可少的。而ASP.NET為開發(fā)人員提供了廣告控件為頁面在加載時提供一個或一組廣告。廣告控件可以從固定的數(shù)據(jù)源中讀?。ㄈ鏧ML或數(shù)據(jù)源控件），并從中自動讀取出廣告信息。當(dāng)頁面每刷新一次時，廣告顯示的內(nèi)容也同樣會被刷新。廣告控件必須

55、放置在Form或Panel控件，以及模板內(nèi)。廣告控件需要包含圖像的地址的XML文件。并且該文件用來指定每個廣告的導(dǎo)航連接。廣告控件最常用的屬性就是AdvertisementFile，使用它來配置相應(yīng)的XML文件，所以必須首先按照標(biāo)準(zhǔn)格式創(chuàng)建一個XML文件，如圖5-29所示。圖5-29 創(chuàng)建一個XML文件創(chuàng)建了XML文件之后，開發(fā)人員并不能按照自己的意愿進(jìn)行XML文檔的編寫，如果要正確的被廣告控件解析形成廣告，就需要按照廣告控件要求的標(biāo)準(zhǔn)的XML格式來編寫代碼，示例代碼如下所示。 * * *上述代碼實現(xiàn)了一個標(biāo)準(zhǔn)的廣告控件的XML數(shù)據(jù)源格式，其中各標(biāo)簽意義如下所示：ImageUrl：指定一個圖片

56、文件的相對路徑或絕對路徑，當(dāng)沒有ImageKey元素與OptionalImageUrl匹配時則顯示該圖片。NavigateUrl：當(dāng)用戶單擊廣告時單沒有NaivigateUrlKey元素與OptionalNavigateUrl元素匹配時，會將用戶發(fā)送到該頁面。OptionalImageUrl：指定一個圖片文件的相對路徑或絕對路徑，對于ImageKey元素與OptionalImageUrl匹配時則顯示該圖片。OptionalNavigateUrl：當(dāng)用戶單擊廣告時單有NaivigateUrlKey元素與OptionalNavigateUrl元素匹配時，會將用戶發(fā)送到該頁面。AlternateTe

57、xt：該元素用來替代IMG中的ALT元素。KeyWord：KeyWord用來指定廣告的類別。Impression：該元素是一個數(shù)值，指示輪換時間表中該廣告相對于文件中的其他廣告的權(quán)重。當(dāng)創(chuàng)建了一個XML數(shù)據(jù)源之后，就需要對廣告控件的AdvertisementFile進(jìn)行更改，如圖5-30所示。圖5-30 指定相應(yīng)的數(shù)據(jù)源配置好數(shù)據(jù)源之后，就需要在廣告控件的數(shù)據(jù)源XML文件中加入自己的代碼了，XML廣告文件示例代碼如下所示。 /images/cms.jpg 我的網(wǎng)站 software 100 /images/hello.jpg 我的網(wǎng)站 software 100 運行程序，廣告對應(yīng)的圖像在頁面每

58、次加載的時候被呈現(xiàn)，如圖5-31所示。頁面每次刷新時，廣告控件呈現(xiàn)的廣告內(nèi)容都會被刷新，如圖5-32所示。 圖5-31 一個廣告被呈現(xiàn) 圖5-32 刷新后更換廣告內(nèi)容注意：廣告控件本身并不提供點擊統(tǒng)計，所以無法計算廣告是否被用戶點擊或者統(tǒng)計用戶最關(guān)心的廣告。5.12 文件上傳控件（FileUpload）在網(wǎng)站開發(fā)中，如果需要加強(qiáng)用戶與應(yīng)用程序之間的交互，就需要上傳文件。例如在論壇中，用戶需要上傳文件分享信息或在博客中上傳視頻分享快樂等等。上傳文件在ASP中是一個復(fù)雜的問題，可能需要通過組件才能夠?qū)崿F(xiàn)文件的上傳。在ASP.NET中，開發(fā)環(huán)境默認(rèn)的提供了文件上傳控件來簡化文件上傳的開發(fā)。當(dāng)開發(fā)人員

59、使用文件上傳控件時，將會顯示一個文本框，用戶可以鍵入或通過“瀏覽”按鍵瀏覽和選擇希望上傳到服務(wù)器的文件。創(chuàng)建一個文件上傳控件系統(tǒng)生成的HTML代碼如下所示。 文件上傳控件可視化設(shè)置屬性較少，大部分都是通過代碼控制完成的。當(dāng)用戶選擇了一個文件并提交頁面后，該文件作為請求的一部分上傳，文件將被完整的緩存在服務(wù)器內(nèi)存中。當(dāng)文件完成上傳，頁面才開始運行，在代碼運行的過程中，可以檢查文件的特征，然后保存該文件。同時，上傳控件在選擇文件后，并不會立即執(zhí)行操作，需要其他的控件來完成操作，例如按鈕控件（Button）。實現(xiàn)文件上傳的HTML核心代碼如下所示。 上述代碼通過一個Button控件來操作文件上傳控件

60、，當(dāng)用戶單擊按鈕控件后就能夠?qū)⑸蟼骺丶羞x中的控件上傳到服務(wù)器空間中，示例代碼如下所示。 protected void Button1_Click(object sender, EventArgs e) FileUpload1.PostedFile.SaveAs(Server.MapPath(upload/beta.jpg);/上傳文件另存為 上述代碼將一個文件上傳到了upload文件夾內(nèi)，并保存為jpg格式，如圖5-33所示。打開服務(wù)器文件，可以看到文件已經(jīng)上傳了，如圖5-34所示。 圖5-33 上傳文件 圖5-34 文件已經(jīng)被上傳上述代碼將文件保存在UPLOAD文件夾中，并保存為JPG格式