ASPNET開發(fā)大全第5章

第5章Web窗體的基本控件

與ASP不同的是，ASP.NET提供了大量的控件，這些控件能夠輕松的實(shí)現(xiàn)一個(gè)交互復(fù)雜的Web應(yīng)

用功能。在傳統(tǒng)的ASP開發(fā)中，讓開發(fā)人員最為煩惱的是代碼的重用性太低，以及事件代碼和頁面代

碼不能很好的分開。而在ASP.NET中，控件不僅解決了代碼重用性的問題，對(duì)于初學(xué)者而言，控件還

簡單易用并能夠輕松上手、投入開發(fā)。

5.1控件的屬性

每個(gè)控件都有一些公共屬性，例如字體顏色、邊框的顏色、樣式等。在VisualStudio2008中，當(dāng)開

發(fā)人員將鼠標(biāo)選擇了相應(yīng)的控件后，屬性欄中會(huì)簡單的介紹該屬性的作用。如圖5-1所示。

圖5-1控件的屬性

屬性欄用來設(shè)置控件的屬性，當(dāng)控件在頁面被初始化時(shí)，這些將被應(yīng)用到控件。控件的屬性也可以

通過編程的方法在頁面相應(yīng)代碼區(qū)域編寫，示例代碼如下所示。

protectedvoidPage_Load（objectsender,EventArgse）

（

Label1.Visible=false;//在Page_Load中設(shè)置Labell的可見性

）

上述代碼編寫了一個(gè)Page_Load（頁面加載事件），當(dāng)頁面初次被加載時(shí)，會(huì)執(zhí)行Page_Load中的

代碼。這里通過編程的方法對(duì)控件的屬性進(jìn)行更改，當(dāng)頁面加載時(shí)，控件的屬性會(huì)被應(yīng)用并呈現(xiàn)在瀏覽

器。

5.2簡單控件

ASP.NET提供了諸多控件，這些控件包括簡單控件、數(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ā)事件時(shí)，某一段文本能夠在運(yùn)行時(shí)

更改，則可以使用標(biāo)簽控件(Label)。開發(fā)人員可以非常方便的將標(biāo)簽控件拖放到頁面，拖放到頁面后，

該頁面將自動(dòng)生成一段標(biāo)簽控件的聲明代碼，示例代碼如下所示。

<asp:LabelID="Label1"runat="server"Text="Label"x/asp:Label>

上述代碼中，聲明了一個(gè)標(biāo)簽控件，并將這個(gè)標(biāo)簽控件的ID屬性設(shè)置為默認(rèn)值Label1。由于該控

件是服務(wù)器端控件，所以在控件屬性中包含runat="server”屬性。該代碼還將標(biāo)簽控件的文本初始化為

Label,開發(fā)人員能夠配置該屬性進(jìn)行不同文本內(nèi)容的呈現(xiàn)。

注意：通常情況下，控件的ID也應(yīng)該遵循良好的命名規(guī)范，以便維護(hù)。

同樣，標(biāo)簽控件的屬性能夠在相應(yīng)的.cs代碼中初始化，示例代碼如下所示。

protectedvoidPage_Prelnit(objectsender,EventArgse)

(

Label1.Text="HelloWorld";〃標(biāo)簽賦值

)

上述代碼在頁面初始化時(shí)為Label1的文本屬性設(shè)置為“Hell。World”。值得注意的是，對(duì)于Label

標(biāo)簽，同樣也可以顯式HTML樣式，示例代碼如下所示。

protectedvoidPage_Prelnit(objectsender,EventArgse)

(

Label1.Text="HelloWorld<hr/><spanstyle=\"color:red\">AHtmlCode</span>";〃輸出HTML

Label1.Font.Size=FontUnit.XXLarge;〃設(shè)置字體大小

)

上述代碼中，Label1的文本屬性被設(shè)置為一串HTML代碼，當(dāng)Label文本被呈現(xiàn)時(shí)，會(huì)以HTML

效果顯式，運(yùn)行結(jié)果如圖5-2所示。

圖5-2Label的Text屬性的使用

如果開發(fā)人員只是為了顯示一般的文本或者HTML效果，不推薦使用Label控件，因?yàn)楫?dāng)服務(wù)器控

件過多，會(huì)導(dǎo)致性能問題。使用靜態(tài)的HTML文本能夠讓頁面解析速度更快。

5.2.2超鏈接控件(HyperLink)

超鏈接控件相當(dāng)于實(shí)現(xiàn)了HTML代碼中的“<ahref=""></a>”效果，當(dāng)然，超鏈接控件有自己的特

點(diǎn)，當(dāng)拖動(dòng)一個(gè)超鏈接控件到頁面時(shí)，系統(tǒng)會(huì)自動(dòng)生成控件聲明代碼，示例代碼如下所示。

<asp:HyperLinkID="HyperLink1Hrunat="server">HyperLink</asp:HyperLink>

上述代碼聲明了一個(gè)超鏈接控件，相對(duì)于HTML代碼形式，超鏈接控件可以通過傳遞指定的參數(shù)

來訪問不同的頁面。當(dāng)觸發(fā)了一個(gè)事件后，超鏈接的屬性可以被改變。超鏈接控件通常使用的兩個(gè)屬性

如下所示：

□ImageUrl：要顯式圖像的URL。

□NavigateUrl：要跳轉(zhuǎn)的URL。

1.ImageUrl屬性

