0 web数据库开发章服务器控件

第6章Web服务器控件本章要点及学时安排了解ASP.NET中提供的各类Web服务器控件熟悉并掌握各类Web服务器控件的使用方法在学生信息管理系统中Web服务器控件的应用本章授课学时为6学时练习和上机学时为6学时-本章要点-学时安排教学内容ASP.NET服务器控件的作用ASP.NET各种服务器控件的用法ASP.NET各种服务器控件实例开发6.1ASP.NET服务器控件简介ASP.NETWeb服务器控件是ASP.NET网页上的对象，这些控件在该页被请求时运行并向浏览器呈现标记，许多Web服务器控件类似于常见的HTML元素，而其它一些控件则包含复杂的行为。这些控件比HTML服务器控件具有更多内置功能。Web服务器控件不仅包括窗体控件（例如按钮和文本框），而且还包括特殊用途的控件（例如日历、菜单和树视图控件）。

6.1ASP.NET服务器控件简介ASP.NET中提供的Web服务器控件可分为：显示控件，主要有：标签Label控件、图片Image控件、面板Panel控件；输入控件，主要有：文本框TextBox控件、复选框CheckBox件、单选框RadioButton控件；控制控件，主要有：按钮Button控件、超链接HyperLink控件、LinkButton控件、ImageButton控件；列表控件，主要有：下拉列表框DropDownList控件、列表框ListBox控件、复选列表框CheckBoxList控件、单选列表框RadioButtonList控件和表格Table控件。6.1ASP.NET服务器控件简介本章将重点介绍“Web窗体”控件

Web服务器控件层次结构图如下

6.1ASP.NET服务器控件简介在Web页面中使用Web服务器控件一般遵循如下步骤：

1）声明服务器控件

2）操作服务器控件

3）处理控件操作事件声明的基本语法为：

<asp:控件类型id="标识符"runat="server"属性1="值1"属性2="值2"…>文本</asp:控件类型>

或者

<asp:控件类型id="标识符"runat="server"属性1="值1"属性2="值2"…/>6.2用Label控件动态显示文本信息Label标签控件是最简单常用的控件，用于向页面显示输出文本。然而，若要显示静态文本，可以使用HTML呈现，而不必用Label控件；仅当需要在服务器代码中更改文本的内容或其它特性，在ASP.NET网页中显示处于编程控制下的文本，才使用Label控件。Label标签控件的定义语法为：

<asp:Labelid="label1"runat="server">输出的文本</asp:Label>

或<asp:Labelid="label1"runat="server"Text="输出的文本"/>6.2用Label控件动态显示文本信息开发准备过程参考书例6-1的操作过程，窗体设计如图6.2用Label控件动态显示文本信息例6-1中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.TextBoxID=txtNameText=""System.Web.UI.WebControls.TextBoxID=txtGenderText=""System.Web.UI.WebControls.ButtonID=btnSubmitText="提交"（在“提交”中多插入一个空格字符，是为了使得按钮文本显示美观）System.Web.UI.WebControls.LabelID=lblWelcomeText=""（代表该文本控件中初始什么也不显示）6.2用Label控件动态显示文本信息privatevoidbtnSubmit_Click(objectsender,System.EventArgse){ stringname=this.txtName.Text;//获取文本框txtName的用户名

stringgender=this.txtGender.Text;//获取文本框txtGender的用户性别

if(gender=="男")//进行性别判断，动态显示不同的文本

e.Text=name+"先生，欢迎你光临我的网站！"; else e.Text=name+"小姐，欢迎你光临我的网站！";}例6-1动态改变Label内容的部分代码如下：6.3命令的执行和选择—按钮的使用方法按钮控件在应用系统的开发中是使用得较多的控件，它提供命令按钮的操作，用于将Web窗体页面回发给服务器，或完成用户设定的数据处理程序。Web服务器控件包括有三种类型的按钮：普通命令按钮（Button控件）、超链接样式按钮（LinkButton控件）和图形按钮（ImageButton控件）。这三种按钮提供类似的功能，但具有不同的外观。6.3.1普通按钮（Button）在运行时更改标签Button服务器控件显示一个标准命令按钮，默认是“提交”按钮，当用户单击按钮时，会向服务器提交一个窗体，将Web页发送回服务器。默认情况下，Button控件使用HTMLPOST操作提交页面，之后该页回发到其本身，在这里重新生成相同的页面并处理该页上控件的事件处理程序。

