WEB服務(wù)器控件

1、第二章：WEB服務(wù)器控件在ASP.NET中，Web Form能容納的對象主要是Server Control（服務(wù)器端控件）。控件叫服務(wù)器端的，因?yàn)檫@些控件都是服務(wù)器端來處理的。Server Control會在初始化的時(shí)候自動(dòng)生成適合瀏覽器的HTML代碼。這樣在編寫ASP.NET程序的時(shí)候，就不必考慮瀏覽器的兼容性問題！ 服務(wù)器端控件的執(zhí)行過程是：先在服務(wù)器執(zhí)行，根據(jù)執(zhí)行結(jié)果生成html元素，然后發(fā)回給客戶端瀏覽器。Web 服務(wù)器控件位于以 System.Web.UI.Webcontrols 命名的空間中，并集成在 ASP.NET 的基本類庫中，人們習(xí)慣稱為 Web 控件。像 HTML 服務(wù)器控

2、件一樣，Web 服務(wù)器控件也 是被創(chuàng)建于服務(wù)器上并且需要 runat="server" 屬性來工作。然而，Web 服務(wù)器控件不是必 須要映射到已存在的 HTML 元素，它們可以表現(xiàn)為更復(fù)雜的元素。2.1 WEB 服務(wù)器控件的格式Web 服務(wù)器控件有兩種具體格式。(1) 所有屬性均定義在一對尖括號“<>”內(nèi)，并以“asp:”作為前綴標(biāo)志，以“/”作 為結(jié)束標(biāo)志。其格式形式為：<asp:control_name id="" runat="server" />注意：屬性之間要空格分開。(2) 除了 Text 屬性外，

3、其他屬性均定義在一對尖括號<>內(nèi)，并以“asp:control_name” 作為前綴標(biāo)志，以“</asp:control_name>”作為結(jié)束標(biāo)志，Text 屬性放在尖括號和結(jié)束標(biāo)志 的中間。其格式形式為：<asp:control_name attribute1=value1 attribute2=value2 attributeN=valueN> text <asp:control_name>注意：control_name為控件名。示例：<asp:Label ID="Label1" runat="server

4、" Text="Label" Width="237px"></asp:Label> <asp:ImageButton ID="ImageButton1" runat="server" />2.2 服務(wù)器控件的類型ASP.NET提供了兩種不同類型的服務(wù)器控件：HTML服務(wù)器控件和Web服務(wù)器控件。這兩種類型的控件大不相同，在使用ASP.NET時(shí)，就會看出重 點(diǎn)是Web服務(wù)器控件。這并不是說，HTML服務(wù)器控件沒有用，它們提供了許多功能，其中一些功能Web服務(wù)器控件也沒有。2.3

5、 用服務(wù)器控件建立頁面使用服務(wù)器控件構(gòu)建ASP.NET頁面有兩種方式。可以可視化地把控件拖放到設(shè)計(jì)界面上，操縱該控件的行為。也可以直接通過輸入代碼來處理服務(wù)器控件。 在設(shè)計(jì)界面上使用服務(wù)器控件高級編程)Visual Studio 2005允許可視化地把控件拖放到設(shè)計(jì)界面上，可視化地創(chuàng)建ASP.NET頁面。要獲得這個(gè)可視化的設(shè)計(jì)選項(xiàng)，可以在查看ASP.NET頁面時(shí)，單擊 IDE底部的Design選項(xiàng)卡。在這個(gè)視圖中，可以把光標(biāo)放在希望控件出現(xiàn)的地方，再在Visual Studio的Toolbox窗口中雙擊需要的控件。在頁面的Design視圖中，可以突出顯示一個(gè)控件，該控件的屬性就會顯示在Prop

6、erties窗口中。例如，在圖4-1中，在設(shè)計(jì)面板上選擇Button控件，其屬性就顯示在右下角的Properties窗口中。圖  4-1在這個(gè)窗口中修改屬性，就會改變突出顯示的控件的外觀或行為。所有的控件都繼承了一個(gè)特定的基類(WebControl)，所以還可以同時(shí)突出顯示多個(gè)控件，一次改變這些控件的基本屬性。在選擇控件時(shí)，需要按住Ctrl鍵。 在Source界面使用服務(wù)器控件與Design視圖一樣，頁面的Source視圖也允許把控件從Toolbox拖放到代碼頁面上。例如，把一個(gè)TextBox控件拖放到代碼頁面上，與把它拖放到設(shè)計(jì)界面上的效果相同：<asp:TextBox ID

