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

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

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

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

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

4.5HTML服務(wù)器控件

本章小結(jié)

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

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

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

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

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

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

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

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

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

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

TextBox1.TextMode=TextBoxMode.Password;

//允許在TextBox中換行

TextBox1.Wrap=true;

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

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

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

protectedvoidTextBox1_TextChanged(objectsender,EventArgse)

{

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

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

}4.4.3Button控件

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

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

protectedvoidButton1_Click(objectsender,EventArgse)

{

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

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

}4.4.4LinkButton控件

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

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

LinkButton</asp:LinkButton>

protectedvoidLinkButton1_Click(objectsender,EventArgse)

{

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

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

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

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

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

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

publicvoidButton1_Click(ObjectSender,System.EventArgse)

{

HyperLink1.Text=“首頁”;

HyperLink1.NavigateUrl=“”;

}4.4.7DropDownList控件

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

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

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

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

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

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

//括號里的兩個引號，前面的一個值表示下拉菜單顯示的值

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

//后面一個值對應(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)行時使用代碼通過這兩個屬性來獲取下拉列表控件的當(dāng)前選擇項(xiàng)。例如下面的代碼所示：

intidx=DropDownList1.SelectedIndex;

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

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

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

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

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

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

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

protectedvoidButton1_Click(objectsender,EventArgse)

{

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

stringmsg=“”;

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

//判斷當(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ù)選框)控件用來在Web頁面上創(chuàng)建復(fù)選框控件，可以通過它的Checked屬性在True和False之間進(jìn)行選擇，如圖4-13所示。

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

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

CheckBox1.TextAlign=TextAlign.Left;

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

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

RadioButton1.Text=“男”;

RadioButton1.TextAlign=TextAlign.Left;

RadioButton1.Checked=true;

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

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

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

Panel1.Wrap=true;

Panel1.HorizontalAlign=HorizontalAlign.Center;

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

protectedvoidPage_Load(objectsender,EventArgse)

{

//獲取要創(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)建用戶注冊頁面

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

【步驟】

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

(2)按照圖4-17上的文本為各個控件設(shè)置屬性，大部分屬性均為默認(rèn)，需要修改的屬性有：將密碼輸入框(TextBox2)和(TextBox3)的TextMode屬性設(shè)置為“Password”，將“興趣愛好”對應(yīng)的Label7的Text屬性設(shè)為空。為“所在城市”的DropDownList1增加以下項(xiàng)：南京、蘇州、無錫、常州、南通、揚(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元素有著直接的對應(yīng)關(guān)系。HTML服務(wù)器控件的最大特點(diǎn)就是運(yùn)行客戶端的腳本，處理HTML對象模型等。在默認(rèn)情況下，添加到Web窗體中的HTML元素對服務(wù)器不可見，只有把它們轉(zhuǎn)換成HTML服務(wù)器控件才能在服務(wù)器端使用。任何一個HTML元素都可以通過添加一個runat=“server”?屬性轉(zhuǎn)換成HTML服務(wù)器控件。在使用HTML服務(wù)器控件時，它們的外觀屬性基本上都是通過HTML語言直接在aspx文件中進(jìn)行設(shè)置的。

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

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

(1)?Attributes屬性：通過這個屬性可以訪問該控件對應(yīng)的HTML元素的屬性。

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

(3)?Style屬性：這個屬性用來訪問該控件的CSS屬性。

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

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

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

<!-聲明處理方法->

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

functionButton1_onclick()

{

}

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

//在html腳本中定義

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

…

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

protectedvoidButton1_ServerClick(objectSender,EventArgse)

{

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

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

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

HtmlInputButton控件的外觀

HtmlInputButton控件可以觸發(fā)單擊事件，它在服務(wù)器端的單擊事件為ServerClick事件。單擊HtmlInputButton控件時就會把頁面發(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)按鈕，這兩個按鈕都是HtmlInputButton控件，它們對應(yīng)的HTML元素分別如下：

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

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

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

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

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

Text1.MaxLength=10;

Text1.Size=10;

Text1.Value="8888";

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

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

…

protectedvoidText1_ServerChange(objectSender,EventArgse)

{

…

}

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

HtmlTextArea控件對應(yīng)于HTML中的<textarea>元素?？梢允褂眠@個控件在Web頁面上創(chuàng)建多行文本框，如圖4-20所示。圖4-20

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

TextArea1.Cols=40;

TextArea1.Rows=10;

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

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

protectedvoidTextArea1_ServerChange(objectSender,

EventArgse)

{

…

}4.5.4

HtmlInputCheckBox和HtmlInputRadioButton控件

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

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

CheckBox1.Checked=true;

Radio1.Checked=true;

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

protectedvoidcheckbox1_ServerChange(objectSender,

EventArgse)

{

…

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

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

HtmlInputHidden控件

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

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

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

HtmlInputFile控件

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

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

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

File1.MaxLength=40;

File1.Size=40;

HtmlInputFile類的PostedFile屬性用來訪問上傳的文件，例如下面的代碼：

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控件對應(yīng)于HTML的<img>元素。使用這個控件可在Web頁面上顯示圖像。

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

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

img1.Width=500;

img1.Height=300;

img1.Alt=“Image1”;

img1.Align="