《ASP NET程序設(shè)計(jì)與開(kāi)發(fā)》課件第4章

4.1服務(wù)器控件的基本概念

4.2服務(wù)器控件的生命周期

4.3向Web頁(yè)面添加服務(wù)器控件

4.4常用的Web服務(wù)器控件

4.5HTML服務(wù)器控件

本章小結(jié)

訓(xùn)練任務(wù)4.1服務(wù)器控件的基本概念在創(chuàng)建Web窗體時(shí)，可以使用下列3種類型的控件。

(1)?Web服務(wù)器控件：這種控件只能在服務(wù)器端使用，但是具有比HTML服務(wù)控件更多的特性，是ASP.NET中用得最多的一類服務(wù)器控件。

(2)?HTML服務(wù)器控件：這種控件和HTML中的各個(gè)元素一一對(duì)應(yīng)，其用法類似于HTML的對(duì)象模型，并且可以同時(shí)在客戶端和服務(wù)器端使用，可以把HTML服務(wù)器控件轉(zhuǎn)換為Web服務(wù)器控件。提示：客戶端控件和服務(wù)器端控件的區(qū)別如下所述。

服務(wù)器控件的代碼在服務(wù)器端解釋執(zhí)行，生成根據(jù)用戶的瀏覽器而定的HTML元素?？蛻舳丝丶煽蛻舳藶g覽器解釋執(zhí)行，服務(wù)器端控件是由Runat屬性指示的，它的值總是“Server”。通過(guò)添加Runat屬性，一般的HTML控件可以被很方便地轉(zhuǎn)換到服務(wù)器端運(yùn)行，我們可以通過(guò)id屬性中指定的名字引用程序中的控件，并通過(guò)編程的方式設(shè)置屬性和獲得值，因此，服務(wù)器端處理方式有較大的靈活性。當(dāng)然，這種靈活性是有一定代價(jià)的。每種服務(wù)器端控件都會(huì)消耗服務(wù)器上的資源。另外，除非控件、網(wǎng)頁(yè)或應(yīng)用程序明確地禁止ViewState(請(qǐng)參閱第6章)，控件的狀態(tài)包含在ViewState的隱藏域中，并在每次回送中都會(huì)被傳遞，這會(huì)引起嚴(yán)重的性能下降。在這方面的一個(gè)很好的例子是網(wǎng)頁(yè)上控件表格的應(yīng)用，如果不需要在代碼中引用表格中的元素，則使用無(wú)需進(jìn)行服務(wù)器端處理的HTML表格。我們?nèi)匀豢梢栽贖TML表格單元中放置服務(wù)器控件，并在代碼中引用服務(wù)器控件。如果需要引用任意的表格元素，例如指定的單元，則整個(gè)表格必須是服務(wù)器控件。

(3)驗(yàn)證控件：這種控件主要用來(lái)與其他控件配合使用，以驗(yàn)證用戶的輸入。4.2服務(wù)器控件的生命周期每個(gè)服務(wù)器控件都有其生命周期，通過(guò)了解服務(wù)器控件的生命周期，我們可以根據(jù)其觸發(fā)的事件，添加合適的代碼，以起到不同的效果。表4-1顯示了服務(wù)器控件的生命周期。4.3向Web頁(yè)面添加服務(wù)器控件可以在Web窗體設(shè)計(jì)器中使用“工具箱”面板向窗體頁(yè)面中添加服務(wù)器控件。在“工具箱”面板中包含有兩個(gè)頁(yè)面：標(biāo)準(zhǔn)和HTML，這兩個(gè)頁(yè)面中的控件都可以添加到Web窗體頁(yè)面中。要把相應(yīng)的控件添加到Web窗體頁(yè)面中，首先必須切換到窗體頁(yè)面的設(shè)計(jì)視圖，然后雙擊“工具箱”面板中的一個(gè)控件或者直接把控件從“工具箱”面板中拖放到窗體頁(yè)面中，如圖4-1所示。圖4-1向Web頁(yè)面添加服務(wù)器控件因?yàn)镠TML服務(wù)器控件既可以在服務(wù)器端使用，又可以在客戶端使用，而且在默認(rèn)情況下，新添加到頁(yè)面中的HTML控件將在客戶端使用，所以要在服務(wù)器端使用它，需要把它的Runat屬性設(shè)置為Server。首先在Web窗體設(shè)計(jì)器中選中該HTML控件，然后從快捷菜單中選擇“作為服務(wù)器控件運(yùn)行”命令，即把它轉(zhuǎn)換成服務(wù)器控件。使用該命令后，Web窗體設(shè)計(jì)器就會(huì)在HTML控件的聲明中添加Runat="server"屬性，如圖4-2所示。圖4-2HTML服務(wù)器控件轉(zhuǎn)換為Web服務(wù)器控件4.4常用的Web服務(wù)器控件4.4.1Label控件