7、="TextBox1" Runat="server"></asp:TextBox>也可以在Source視圖中突出顯示一個(gè)控件，或把光標(biāo)放在該控件的代碼語句上，Properties窗口就會顯示該控件的屬性?，F(xiàn)在就可以直接應(yīng)用Visual Studio的Properties窗口中的屬性了，這些屬性會動(dòng)態(tài)添加到控件的代碼中。 處理服務(wù)器控件的事件例如，窗體上按鈕的一個(gè)常見事件是Button_Click，如程序清單所示。處理按鈕單擊事件protected void Button1_Click(object sender，EventArgs e)

8、   / Code actions here程序清單中的事件僅在終端用戶單擊了窗體上的按鈕時(shí)才觸發(fā)，該窗體具有Button1_Click的OnClick屬性值。所以事件處理程序不僅存在于ASP.NET頁面的服務(wù)器端代碼上，還使 用相關(guān)的ASP.NET頁面標(biāo)記中的服務(wù)器控件的OnClick屬性關(guān)聯(lián)起來，如下面的代碼所示：<asp:Button ID="Button1" Runat="server" Text="Button" OnClick="Button1_Click" />如何觸發(fā)

9、服務(wù)器控件的這些事件？有兩種方式。第 一種方式是在Design視圖中打開ASP.NET頁面，雙擊要?jiǎng)?chuàng)建服務(wù)器端事件的控件。例如，雙擊Design視圖中的Button服務(wù)器控件，無論代 碼是在后臺編碼文件中，還是內(nèi)置代碼，都會在服務(wù)器端代碼中創(chuàng)建Button1_Click事件的結(jié)構(gòu)。這會為該服務(wù)器控件最常用的事件創(chuàng)建一個(gè)處理程序 框架。如前所述，注意Button控件有非常多的事件，雙擊該控件并不能得到這些事件。為了訪問這些事件，應(yīng)打開包含服務(wù)器端代碼的頁面，從IDE頂部的第一個(gè)下拉列表中選擇該控件，再在第二個(gè)下拉列表中 選擇該控件需要的事件。下圖顯示了事件下拉列表。例如，處理Button控件的P

10、reRender事件，而不是其Click事件。該事件的處理程序會 放在服務(wù)器端代碼中。第二種方式是在Visual Studio的Properties窗口中為服務(wù)器控件創(chuàng)建服務(wù)器端的事件。這種方式只能用于頁面的Design視圖。在Design視圖中，突出顯示要 處理的服務(wù)器控件，該控件的屬性和一個(gè)圖標(biāo)菜單就會出現(xiàn)在Properties窗口中。其中一個(gè)圖標(biāo)是事件圖標(biāo)，用一個(gè)閃電圖形表示，如圖所示。單擊事件圖標(biāo)會打開該控件的可用事件列表。雙擊其中一個(gè)事件，就會在服務(wù)器端代碼中創(chuàng)建該事件的結(jié)構(gòu)。有了事件的結(jié)構(gòu)后，就可以編寫觸發(fā)事件時(shí)希望發(fā)生的特定操作了。2.4 控件的常見屬性ASP.NET 2.0的許

11、多服務(wù)器控件都派生于WebControl類，擁有公共屬性，并不是所有的服務(wù)器控件都派生于WebControl類中。例如，Literal、 PlaceHolder、Repeater和XML服務(wù)器控件就不是派生于WebControl基類，而是派生于Control類。HTML服務(wù)器控件也沒有派生于WebControl基類，因?yàn)樗鼈冎饕糜谠O(shè)置HTML元素的屬性。表4-2列出了服務(wù)器控件都有的公共屬性。屬    性說    明AccessKey允許賦予與Alt鍵相關(guān)的一個(gè)字符，這樣終端用戶就可以使用鍵盤上的快捷鍵激活控件了。例如，給Butto