設(shè)置ImageUrl屬性可以設(shè)置這個(gè)超鏈接是以文本形式顯式還是以圖片文件顯式，示例代碼如下所

7J\o

<asp:HyperLinkID="HyperLink1"runat="server"

lmageUrl="http:〃/images/cms.jpg”>

HyperLink

</asp:HyperLink>

上述代碼將文本形式顯示的超鏈接變?yōu)榱藞D片形式的超鏈接，雖然表現(xiàn)形式不同，但是不管是圖片

形式還是文本形式，全都實(shí)現(xiàn)的相同的效果。

2.Navigate屬性

Navigate屬性可以為無論是文本形式還是圖片形式的超鏈接設(shè)置超鏈接屬性，即即將跳轉(zhuǎn)的頁面，

示例代碼如下所示。

<asp:HyperLinkID="HyperLink1"runat="server"

lmageUH="http:〃/images/cms.jpg”

NavigateUrl=M">

HyperLink

</asp:HyperLink>

上述代碼使用了圖片超鏈接的形式。其中圖片來自/images/cms.jpgn,

當(dāng)點(diǎn)擊此超鏈接控件后，瀏覽器將跳到URL為uv的頁面。

3.動(dòng)態(tài)跳轉(zhuǎn)

在前面的小結(jié)講解了超鏈接控件的優(yōu)點(diǎn)，超鏈接控件的優(yōu)點(diǎn)在于能夠?qū)丶M(jìn)行編程，來按照用戶

的意愿跳轉(zhuǎn)到自己跳轉(zhuǎn)的頁面。以下代碼實(shí)現(xiàn)了當(dāng)用戶選擇QQ時(shí)，會(huì)跳轉(zhuǎn)到騰訊網(wǎng)站，如果選擇SOHU,

則會(huì)跳轉(zhuǎn)到SOHU頁面，示例代碼如下所示。

protectedvoidDropDownList1_SelectedlndexChanged(objectsender,EventArgse)

(

if(DropDownListl.Text=="qq")〃如果選擇qq

{

HyperLinkl.Text="qq";〃文本為qq

HyperLinkl.NavigateUrl="http:〃”；//URL為

)

else〃選擇sohu

{

HyperLinkl.Text="sohu";//文本為sohu

HyperLinkl.NavigateUrl="";//URL為

}

）

上述代碼使用了DropDownList控件，當(dāng)用戶選擇不同的值時(shí)，對(duì)HyperLinkl控件進(jìn)行操作。當(dāng)用

戶選擇qq,則為HyperLinkl控件配置連接為o

注意：與標(biāo)簽控件相同的是，如果只是為了單純的實(shí)現(xiàn)超鏈接，同樣不推薦使用HyperLink控件，

因?yàn)檫^多的使用服務(wù)器控件同樣有可能造成性能問題。

5.2.3圖像控件（Image）

圖像控件用來在Web窗體中顯示圖像，圖像控件常用的屬性如下：

□AltemateText：在圖像無法顯式時(shí)顯示的備用文本。

□ImageAlign：圖像的對(duì)齊方式。

□ImageUrl：要顯示圖像的URL。

當(dāng)圖片無法顯示的時(shí)候，圖片將被替換成AltemateText屬性中的文字，ImageAlign屬性用來控制圖

片的對(duì)齊方式，而ImageUrl屬性用來設(shè)置圖像連接地址。同樣，HTML中也可以使用<imgsrc=""a1t="”>

來替代圖像控件，圖像控件具有可控性的優(yōu)點(diǎn)，就是通過編程來控制圖像控件，圖像控件基本聲明代碼

如下所示。

<asp:lmageID="lmage1"runat="server"/>

除了顯示圖形以外，Image控件的其他屬性還允許為圖像指定各種文本，各屬性如下所示。

□ToolTip：瀏覽器顯式在工具提示中的文本。

□GenerateEmptyAltemateText：如果將此屬性設(shè)置為true,則呈現(xiàn)的圖片的alt屬性將設(shè)置為空。

開發(fā)人員能夠?yàn)镮mage控件配置相應(yīng)的屬性以便在瀏覽時(shí)呈現(xiàn)不同的樣式，創(chuàng)建一個(gè)Image控件也

可以直接通過編寫HTML代碼進(jìn)行呈現(xiàn)，示例代碼如下所示。

<asp:lmageID="lmage1"runat="server"

AltemateTexti'圖片連接失效"lmageUrl="http:〃/images/cms.jpg"/>

上述代碼設(shè)置了一個(gè)圖片，并當(dāng)圖片失效的時(shí)候提示圖片連接失效。

注意：當(dāng)雙擊圖像控件時(shí)，系統(tǒng)并沒有生成事件所需要的代碼段，這說明Image控件不支持任何事

件。

5.3文本框控件（TextBox）

在Web開發(fā)中，Web應(yīng)用程序通常需要和用戶進(jìn)行交互，例如用戶注冊(cè)、登錄、發(fā)帖等，那么就

需要文本框控件（TextBox）來接受用戶輸入的信息。開發(fā)人員還可以使用文本框控件制作高級(jí)的文本

編輯器用于HTML,以及文本的輸入輸出。

5.3.1文本框控件的屬性

通常情況下，默認(rèn)的文本控件（TextBox）是一個(gè)單行的文本框，用戶只能在文本框中輸入一行內(nèi)

容。通過修改該屬性，則可以將文本框設(shè)置為多行/或者是以密碼形式顯示，文本框控件常用的控件屬性

如下所示。

□AutoPostBack：在文本修改以后，是否自動(dòng)重傳