Label(標(biāo)簽)控件主要用來(lái)在Web頁(yè)面上顯示靜態(tài)文本。使用Label控件的好處是可以在運(yùn)行時(shí)使用代碼改變它的顯示文本和前、背景色等屬性。如果只想顯示靜態(tài)文本并且不想在運(yùn)行時(shí)改變它，則可用HTML進(jìn)行顯示，即直接在?.aspx文件中輸入顯示的內(nèi)容。Label控件的外觀如圖4-3所示。

Label控件最常用的屬性就是Text屬性，用于設(shè)置在標(biāo)簽控件中顯示的文本，例如下面的代碼：

Label1.Text="ASP.NET程序設(shè)計(jì)與開(kāi)發(fā)";圖4-3Label控件的外觀4.4.2TextBox控件

TextBox(文本框)控件主要用來(lái)輸入信息，可以用它輸入單行或多行文本，也可以輸入密碼。在默認(rèn)情況下，只能使用TextBox控件輸入單行文本。TextBox控件的外觀如圖4-4所示。圖4-4TextBox控件的外觀要想使文本框控件能夠輸入多行文本，可以把它的TextMode屬性設(shè)置為MultiLine，并且適當(dāng)?shù)卦O(shè)置它的Width/Height屬性值或Columns/Row屬性值，以確定控件顯示的寬度和行數(shù)。另外，文本框控件的Wrap屬性可以使文本框控件自動(dòng)換行。要想用文本框控件輸入密碼，則需要把它的TextMode屬性設(shè)置為Password。在單行輸入時(shí)，可以使用Text屬性來(lái)獲取或設(shè)置文本框控件的內(nèi)容，也可以使用MaxLength屬性來(lái)指定最多能輸入的字符數(shù)。例如下面的代碼：

//設(shè)置TextBox的輸入狀態(tài)為輸入密碼

TextBox1.TextMode=TextBoxMode.Password;

//允許在TextBox中換行

TextBox1.Wrap=true;

//獲取TextBox中的文本內(nèi)容

//Trim方法用以刪除文本前后的空白部分

stringcontent=TextBox1.Text.Trim();文本框控件最常用的事件是TextChanged，但是這個(gè)事件不會(huì)在每次改變文本框的內(nèi)容時(shí)馬上觸發(fā)，而是當(dāng)提交Web窗體時(shí)才會(huì)在服務(wù)器上觸發(fā)。另外，也可以通過(guò)把它的AutoPostBack屬性設(shè)置為True來(lái)改變這種觸發(fā)方式。當(dāng)輸入焦點(diǎn)離開(kāi)文本框控件時(shí)就會(huì)觸發(fā)TextChanged事件。例如下面的代碼為文本框控件的TextChanged事件聲明處理方法。

protectedvoidTextBox1_TextChanged(objectsender,EventArgse)

{

//在Label控件中顯示從TextBox中獲取的值

Label1.Text=TextBox1.Text.Trim();

}4.4.3Button控件

Button控件將在Web頁(yè)面上顯示一個(gè)標(biāo)準(zhǔn)的下壓按鈕(PushButton)，這個(gè)按鈕是一個(gè)提交按鈕，即單擊它時(shí)會(huì)導(dǎo)致頁(yè)面被發(fā)送到服務(wù)器端，如圖4-5所示。

Button控件主要包含4個(gè)常用的屬性：Text屬性(用于設(shè)置在按鈕控件上顯示文本)、CommandName屬性(用于設(shè)置該按鈕控件所對(duì)應(yīng)的命令名稱)、CommandArgument屬性(用于設(shè)置按鈕控件的命令參數(shù))以及CausesValidation屬性(用于設(shè)置當(dāng)單擊按鈕提交頁(yè)面時(shí)是否觸發(fā)驗(yàn)證操作)。圖4-5Button控件的外觀可以使用Button控件創(chuàng)建兩種類型的按鈕：提交(submit)按鈕和命令(command)按鈕。其中，提交按鈕沒(méi)有命令名；命令按鈕具有一個(gè)相關(guān)聯(lián)的命令名以及與該命令相關(guān)的參數(shù)，可以在運(yùn)行時(shí)根據(jù)命令名執(zhí)行相應(yīng)的操作。單擊命令按鈕時(shí)，不僅會(huì)觸發(fā)Click事件，也會(huì)觸發(fā)Command事件。通過(guò)使用命令按鈕，可以在Web頁(yè)面中添加多個(gè)按鈕，每個(gè)按鈕對(duì)應(yīng)一種特定的操作并且使用同一個(gè)事件處理方法。Button控件常用的事件為Click事件，如下面的代碼所示，當(dāng)單擊Button按鈕時(shí)，將把TextBox中的內(nèi)容顯示在Label控件中。

protectedvoidButton1_Click(objectsender,EventArgse)