12、n 控件的AccessKey屬性賦予K。這樣，終端用戶就不需要單擊ASP.NET頁面上的按鈕(使用鼠標(biāo)控制的指針)，而可以按下Alt+K Attributes允許為Web服務(wù)器控件定義公共屬性未定義的額外屬性BackColor控制ASP.NET頁面上控件的背景色BorderColor給服務(wù)器控件的邊框設(shè)置顏色BorderWidth給組成控件邊框的線設(shè)置線寬值。把一個(gè)數(shù)字設(shè)置為該值，就是把該數(shù)字設(shè)置為邊框的寬度像素值。如果BorderColor屬性沒有與BorderWidth屬性設(shè)置一起使用，默認(rèn)的邊框顏色就是黑色BorderStyle允許指定服務(wù)器控件邊框的設(shè)計(jì)樣式。邊框默認(rèn)創(chuàng)建為直線，但可以

13、給邊框使用許多不同的樣式。BorderStyle屬性的其他值有Dotted、Dashed、Solid、Double、Groove、Ridge、Inset和OutsetCssClass給控件指定定制的層疊樣式表(Cascading Style Sheet，CSS)類文件Enabled把這個(gè)屬性的值設(shè)置為False，就關(guān)閉了控件的功能。Enabled屬性默認(rèn)設(shè)置為True (續(xù)表)   屬    性說    明EnableTheming允許為所選的服務(wù)器控件打開主題功能。其默認(rèn)值是True。這是.NET Framewo

14、rk 2.0中的一個(gè)新屬性Font設(shè)置控件中所有文本的字體ForeColor設(shè)置控件中所有文本的顏色Height設(shè)置控件的高度SkinID給控件應(yīng)用主題時(shí)設(shè)置要使用的skin。這是.NET Framework 2.0中的一個(gè)新屬性Style允許把CSS樣式應(yīng)用于控件TabIndex設(shè)置控件在ASP.NET 頁面中的tab位置。這個(gè)屬性與頁面上的其他控件一起使用ToolTip設(shè)置當(dāng)鼠標(biāo)停留在控件上一小段時(shí)間時(shí)，出現(xiàn)在瀏覽器的一個(gè)黃色框中的文本，它可以用于提供更多的指示給終端用戶Width設(shè)置控件的寬度許多服務(wù)器控件都有這些公共屬性。在.NET Framework 2.0中，WebControl類

15、的新屬性有EnableTheming和SkinID。2.5 控件的種類控件可以分為：Ø 文本輸入和文本控制的控件Ø 傳輸或定位控制的控件Ø 選擇控件Ø 容器控件 標(biāo)簽、文本框文本控件主要包括兩種類型，分別為Label和TextBox,其中Label控件一般是用來顯示或提醒用戶的控件，而TextBox一般是用來接受用戶輸入的控件。 Button、ImageButton、LinkButton、HyperLink控件 Ø Button控件默認(rèn)情況下，Button控件外觀與HTML控件中的提交按鈕相似，都是灰色的。單擊按鈕時(shí)，會提交包含按鈕的窗體，并引

16、發(fā)Click事件。Ø ImageButton控件ImageButton服務(wù)器控件使用定制圖像作為窗體的按鈕，實(shí)現(xiàn)Button的按鈕功能。ImageButton控件的構(gòu)件代碼所示：<asp:ImageButton ID=”ImageButton1” Runat=”server” OnClick=”ImageButton1_Click” ImageUrl=”MyButton.jpg” />ImageButton控件與Button控件最大的區(qū)別是，ImageButton的OnClick事件有不同的構(gòu)造，如下程序所示：protected void ImageButton1_Cli

17、ck(object sender, ImageClickEventArgs e) this.Label1.Text = "點(diǎn)擊的x坐標(biāo)為" + e.X + "縱坐標(biāo)為" + e.Y; 該構(gòu)造代碼使用ImageClickEventArge對象，而不是Button控件通常使用的System.EventArgs對象?？梢允褂眠@個(gè)對象的e.X和e.Y坐標(biāo)確定終端用戶單擊了圖像的什么位置。Ø LinkButtonLinkButton控件的外觀與HyperLink控件相同，但功能與Button控件相同。Button的重要屬性與事件：l CausesVali