□Columns：文本框的寬度。

□EnableViewState：控件是否自動(dòng)保存其狀態(tài)以用于往返過程。

□MaxLength：用戶輸入的最大字符數(shù)。

□Readonly：是否為只讀。

□Rows：作為多行文本框時(shí)所顯式的行數(shù)。

□TextMode：文本框的模式，設(shè)置單行，多行或者密碼。

□Wrap：文本框是否換行。

1.AutoPostBack（自動(dòng)回傳）屬性

在網(wǎng)頁的交互中，如果用戶提交了表單，或者執(zhí)行了相應(yīng)的方法，那么該頁面將會(huì)發(fā)送到服務(wù)器上，

服務(wù)器將執(zhí)行表單的操作或者執(zhí)行相應(yīng)方法后，再呈現(xiàn)給用戶，例如按鈕控件、下拉菜單控件等。如果

將某個(gè)控件的AutoPostBack屬性設(shè)置為true時(shí).，則如果該控件的屬性被修改，那么同樣會(huì)使頁面自動(dòng)

發(fā)回到服務(wù)器。

2.EnableViewState（控件狀態(tài)）屬性

ViewState是ASP.NET中用來保存Web控件回傳狀態(tài)的一種機(jī)制，它是由ASP.NET頁面框架管理

的一個(gè)隱藏字段。在回傳發(fā)生時(shí)，ViewState數(shù)據(jù)同樣將回傳到服務(wù)器，ASP.NET框架解析ViewState

字符串并為頁面中的各個(gè)控件填充該屬性。而填充后，控件通過使用ViewState將數(shù)據(jù)重新恢復(fù)到以前

的狀態(tài)。

在使用某些特殊的控件時(shí)，如數(shù)據(jù)庫控件，來顯示數(shù)據(jù)庫。每次打開頁面執(zhí)行一次數(shù)據(jù)庫往返過程

是非常不明智的。開發(fā)人員可以綁定數(shù)據(jù)，在加載頁面時(shí)僅對(duì)頁面設(shè)置一次，在后續(xù)的回傳中，控件將

自動(dòng)從ViewState中重新填充，減少了數(shù)據(jù)庫的往返次數(shù)，從而不使用過多的服務(wù)器資源。在默認(rèn)情況

下，EnableViewState的屬性值通常為true。

3.其他屬性

上面的兩個(gè)屬性是比較重要的屬性，其他的屬性也經(jīng)常使用。

□MaxLength：在注冊(cè)時(shí)可以限制用戶輸入的字符串長度。

□Readonly：如果將此屬性設(shè)置為true,那么文本框內(nèi)的值是無法被修改的。

□TextMode：此屬性可以設(shè)置文本框的模式，例如單行、多行和密碼形式。默認(rèn)情況下，不設(shè)置

TextMode屬性，那么文本框默認(rèn)為單行。

5.3.2文本框控件的使用

在默認(rèn)情況下，文本框?yàn)閱涡蓄愋?，同時(shí)文本框模式也包括多行和密碼，示例代碼如下所示。

<asp:TextBoxID='*TextBox1"runat="serverM></asp:TextBox>

<br/>

<br/>

<asp:TextBoxID=',TextBox2"runat="servernHeight="101px"TextMode="MultiLine"

Width="325pxn></asp:TextBox>

<br/>

<br/>

<asp:TextBoxID=HTextBox3"runat="server"TextMode="Password"></asp:TextBox>

匕述代碼演示了三種文本框的使用方法，上述代碼運(yùn)行后的結(jié)果如圖5-3所示。

圖5-3文本框的三種形式

文本框無論是在Web應(yīng)用程序開發(fā)還是Windows應(yīng)用程序開發(fā)中都是非常重要的。文本框在用戶

交互中能夠起到非常重要的作用。在文本框的使用中，通常需要獲取用戶在文本框中輸入的值或者檢查

文本框?qū)傩允欠癖桓膶憽．?dāng)獲取用戶的值的時(shí)候，必須通過一段代碼來控制。文本框控件HTML頁面

示例代碼如下所示。

<formid="form1"runat=,'serverH>

<div>

<asp:LabelID=',Label1"runat="server"Text="Label"x/asp:Label>

<br/>

<asp:TextBoxID="TextBox1"runat="server',></asp:TextBox>

<br/>

<asp:ButtonID="Button1"runat=Hserver"onclick="Button1_Click"Text="Button"/>

<br/>

</div>

</form>

上述代碼聲明了一個(gè)文本框控件和一個(gè)按鈕控件，當(dāng)用戶單擊按鈕控件時(shí)，就需要實(shí)現(xiàn)標(biāo)簽控件的

文本改變。為了實(shí)現(xiàn)相應(yīng)的效果，可以通過編寫CS文件代碼進(jìn)行邏輯處理，示例代碼如下所示：

namespace_5_3〃頁面命名空間

(

publicpartialclass_Default:System.Web.UI.Page

{_

protectedvoidPage_Load(objectsender,EventArgse)〃頁面力口載時(shí)觸發(fā)

}

protectedvoidButton1_Click(objectsender,EventArgse)〃雙擊按鈕時(shí)觸發(fā)的事件

Label1.Text=TextBoxI.Text;〃標(biāo)簽控件的值等于文本框中控件的值

)

)

)

上述代碼中，當(dāng)雙擊按鈕時(shí)，就會(huì)觸發(fā)一個(gè)按鈕事件，這個(gè)事件就是將文本框內(nèi)的值賦值到標(biāo)簽內(nèi),

