基于ASPNET的Web应用开发单元3web服务器控件课件

1、WEB应用开发单元3：Web服务器控件任务3：web应用程序的界面设计(2)用户登录页面的设计1用户注册页面的设计2用户注册信息的验证3主 要 内 容一、工作任务2的描述二、基本知识与技能服务器控件8. DropDownList控件 作用：用来在客户端呈现一个下拉框属性说明Items列表集合SelectedIndex获取或设置被选中项的索引SelectedItem 获取列表中被选定的项SelectedValue 获取列表中选中的值AutoPostBack发生变化，是否自动回传到服务器事件说明SelectedIndexChanged当选项发生改变时触发(AutoPostBack为True时生效)

2、二、基本知识与技能服务器控件（1）DropDownList控件的数据绑定ListItem集合编辑器DropDownList控件右上方的DropDownList任务，选“编辑项”或者通过Items属性。这种方式简单，但不太适用. 用HTML添加 aa bb cc 二、基本知识与技能服务器控件用代码设置 protected void Page_Load(object sender, EventArgs e) if (!IsPostBack) DropDownList1.Items.Add(new ListItem(“计算机网络); DropDownList1.Items.Add(new ListI

3、tem(“电子技术应用); 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.DataSource = arr; DropDownList1.DataBind(); 练习2：新建一个出生

4、日期的下拉列表，在年份的列表框中加入19002020年，月份为112月，日期为1312.DropDownList控件的事件:与AutoPostBack属性结合使用实例4：将在DropDownList控件中选择的内容填充到文本框中。（1）页面设计：在页面添加一个DropDownList控件和一个TextBox控件（2）编写代码protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e) TextBox1.Text = DropDownList1.SelectedValue; （3）直接运行，观察结果 （

5、4）将AutoPostBack属性设为true，再运行观察结果（注意观察浏览器的状态栏）练习2：为学校的首页加上友情链接，添加几个友情院校的名称，然后可以通过选择学校的名称，链接到所选学校网站的首页。二、基本知识与技能服务器控件9. ListBox服务器控件 和DropDownList控件使用基本类似，只是ListBox允许选择多项（按Ctrl键或Shift键）属性名称说明Rows显示的行数SelectionModeSingle 只能选择一项，Muliple 可选择多项练习3 ：对照DropDownList的操作给ListBox绑定数据并取值。 练习4.将ListBox1中选中的项加入List

6、Box2中。如下图所示：（1）ListBox1有数据，ListBox2为空（2）当选中ListBox1中任一项，这一项就添加到ListBox2中（3）ListBox2能实现单选和多选的功能，将所选择项的信息在页面上方输出ListBoxDemo.aspx拓展练习：选中ListBox1中字体添加到ListBox2中，将ListBox2中选择的内容撤销（退回到ListBox1）。二、基本知识与技能服务器控件10. CheckBox控件作用：用来在页面上创建单个复选框 属性名称说明Text设置CheckBox旁边显示的文字Checked判断CheckBox是否被选中AutoPostBack自动回送到服

7、务器事件说明CheckedChangedCheckBox被选中时 实例5：利用CheckBox控件实现爱好的选择。(2)编写代码 protected void Button1_Click(object sender, EventArgs e) string str = 你的爱好有:; if (CheckBox1.Checked) str=str+ CheckBox1.Text; if (CheckBox2.Checked) str = str + +CheckBox2.Text; if (CheckBox3.Checked) str = str + +CheckBox3.Text; if (C

8、heckBox4.Checked) str = str + +CheckBox4.Text; Label1.Text = str; (1)页面设计：在页面上添加4个CheckBox和一个按钮，修改Text属性如下图所示，添加一个标签，将其Text设置为空二、基本知识与技能服务器控件11. CheckBoxList控件作用：生成一组复选框 属性名称说明Items获取或设置列表项的集合RepeatDirection控件是垂直显示还是水平显示RepeatColumn显示时每行的控件数AutoPostBack自动回送到服务器事件说明SelectedIndexChangedCheckBox被选中时实例6

9、：利用CheckBoxList控件实现爱好的选择(1)页面设计如下图所示，添加一个CheckBoxList控件、一个Button控件和一个Label控件，编辑CheckBoxList1的各项，修改Button1的Text为“确定”，Label1的Text为空。(2)编写代码 protected void Button1_Click(object sender, EventArgs e) string str = 你的爱好有：; /for(int i=0;iCheckBoxList1.Items .Count ;i+) / if(CheckBoxList1.Items i.Selected) /

10、 str=str+ +CheckBoxList1.Items i.Text; foreach (ListItem item in CheckBoxList1.Items ) if (item.Selected) str = str + + item.Text; Label1.Text = str; 二、基本知识与技能服务器控件12. RadioButton控件作用：用来在页面上生成单选按钮在一组RadioButton控件中只能选择一个时，将它们的GroupName设为同一个组。RadioButton控件的CheckedChanged事件是当控件的选择状态发生改变时触发，同时要求AutoPost

11、Back属性值设为True才生效。属性名称说明Text设置CheckBox旁边显示的文字Checked判断CheckBox是否被选中AutoPostBack自动回送到服务器事件说明CheckedChangedCheckBox被选中时实例7：实现性别单选功能页面设计（1）在页面添加两个RadioButton （2）将两个RadioButton控件的Text分别修改为”男”和”女” （3）分别设置两个控件的GroupName为sex浏览页面，观察结果二、基本知识与技能服务器控件13. RadioButtonList控件作用：用来在页面上生成一组单选按钮 属性名称说明Items获取设置列表项的集合R

12、epeatDirection控件是垂直显示还是水平显示RepeatColumn显示时每行的控件数 Selected某项是否选中事件说明SelectedIndexChangedCheckBox被选中时实例8：利用RadioButtonList控件实现专业的选择(1)页面设计：在页面添加一个RadioButtonList和一个标签； 编辑RadioButtonList的各项，设置Label的Text属性为空 （2）编写代码： protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e) for (int i = 0; i RadioButton