{

//在Label控件中顯示從TextBox中獲取的值

Label1.Text=TextBox1.Text.Trim();

}4.4.4LinkButton控件

LinkButton(鏈接按鈕)控件在頁(yè)面上顯示為一個(gè)超鏈接，單擊它時(shí)指向指定鏈接地址，它的事件定義過(guò)程如下面代碼所示。LinkButton控件的外觀如圖4-6所示。

<asp:LinkButtonID=“LinkButton1”runat=“server”>

LinkButton</asp:LinkButton>

protectedvoidLinkButton1_Click(objectsender,EventArgse)

{

}圖4-6LinkButton控件的外觀鏈接按鈕控件與按鈕控件(Button)具有相同的屬性、方法和事件。可以像按鈕控件一樣設(shè)置鏈接按鈕控件的Text、CommandName、CommandArgument等屬性，并且它也可以觸發(fā)Click和Command事件。4.4.5Image控件

Image(圖像)控件用來(lái)在Web頁(yè)面上顯示圖像，并且可以在代碼中改變它的屬性。圖像控件最主要的屬性就是ImageURL，用來(lái)設(shè)置在圖像控件中顯示的圖像的地址，如圖4-7所示。圖4-7Image控件的外觀

單擊“屬性”窗口中ImageURL屬性旁邊的按鈕將會(huì)顯示“選擇圖像”對(duì)話框，如圖4-8所示?？梢栽谶@個(gè)對(duì)話框中選擇一個(gè)圖像，可以使用多個(gè)圖像格式，比如?.gif、.jpg、.bmp等。其中，“文件夾內(nèi)容”列表框用來(lái)顯示圖像文件列表，選擇完畢后單擊“確定”按鈕，關(guān)閉對(duì)話框并設(shè)置好ImageURL屬性。圖4-8單擊ImageURL屬性打開(kāi)“選擇圖像”對(duì)話框另外，還可以通過(guò)Height和Width屬性設(shè)置圖像控件的大小，通過(guò)ImageAlign屬性設(shè)置圖像的對(duì)齊方式，通過(guò)AlternateText屬性設(shè)置當(dāng)無(wú)法顯示圖像時(shí)所顯示的替代文本或工具顯示。通常不對(duì)圖像控件進(jìn)行事件處理。4.4.6HyperLink控件

HyperLink(超級(jí)鏈接)控件用來(lái)在Web頁(yè)面中創(chuàng)建超級(jí)鏈接，然后就可以使用這個(gè)超級(jí)鏈接在頁(yè)面之間進(jìn)行導(dǎo)航。使用超級(jí)鏈接控件的好處就是可以在運(yùn)行時(shí)使用代碼改變它的屬性，如圖4-9所示。

可以在超級(jí)鏈接控件中顯示文字或圖像，方法是通過(guò)它的Text屬性和ImageURL屬性來(lái)設(shè)置。在Text屬性中可以使用HTML語(yǔ)言中的標(biāo)簽，如<b>等。ImageURL屬性的設(shè)置與圖像控件的ImageURL屬性的設(shè)置一樣。圖4-9HyperLink控件的外觀提示：應(yīng)同時(shí)指定Text屬性和ImageURL屬性。在超級(jí)鏈接控件中將顯示ImageURL屬性指定的圖像，而Text屬性指定的文本將作為圖像的提示顯示。

超級(jí)鏈接控件的NavigateURL屬性用來(lái)設(shè)置該超級(jí)鏈接的目標(biāo)頁(yè)面，并且它的Target屬性用來(lái)設(shè)置顯示鏈接頁(yè)面的目錄框架，可以為它指定5個(gè)值，如表4-2所示。超級(jí)鏈接控件不會(huì)觸發(fā)事件，但是可以在其他控件的事件處理方法中改變超級(jí)鏈接控件的屬性。例如下面的代碼所示：

publicvoidButton1_Click(ObjectSender,System.EventArgse)

{

HyperLink1.Text=“首頁(yè)”;

HyperLink1.NavigateUrl=“”;

}4.4.7DropDownList控件

DropDownList(下拉列表)控件用來(lái)在Web頁(yè)面中創(chuàng)建一個(gè)下拉列表框，可以單擊這個(gè)下拉列表框右邊的箭頭按鈕顯示一個(gè)列表，然后從中選擇一項(xiàng)，如圖4-10所示。

提示：只能從下拉列表控件中選擇一項(xiàng)，即該控件不允許多重選擇。圖4-10DropDownList控件的外觀

可以像其他Web服務(wù)器控件一樣改變下拉列表控件的外觀，例如可以通過(guò)Height和Width屬性改變它的大小。

下拉列表框中的項(xiàng)都保存在它的Items屬性中，可以使用“屬性”窗口設(shè)置這個(gè)屬性。在“屬性”窗口中，單擊下拉列表的Items屬性旁邊的按鈕打開(kāi)“ListItem集合編輯器”對(duì)話框，如圖4-11所示。圖4-11使用“ListItem集合編輯器”添加項(xiàng)