運(yùn)行結(jié)果如圖5-4所示。

圖5-4文本框控件的使用

同樣，雙擊文本框控件，會(huì)觸發(fā)TextChange事件。而當(dāng)運(yùn)行時(shí)，當(dāng)文本框控件中的字符變化后，

并沒有自動(dòng)回傳，是因?yàn)槟J(rèn)情況下，文本框的AutoPostBack屬性被設(shè)置為false。當(dāng)AutoPostBack屬

性被設(shè)置為true時(shí)，文本框的屬性變化，則會(huì)發(fā)生回傳，示例代碼如下所示。

protectedvoidTextBox1_TextChanged(objectsender,EventArgse)〃文本框事件

{

Label1.Text=TextBoxI.Text;〃控件相互賦值

)

上述代碼中，為TextBoxI添加了TextChanged事件。在TextChanged事件中，并不是每一次文本框

的內(nèi)容發(fā)生了變化之后，就會(huì)重傳到服務(wù)器，這一點(diǎn)和WinForm是不同的，因?yàn)檫@樣會(huì)大大的降低頁

面的效率。而當(dāng)用戶將文本框中的焦點(diǎn)移出導(dǎo)致TextBox就會(huì)失去焦點(diǎn)時(shí)，才會(huì)發(fā)生重傳。

5.4按鈕控件(Button,LinkButton,ImageButton)

在Web應(yīng)用程序和用戶交互時(shí)，常常需要提交表單、獲取表單信息等操作。在這其間，按鈕控件

是非常必要的。按鈕控件能夠觸發(fā)事件，或者將網(wǎng)頁中的信息回傳給服務(wù)器。在ASP.NET中，包含三

類按鈕控件，分別為Button、LinkButton>ImageButtono

5.4.1按鈕控件的通用屬性

按鈕控件用于事件的提交，按鈕控件包含一些通用屬性，按鈕控件的常用通用屬性包括有：

□CausesValidation：按鈕是否導(dǎo)致激發(fā)驗(yàn)證檢查。

□CommandArgument：與此按鈕管理的命令參數(shù)。

□CommandName：與此按鈕關(guān)聯(lián)的命令。

□ValidationGroup：使用該屬性可以指定單擊按鈕時(shí)調(diào)用頁面上的哪些驗(yàn)證程序。如果未建立任

何驗(yàn)證組，則會(huì)調(diào)用頁面上的所有驗(yàn)證程序。

下面的語句聲明了三種按鈕，示例代碼如下所示O

<asp:ButtonID="Button1"runat="server"Text="Buttonn/>〃普通的按鈕

<br/>

<asp:LinkButtonID=nLinkButton1"runat=,,server">LinkButton</asp:LinkButton>//Link類型的按鈕

<br/>

<asp:lmageButtonID="lmageButton1"runat=',server**/>〃圖像類型的按鈕

對(duì)于三種按鈕，他們起到的作用基本相同，主要是表現(xiàn)形式不同，如圖5-5所示。

圖5-5三種按鈕類型

5.4.2Click單擊事件

這三種按鈕控件對(duì)應(yīng)的事件通常是Click單擊和Command命令事件。在Click單擊事件中，通常用

于編寫用戶單擊按鈕時(shí)所需要執(zhí)行的事件，示例代碼如下所示。

protectedvoidButton1_Click(objectsender,EventArgse)

{

Label1.Text="普通按鈕被觸發(fā)"；〃輸出信息

)

protectedvoidLinkButton1_Click(objectsender,EventArgse)

(

Label1.Text="連接按鈕被觸發(fā)"；〃輸出信息

)

protectedvoidlmageButton1_Click(objectsender,ImageClickEventArgse)

(

Label1.Text="圖片按鈕被觸發(fā)"；〃輸出信息

)

上述代碼分別為三種按鈕生成了事件，其代碼都是將Label1的文本設(shè)置為相應(yīng)的文本，運(yùn)行結(jié)果如

圖5-6所示。

圖5-6按鈕的Click事件

5.4.3Command命令事件

按鈕控件中，Click事件并不能傳遞參數(shù)，所以處理的事件相對(duì)簡單。而Command事件可以傳遞參

數(shù)，負(fù)責(zé)傳遞參數(shù)的是按鈕控件的CommandArgument和CommandName屬性。如圖5-7所示。

圖5-7CommandArgument和CommandName屬性

將CommandArgument和CommandName屬性分別設(shè)置為Hello!和Show,單擊/創(chuàng)建一個(gè)Command

事件并在事件中編寫相應(yīng)代碼，示例代碼如下所示。

protectedvoidButton1_Command(objectsender,CommandEventArgse)

(

if(e.CommandName=="Show")//如果CommandNmae屬性的值為Show,則運(yùn)行下面代碼

{

Label1.Text=e.CommandArgument.ToString();//CommandArgument屬性的值賦值給Labell

}

)

注意：當(dāng)按鈕同時(shí)包含Click和Command事件時(shí)，通常情況下會(huì)執(zhí)行Command事件。

Command有一些Click不具備的好處，就是傳遞參數(shù)?？梢詫?duì)按鈕的CommandArgument和

CommandName屬性分別設(shè)置，通過判斷CommandArgument和CommandName屬性來執(zhí)行相應(yīng)的方法。

這樣一個(gè)按鈕控件就能夠?qū)崿F(xiàn)不同的方法，使得多個(gè)按鈕與一個(gè)處理代碼關(guān)聯(lián)或者一個(gè)按鈕根據(jù)不同的