Button按钮控件定义语法为：

<asp:Buttonid="button1"runat="server"Text="按钮文本" CommandName="命令名"CommandArgument="命令参数" CausesValidation="True|Flase"OnClick="click事件处理程序"/>6.3.1普通按钮（Button）在运行时更改标签设计过程参见例6-2窗体设计图如下6.3.1普通按钮（Button）在运行时更改标签例6-2中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.ButtonID=btnRedText="红色"System.Web.UI.WebControls.ButtonID=btnBlueText="蓝色"System.Web.UI.WebControls.LabelID=lblSelectColorText=""6.3.1普通按钮（Button）在运行时更改标签例6-2按钮的代码如下：protectedvoidbtnRed_Click(objectsender,EventArgse){this.lblSelectColor.Text="<fontcolor=red>你选择了红色！</font>";//显示红色文本}protectedvoidbtnBlue_Click(objectsender,EventArgse){this.lblSelectColor.Text="<fontcolor=blue>你选择了蓝色！</font>";//显示蓝色文本}6.3.2多个链接按钮（LinkButton）使用同一个事件处理过程

与Button控件相似，LinkButton用于将Web窗体页回发给服务器或执行用户编写的事件代码，但它呈现为页面中的一个超链接样式按钮，与HyperLink控件的外观相同。若只需要实现链接到另一个Web页，使用HyperLink控件即可；若还需要执行一些相应的操作和处理，则需使用LinkButton控件。LinkButton链接按钮控件的定义语法为：

<asp:LinkButtonid="linkbutton1"runat="server"CommandName="命令名" CommandArgument="命令参数"CausesValidation="True|Flase" OnClick="click事件处理程序">显示的文本</asp:LinkButton>6.3.2多个链接按钮（LinkButton）使用同一个事件处理过程

设计过程参见书例6-3窗体设计如下6.3.2多个链接按钮（LinkButton）使用同一个事件处理过程例6-3中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.LinkButtonID=lbnPixelText="像素值高"System.Web.UI.WebControls.LinkButtonID=lbnSmallText="体积小巧"System.Web.UI.WebControls.LinkButtonID=lbnScreenText="显示屏大"System.Web.UI.WebControls.LinkButtonID=lbnZoomText="光学变焦高"System.Web.UI.WebControls.LabelID=lblShowSelectText=""Width=120px6.3.2多个链接按钮（LinkButton）使用同一个事件处理过程例6-3按钮事件代码如下protectedvoidlbnPixel_Command(objectsender,CommandEventArgse){stringresult="选购数码相机时，你的首选项是：";switch(e.CommandName)//判断用户所点击的链接按钮CommandName属性

{case"1":this.lblShowSelect.Text=result+"像素值";break;case"2":this.lblShowSelect.Text=result+"体积小";break;case"3":this.lblShowSelect.Text=result+"显示屏大";break;case"4":this.lblShowSelect.Text=result+"变焦能力";break;}}6.3.2多个链接按钮（LinkButton）使用同一个事件处理过程例6-3页面代码如下<asp:LinkButtonID="lbnPixel"runat="server"CommandName="1"OnCommand="lbnPixel_Command">像素值高</asp:LinkButton><asp:LinkButtonID="lbnSmall"runat="server"CommandName="2"OnCommand="lbnPixel_Command">体积小巧</asp:LinkButton><asp:LinkButtonID="lbnScreen"runat="server"CommandName="3"OnCommand="lbnPixel_Command">显示屏大</asp:LinkButton><asp:LinkButtonID="lbnZoom"runat="server"CommandName="4"OnCommand="lbnPixel_Command">光学变焦高</asp:LinkButton>6.3.3创建前进后退图片按钮ImageButton）

ImageButton控件即图片按钮，功能与Button控件相同，只是ImageButton控件使用图片作为其外观，这对于提供丰富的按钮外观和美化界面非常有帮助。当单击ImageButton控件时，将同时引发Click和Command事件。通过设置ImageUrl属性质指定在控件中显示的图像存放路径，其它属性和Button控件相同。ImageButton图片按钮的定义语法为：

<asp:ImageButtonid="imagebutton1"runat="server"ImageUrl="图像存放路径" CommandName="命令名"CommandArgument="命令参数" CausesValidation="True|Flase"OnClick="click事件处理程序"/>6.3.3创建前进后退图片按钮ImageButton）设计过程参见书例6-4窗体设计如下6.3.3创建前进后退图片按钮ImageButton）例6-4中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.ImageButtonID=ibnPrevousImageUrl="images/prev.bmp"System.Web.UI.WebControls.ImageButtonID=ibnNextImageUrl="images/next.bmp"System.Web.UI.WebControls.ImageID=imgGoodsPicImageUrl="images/1.jpg"（初始显示的图片）6.3.3创建前进后退图片按钮ImageButton）图片按钮事件处理代码protectedvoidibnPrevous_Click(objectsender,ImageClickEventArgse){this.imgGoodsPic.ImageUrl="images/pic1.jpg";//显示pic1图片}protectedvoidibnNext_Click(objectsender,ImageClickEventArgse){this.imgGoodsPic.ImageUrl="images/pic2.jpg";//显示pic2图片}6.4TextBox控件在程序中输入和显示数据TextBox控件在Web页上创建单行或多行文本框，是录入或显示文本的控件。TextBox文本框控件的定义语法为：

<asp:TextBoxid="textbox1"runat="server"Text="显示的文本" TextMode="SingleLine|MultiLine|Password"Columns="最大宽度"Rows="多行高度"MaxLength="最大字符数"Wrap="True|False" AutoPostBack="True|False"OnTextChanged="处理程序"/>6.4TextBox控件在程序中输入和显示数据TextBox控件属性列表

属性名描述取值AutoPostBack用于设置当用户从下拉列表中更改选定内容后是否自动向服务器进行回发True|FalseColumns设置TextBox文本框的列数（最大宽度）数值MaxLength指定输入到TextBox中的最多的字符个数数值Rows设置TextBox文本框的行数（多行时有效）数值Text表示在TextBox文本框中显示的文本字符串TextMode用来设置TextBox文本框的显示模式SingleLine|MultiLine|PasswordWarp指定在多行文本框中，文本是否应自动换行True|FalseOnTextChanged指定当更改文本框中文本时，调用的事件处理子程序名字符串6.4TextBox控件在程序中输入和显示数据设计过程参考书本例6-5窗体设计图6.4TextBox控件在程序中输入和显示数据例6-5中用到的控件和属性设置

控件类型设置控件的属性System.Web.UI.WebControls.TextBoxID=txtNameText=""System.Web.UI.WebControls.TextBoxID=txtContactText=""System.Web.UI.WebControls.ButtonID=btnSubmitText="提交"System.Web.UI.WebControls.TextBoxID=txtConfirmText=""TextBox=MultiLineRows=36.4TextBox控件在程序中输入和显示数据提交按钮的事件处理代码如：protectedvoidbtnSubmit_Click(objectsender,EventArgse){stringname,contact;name=this.txtName.Text;//获取用户名

contact=this.txtContact.Text;//获取用户联系方式

this.txtConfirm.Text="你提交的信息如下：\n姓名："+name+"\n联系方式："+contact;}6.5数据的选择—DropDownList控件的使用方法6.5.1下拉框数据项的动态添加

1、使用DropDownList下拉列表框控件可以创建单选的下拉列表，让用户从已设置好的选项中选择一项。

2、通过设置BorderColor边框颜色、BorderStyle边框样式和BorderWidth边框宽度属性可以控制DropDownList控件的外观。

3、DropDownList控件还支持数据绑定。

6.5.1下拉框数据项的动态添加DropDownList下拉列表框控件的定义语法为：

<asp:DropDownListid="dropdownlist1"runat="server"DataSource=“数据绑定表达式”DataTextField=“Text属性的绑定字段"DataValueField="Value属性的绑定字段"AutoPostBack="True|False"OnSelectedIndexChanged="处理程序"> <asp:ListItemvalue="选项的值"selected="True|False">

选项显示的内容

</asp:ListItem></asp:DropDownList>6.5.1下拉框数据项的动态添加DropDownList控件属性列表属性名描述取值AutoPostBack用于设置当用户从下拉列表中更改选定内容后是否自动向服务器进行回发True|FalseDataSource用于设置向DropDownList中填入项时所使用的数据源字符串DataTextField用于设置DropDownList中各项的显示文本的数据源字段字符串DataValueField用于设置DropDownList中各项的值的数据源字段字符串OnSelectedIndexChanged在下拉列表框中的所选项目发生变化时，调用的事件处理子程序名字符串selected指定该选项是否是默认选项True|False6.5.1下拉框数据项的动态添加参考书中例6-6设计过程设计窗体如下6.5.1下拉框数据项的动态添加例6-6中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblSelectText="请选择你喜欢的颜色："System.Web.UI.WebControls.DropDownListID=ddlColorsWidth=160pxSystem.Web.UI.WebControls.LabelID=lblNewText="请输入要加入的颜色："System.Web.UI.WebControls.TextBoxID=txtNewColorText=""Width=160pxSystem.Web.UI.WebControls.ButtonID=btnAddText="添加"6.5.1下拉框数据项的动态添加部分代码如下：protectedvoidbtnAdd_Click(objectsender,EventArgse){if(txtNewColor.Text.Trim()!="")//判断用户是否填写了新的颜色

{intintIndex=this.ddlColors.Items.Count;//获取当前下拉列表中选项的数目

this.ddlColors.Items.Insert(intIndex,txtNewColor.Text.Trim());//在Index位置添加新选项

}}6.5.2显示和改变下拉框中的选择项例6-7使用下拉列表框控件的选择索引SelectedIndex属性和选择项SeletedItem属性，通过按钮的控制来选择项目。窗体如下：6.5.2显示和改变下拉框中的选择项例6-7中用到的控件和属性设置

控件类型设置控件的属性System.Web.UI.WebControls.DropDownListID=ddlSeasonsWidth=160pxSystem.Web.UI.WebControls.ButtonID=btnPrevousText="向上选择"System.Web.UI.WebControls.ButtonID=btnNextText="向下选择"System.Web.UI.WebControls.LabelID=lblShowText=""Width=160px6.5.2显示和改变下拉框中的选择项代码如下：protectedvoidPage_Load(objectsender,EventArgse){//在此处放置用户代码以初始化页面，设置下拉框DDL_season的数据选择项目

this.ddlSeasons.Items.Add("春季");this.ddlSeasons.Items.Add("夏季");this.ddlSeasons.Items.Add("秋季");this.ddlSeasons.Items.Add("冬季");}protectedvoidbtnPrevous_Click(objectsender,EventArgse){6.5.2显示和改变下拉框中的选择项

if(ddlSeasons.SelectedIndex>0)//判断是否为第1项

ddlSeasons.SelectedIndex=ddlSeasons.SelectedIndex-1;//不为第1项时，向前选择

elseddlSeasons.SelectedIndex=ddlSeasons.Items.Count-1;//为第1项时，设置为最后一项

lblShow.Text="你选择的季节是："+ddlSeasons.SelectedItem.Text;}protectedvoidbtnNext_Click(objectsender,EventArgse){if(ddlSeasons.SelectedIndex<ddlSeasons.Items.Count-1)//判断是否为最后1项

ddlSeasons.SelectedIndex=ddlSeasons.SelectedIndex+1;//不为最后1项时，向后选择

elseddlSeasons.SelectedIndex=0;//为最后1项时，设置为第1项

lblShow.Text="你选择的季节是："+ddlSeasons.SelectedItem.Text;}6.6在列表框(ListBox)控件中显示和移动数据列表框(ListBox)类似于下拉列表框DropDownList，但ListBox会一次列出多个选项让用户从中选取，而且ListBox控件可提供单选或多重选择列表。ListBox控件除了与DropDownList控件相同的属性与事件以外，常用的属性还有：Rows属性，指定控件的高度，即显示的可见行的数目。SelectionMode属性，是列表项的选择模式，决定控件是否允许多项选择，取值有单项选择Single和多项选择Multiple。ListBox控件还支持数据绑定。

6.6在列表框(ListBox)控件中显示和移动数据ListBox列表框控件的定义语法为：

<asp:ListBoxid="标识名"runat="server"DataSource="数据绑定表达式"DataTextField="Text属性的绑定字段"DataValueField="Value属性的绑定字段"AutoPostBack="True|False"Rows="显示的行数"SelectionMode="Single|Multiple" OnSelectedIndexChanged="处理程序"> <asp:ListItemvalue="选项的值"selected="True|False">

选项显示的内容

</asp:ListItem></asp:ListBox>6.6在列表框(ListBox)控件中显示和移动数据例6-8使用列表框显示和移动数据窗体设计如图6.6在列表框(ListBox)控件中显示和移动数据例6-8中用到的控件和属性设置

控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblShowSelectText="请选择你感兴趣的商品："System.Web.UI.WebControls.LabelID=lblAllText="全部选项"System.Web.UI.WebControls.LabelID=lblSelectedText="所选项"System.Web.UI.WebControls.ListBoxID=lstAllWidth=90pxHeight=100pxSystem.Web.UI.WebControls.ListBoxID=lstSelectedWidth=90pxHeight=100pxSystem.Web.UI.WebControls.ButtonID=btnAddOneText=">"System.Web.UI.WebControls.ButtonID=btnDelOneText="<"System.Web.UI.WebControls.ButtonID=btnAddAllText=">>"System.Web.UI.WebControls.ButtonID=btnDelAllText="<<"6.6在列表框(ListBox)控件中显示和移动数据代码如：protectedvoidPage_Load(objectsender,EventArgse){//设置列表框中的初始数据，也可绑定数据字段

if(!IsPostBack)//判断页面是否提交

{this.lstAll.Items.Add("数码相机");//ListBox中添加选项

this.lstAll.Items.Add("数码摄像机");this.lstAll.Items.Add("笔记本电脑");this.lstAll.Items.Add("MP3播放器");this.lstAll.Items.Add("MP4播放器");}}6.7使用复选框(CheckBox)控件做问卷调查CheckBox（复选框）控件在外观上显示为一个标签，其左边或者右边是一个方框。在用户填写某些可以多项选择的项目数据时，就可以使用该控件实现。CheckBox复选框控件的定义语法为：

<asp:CheckBoxid="标识名"runat="server"AutoPostBack="True|False" Text="选项显示文本"TextAlign="Right|Left" SelectionMode="Single|Multiple" OnSelectedIndexChanged="处理程序"> <asp:ListItemvalue="选项的值"selected="True|False">

选项显示的内容

</asp:ListItem></asp:CheckBox>6.7使用复选框(CheckBox)控件做问卷调查CheckBox控件属性列表属性名描述取值AutoPostBack用于设置在用户单击CheckBox控件时CheckBox状态是否自动回发到服务器True|FalseChecked获取或设置一个值，该值指示是否已选中某个CheckBox控件，即判断或者指定某个复选框控件的选择状态True|FalseText获取或设置与CheckBox关联的文本标签字符串TextAlign用于设置与CheckBox控件相关联的文本标签的对齐方式

Right|LeftOnCheckedChanged在复选框的所选项目发生变化时，调用的事件处理子程序名字符串6.7使用复选框(CheckBox)控件做问卷调查例6-9使用复选框实现问卷调查窗体设计如6.7使用复选框(CheckBox)控件做问卷调查例6-9中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblSelectHobbiesText="请选择你的业余爱好："System.Web.UI.WebControls.CheckBoxID=chkSwimText="游泳"System.Web.UI.WebControls.CheckBoxID=chkTravelText="旅游"System.Web.UI.WebControls.CheckBoxID=chkReadText="读书"System.Web.UI.WebControls.ButtonID=btnSubmitText="提交"System.Web.UI.WebControls.LabelID=lblShowSelectText=""6.7使用复选框(CheckBox)控件做问卷调查代码如protectedvoidbtnSubmit_Click(objectsender,EventArgse){stringhobbies="你的业余爱好有：";if(chkSwim.Checked)hobbies=hobbies+"游泳";//判断是否选择“游泳”复选框

if(chkTravel.Checked)hobbies=hobbies+"旅游";//判断是否选择“旅游”复选框

if(chkRead.Checked)hobbies=hobbies+"读书";//判断是否选择“读书”复选框

lblShowSelect.Text=hobbies;}6.8使用单选框(RadioButton)控件填写性别信息RadioButton控件即单选框（或称为单选按钮）控件，单选框控件主要的属性跟复选框控件类似，同样也依靠Checked属性来判断是否选中。但是RadioButton本身具有互斥现象，即同一组单选钮中只允许一个RadioButton控件被选择。因此在单选框控件多了一个GroupName属性，用来指明多个单选框控件是否是同一条件下的选择项，GroupName相同的多个单选框控件（即属于同一组）之间是互斥的，其中只能有一个被选中。RadionButton单选按钮控件的定义语法为：

<asp:RadioBoxid="标识名"runat="server"AutoPostBack="True|False" Text="选项显示文本"TextAlign="Right|Left"Checked="True|False" GroupName="分组名"OnCheckedChanged="处理程序"/>6.8使用单选框(RadioButton)控件填写性别信息例6-10使用单选框获取用户性别信息窗体设计如6.8使用单选框(RadioButton)控件填写性别信息例6-10中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblSelectGenderText="请选择你的性别："System.Web.UI.WebControls.RadioButtonID=rdnGenderMaleChecked=True（作为默认选项）Text="男"System.Web.UI.WebControls.RadioButtonID=rdnGenderFemaleText="女"System.Web.UI.WebControls.ButtonID=btnSubmitText="提交"System.Web.UI.WebControls.LabelID=lblShowGenderText=""6.8使用单选框(RadioButton)控件填写性别信息代码如privatevoidbtnSubmit_Click(objectsender,System.EventArgse){ stringgender="你的性别为："; if(rdnGenderMale.Checked)gender=gender+"男";//判断是否选择“男”单选框

if(rdnGenderFemale.Checked)gender=gender+"女";//判断是否选择“女”单选框

lblShowGender.Text=gender;}6.9在控件中放置控件—面板(Panel)控件使用方法面板Panel控件是其它控件的容器，在它内部可以放入其它别的控件，它对于以编程方式生成控件以及显示和隐藏控件组尤其有用。Panel面板控件的定义语法为：

<asp:Panelid="标识名"runat="server"BackImageUrl="图片文件存放路径"Wrap="True|False"HorizontalAlign="Center|Justify|Left|NotSet|Right">

其它控件定义体

</asp:Panel>6.9.1使用Panel控件规范和美化用户界面

例6-11使用Panel面板规范和美化用户界面窗体设计如图6.9.1使用Panel控件规范和美化用户界面例6-11面板控件和按钮控件的属性设置控件类型设置控件的属性System.Web.UI.WebControls.PanelID=pnl0Width=230pxHeight=380pxHorizontalAlign=CenterSystem.Web.UI.WebControls.PanelID=pnl1Width=208pxHeight=64pxSystem.Web.UI.WebControls.PanelID=pnl2Width=208pxHeight=64pxSystem.Web.UI.WebControls.PanelID=pnl3Width=208pxHeight=64pxSystem.Web.UI.WebControls.PanelID=pnl4Width=208pxHeight=64pxSystem.Web.UI.WebControls.ButtonID=btnSubmitText="提交"6.9.1使用Panel控件规范和美化用户界面例6-11面板控件样式的设置控件类型设置控件的属性System.Web.UI.WebControls.PanelID=pnl0BorderStyle=Double（双线边框）BorderWidth=3pxSystem.Web.UI.WebControls.PanelID=pnl1BorderStyle=Ridge（凸线边框）BorderWidth=3pxSystem.Web.UI.WebControls.PanelID=pnl2BorderStyle=Dotted（点线边框）BackColor=#80FFFF（浅蓝色）BorderWidth=3pxSystem.Web.UI.WebControls.PanelID=pnl3BorderStyle=Dashed（虚线边框）BorderWidth=3pxSystem.Web.UI.WebControls.PanelID=pnl4BorderStyle=Solid（实线边框）BackColor=#FFE0C0（土黄色）BorderWidth=3px6.9.1使用Panel控件规范和美化用户界面设置各面板样式后视图6.9.2使用Panel控件操作一组控件PanelWeb服务器控件在页面内为其他控件提供一个容器。通过将多个控件放入Panel控件，可将它们作为一个单元进行控制，适用于：

(1)分组行为——通过将一组控件放入一个Panel，然后操作该Panel，可将这组Panel作为一个单元进行管理。（如：通过设置面板的Visible属性来隐藏或显示该面板中的一组控件）

(2)动态控件生成——Panel控件为在运行时创建的控件提供了一个方便的容器。

(3)外观——Panel控件支持BackColor和BorderWidth等外观属性，可以设置这些属性来为页面上的局部区域创建独特的外观。6.9.2使用Panel控件操作一组控件例6-12使用Panel面板操作一组控件窗体设计如图6.9.2使用Panel控件操作一组控件设计视图b与c6.9.2使用Panel控件操作一组控件例6-12中用到的控件和属性设置控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblMess1Text="请选择你的性别："System.Web.UI.WebControls.RadionButtonID=rdnMaleText="男"GroupName=GenderSystem.Web.UI.WebControls.RadionButtonID=rdnFemaleText="女"GroupName=GenderSystem.Web.UI.WebControls.ButtonID=btnSubmitText="提交"6.9.2使用Panel控件操作一组控件例6-12面板控件的属性设置控件类型设置控件的属性System.Web.UI.WebControls.PanelID=pnlCigarWidth=230pxHeight=100pxBorderStyle=RidgeBorderWidth=2pxVisible=FalseSystem.Web.UI.WebControls.PanelID=pnlCosmeticWidth=230pxHeight=100pxBorderStyle=RidgeBorderWidth=2pxVisible=False6.9.2使用Panel控件操作一组控件例6-12面板pnlCigar中用到的控件和属性设置

控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblMess2Text="请选择你喜欢的香烟品牌："System.Web.UI.WebControls.CheckBoxID=chkFiveText="555"System.Web.UI.WebControls.CheckBoxID=chkCamelText="骆驼"System.Web.UI.WebControls.CheckBoxID=chkChinaText="中华"6.9.2使用Panel控件操作一组控件例6-12面板pnlCosmetic中用到的控件和属性设置

控件类型设置控件的属性System.Web.UI.WebControls.LabelID=lblMess3Text="请选择你喜欢的化妆品品牌："System.Web.UI.WebControls.CheckBoxID=chkLorealText="LOREAL"System.Web.UI.WebControls.CheckBoxID=chkAvonText="AVON"System.Web.UI.WebControls.CheckBoxID=chkOlayText="OLAY"6.9.2使用Panel控件操作一组控件按钮处理代码privatevoidbtnSubmit_Click(objectsender,System.EventArgse){if(rdnGenderMale.Checked)//选择性别为“男”{pnlCigar.Visible=true;//pnlCigar面板可见pnlCosmetic.Visible=false;//pnlCosmetic面板隐藏}if(rdnGenderFemale.Checked)//选择性别为“女”{pnlCosmetic.Visible=true;//pnlCosmetic面板可见pnlCigar.Visible=false;//pnlCigar面板隐藏

}}6.10在学生管理信息系统中用到的Web服务器控件介绍Web服务器控件在“学生管理信息系统”中的应用的同时，对前面讲解单个Web服务器的进一步补充和说明。本实例介绍的思路是：首先给出teaAddStuInfo02窗体布局（即设计视图），然后是窗体中用到的Web服务器控件及属性值设置、各服务器控件所调用的事件及自定义的方法，接着给出窗体的编码实现过程，最后是页面总体运行效果。

6.10.1页面布局页面布局如图6.10.1页面布局该Web窗体中用到了以下几类Web服务器控件：TextBox控件、RadioButtonList控件、DropDownList控件、用户自定义控件、Label控件和Button控件。其中，用户自定义控件在本章随后将有说明；RadioButtonList控件相当于一个RadioButton组，任何情况下RadioButtonList中都只有一个RadioButton的取值为True，表示只有一个RadioButton被选中，这与“多中选一”的需求是一致的。6.10.2Web服务器控件-属性列表Web服务器控件属性-值列表

控件类型设置控件的属性控件说明System.Web.UI.WebControls.TextBoxID=txtSno用于输入“学号”的文本框System.Web.UI.WebControls.TextBoxID=txtSname用于输入“姓名”的文本框System.Web.UI.WebControls.RadioButtonListID=rablistSgenderRepeatDirection=Horizontal用于输入“性别”的单选按钮组（其属性设置在6.10.4部分介绍）DateSelectorID=dsBirthrunat=server用于自定义控件，用于显示选择和显示“出生日期”，他不是真正的Web服务器控件System.Web.UI.WebControls.TextBoxID=txtSaddress用于输入“籍贯”的文本框6.10.2Web服务器控件-属性列表System.Web.UI.WebCont