在圖4-11所示的對(duì)話框中，單擊“添加”按鈕向列表框中添加一個(gè)新項(xiàng)，此時(shí)在對(duì)話框的右邊將顯示該項(xiàng)的屬性。每個(gè)列表項(xiàng)都包含4個(gè)屬性：Enabled(用來(lái)設(shè)置該項(xiàng)是否可用)、Selected(用來(lái)設(shè)置該項(xiàng)是否處于選中狀態(tài))、Text(用來(lái)設(shè)置列表項(xiàng)的標(biāo)題)和Value(用來(lái)設(shè)置列表項(xiàng)的值)。對(duì)話框中的“移除”按鈕用來(lái)刪除在“成員”列表框中當(dāng)前選中的項(xiàng)。添加完列表項(xiàng)之后，單擊“確定”按鈕，關(guān)閉該對(duì)話框并把列表項(xiàng)添加到下拉列表框中。

也可以用代碼向下拉列表框控件中添加列表項(xiàng)，例如下面的代碼所示：

//括號(hào)里的兩個(gè)引號(hào)，前面的一個(gè)值表示下拉菜單顯示的值

//對(duì)應(yīng)DropDownList1.SelectedItem.Text屬性

//后面一個(gè)值對(duì)應(yīng)的是DropDownList1.SelectedValue屬性

DropDownList1.Items.Add(newListItem("第一項(xiàng)","0"));

DropDownList1.Items.Add(newListItem("第二項(xiàng)","1"));

DropDownList1.Items.Add(newListItem("第三項(xiàng)","2"));

DropDownList1.Items.Add(newListItem("第四項(xiàng)","3"));

下拉列表框中還包含SelectedIndex屬性和SelectedItem屬性，它們分別表示當(dāng)前選擇項(xiàng)的索引和當(dāng)前選擇項(xiàng)?？梢栽谶\(yùn)行時(shí)使用代碼通過(guò)這兩個(gè)屬性來(lái)獲取下拉列表控件的當(dāng)前選擇項(xiàng)。例如下面的代碼所示：

intidx=DropDownList1.SelectedIndex;

下拉列表控件可以觸發(fā)SelectedIndexChanged事件。在默認(rèn)情況下，這個(gè)事件不會(huì)立即導(dǎo)致發(fā)送頁(yè)面，但是可以通過(guò)把它的AutoPostBack屬性設(shè)置為True來(lái)強(qiáng)制立即發(fā)送頁(yè)面。

此外，也可以在下拉列表控件上進(jìn)行數(shù)據(jù)綁定，這部分內(nèi)容請(qǐng)參閱第7章。4.4.8ListBox控件

ListBox(列表框)控件用來(lái)在Web頁(yè)面上創(chuàng)建一個(gè)列表框，可以從中選擇一項(xiàng)或多項(xiàng)，如圖4-12所示。

列表框的SelectionMode屬性用來(lái)指定它的選擇方式，即單重選擇(Single)和多重選擇(Multiple)。另外，除了可以使用Height/Width屬性指定列表框的高度和寬度外，還可以使用Rows屬性指定列表框顯示的列表項(xiàng)數(shù)目。圖4-12ListBox控件的外觀

列表框的其他屬性與下拉列表框基本相同。同樣，列表框中的列表項(xiàng)也保存在它的Items屬性中，也可通過(guò)“ListItem集合編輯器”對(duì)話框向其中添加列表項(xiàng)。而且，在代碼中添加列表項(xiàng)的方式與數(shù)據(jù)綁定的方式也與下拉列表相同。例如，下面的代碼表示向列表框中添加兩項(xiàng)：

ListBox1.Items.Add(newListItem(“tom”,“T”));

ListBox1.Items.Add(newListItem("Jack","J"));列表框中也包含SelectedIndex和SelectedItem屬性，用來(lái)獲取當(dāng)前選擇的項(xiàng)。但是當(dāng)列表框允許多重選擇時(shí)，就需要使用其他方式來(lái)獲取當(dāng)前選擇的項(xiàng)。例如下面的代碼所示：

protectedvoidButton1_Click(objectsender,EventArgse)

{

//下面這個(gè)字符串將用來(lái)顯示當(dāng)前選擇項(xiàng)的標(biāo)題

stringmsg=“”;

//遍歷列表框中的每一項(xiàng)，檢查列表項(xiàng)的Selected屬性是否為true，通過(guò)這種方式來(lái)

//判斷當(dāng)前項(xiàng)是否處于選中狀態(tài)

foreach(ListItemliinListBox1.Items)

{

if(li.Selected==true)

{

msg+=“<BR>”+li.Text+“isselected!”;

}

}

Label1.Text=msg;

}4.4.9CheckBox和RadioButton控件