值進(jìn)行不同的處理和響應(yīng)。相比Click單擊事件而言，Command命令事件具有更高的可控性。

5.5單選控件和單選組控件(RadioButton和RadioButtonList)

在投票等系統(tǒng)中，通常需要使用單選控件和單選組控件。顧名思義，在單選控件和單選組控件的項(xiàng)

目中，只能在有限種選擇中進(jìn)行一個(gè)項(xiàng)目的選擇。在進(jìn)行投票等應(yīng)用開發(fā)并且只能在選項(xiàng)中選擇單項(xiàng)時(shí),

單選控件和單選組控件都是最佳的選擇。

5.5.1單選控件(RadioButton)

單選控件可以為用戶選擇某一個(gè)選項(xiàng)，單選控件常用屬性如下所示。

□Checked：控件是否被選中。

□GroupName：單選控件所處的組名。

□TextAlign：文本標(biāo)簽相對(duì)于控件的對(duì)齊方式。

單選控件通常需要Checked屬性來判斷某個(gè)選項(xiàng)是否被選中，多個(gè)單選控件之間可能存在著某些聯(lián)

系，這些聯(lián)系通過GroupName進(jìn)行約束和聯(lián)系，示例代碼如下所示。

<asp:RadioButtonID="RadioButton1"runat="server"GroupName="choose"

Text="Choose1"/>

<asp:RadioButtonID="RadioButton2"runat="server"GroupName="choose"

Text="Choose2"/>

上述代碼聲明了兩個(gè)單選控件，并將GroupName屬性都設(shè)置為“choose”。單選控件中最常用的事

件是CheckedChanged,當(dāng)控件的選中狀態(tài)改變時(shí)，則觸發(fā)該事件，示例代碼如下所示。

protectedvoidRadioButton1_CheckedChanged(objectsender,EventArgse)

{

Labell.Text="第一個(gè)被選中"；

)

protectedvoidRadioButton2_CheckedChanged(objectsender,EventArgse)

(

Labell.Text="第二個(gè)被選中”；

)

上述代碼中，當(dāng)選中狀態(tài)被改變時(shí)，則觸發(fā)相應(yīng)的事件。運(yùn)行結(jié)果如圖5-8所示。

圖5?8單選控件的使用

與TextBox文本框控件相同的是，單選控件不會(huì)自動(dòng)進(jìn)行頁面回傳，必須將AutoPostBack屬性設(shè)置

為true時(shí)才能在焦點(diǎn)丟失時(shí)觸發(fā)相應(yīng)的CheckedChanged事件。

5.5.2單選組控件(RadioButtonList)

與單選控件相同，單選組控件也是只能選擇一個(gè)項(xiàng)目的控件，而與單選控件不同的是，單選組控件

沒有GroupName屬性，但是卻能夠列出多個(gè)單選項(xiàng)目。另外，單選組控件所生成的代碼也比單選控件

實(shí)現(xiàn)的相對(duì)較少。單選組控件添加項(xiàng)如圖5-9所示。

圖5-9單選組控件添加項(xiàng)

添加項(xiàng)目后，系統(tǒng)自動(dòng)在.aspx頁面聲明服務(wù)器控件代碼，代碼如下所示。

<asp:RadioButtonListID="RadioButtonList1"runat="server">

<asp:Listltem>Choose1</asp:Listltem>

<asp:Listltem>Choose2</asp:Listltem>

<asp:Listltem>Choose3</asp:Listltem>

</asp:RadioButtonList>

上述代碼使用了單選組控件進(jìn)行單選功能的實(shí)現(xiàn)，單選組控件還包括一些屬性用于樣式和重復(fù)的配

置。單選組控件的常用屬性如下所示：

□DataMember：在數(shù)據(jù)集用做數(shù)據(jù)源時(shí)做數(shù)據(jù)綁定。

□DataSource：向列表填入項(xiàng)時(shí)所使用的數(shù)據(jù)源。

□DataTextFiled：提供項(xiàng)文本的數(shù)據(jù)源中的字段。

□DataTextFormat：應(yīng)用于文本字段的格式。

□DataValueFiled：數(shù)據(jù)源中提供項(xiàng)值的字段。

□Items：列表中項(xiàng)的集合。

□RepeatColumn：用于布局項(xiàng)的列數(shù)。

□RepeatDirection：項(xiàng)的布局方向。

□RepeatLayout：是否在某個(gè)表或者流中重復(fù)。

同單選控件一樣，雙擊單選組控件時(shí)系統(tǒng)會(huì)自動(dòng)生成該事件的聲明，同樣可以在該事件中確定代碼。

當(dāng)選擇一項(xiàng)內(nèi)容時(shí)，提示用戶所選擇的內(nèi)容，示例代碼如下所示。

protectedvoidRadioButtonList1_SelectedlndexChanged(objectsender,EventArgse)

