1、WEBWEB应用开发应用开发单元单元3 3：WebWeb服务器控件服务器控件任务3：web应用程序的界面设计(2)用户登录页面的设计1用户注册页面的设计用户注册页面的设计2用户注册信息的验证3主 要 内 容一、工作任务2的描述二、基本知识与技能服务器控件8.DropDownList8.DropDownList控件控件 作用：用来在客户端呈现一个下拉框属性属性说明说明Items列表集合SelectedIndex获取或设置被选中项的索引SelectedItem 获取列表中被选定的项SelectedValue 获取列表中选中的值AutoPostBack发生变化，是否自动回传到服务器事件说明Selec
2、tedIndexChanged当选项发生改变时触发(AutoPostBack为True时生效)二、基本知识与技能服务器控件（1 1）DropDownListDropDownList控件的数据绑定控件的数据绑定ListItem集合编辑器DropDownList控件右上方的DropDownList任务，选“编辑项”或者通过Items属性。这种方式简单，但不太适用.用HTML添加 aa bb cc 二、基本知识与技能服务器控件用代码设置 protected void Page_Load(object sender,EventArgs e)if(!IsPostBack)DropDownList1.It
3、ems.Add(new ListItem(“计算机网络);DropDownList1.Items.Add(new ListItem(“电子技术应用);DropDownList1.Items.Add(new ListItem(“软件外包服务);利用集合 这种方法最灵活 using System.Collections;protected void Button1_Click(object sender,EventArgs e)ArrayList arr=new ArrayList();arr.Add(111);arr.Add(222);arr.Add(333);DropDownList1.Dat
4、aSource=arr;DropDownList1.DataBind();练习2：新建一个出生日期的下拉列表，在年份的列表框中加入19002020年，月份为112月，日期为1312.DropDownList2.DropDownList控件的事件控件的事件:与AutoPostBack属性结合使用实例4：将在DropDownList控件中选择的内容填充到文本框中。（1）页面设计：在页面添加一个DropDownList控件和一个TextBox控件（2）编写代码protected void DropDownList1_SelectedIndexChanged(object sender,EventAr
5、gs e)TextBox1.Text=DropDownList1.SelectedValue;（3）直接运行，观察结果（4）将AutoPostBack属性设为true，再运行观察结果（注意观察浏览器的状态栏）练习2：为学校的首页加上友情链接，添加几个友情院校的名称，然后可以通过选择学校的名称，链接到所选学校网站的首页。二、基本知识与技能服务器控件9.9.ListBoxListBox服务器控件服务器控件 和DropDownList控件使用基本类似，只是ListBox允许选择多项（按Ctrl键或Shift键）属性名称属性名称说明说明RowsRows显示的行数SelectionModeSelecti
6、onModeSingle 只能选择一项，Muliple 可选择多项练习3：对照DropDownList的操作给ListBox绑定数据并取值。练习4.将ListBox1中选中的项加入ListBox2中。如下图所示：（1）ListBox1有数据，ListBox2为空（2）当选中ListBox1中任一项，这一项就添加到ListBox2中（3）ListBox2能实现单选和多选的功能，将所选择项的信息在页面上方输出ListBoxDemo.aspx拓展练习：选中ListBox1中字体添加到ListBox2中，将ListBox2中选择的内容撤销（退回到ListBox1）。二、基本知识与技能服务器控件10.C
7、heckBox10.CheckBox控件控件作用：用来在页面上创建单个复选框 属性名称属性名称说明说明Text设置CheckBox旁边显示的文字Checked判断CheckBox是否被选中AutoPostBack自动回送到服务器事件事件说明说明CheckedChangedCheckBox被选中时 实例5：利用CheckBox控件实现爱好的选择。(2)编写代码 protected void Button1_Click(object sender,EventArgs e)string str=你的爱好有:;if(CheckBox1.Checked)str=str+CheckBox1.Text;if
8、(CheckBox2.Checked)str=str+CheckBox2.Text;if(CheckBox3.Checked)str=str+CheckBox3.Text;if(CheckBox4.Checked)str=str+CheckBox4.Text;Label1.Text=str;(1)页面设计：在页面上添加4个CheckBox和一个按钮，修改Text属性如下图所示，添加一个标签，将其Text设置为空二、基本知识与技能服务器控件11.CheckBoxList11.CheckBoxList控件控件作用：生成一组复选框 属性名称属性名称说明说明Items获取或设置列表项的集合Repeat
9、Direction控件是垂直显示还是水平显示RepeatColumn显示时每行的控件数AutoPostBack自动回送到服务器事件事件说明说明SelectedIndexChangedSelectedIndexChangedCheckBox被选中时实例6：利用CheckBoxList控件实现爱好的选择(1)页面设计如下图所示，添加一个CheckBoxList控件、一个Button控件和一个Label控件，编辑CheckBoxList1的各项，修改Button1的Text为“确定”，Label1的Text为空。(2)编写代码 protected void Button1_Click(object
10、sender,EventArgs e)string str=你的爱好有：;/for(int i=0;iCheckBoxList1.Items.Count;i+)/if(CheckBoxList1.Items i.Selected)/str=str+CheckBoxList1.Items i.Text;foreach(ListItem item in CheckBoxList1.Items)if(item.Selected)str=str+item.Text;Label1.Text=str;二、基本知识与技能服务器控件12.RadioButton12.RadioButton控件控件作用：用来在页
11、面上生成单选按钮在一组RadioButton控件中只能选择一个时，将它们的GroupName设为同一个组。RadioButton控件的CheckedChanged事件是当控件的选择状态发生改变时触发，同时要求AutoPostBack属性值设为True才生效。属性名称属性名称说明说明Text设置CheckBox旁边显示的文字Checked判断CheckBox是否被选中AutoPostBack自动回送到服务器事件事件说明说明CheckedChangedCheckBox被选中时实例7：实现性别单选功能页面设计（1）在页面添加两个RadioButton （2）将两个RadioButton控件的Text
12、分别修改为”男”和”女”（3）分别设置两个控件的GroupName为sex浏览页面，观察结果二、基本知识与技能服务器控件13.RadioButtonList13.RadioButtonList控件控件作用：用来在页面上生成一组单选按钮 属性名称属性名称说明说明Items获取设置列表项的集合RepeatDirection控件是垂直显示还是水平显示RepeatColumn显示时每行的控件数 Selected某项是否选中事件事件说明说明SelectedIndexChangedCheckBox被选中时实例8：利用RadioButtonList控件实现专业的选择(1)页面设计：在页面添加一个RadioB
13、uttonList和一个标签；编辑RadioButtonList的各项，设置Label的Text属性为空 （2）编写代码：protected void RadioButtonList1_SelectedIndexChanged(object sender,EventArgs e)for(int i=0;i RadioButtonList1.Items.Count;i+)if(RadioButtonList1.Itemsi.Selected)Label1.Text=你所选择的专业是:”+RadioButtonList1.Itemsi.Text;练习6：设计一个网页，能完成一个人的基本信息登记功能，并把登记的结果在页面的下方输出，如下图所示BaseInformation.aspx三、任务的实施