CheckBox(復(fù)選框)控件用來(lái)在Web頁(yè)面上創(chuàng)建復(fù)選框控件，可以通過(guò)它的Checked屬性在True和False之間進(jìn)行選擇，如圖4-13所示。

圖4-13CheckBox控件的外觀可以通過(guò)復(fù)選框控件的Text屬性設(shè)置它的標(biāo)題，通過(guò)它的TextAlign屬性設(shè)置標(biāo)題的堆砌方式，并且可以通過(guò)Checked屬性來(lái)獲取或設(shè)置復(fù)選框的選中狀態(tài)。例如下面的代碼所示：

CheckBox1.Text=“直接發(fā)送頁(yè)面”;

CheckBox1.TextAlign=TextAlign.Left;

CheckBox1.Checked=true;復(fù)選框控件包含一個(gè)CheckedChanged事件，每當(dāng)它的Checked屬性發(fā)生變化時(shí)就會(huì)觸發(fā)這個(gè)事件。這個(gè)事件不會(huì)馬上導(dǎo)致頁(yè)面被發(fā)送到服務(wù)器，除非把它的AutoPostBack屬性設(shè)置為True。

RadioButton(單選按鈕)控件用來(lái)在Web頁(yè)面上創(chuàng)建單選按鈕控件。通常單選按鈕控件不單獨(dú)使用，而是成組使用，從而在多個(gè)值中選擇一個(gè)值，如圖4-14所示。圖4-14RadioButton控件的外觀可以通過(guò)單選按鈕的Text屬性設(shè)置它的標(biāo)題，通過(guò)TextAlign屬性設(shè)置標(biāo)題的對(duì)齊方式。單選按鈕中還包含一個(gè)GroupName屬性，用來(lái)把多個(gè)單選按鈕進(jìn)行分組。具有相同組名的單選按鈕屬于同一組，并且同一組中的單選按鈕只能有一個(gè)處于選中狀態(tài)。單選按鈕的Checked屬性用來(lái)獲取或設(shè)置它的選中狀態(tài)。例如下面的代碼所示：

RadioButton1.Text=“男”;

RadioButton1.TextAlign=TextAlign.Left;

RadioButton1.Checked=true;

單選按鈕也會(huì)觸發(fā)CheckedChanged事件。4.4.10Panel控件

Panel(面板)控件主要用作其他控件的容器，把多個(gè)控件放到一個(gè)面板控件中，就可以把它們作為一個(gè)單元來(lái)處理，比如隱藏或顯示。面板控件主要用來(lái)對(duì)控件進(jìn)行分組(這與Windows窗體中的面板控件一樣)，并且可以使用它實(shí)現(xiàn)獨(dú)特的外觀，如圖4-15所示。圖4-15

Panel控件的外觀使用“工具箱”面板把面板控件添加到窗體頁(yè)面中時(shí)，在面板控件中將顯示初始的靜態(tài)文本Panel，可以直接在Web窗體設(shè)計(jì)器中修改這個(gè)文本。通過(guò)面板控件的HorizontalAlign屬性可以設(shè)置子控件的對(duì)齊方式，通過(guò)Wrap屬性可以設(shè)置是否對(duì)控件中的子控件進(jìn)行自動(dòng)換行，另外，還可以通過(guò)BackImageUrl屬性為它指定背景圖像。例如下面的代碼所示：

Panel1.Wrap=true;

Panel1.HorizontalAlign=HorizontalAlign.Center;

Panel1.BackImageUrl="Back.jpg";把面板控件添加到頁(yè)面中后，就可以為其添加子控件。當(dāng)然，也可以在運(yùn)行時(shí)使用代碼向其中添加子控件。例如下面的代碼：

protectedvoidPage_Load(objectsender,EventArgse)

{

//獲取要?jiǎng)?chuàng)建的標(biāo)簽控件的數(shù)目

intnumlab=int.Parse(DropDownList1.SelectedItem.Value);

for(inti=1;i<=numlab;i++)項(xiàng)目任務(wù)4-1用Web服務(wù)器創(chuàng)建用戶注冊(cè)頁(yè)面

【要求】在填寫(xiě)相應(yīng)的信息后，單擊“確定”按鈕可以在下方顯示輸入的信息。效果如圖4-16所示。圖4-16運(yùn)行效果

【步驟】

(1)從“工具箱”的HTML面板中拖放兩個(gè)table到Web頁(yè)面上，將第一個(gè)表格調(diào)整為八行兩列，將第二個(gè)表格調(diào)整為六行兩列，兩個(gè)表格內(nèi)放置的控件如圖4-17所示。圖4-17控件放置圖

(2)按照?qǐng)D4-17上的文本為各個(gè)控件設(shè)置屬性，大部分屬性均為默認(rèn)，需要修改的屬性有：將密碼輸入框(TextBox2)和(TextBox3)的TextMode屬性設(shè)置為“Password”，將“興趣愛(ài)好”對(duì)應(yīng)的Label7的Text屬性設(shè)為空。為“所在城市”的DropDownList1增加以下項(xiàng)：南京、蘇州、無(wú)錫、常州、南通、揚(yáng)州、鎮(zhèn)江、泰州、徐州、連云港、鹽城和淮安。