(

Label1.Text=RadioButtonListl.Text;〃文本標(biāo)簽段的值等于選擇的控件的值

5.6復(fù)選框控件和復(fù)選組控件(CheckBox和CheckBoxList)

當(dāng)一個(gè)投票系統(tǒng)需要用戶能夠選擇多個(gè)選擇項(xiàng)時(shí)，則單選框控件就不符合要求了。ASP.NET還提供

了復(fù)選框控件和復(fù)選組控件來滿足多選的要求。復(fù)選框控件和復(fù)選組控件同單選框控件和單選組控件一

樣，都是通過Checked屬性來判斷是否被選擇。

5.6.1復(fù)選框控件(CheckBox)

同單選框控件一樣，復(fù)選框也是通過Check屬性判斷是否被選擇，而不同的是，復(fù)選框控件沒有

GroupName屬性，示例代碼如下所示。

<asp:CheckBoxID="CheckBox1"runat="server"Text="Check1"AutoPostBack="true"/>

<asp:CheckBoxID="CheckBox2"runat="server"Text="Check2"AutoPostBack="true'7>

上述代碼中聲明了兩個(gè)復(fù)選框控件。對(duì)于復(fù)選框空間，并沒有支持的GroupName屬性，當(dāng)雙擊復(fù)

選框控件時(shí)，系統(tǒng)會(huì)自動(dòng)生成方法。當(dāng)復(fù)選框控件的選中狀態(tài)被改變后，會(huì)激發(fā)該事件。示例代碼如下

所示。

protectedvoidCheckBox1_CheckedChanged(objectsender,EventArgse)

(

Label1.Text="選框1被選中"；//當(dāng)選框1被選中時(shí)

)

protectedvoidCheckBox2_CheckedChanged(objectsender,EventArgse)

(

Label1.Text="選框2被選中，并且字體變大"；//當(dāng)選框2被選中時(shí)

Label1.Font.Size=FontUnit.XXLarge;

}

上述代碼分別為兩個(gè)選框設(shè)置了事件，設(shè)置了當(dāng)選擇選框I時(shí)，則文本標(biāo)簽輸出“選框1被選中”，

如圖5-10所示。當(dāng)選擇選框2時(shí)，則輸出“選框2被選中，并且字體變大”，運(yùn)行結(jié)果如圖5-11所示。

Q無標(biāo)題頁-lindovsInternetExplorer

圖5-10選框1被選中圖5-11選框2被選中

對(duì)于復(fù)選框而言，用戶可以在復(fù)選框控件中選擇多個(gè)選項(xiàng)，所以就沒有必要為復(fù)選框控件進(jìn)行分組。

在單選框控件中，相同組名的控件只能選擇一項(xiàng)用于約束多個(gè)單選框中的選項(xiàng)，而復(fù)選框就沒有約束的

必要。

5.6.2復(fù)選組控件(CheckBoxList)

同單選組控件相同，為了方便復(fù)選控件的使用，.NET服務(wù)器控件中同樣包括了復(fù)選組控件，拖動(dòng)

一個(gè)復(fù)選組控件到頁面可以同單選組控件一樣添加復(fù)選組列表。添加在頁面后，系統(tǒng)生成代碼如下所示。

<asp:CheckBoxListID=',CheckBoxList1"runat^server1'AutoPostBack=MTrue"

onselectedindexchanged="CheckBoxList1_SelectedlndexChanged">

<asp:ListltemValue="Choose1H>Choose1</asp:Listltem>

<asp:ListltemValue="Choose2">Choose2</asp:Listltem>

<asp:ListltemValue="Choose3M>Choose3</asp:Listltem>

</asp:CheckBoxList>

上述代碼中，同樣增加了3個(gè)項(xiàng)目提供給用戶選擇，復(fù)選組控件最常用的是SelectedlndexChanged

事件。當(dāng)控件中某項(xiàng)的選中狀態(tài)被改變時(shí)，則會(huì)觸發(fā)該事件。示例代碼如下所示.

protectedvoidCheckBoxList1_SelectedlndexChanged(objectsender,EventArgse)

if(CheckBoxListl.ltems[0].Selected)//判斷某項(xiàng)是否被選中

{

Label1.Font.Size=FontUnit.XXLarge;//更改字體大小

)

if(CheckBoxListl.ltems[1].Selected)〃判斷是否被選中

{

Label1.Font.Size=FontUnit.XLarge;〃更改字體大小

}

if(CheckBoxListl.ltems[2].Selected)

{

Label1.Font.Size=FontUnit.XSmall;

}

)

上述代碼中，CheckBoxListl.Items⑼.Selected是用來判斷某項(xiàng)是否被選中，其中Item數(shù)組是復(fù)選組

控件中項(xiàng)目的集合，其中Items[0]是復(fù)選組中的第一個(gè)項(xiàng)目。上述代碼用來修改字體的大小，如圖5-12

所示，當(dāng)選擇不同的選項(xiàng)時(shí)，字體的大小也不相同，運(yùn)行結(jié)果如圖5-13所示。

圖5-12選擇大號(hào)字體圖5-13選擇小號(hào)字體

正如圖5-12、5-13所示，當(dāng)用戶選擇不同的選項(xiàng)時(shí)，Label標(biāo)簽的字體的大小會(huì)隨之改變。

注意：復(fù)選組控件與單選組控件不同的是，不能夠直接獲取復(fù)選組控件某個(gè)選中項(xiàng)目的值，因?yàn)閺?fù)

選組控件返回的是第一個(gè)選擇項(xiàng)的返回值，只能夠通過Item集合來獲取選擇某個(gè)或多個(gè)選中的項(xiàng)目值。

5.7歹U表控件(DropDownList,ListBox和BulletedList)

在Web開發(fā)中，經(jīng)常會(huì)需要使用列表控件，讓用戶的輸入更加簡單。例如在用戶注冊(cè)時(shí)，用戶的

所在地是有限的集合，而且用戶不喜歡經(jīng)常鍵入，這樣就可以使用列表控件。同樣列表控件還能夠簡化