18、dation屬性如果Web頁面上有多個(gè)按鈕，對于不要求觸發(fā)驗(yàn)證的按鈕，設(shè)置CausesValidation設(shè)置為False。l CommandName屬性設(shè)置按鈕的命令名稱，通過命令參數(shù)傳遞給按鈕的Command事件。 l Command事件單擊按鈕時(shí)發(fā)生，該事件通常用于一個(gè)Command事件響應(yīng)函數(shù)處理多個(gè)按鈕的Command事件，在事件函數(shù)中通過判定由事件參數(shù)傳入的CommandName判定哪一個(gè)按鈕被點(diǎn)擊示例代碼：<asp:Label ID="Label1" runat="server" Text="Label">&

19、lt;/asp:Label><br /> <asp:Button ID="Button1" runat="server" Text="Button" CommandName="insert" OnCommand="Command" /><asp:Button ID="Button2" runat="server" Text="Button" CommandName="delete"

20、 OnCommand="Command" />代碼：protected void Command(object sender, CommandEventArgs e) switch (e.CommandName) case "insert": this.Label1.Text = "我收到第一個(gè)按鈕的命令" break; case "delete": this.Label1.Text = "我收到第二個(gè)按鈕的命令" break; default: this.Label1 .Text = &

21、quot;誰發(fā)的命令不知道." break; Ø 使用客戶端JavaScriptButton的OnClientClick屬性可以用來使用JavaScript處理客戶端單擊事件示例：下面頁面包含按鈕客戶端單擊事件，調(diào)用javaScirpt函數(shù)AlertHello()。和一個(gè)服務(wù)器端單擊事件，它們在單擊按鈕時(shí)觸發(fā)。首先打開Java Script警告對話框（如圖所示），終端用戶單擊OK之后，頁面再提交服務(wù)器觸發(fā)服務(wù)器端事件。如下程序清單所示<asp:Label ID="Label1" runat="server" Text="

22、;Label" Width="254px"></asp:Label><br /> <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="hello()" OnClick="Button1_Click" /><script language="jscript">function hello() alert(

23、9;客戶端單擊事件,確認(rèn)一下');</script>運(yùn)行結(jié)果：Ø HperLink控件HperLink控件可以使一個(gè)ASP.NET頁面鏈接到另一個(gè)頁面，該控件還可以將文本或圖像顯示為鏈接。表列出此控件所有的常用屬性。HperLink控件主要用于定位到其他網(wǎng)頁，并不公開任何事件。Webforms上的控制權(quán)轉(zhuǎn)移的步驟如下所示：（1） 新建一個(gè)Visual C# ASP.NET應(yīng)用程序并將其命名為Example2。（2） 將默認(rèn)Web窗體重命名為“ControlTransferDemo.aspx”。 （3） 通過向Web窗體添加兩個(gè)標(biāo)簽、兩個(gè)按鈕和一個(gè)超鏈接，設(shè)計(jì)此We

24、b窗體的界面，如圖所示，表列出一要為這些控件設(shè)置的種種屬性。表ControlTransferDemo的屬性控件屬性值LabelIDlblHdrLabelIDlblStatusButtonIDbtnTenNewsButtonText網(wǎng)球新聞ImageButtonIDimgBtnSoccerImageButtonimageUrl<<圖像的路徑>>HyperLinkIDlnkTargetHyperLinkText板球新聞HyperLinkNavigateUrlHyperLinkTarget_blankØ 將以下代碼（粗體）添加到Button和ImagButton控件

25、的Click事件。編譯和運(yùn)行該示例。 選擇控件有時(shí)候，可能需要從選項(xiàng)中選擇一個(gè)或多個(gè)選項(xiàng)，在這種情況下，通過使用ASP.NET中的選擇控件來進(jìn)行選擇。通過使用Web控件，可以向窗體添加4種主要類型的選擇控件。Ø CheckBox:為用戶提供一種方法在true/fals、yes/no或on/off 選項(xiàng)之間切換。Ø RadioButton:用于只從選項(xiàng)列表中選擇一個(gè)選項(xiàng)。Ø DropDownList:允許用戶從預(yù)定義列表中選擇一項(xiàng)。Ø ListBox:允許用戶從預(yù)定義列表中選擇一項(xiàng)或多項(xiàng)。接下來對每個(gè)控件做具體敘述。CheckBox控件有多個(gè)選項(xiàng)且用戶可以