(4)雙擊“重置”按鈕，為“重置”按鈕添加Button2_Click事件，代碼如下：

protectedvoidButton2_Click(objectsender,EventArgse)

{

//清空所有Label.Text屬性

Label2.Text=“”;

Label3.Text=“”;

Label4.Text=“”;

Label5.Text=“”;

Label6.Text=“”;

Label7.Text=“”;

}

(5)按F5鍵運(yùn)行程序，可以得到如圖4-16所示的效果。4.5HTML服務(wù)器控件

HTML服務(wù)器控件與HTML元素有著直接的對(duì)應(yīng)關(guān)系。HTML服務(wù)器控件的最大特點(diǎn)就是運(yùn)行客戶端的腳本，處理HTML對(duì)象模型等。在默認(rèn)情況下，添加到Web窗體中的HTML元素對(duì)服務(wù)器不可見(jiàn)，只有把它們轉(zhuǎn)換成HTML服務(wù)器控件才能在服務(wù)器端使用。任何一個(gè)HTML元素都可以通過(guò)添加一個(gè)runat=“server”?屬性轉(zhuǎn)換成HTML服務(wù)器控件。在使用HTML服務(wù)器控件時(shí)，它們的外觀屬性基本上都是通過(guò)HTML語(yǔ)言直接在aspx文件中進(jìn)行設(shè)置的。

Web窗體框架提供了一些預(yù)定義的HTML服務(wù)器控件，它們對(duì)應(yīng)于一些常用的HTML元素，比如表單、輸入元素、列表框和表格等。在.NET框架中，HTML服務(wù)器控件位于命名空間System.Web.UI.HtmlControls中。所有的HTML服務(wù)器控件都直接或間接派生于HtmlControl類。

在HtmlControl類中定義了一些HTML服務(wù)器控件都具有的屬性、方法和事件。HtmlControl類中除了從System.Web.UI.HtmlControl類中繼承的屬性外，還包括以下屬性：

(1)?Attributes屬性：通過(guò)這個(gè)屬性可以訪問(wèn)該控件對(duì)應(yīng)的HTML元素的屬性。

(2)?Disabled屬性：這個(gè)屬性表示該控件是否處于禁止?fàn)顟B(tài)。如果設(shè)置為True，則控件處于禁止?fàn)顟B(tài)。默認(rèn)值為False，即控件處于激活狀態(tài)。在瀏覽器中，處于禁止?fàn)顟B(tài)的控件是只讀的，它的值不會(huì)隨同表單送到服務(wù)器上，而且它不能獲取輸入焦點(diǎn)。

(3)?Style屬性：這個(gè)屬性用來(lái)訪問(wèn)該控件的CSS屬性。

(4)TagName屬性：這個(gè)屬性用來(lái)訪問(wèn)控件對(duì)應(yīng)的HTML標(biāo)簽名。用戶可以使用這個(gè)屬性動(dòng)態(tài)地獲取HTML服務(wù)器控件對(duì)應(yīng)的HTML元素的名稱。例如，對(duì)代碼描述為<divstyle=“width:400px;height:195px”id=“DIV1”runat=“server”>的控件來(lái)說(shuō)，TagName屬性會(huì)返回字符串“div”。

HtmlControl的所有方法和事件都繼承System.Web.UI.Control類，它沒(méi)有定義自己的方法和事件。

注意：為了能夠在代碼中訪問(wèn)HTML服務(wù)器控件，必須給它的ID屬性賦一個(gè)值?？梢詾镠TML服務(wù)器控件添加客戶端腳本處理代碼和服務(wù)器端處理代碼?？蛻舳四_本代碼的添加與常規(guī)HTML頁(yè)面中的過(guò)程完全相同。首先為相應(yīng)的HTML元素聲明事件處理方法，然后在對(duì)應(yīng)的HTML元素中綁定該方法。例如下面的代碼：

<!-聲明處理方法->

<scriptlanguage=“javascript”type=“text/javascript”>

functionButton1_onclick()

{

}

</script>為HTML服務(wù)器控件添加服務(wù)器端事件處理方法需要兩步：首先把控件轉(zhuǎn)換成服務(wù)器端控件；然后雙擊控件，在后臺(tái)代碼中為它聲明默認(rèn)事件的處理方法并綁定到控件上。例如下面的代碼：

//在html腳本中定義

<inputid=“Button1”runat=“server”type=“button”value=“按鈕”onclick=“returnButton1_ServerClick”/>

…

//聲明事件處理方法在后臺(tái)對(duì)應(yīng)類中進(jìn)行添加設(shè)計(jì)