用戶輸入并且防止用戶輸入在實(shí)際中不存在的數(shù)據(jù)，如性別的選擇等。

5.7.1DropDownList列表控件

列表控件能在一個(gè)控件中為用戶提供多個(gè)選項(xiàng)，同時(shí)又能夠避免用戶輸入錯(cuò)誤的選項(xiàng)。例如，在用

戶注冊(cè)時(shí)，可以選擇性別是男，或者女，就可以使用Dr叩DownList列表控件，同時(shí)又避免了用戶輸入

其他的信息。因?yàn)樾詣e除了男就是女，輸入其他的信息說明這個(gè)信息是錯(cuò)誤或者是無效的。下列語句聲

明了一個(gè)DropDownList列表控件，示例代碼如下所示。

<asp:DropDownListID="DropDownList1"runat="servern>

<asp:Listltem>1</asp:Listltem>

<asp:Listltem>2</asp:Listltem>

<asp:Listltem>3</asp:Listltem>

<asp:Listltem>4</asp:Listltem>

<asp:Listltem>5</asp:Listltem>

<asp:Listltem>6</asp:Listltem>

<asp:Listltem>7</asp:Listltem>

</asp:DropDownList>

上述代碼創(chuàng)建了一個(gè)DropDownList列表控件，并手動(dòng)增加了列表項(xiàng)。同時(shí)DropDownList列表控件

也可以綁定數(shù)據(jù)源控件。DropDownList列表控件最常用的事件是SelectedlndexChanged,當(dāng)DropDownList

列表控件選擇項(xiàng)發(fā)生變化時(shí)，則會(huì)觸發(fā)該事件，示例代碼如下所示。

protectedvoidDropDownList1_SelectedlndexChanged1(objectsender,EventArgse)

(

Label1.Text="你選擇了第"+DropDownListl.Text+“項(xiàng)”；

)

上述代碼中，當(dāng)選擇的項(xiàng)目發(fā)生變化時(shí)則會(huì)觸發(fā)該事件，如圖5-14所示。當(dāng)用戶再次進(jìn)行選擇時(shí)、

系統(tǒng)會(huì)將更改標(biāo)簽1中的文本，如圖5-15所示。

圖5-14選擇第三項(xiàng)5-15選擇第一項(xiàng)

當(dāng)用戶選擇相應(yīng)的項(xiàng)目時(shí)，就會(huì)觸發(fā)SelectedlndexChanged事件，開發(fā)人員可以通過捕捉相應(yīng)的用

戶選中的控件進(jìn)行編程處理，這里就捕捉了用戶選擇的數(shù)字進(jìn)行字體大小的更改。

5.7.2ListBox列表控件

相對(duì)于DropDownList控件而言，ListBox控件可以指定用戶是否允許多項(xiàng)選擇。設(shè)置SelectionMode

屬性為Single時(shí)，表明只允許用戶從列表框中選擇一個(gè)項(xiàng)目，而當(dāng)SelectionMode屬性的值為Multiple

時(shí)，用戶可以按住Ctrl鍵或者使用Shift組合鍵從列表中選擇多個(gè)數(shù)據(jù)項(xiàng)。當(dāng)創(chuàng)建一個(gè)ListBox列表控件

后，開發(fā)人員能夠在控件中添加所需的項(xiàng)目，添加完成后示例代碼如下所示。

<asp:ListBoxID="ListBox1"runat=,'server"Width="137px"AutoPostBack="TrueM>

<asp:Listltem>1</asp:Listltem>

<asp:Listltem>2</asp:Listltem>

<asp:Listltem>3</asp:Listltem>

<asp:Listltem>4</asp:Listltem>

<asp:Listltem>5</asp:Listltem>

<asp:Listltem>6</asp:Listltem>

</asp:ListBox>

從結(jié)構(gòu)上看，ListBox列表控件的HTML樣式代碼和DropDownList控件十分相似。同樣，

SelectedlndexChanged也是ListBox列表控件中最常用的事件，雙擊ListBox列表控件，系統(tǒng)會(huì)自動(dòng)生成

相應(yīng)的代碼。同樣，開發(fā)人員可以為ListBox控件中的選項(xiàng)改變后的事件做編程處理，示例代碼如下所

/JKo

protectedvoidListBox1_SelectedlndexChanged(objectsender,EventArgse)

(

Label1.Text="你選擇了第"+ListBoxI.Text+”項(xiàng)";

)

上述代碼中，當(dāng)ListBox控件選擇項(xiàng)發(fā)生改變后，該事件就會(huì)被觸發(fā)并修改相應(yīng)Label標(biāo)簽中文本,

如圖5-16所示。

上面的程序同樣實(shí)現(xiàn)了DropDownList中程序的效果。不同的是，如果需要實(shí)現(xiàn)讓用戶選擇多個(gè)

ListBox項(xiàng),只需要設(shè)置SelectionMode屬性為“Multiple”即可，如圖5-17所示。

圖5-16ListBox單選圖5-17SelectionMode屬性

當(dāng)設(shè)置了SelectionMode屬性后，用戶可以按住Ctrl鍵或者使用Shift組合鍵選擇多項(xiàng)。同樣，開發(fā)

人員也可以編寫處理選擇多項(xiàng)時(shí)的事件，示例代碼如下所示。

protectedvoidListBox1_SelectedlndexChanged1(objectsender,EventArgse)

(

Label1.Text+="，你選擇了第"+ListBoxI.Text+"項(xiàng)"；

)