26、選擇多個(gè)選項(xiàng)時(shí)，則使用CheckBox控件。Ø RadioButton控件有多個(gè)選項(xiàng)且用戶只能選擇一個(gè)選項(xiàng)時(shí)，則使用RadioButton控件, DropDownList控件表示允許用戶從下拉列表中選擇一項(xiàng)的控件。Ø ListBox控件ListBox允許用戶從預(yù)定義列表中選擇一項(xiàng)或多項(xiàng)。與DropDownList控件不同之處在于ListBox控件可以一次顯示多項(xiàng)，并根據(jù)需要允許用戶選擇多頁，而DropDownList只能顯示一個(gè)，并且用戶只能選擇一個(gè)。以下是演示這些控件的示例的步驟。（1）新建一個(gè)VisualC# ASP.NET應(yīng)用程序并將其命名為Example3。（2）將

27、Webform重命名為“SelectionControlsDemo.aspx”（3）通過向Web窗體添加7個(gè)標(biāo)簽、兩個(gè)文本框、兩個(gè)單選按鈕、5個(gè)復(fù)選框、1個(gè)下拉列表、1個(gè)列表框和1個(gè)按鈕，設(shè)計(jì)如圖所示的Web窗機(jī)界面。（4）下表列出了要為這些控件設(shè)置的各種屬性控件 屬性值 LabelID lblNameLabelText姓名LabelID lblGenderLabelText性別LabelID lblAgeLabelText年齡LabelID lblSalLabelText薪水范圍 LabelID lblHobbyLabelText愛好 LabelID lblOwnershipLabelTex

28、t所有權(quán)LabelID lblInfoTextBoxIDtxtNameTextBoxIDtxtAgeRadioButtonIDradGenderMRadioButtonText男RadioButtonGroupNameChooserRadioButtonIDradGenderFRadioButtonText女RadioButtonGroupNameChooserCheckBoxIDchkMusicCheckBoxText音樂CheckBoxIDchkNetSurfingCheckBoxText網(wǎng)上沖浪CheckBoxIDchkReadingCheckBoxText閱讀CheckBoxIDchk

29、GamesCheckBoxText游戲CheckBoxIDchkOthersCheckBoxText其他DropDownListIDcboSalRangeListBoxIDlstOwnershipButtonIDbtnSubmitButtonText完成private string strGender="" private string strSalRange="" private string strHobbies=""private string strOwnership="" private void Pag

30、e_Load(object sender, System.EventArgs e)if(!IsPostBack)cboSalRange.Items.Add("小于 $10000");cboSalRange.Items.Add("$10000 至 $20000");cboSalRange.Items.Add("$20001 至 $40000");cboSalRange.Items.Add("$40001 至 $60000");cboSalRange.Items.Add("$60001 至 $80000&qu

31、ot;);lstOwnership.Items.Add("公寓住宅");lstOwnership.Items.Add("土地");lstOwnership.Items.Add("有價(jià)證券");private void btnSubmit_Click(object sender, System.EventArgs e)lblInfo.Text=lblInfo.Text + "姓名：" + txtName.Text + " " ;lblInfo.Text=lblInfo.Text + "性

32、別：" + strGender + " " ;lblInfo.Text=lblInfo.Text + "年齡：" + txtAge.Text + " " ;lblInfo.Text=lblInfo.Text + "薪水范圍：" + strSalRange + " " ;lblInfo.Text=lblInfo.Text + "愛好：" + strHobbies + " " ;lblInfo.Text=lblInfo.Text + "所有

33、權(quán)：" + strOwnership ;private void radGenderM_CheckedChanged(object sender, System.EventArgs e)strGender="男"private void radGenderF_CheckedChanged(object sender, System.EventArgs e)strGender="女"private void cboSalRange_SelectedIndexChanged(object sender, System.EventArgs e)str