protectedvoidButton1_ServerClick(objectSender,EventArgse)

{

}可以使用客戶端代碼進(jìn)行輸入驗(yàn)證或改變用戶界面之類的操作，使用服務(wù)器端代碼來(lái)處理服務(wù)器端的操作，例如訪問(wèn)數(shù)據(jù)庫(kù)等。

注意：客戶端腳本代碼中的對(duì)象模型與服務(wù)器端的對(duì)象模型不同，在為HTML服務(wù)器控件編寫(xiě)客戶端和服務(wù)器端代碼時(shí)要區(qū)分這一點(diǎn)。4.5.1HtmlInputButton控件

HtmlInputButton控件對(duì)應(yīng)于HTML中的<button>元素，或使用<inputid="Button1"type="button"value="button"/>標(biāo)簽定義的元素，如圖4-18所示。圖4-18

HtmlInputButton控件的外觀

HtmlInputButton控件可以觸發(fā)單擊事件，它在服務(wù)器端的單擊事件為ServerClick事件。單擊HtmlInputButton控件時(shí)就會(huì)把頁(yè)面發(fā)送給服務(wù)器，并在服務(wù)器端觸發(fā)ServerClick事件。例如下面的代碼：

<inputid=“Button1”runat=“server”type=“button”value=“按鈕”onclick=“returnButton1_ServerClick”/>

protectedvoidButton1_ServerClick(objectSender,EventArgse)

{

Div1.TagName=“SPAN”;

}另外，還可以使用“工具箱”面板向Web窗體中添加重置(Reset)按鈕和提交(Submit)按鈕，這兩個(gè)按鈕都是HtmlInputButton控件，它們對(duì)應(yīng)的HTML元素分別如下：

<inputid=“Reset1”type=“reset”value=“重置”/>

<inputid="Submit1"type="submit"value="提交"/>

其中，重置按鈕用來(lái)清除用戶的輸入，而提交按鈕則用來(lái)把頁(yè)面提交給服務(wù)器。4.5.2HtmlInputText控件

HtmlInputText控件對(duì)應(yīng)于HTML中的<inputid="Text1"type="text"/>和<inputid="Password1"type="password"/>元素，主要用來(lái)輸入單行文本或密碼，如圖4-19所示。圖4-19

HtmlInputText控件的外觀可以使用HtmlInputText控件的MaxLength屬性來(lái)指定最多能輸入的字符數(shù)，使用Size屬性指定控件的顯示寬度(字符數(shù))，并且可以用Value屬性來(lái)獲取或設(shè)置控件中的文本。例如下面的代碼：

Text1.MaxLength=10;

Text1.Size=10;

Text1.Value="8888";

HtmlInputText控件在服務(wù)器端觸發(fā)的事件為ServerChange，每當(dāng)控件的內(nèi)容發(fā)生變化時(shí)就會(huì)觸發(fā)這個(gè)事件。這個(gè)事件將會(huì)被緩存起來(lái)，直到下一次頁(yè)面被發(fā)送到服務(wù)器時(shí)才會(huì)被處理。例如下面的代碼：

<inputid=“Text1”runat=“server”type=“text”onserverchange=“Text1_ServerChange”/>

…

protectedvoidText1_ServerChange(objectSender,EventArgse)

{

…

}

“工具箱”面板中的Password控件也是HtmlInPutText控件類型的控件，除了用于不同的目的外，它們的屬性和事件完全相同。4.5.3HtmlTextArea控件

HtmlTextArea控件對(duì)應(yīng)于HTML中的<textarea>元素。可以使用這個(gè)控件在Web頁(yè)面上創(chuàng)建多行文本框，如圖4-20所示。圖4-20

HtmlTextArea控件的外觀可以使用這個(gè)控件的Cols屬性和Rows屬性來(lái)指定文本框顯示的行數(shù)和列數(shù)(字符數(shù))，這兩個(gè)屬性的默認(rèn)值是?-1，表示沒(méi)有指定。另外，還可以通過(guò)Value屬性獲取或設(shè)置控件中的文本。例如下面的代碼：

TextArea1.Cols=40;

TextArea1.Rows=10;

TextArea1.Value="ASP.NET程序設(shè)計(jì)與開(kāi)發(fā)";

HtmlTextArea控件在服務(wù)器端觸發(fā)的事件為ServerChange，每當(dāng)它的Value屬性發(fā)生變化時(shí)就會(huì)觸發(fā)這個(gè)事件。這個(gè)事件不會(huì)立即被處理，而是被緩存起來(lái)，直到下一次頁(yè)面被發(fā)送到服務(wù)器端時(shí)才會(huì)被處理。例如下面的代碼：

protectedvoidTextArea1_ServerChange(objectSender,

EventArgse)

{

…

}4.5.4

HtmlInputCheckBox和HtmlInputRadioButton控件

