第二章Web服务器控件.docx
《第二章Web服务器控件.docx》由会员分享，可在线阅读，更多相关《第二章Web服务器控件.docx（16页珍藏版）》请在冰点文库上搜索。
第二章Web服务器控件
第二章Web服务器控件
任务1：
设置文本字体
一、要求和目的
要求
建立如图2-1所示的web页面，要求该页面能完成如下功能：
图2-1
✓能在文本框中输入多行文字；
✓可选择如图2-1所示文字的一种，当提交后文本框中的字体随之改变；
✓可选择如图2-1所示字形的一种或多种，当提交后文本框中的字形随之改变。
目的
✓学习命令按钮的主要属性、方法和事件；
✓学习文本框的主要属性、方法和事件；
✓学习单选按钮控件的主要属性、方法和事件；
✓学习复选框控件的主要属性、方法和事件；
✓学习各种web服务器控件的共同属性。
二、操作步骤
第1步添加控件
新建名为sun2-1.asp，插入层，层中插入3X3表，添加一个文本框（Textbox）、一个命令按钮（Button）、三个单选按钮（Radiobutton）、一个复选框（Checkboxlist）。
第2步设置控件属性
控件
属性
属性值
Textbox1
TextMode
SingleLine改为MultiLine
Font
Size:
X-Large
Button1
Text
“提交”
RadioButton1
Text
“隶书”
GroupName
“字体”
RadioButton2
Text
“楷体”
GroupName
“字体”
RadioButton3
Text
“黑体”
GroupName
“字体”
CheckBoxList1
Items
“粗体”、“斜体”、“下划线”
RepeatDirection
Vertical改为Horizontal
第3步编写事件处理代码
（1）单选按钮代码
protectedvoidRadioButton1_CheckedChanged（objectsender,EventArgse）
{
TextBox1.Font.Name="隶书";
}
protectedvoidRadioButton2_CheckedChanged（objectsender,EventArgse）
{
TextBox1.Font.Name="楷体";
}
protectedvoidRadioButton3_CheckedChanged（objectsender,EventArgse）
{
TextBox1.Font.Name="黑体"
}
（2）复选框代码
Checkboxlist1控件包含三个子项，第一个子项名为CheckBoxList1.Items[0]，第二个子项名为CheckBoxList1.Items[1]，依次类推。
protectedvoidCheckBoxList1_SelectedIndexChanged（objectsender,EventArgse）
{
if（CheckBoxList1.Items[0].Selected）
TextBox1.Font.Bold=true;
if（CheckBoxList1.Items[1].Selected）
TextBox1.Font.Italic=true;
if（CheckBoxList1.Items[2].Selected）
TextBox1.Font.Underline=true;
}
上面的设计方案中，对复选框的处理存在如下的缺陷：
假如选中了下划线后提交，然后再选中斜体，同时去掉对下划线的选择，再次提交，此时应该仅有斜体效果，但此时下划线效果也同时存在。
完善程序段中的代码，解决上述问题。
解决问题如下：
protectedvoidCheckBoxList1_SelectedIndexChanged（objectsender,EventArgse）
{
if（CheckBoxList1.Items[0].Selected）
TextBox1.Font.Bold=true;
else
TextBox1.Font.Bold=false;
if（CheckBoxList1.Items[1].Selected）
TextBox1.Font.Italic=true;
else
TextBox1.Font.Italic=false;
if（CheckBoxList1.Items[2].Selected）
TextBox1.Font.Underline=true;
else
TextBox1.Font.Underline=false;
}
（3）文本框和命令按钮
另外：
若设计需要在事件发生后立即执行相应的事件处理代码，则需将相应控件的AutoPostBack属性由False改为True。
任务2：
图片浏览器
一、要求和目的
要求：
建立如图2-2所示的web页面，要求完成如下功能：
图2-2
✓能显示图片；
✓将标题栏中改为“图片浏览器”；
✓在图2-2的下拉列表框中显示若干图像文件名；
✓当选定一个列表框中的一个文件名后，将相应的图片显示出来；
✓当图片不能被正常显示，显示其文件名，以起到提示作用。
目的：
✓学习标签等简单控件的主要属性、方法和事件；
✓学习Image控件的主要属性、方法和事件；
✓学习下拉列表框的主要属性、方法和事件。
二、操作步骤
第1步添加控件
新建名sun2-2.aspx，添加一个Image控件，一个标签（Label）控件、一个下拉列表框（DropDownList）控件，三个控件ID分别为Image1、Label1和DropDownList1。
在D盘根目录下建立一个名为asp的文件夹，将被浏览的图像文件置于该文件夹中，共5个图像分别是1.jpg、2.jpg、3.jpg、4.jpg、5.jpg。
第2步设置属性
控件
属性
属性值
DOCUNENT
title
“图片浏览器”
Label1
Text
“图片浏览器”
Font
Name:
“隶书”
Image1
ImageUrl
“D：
\asp\1.jpg”
AlternateText
“D：
\asp\1.jpg”
DropDownList1
ListItem
将1.jpg、2.jpg、3.jpg、4.jpg、5.jpg五个文件名作为项目输入
AutoPostbBack
True
第3步编写事件处理代码
双击DropDownList1后系统会自动形成程序框架，插入核心代码：
protectedvoidDropDownList1_SelectedIndexChanged（objectsender,EventArgse）
{
Image1.ImageUrl=DropDownList1.SelectedValue;
Image1.AlternateText=DropDownList1.SelectedValue;
}
任务3：
选择出行时间和目标城市
一、要求和目的
要求
建立如图2-3所示的web页面，要求选定出行时间和目标城市如图2-3所示，并能完成如下功能：
图2-3
✓能选定城市，被选城市能从左边的列表框中删去，并加入到右边的列表框；
✓实现一次可以选择多个城市，并加入到右边的列表框中；
✓可以通过如图2-3所示的日历控件来选定出行时间。
目的
✓学习列表框控件的主要属性、方法和事件；
✓学习日历控件的主要属性、方法和事件；
✓学习visualstudio2005格式菜单的主要功能。
二、操作步骤
第1步添加控件
新建名为sun2-3的网站，网站窗体名改为sun2-3.aspx，窗体中添加两个标签，两个列表框、两个命令按钮、一个文本框、一个日历控件。
8个控件的ID分别为Label1、Label2、ListBox1、ListBox2、Button1、Button2、Textbox1和Calendar1。
第2步设置控件属性
控件
属性
属性值
Label1
Text
“可选城市”
Label2
Text
“目的城市”
Button1
Text
“选择”
Button2
Text
“选定出发时间”
ListBox1
Items
上海、北京、天津、武汉、南宁、乌鲁木齐、呼和浩特
SelectionMode
Multiple
Calendar1
自动套用格式
色彩型I
ShowDayHeader
Flase
Visible
Flase
第3步编写事件处理代码
（1）Button1单击事件处理代码
Button1控件被单击后完成了两件事，一是将ListBox1中被选中的项插入到ListBox2中，二是将Listbox1中被选的项从Listbox1中删除。
protectedvoidButton1_Click（objectsender,EventArgse）
{
ListBox2.Items.Add（ListBox1.SelectedValue）;
ListBox1.Items.Remove（ListBox1.SelectedItem）;
}
（2）Button2单击事件处理代码
Button2控件被单击后改变了7个控件的Visible和EnabLed属性，使原来处于隐藏的Calendar1控件显示出来，使原来可见的命令按钮和列表框隐藏起来，并且使Button2按钮变成灰色，处于不可用状态。
protectedvoidButton2_Click（objectsender,EventArgse）
{
Calendar1.Visible=true;
Button1.Visible=false;
Button2.Enabled=false;
ListBox1.Visible=false;
ListBox2.Visible=false;
Label1.Visible=false;
Label2.Visible=false;
}
（3）Calendar1选定日期改变事件处理代码
Calendar1控件的选定日期发生改变后，是将选定的时间添加到Textbox1中，二是将Button2单击事件中改变的7个控件的Visble和Enabled属性复原。
protectedvoidCalendar1_SelectionChanged（objectsender,EventArgse）
{
TextBox1.Text="出发时间:
"+Calendar1.SelectedDate.ToShortDateString（）;
Calendar1.Visible=false;
ListBox1.Visible=true;
ListBox2.Visible=true;
Button1.Visible=true;
Button2.Enabled=true;
Label1.Visible=true;
Label2.Visible=true;
}
任务4：
设计用户注册界面
一、要求和目的
要求
建立如图2-4所示的界面，要求该页面能完成如下功能：
图2-4
✓不要求对用户注册信息进行处理；
✓图2-4中用户ID是必填字段，若空则提示“用户ID不能空”；
✓如图2-4所示，在输入和确认密码时，两个字段中应该显示为若干个“*”，且密码和确认密码字段必须一致，若不一致则提示“两次输入的密码不相同”；
✓图2-4中年龄字段的范围在1~120之间，若超过范围则提示“年龄应该在1~120之间”；
✓在图2-4中信箱字段应该符合信箱的一般规则，若不符合则提示：
“输入的信箱不正确”。
目的
✓学习必填验证控件RequiredFieldValidator的使用方法；
✓学习比较验证控件CompareValidator的使用发法；
✓学习验证范围控件RangeValidator的使用方法；
✓学习正则表达式验证控件RegularExpressionValidator的使用方法；
✓学习自定义控件的使用方法；
✓学习验证摘要控件的使用方法。
二、操作步骤
第1步添加控件
新建名为sun2-4的网站，将网站窗体文件名改为sun2_4.aspx，添加6个标签、5个文本框、1个命令按钮，并参照2-4所示进行6X3表布局。
上述12个控件ID依次为Label1~Label6、TextBox1~TextBox5和Button1。
通过工具箱添加一个必填验证控件、一个比较验证控件、一个范围验证控件、一个正则表达式验证控件，上述4个验证控件的ID分别是RequiredFieldValidator1、CompareValidator1、RangeValidator1和RegularExpressionValidator1。
第2步设置属性
控件
属性
属性值
Label1
Text
“用户注册信息”
Label2
Text
“用户ID”
Label3
Text
“密码”
Label4
Text
“确认密码”
Label5
Text
“年龄”
Label6
Text
“信箱”
Botton1
Text
“提交”
TextBox2
TextMode
PassWord
TextBox3
TextMode
PassWord
RequiredFieldValidator1
ControlToValidate
TextBox1
ErrorMessage
“用户ID不能为空”
CompareValidator1
ControlToCompare
TextBox2
CompareValidate
TextBox3
ErrorMessage
“两次输入的密码不相同”
RangeValidator1
ControlToValidate
TextBox4
MaximumValue
120
MinimumValue
1
ErrorMessage
“年龄应该在1~120之间”
RegularExpressionValidator1
ControlToValidate
TextBox5
ValidationExpression
“正则表达式编辑器”：
“Internet电子邮件地址”
ErrorMessage
“输入的信箱不正确”
任务5：
设计页面banner
一、要求和目的
要求
建立如图2-5所示的banner，要求完成如下功能：
✓该banner是一个由用户自定义的控件；
✓该banner由一个logo图标和一个下拉列表框构成
✓用户可以选择列表框中的语言；
✓令控件具有一个Language属性该属性的值是图2-5中列表框选定的值。
目的
✓学习建立Web用户控件的方法；
✓学习为Web用户控件添加新的属性：
✓学习为Web用户控件添加新的方法；
✓学习使用容器控件。
二、操作步骤
第1步建立自定义控件文件
新建名为sun2-5的网站后，将页面文件改为sun2-5.aspx。
添加Web用户控件：
在解决方案管理器中右击sun2-5弹出快捷菜单，单击“添加新项”，选择Web用户控件，“添加”按钮添加成功后，将web用户控件默认文件名WebUserControl1.ascx改为banner.ascx。
第2步为web用户控件添加控件
在解决方案管理器中出现一个名为banner.ascx的文件，双击。
使用层布局，在层的属性窗口中，单击style右侧的···进入“样式生成器”对话框，在样式生成器中为层设置背景颜色：
Gray。
在层中使用表格布局，添加一个Image控件、两个标签控件、一个下拉列表框控件拖入表格的相应位置上，此4个控件的名称分别为Image1、Label1、Label2、DropDownList1，如下图所示。
控件
属性
属性值
Image1
ImageUrl
sun2-5/logo.jpg
Label1
Text
“欢迎光临ASP.NET学习园地”：
华文行楷,X-Large
Label2
Text
“请选择语言”
DropDownList1
ListItem集合编辑器
Chinese、Japanese和English
第3步为web用户控件添加新属性
Banner的自定义控件添加一个名为language的属性
双击任意一个控件后编写language属性的定义语句，并插入到文件框架中的合适位置。
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassbanner:
System.Web.UI.UserControl
{
publicStringLanguage
{
get
{
returnDropDownList1.SelectedValue;
}
}
}
第4步使用web用户控件
通过工具箱sun2-5.aspx窗体中，用层布局，插入2X2表格，添加一个Panel控件、一个命令按钮、一个文本框和一个Banner控件，4个控件的ID分别为Panel1、Button1、TextBox1和Banner1.
Banner控件的添加方法是：
在“解决方案资源管理器”窗口中，将名为banner.ascx文件图标直接拖至目标位置，本例中是拖至Panel控件中。
Button1的Text属性设置为“获取已选定的语言”。
第5步实现和自定义web用户控件的互动
为Button1编写代码实现当该命令按钮被单击时，获取Web用户控件设置的语言并在TextBox1中显示出来。
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclass_Default:
System.Web.UI.Page
{
protectedvoidButton1_Click（objectsender,EventArgse）
{
TextBox1.Text=Banner1.Language;
}
}
升级会员 