34、SalRange= cboSalRange.SelectedItem.Text;private void chkMusic_CheckedChanged(object sender, System.EventArgs e)if(strHobbies="")strHobbies=strHobbies + chkMusic.Text;elsestrHobbies=strHobbies + "," + chkMusic.Text;private void chkNetSurfing_CheckedChanged(object sender, System.Ev

35、entArgs e)if(strHobbies="")strHobbies=strHobbies + chkNetSurfing.Text;elsestrHobbies=strHobbies + "," + chkNetSurfing.Text;private void chkReading_CheckedChanged(object sender, System.EventArgs e)if(strHobbies="")strHobbies=strHobbies + chkReading.Text;elsestrHobbies=st

36、rHobbies + "," + chkReading.Text;private void chkGames_CheckedChanged(object sender, System.EventArgs e)if(strHobbies="")strHobbies=strHobbies + chkGames.Text;elsestrHobbies=strHobbies + "," + chkGames.Text;private void chkOthers_CheckedChanged(object sender, System.Eve

37、ntArgs e)if(strHobbies="")strHobbies=strHobbies + chkOthers.Text;elsestrHobbies=strHobbies + "," + chkOthers.Text;private void lstOwnership_SelectedIndexChanged(object sender, System.EventArgs e)if(strOwnership="")strOwnership=strOwnership + lstOwnership.SelectedValue;e

38、lsestrOwnership=strOwnership + "," + lstOwnership.SelectedValue;2.5.4 Panel和PlaceHolder控件ASP.NET中有兩種類型的容器控件，分別為Panel和 PlaceHolder控件。Ø Panel控件Panel Web服務(wù)器控件提供一個(gè)位于Web窗體頁的容器控件，該控件可用作靜態(tài)文本和其他控件的父級。Panel控件適用于以下情況。l 團(tuán)體行為：將一組控件放置在一個(gè)面板，然后對該面板進(jìn)行操縱，則可以將這組控件作為一個(gè)單元進(jìn)行管理。例如，設(shè)置面板的的Visible屬性，可能隱藏或顯示面板

39、中的一組屬性。l 在運(yùn)行時(shí)創(chuàng)建控件：Panel控件為在運(yùn)行時(shí)創(chuàng)建的控件提供了一個(gè)方便的容器。l 外觀：Panel控件支持外觀屬性（如BackColor和BorderWidth），設(shè)置這些外觀屬性可以為頁面本區(qū)創(chuàng)建一個(gè)獨(dú)特的外觀。注意：對如RadioButton等控件進(jìn)行了分組時(shí)，無需使用Panel控件。Ø PlaceHoler控件用作存儲運(yùn)行時(shí)添加到網(wǎng)頁上的Web服務(wù)器控件的容器。PlaceHolder控件不生成任何可見的輸出結(jié)果，只是用作網(wǎng)頁上其他控件的容器。PlaceHolder控件的Control.Controls集合可以用于添加或刪除PlaceHolder控件中的控件。屬性：

40、最常用屬性是用于添加/刪除此容器控件的子控件的Controls屬性。事件：所有事件都繼承自WebControl類。通常不處理此控件的事件，子控件的的特定事件按照控件的方式進(jìn)行處理。以下是使用PlaceHolder的示例（1） 新建一個(gè)Visual C# ASP.NET應(yīng)用程序，并將其命名為Example4。（2） 將Webform命名為”ContainerControlsDemo.aspx”。（3） 通過添加Panel控件和PlaceHolder控件，設(shè)計(jì)如圖所示的Web窗體界面，表列出了要為控件設(shè)置的各種屬性。控件屬性值PanelIDpnlAddPlacHolderIDphControlsT

41、extBoxIDtxtNameRadioButtonListIDItemsRepeatDirectionrdlSex男，女，默認(rèn)男被選中Horizontal(水平)TextBoxIDtxtNumberCheckBoxListIDItemsRepeatDirection（4） 定義全局變量。（5） 將以下代碼添加到Page_Load 事件。private int nNumber;private void Page_Load(object sender, System.EventArgs e)if (!Page.IsPostBack )nNumber=0;（6）將下列代碼輸入btnAdd_Clickprivate void btnAdd_Click(object sender, System.EventArgs e)Panel pnPerson=new Panel() ;Table tbTemp=new Table();switch(nNumber % 3)case 1:pnPerson.BackColo