這兩個(gè)控件分別對(duì)應(yīng)于HTML的<inputid="Checkbox1"type="checkbox"/>和<inputid="Radio1"type="radio"/>元素，用來(lái)在Web頁(yè)面上創(chuàng)建復(fù)選框和單選按鈕，如圖4-21所示。圖4-21

HtmlInputCheckBox和HtmlInputRadioButton控件的外觀這兩個(gè)控件都包含一個(gè)Checked屬性，表示控件是否處于選中狀態(tài)?？梢允褂盟鼈兊腣alue屬性來(lái)獲取或者為它們指定一個(gè)相關(guān)的值，例如下面的代碼：

CheckBox1.Checked=true;

Radio1.Checked=true;

CheckBox1.Value="100";這兩個(gè)控件都可以在服務(wù)器端觸發(fā)ServerChange事件，每當(dāng)它們的Checked屬性發(fā)生變化時(shí)就會(huì)觸發(fā)這個(gè)事件。這個(gè)事件將會(huì)被緩存起來(lái)，直到下一次頁(yè)面被提交給服務(wù)器時(shí)才會(huì)被處理。例如下面的代碼：

protectedvoidcheckbox1_ServerChange(objectSender,

EventArgse)

{

…

}可以創(chuàng)建HtmlInputRadioButton組(通常單選按鈕都要成組使用，以從多個(gè)值中選擇一個(gè)值)，這時(shí)需要用它的Name屬性來(lái)指定組名。具有相同Name屬性的HtmlInputRadioButton控件屬于同一組。同一組中的HtmlInputRadioButton一次只能有一個(gè)處于選中狀態(tài)。

提示：因?yàn)檫@兩個(gè)控件沒(méi)有標(biāo)題，所以需要把它們和標(biāo)簽等控件結(jié)合使用，以指出它們的作用。4.5.5

HtmlInputHidden控件

對(duì)應(yīng)于HTML的<inputid="Hidden1"type="hidden"/>元素，HtmlInputHidden控件不會(huì)顯示在Web頁(yè)面上，通常用它來(lái)保存一些狀態(tài)信息。當(dāng)Web窗體被提交給服務(wù)器時(shí)，它所包含的HtmlInputHidden控件也會(huì)被一起提交，如圖4-22所示。圖4-22

HtmlInputHidden控件的外觀提示：HtmlInputHidden控件與HtmlInputText控件的外觀有細(xì)微的區(qū)別。Web窗體所使用的頁(yè)面框架使用隱藏字段來(lái)自動(dòng)地維持頁(yè)面中包含的服務(wù)器控件的視圖狀態(tài)。

可以使用這個(gè)控件的Value屬性來(lái)獲取或設(shè)置它的值。這個(gè)控件觸發(fā)的服務(wù)器事件為ServerChange，每當(dāng)它的Value屬性發(fā)生變化時(shí)就會(huì)觸發(fā)這個(gè)事件。但是，通常不處理這個(gè)控件的事件。4.5.6

HtmlInputFile控件

HtmlInputFile控件對(duì)應(yīng)于HTML的<inputid="File1"type="file"/>元素，可以用它來(lái)上傳文件，如圖4-23所示。圖4-23

HtmlInputFile控件的外觀可以使用HtmlInputFile類的Accept屬性獲取或設(shè)置上傳的文件類型，這個(gè)屬性由逗號(hào)分隔的MIME編碼類型組成。例如image/表示可以上傳的圖像文件，text/表示可以上傳的文本文件。

還可以使用MaxLength屬性來(lái)獲取或設(shè)置文件路徑的最大長(zhǎng)度，并使用Size屬性設(shè)置HtmlInputFile控件的顯示寬度(字符數(shù))。例如下面的代碼：

File1.MaxLength=40;

File1.Size=40;

HtmlInputFile類的PostedFile屬性用來(lái)訪問(wèn)上傳的文件，例如下面的代碼：

File1.PostedFile.SaveAs(“c:\\Temp\\”+Text1.Value);

也可以直接使用以下格式在aspx文件中設(shè)置HtmlInputFile控件的屬性：

<inputtype="file"runat="server"id="file控件"maxlength="100"size="100"postedfile="上傳的文件名"/>4.5.7HtmlImage控件

HtmlImage控件對(duì)應(yīng)于HTML的<img>元素。使用這個(gè)控件可在Web頁(yè)面上顯示圖像。

可以使用HtmlImage控件的Align屬性設(shè)置圖像的堆砌方式；使用Alt屬性設(shè)置圖像的替代文本；使用Border屬性設(shè)置控件的邊框?qū)挾?；使用Height和Width屬性設(shè)置圖像的大?。皇褂肧rc屬性設(shè)置將在控件中顯示的圖像的虛擬路徑。例如下面的代碼：

img1.Src=“images/image1.jpg”;

img1.Width=500;

img1.Height=300;

img1.Alt=“Image1”;

img1.Align="