上述代碼使用了“+=”運(yùn)算符，在觸發(fā)SelectedlndexChanged事件后，應(yīng)用程序?qū)長abell標(biāo)簽賦

值，如圖5-18所示。當(dāng)用戶每選一項(xiàng)的時(shí)候，就會(huì)觸發(fā)該事件，如圖5-19所示。

△無標(biāo)骰頁-findovsInternetExplorer,1□!x|

http//loc...司回回岡即FT

收藏夾穹無標(biāo)題頁|公▼6斗口”

Label,你選擇了第3項(xiàng)，你

選擇了第3項(xiàng)，你選擇了第

4項(xiàng)

二j

?IntermG保護(hù)模式禁用

圖5-19多選效果

從運(yùn)行結(jié)果可以看出，當(dāng)單選時(shí)，選擇項(xiàng)返回值和選擇的項(xiàng)相同，而當(dāng)選擇多項(xiàng)的時(shí)候，返回值同

第一項(xiàng)相同。所以，在選擇多項(xiàng)時(shí)，也需要使用Item集合獲取和遍歷多個(gè)項(xiàng)目。

5.7.3BulletedList列表控件

BulletedList與上述列表控件不同的是，BulleteList控件可呈現(xiàn)項(xiàng)目符號(hào)或編號(hào)。對(duì)BulleleList屬性

的設(shè)置為呈現(xiàn)項(xiàng)目符號(hào)，則當(dāng)BulletedList被呈現(xiàn)在頁面時(shí)，列表前端會(huì)則會(huì)顯式項(xiàng)目符號(hào)或者特殊符

號(hào)，效果如圖5-20所不。

圖5-20BulletedList顯式效果

BulletedList可以通過設(shè)置BulletStyle屬性來編輯列表前的符號(hào)樣式，常用的BulletStyle項(xiàng)目符號(hào)編

號(hào)樣式如下所示。

□Circle：項(xiàng)目符號(hào)設(shè)置為O。

□Customimage：項(xiàng)目符號(hào)為自定義圖片。

□Disc：項(xiàng)目符號(hào)設(shè)置為

□LowerAlpha：項(xiàng)目符號(hào)為小寫字母格式，如a、b、c等。

□LowerRoman：項(xiàng)目符號(hào)為羅馬數(shù)字格式，如i、ii等。

□NotSet：表示不設(shè)置，此時(shí)將以Disc樣式為默認(rèn)樣式。

□Numbered：項(xiàng)目符號(hào)為1、2、3^4等。

□Square：項(xiàng)目符號(hào)為黑方塊

□UpperAlpha：項(xiàng)目符號(hào)為大寫字母格式，如A、B、C等。

□UpperRoman：項(xiàng)目符號(hào)為大寫羅馬數(shù)字格式如I、H、HI等。

同樣，BulletedList控件也同DropDownList以及ListBox相同，可以添加事件。不同的是生成的事

件是Click事件，代碼如下所示。

protectedvoidBulletedList1_Click(objectsender,BulletedListEventArgse)

(

Label1.Text+="，你選擇了第"+BulletedListl.ltems[e.lndex].ToString()+"項(xiàng)"；

)

DropDownList和ListBox生成的事件是SelectedlndexChanged,當(dāng)其中的選擇項(xiàng)被改變時(shí)，則觸發(fā)

該事件。而BulletedList控件生成的事件是Click,用于在其中提供邏輯以執(zhí)行特定的應(yīng)用程序任務(wù)。

5.8面板控件(Panel)

面板控件就好像是一些控件的容器，可以將一些控件包含在面板控件內(nèi)，然后對(duì)面板控制進(jìn)行操作

來設(shè)置在面板控件內(nèi)的所有控件是顯示還是隱藏，從而達(dá)到設(shè)計(jì)者的特殊目的。當(dāng)創(chuàng)建一個(gè)面板控件時(shí),

系統(tǒng)會(huì)生成相應(yīng)的HTML代碼，示例代碼如下所示。

<asp:PanelID^'Panell,'runat="serverH>

</asp:Panel>

面板控件的常用功能就是顯示或隱藏一組控件，示例HTML代碼如下所示。

<formid="form1"runat=MserverH>

<asp:ButtonID="Button1"runat="server"Text=nShow"/>

<asp:PanelID=MPanel1Mrunat="serverHVisible=',False">

<asp:LabelID="Label1"runat="server"Text="Name:"style="font-size:xx-large"x/asp:Label>

<asp:TextBoxID="TextBox1"runat=Hserver"></asp:TextBox>

<br/>

ThisisaPanel!

</asp:Panel>

</form>

上述代碼創(chuàng)建了一個(gè)Panel控件，Panel控件默認(rèn)屬性為隱藏，并在控件外創(chuàng)建了一個(gè)Button控件

Button1,當(dāng)用戶單擊外部的按鈕控件后將顯示Panel控件，cs代碼如下所示。

protectedvoidButton1_Click(objectsender,EventArgse)

(

Panell.Visible=true;//Panel控件顯示可見

)

當(dāng)頁面初次被載入時(shí)，Panel控件以及Panel控件內(nèi)部的服務(wù)器控件都為隱藏，如圖5-21所示。當(dāng)

用戶單擊Button1時(shí)，則Panel控件可見性為可見，則頁面中的Panel控件以及Panel控件中的所有服務(wù)

器控件也都為可見，如圖5-22所示。

圖5-21Panel控件隱藏