7ASPNETWeb服务器控件
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
第7章 Web服务器控件
7.1 服务器控件简介
7.2 基本Web服务器控件
7.2.1 Label控件
7.2.2 Button控件
7.2.3 LinkButton控件
7.2.4 ImageButton控件
7.2.5 TextBox控件
7.2.6 DropDownList控件
7.2.7 ListBox控件
7.2.8 CheckBox控件和CheckBoxList控件
7.2.9 RadioButton控件和RadioButtonList控件
7.2.10 Panel 控件
7.3 数据验证控件
7.3.1 数据验证机制介绍
7.3.2 RequiredFieldValidator控件
7.3.3 CompareValidator控件
7.3.4 RangeValidator 控件
7.3.5 RegularExpressionValidator控件
7.3.6 CustomValidator 控件
7.3.7 ValidationSummary控件
第7章 Web服务器控件
7.1 服务器控件简介
创建 Web 窗体页时,可以使用以下控件类型:
⏹HTML 服务器控件
HTML 服务器控件以HTML标记为基础而衍生出来的服务器控件,HTML 服务器控件比HTML标记多了两个属性,一个是“ runat="server" ”,一个是“ id="控件名称" ”。
这两个属性的作用是控件可以在服务器端作为一个对象使用。
默认情况下,服务器无法使用 Web 窗体页上的 HTML 元素,但是,通过将 HTML 元素转换为 HTML 服务器控件,可将其公开为可在服务器上编程的元素。
如果要将ASP网页改写为网页,可以通过在原来的HTML标记中增加这两个属性,从而很容易的完成转换工作。
⏹Web 服务器控件
HTML 服务器控件只是使编程更简便,在功能上并没有超越HTML标记。
而Web 服务器控件则是为了超越HTML标记而诞生的,Web 服务器控件比 HTML 服务器控件具有更多内置功能。
Web 服务器控件不只包括一般的窗体类型的控件,例如按钮和文本框,而且还包括特殊用途的控件,例如日历,另外还新增了数据验证控件和数据访问控件。
控件新增的功能以及新增的控件不仅增强了的功能,同时将以往由开发人员完成的许多繁琐重复的工作都交给控件去完成了。
⏹用户控件
虽然 提供了大量的服务器控件,但它们并不能涵盖每一种情况。
根据应用程序的需要用户可以自定义控件。
定义用户控件所使用的编程技术与用于编写 Web 窗体页的技术相同,用
户控件用文件扩展名 .ascx 来进行标识。
本章主要介绍Web 服务器控件中的一般的窗体类型的控件(我们将这种类型的控件称为基本Web服务器控件)和数据验证控件,数据访问控件的使用将在第9章详细介绍。
7.2 基本Web服务器控件
本节主要介绍如何使用基本Web服务器控件,基本Web服务器控件主要包括:
⏹可提供显示文本功能的Label控件;
⏹可提供提交或链接功能的三种类型的按钮控件:标准命令按钮(Button 控件)、图形化按钮
(ImageButton 控件)和超级链接样式按钮(LinkButton 控件);
⏹可提供输入或选择功能的控件:TextBox (文本框)控件、DropDownList(下拉列表)控件、
ListBox(列表框)控件、CheckBox(复选框)控件和CheckBoxList(复选框列表)控件;
RadioButton(单选按钮)控件和RadioButtonList(单选按钮列表)控件;
⏹可作为其他控件的容器的Panel 控件。
7.2.1Label控件
Label控件是web服务器控件中最简单的一个控件,用来在 Web 页上显示文本。
它的最常用的属性是Text属性,通过设置Text属性可以自定义显示文本。
我们前面6.3.1节的HelloBehindVS.aspx 中已经使用过。
声明Label控件的语法如下:
<asp:label id="Message" runat=server>初始显示的文本</asp:label>
可以使用此 id 引用以编程方式在运行时操作服务器控件的对象模型,例如,在Page_Load事件处理程序中添加如下代码:
Message.Text = "您好"
7.2.2Button控件
Web 服务器控件包括三种类型的按钮:标准命令按钮(Button 控件)、图形化按钮(ImageButton 控件)和超级链接样式按钮(LinkButton 控件)。
这三种按钮都可提供提交或链接功能,但具有不同的外观。
当用户单击时,所有三种类型的按钮都会使窗体被提交给服务器。
这使得在基于服务器的代码中,页面被处理,任何挂起的事件被引发。
这些按钮还可引发它们自己的 Click 事件,您可以为这些事件编写事件处理程序。
本节首先介绍如何使用标准命令按钮——Button 控件。
使用 Button 控件可以在 Web 页上创建普通按钮。
下面通过一个实例介绍如何使用Button控件,该例的功能是单击Button控件时,Label控件显示的文字信息以及背景颜色会发生变化,同时Button控件显示的文字信息改变,并且此Button控件变为不可用的状态。
具体的实现步骤如下:
1.单击【开始】|【程序】|【Microsoft Visual 】|【Microsoft Visual 】。
然后打开前面已建的项目:WebCourse,
2.在“解决方案资源管理器”窗口中,新建一个文件夹:chapter7,在此文件夹中添加一个Web窗体:
useButton.aspx。
3.在useButton.aspx 的“设计”视图中,从“工具箱”中的“web窗体”工具箱中拖一个“Label”
控件和一个“Button”控件到“设计”视图中,并适当的调整位置,如图 7.1所示。
图 7.1 useButton.aspx 的“设计”视图
4.在useButton.aspx 的“设计”视图中,选中“Button”按钮,单击右键,在弹出的快捷菜单中单
击【属性】命令,如图 7.2所示,设置Text属性值为“Click Me”。
图 7.2 设置Button的属性
5.在useButton.aspx.cs文件中,在Page_Load事件处理程序中,添加如下代码:
Label1.Text="练习使用Button控件,请单击[Click Me]按钮";
Label1.BackColor=System.Drawing.Color.AliceBlue;
6.在useButton.aspx 的“设计”视图中,双击Button按钮,则会自动打开useButton.aspx.cs文
件,这时系统已经自动添加了这个Button按钮的Click事件的处理函数,在这个Button1_Click()事件处理程序中,添加如下代码:
Label1.Text="单击按钮之后";
Label1.BackColor=System.Drawing.Color.DarkOrange;
Button1.Text="OK";
Button1.Enabled=false;
7.在“解决方案资源管理器”窗口中的文件useButton.aspx上右击,弹出快捷菜单,单击【生成并
浏览】命令,可以直接在中浏览程序运行结果,如图 7.3所示。
单击【练习】按钮之后,显示如图 7.4所示
图 7.3 useButton.aspx的运行结果
图 7.4单击【Click Me】按钮之后
7.2.3LinkButton控件
LinkButton控件是在 Web 页上显示超级链接样式的按钮控件。
LinkButton 控件的外观与HyperLink 控件相同,但功能与 Button控件相同。
如果要在单击控件时链接到另一个 Web 页,请使用 HyperLink 控件,HyperLink的使用很简单,与<A>标记相类似,但它新增了图片链接的功能。
下面通过一个实例介绍如何使用LinkButton控件,该例的功能是单击LinkButton控件时控件的外观发生变化。
程序代码均写在LinkButton控件的Click事件处理程序中。
具体实现步骤如下:
1.仍在项目WebCourse中,在chapter7文件夹中,添加一个Web窗体:useLinkButton.aspx。
2.在UseLinkButton.aspx的“设计”视图中,从“工具箱”中的“web窗体”工具箱中拖一个
“LinkButton”控件到“设计”视图中,并适当的调整位置。
将LinkButton控件的Text属性设置为“加外框线”,如图 7.5所示。
图 7.5设置LinkButton控件的Text属性
3.在UseLinkButton.aspx的“设计”视图中,双击上一步刚刚添加的这个LinkButton控件,则在
UseLinkButton.aspx.cs自动添加了此按钮的Click事件处理程序,在这个Click事件处理程序中添加程序代码如下:
if(LinkButton1.BorderStyle==System.Web.UI.WebControls.BorderStyle.Double)
{
LinkButton1.BorderStyle=System.Web.UI.WebControls.BorderStyle.None;
LinkButton1.Text="加外框线";
}
else
{
LinkButton1.BorderStyle=System.Web.UI.WebControls.BorderStyle.Double;
LinkButton1.Text="去外框线";
}
4.在Page_Load事件处理程序中,添加如下代码:
Response.Write("<center><b>改变LinkButton控件的外观</b></center>");
5.在“解决方案资源管理器”窗口中的文件UseLinkButton.aspx上右击,弹出快捷菜单,单击【生
成并浏览】命令,可以直接在中浏览程序运行结果,如图 7.6所示。
单击【加外框线】按钮,加上按钮的外框线,同时该控件显示【去外框线】,如图 7.7所示。
再次单击此按钮,去掉按钮的外框线,同时该控件显示【加外框线】。
图 7.6 UseLinkButton.aspx运行结果1
图 7.7单击【加外框线】按钮之后
7.2.4ImageButton控件
ImageButton控件与Button控件的功能相同的,单击按钮都可引发它们自己的 Click 事件,您可以编写相应的事件处理程序。
所不同的是,使用ImageButton控件的ImageUrl属性,允许您将一个图形指定为按钮。
这对于提供丰富的按钮外观非常有用。
下面通过一个实例介绍如何使用ImageButton控件,该例的功能是单击ImageButton控件时控件的外观发生变化。
程序代码均写在ImageButton控件的Click事件处理程序中。
具体实现步骤如下:
1.仍在项目WebCourse中,在chapter7文件夹中,添加一个Web窗体:useImageButton.aspx。
2.在文件夹chapter7中新建一个文件夹:images,在这个新建的文件夹上右击,弹出快捷菜单,将
光标指向【添加】,单击【添加现有项】命令,弹出“添加现有项”对话框,如图 7.8所示,到相应的文件路径下找到所要添加的文件,此例是在webPictures文件夹中,选中“NEXT.jpg”和“NEXTd.jpg”文件,单击【打开】。
这样就在文件夹images中的添加了两个图像文件。
图 7.8添加现有项对话框
3.在UseImageButton.aspx的“设计”视图中,从“工具箱”中的“web窗体”工具箱中拖一个
“ImageButton”控件到“设计”视图中,并适当的调整位置。
将ImageButton控件ImageUrl属性设置为“NEXT.jpg”。
4.在UseImageButton.aspx的“设计”视图中,双击上一步刚刚添加的这个ImageButton控件,则在
UseImageButton.aspx.cs自动添加了此按钮的Click事件处理程序,在这个Click事件处理程序中添加程序代码如下:
if(ImageButton1.ImageUrl=="images/NEXT.jpg")
{
ImageButton1.ImageUrl="images/NEXTd.jpg";
}
else
{
ImageButton1.ImageUrl="images/NEXT.jpg";
}
试一试:NEXT.jpg和NEXTd.jpg是图像文件,同学们也可以自己选择合适的图像文件代替。
5.在Page_Load事件处理程序中,添加如下代码:
Response.Write("<center><b>改变ImageButton控件的外观</b></center>");
6.在“解决方案资源管理器”窗口中的文件UseImageButton.aspx上右击,弹出快捷菜单,单击【生
成并浏览】命令,可以直接在中浏览程序运行结果,如图 7.9所示。
单击【Next】按钮,按钮被按下,如图 7.10所示,再次单击此按钮,按钮弹起。
注意:之所以能达到这个效果,其实是因为使用了两个不同的按钮图片。
图 7.9 UseImageButton.aspx运行结果1
图 7.10 UseImageButton.aspx运行结果2
7.2.5TextBox控件
TextBox 控件是让用户输入文本的输入控件。
默认情况下,TextMode 属性设置为 SingleLine,它创建只包含一行的文本框。
还可将此属性设置为 MultiLine 或 Password。
MultiLine 创建包含多个行的文本框。
Password 创建可以屏蔽用户输入的值的单行文本框。
文本框的显示宽度由其 Columns 属性确定。
如果文本框是多行文本框,则显示高度由 Rows 属性确定。
使用 Text 属性确定 TextBox 控件的内容。
通过设置 MaxLength 属性,可以限制可输入到此控件中的字符数。
将 Wrap 属性设置为 true 来指定当到达文本框的结尾时,单元格内容应自动在下一行继续。
下面通过一个实例介绍如何使用TextBox控件,该例的功能是检查登录某一个SQLServer数据库服务器的用户的合法身份。
用户提供要登录的某一个SQLServer数据库服务器的名称,用户名和密码,单击“连接数据库”按钮,然后显示提示信息。
具体实现步骤如下:
1.仍在项目WebCourse中,在chapter7文件夹中,添加一个Web窗体:useTextBox.aspx。
2.在UseTextBox.aspx的“设计”视图中,打开【表】菜单—【插入】—【表】,打开“插入表”对
话框,将“行”设置为:4,“列”设置为:2,单击【确定】。
则插入一个4行2列的表,并适当的调整位置。
3.在UseTextBox.aspx的“设计”视图中,从“工具箱”中的“web窗体”工具箱中分别拖三个
“TextBox”控件和一个“Button”控件到表的第二列的四个单元格中,并在表的第一列的前三个单元格中输入提示文本信息,在表格的下面放置一个“Label”控件,并调整大小及位置。
设置“TextBox3”的TextMode属性的值为“Password”,设置“Button1”的Text属性的值为“连接数据库”,如图 7.11所示。
图 7.11 UseTextBox.aspx的“设计”视图
4.在UseTextBox.aspx的“设计”视图中,双击上一步刚刚添加的Button控件,则在
UseTextBox.aspx.cs自动添加了此按钮的Click事件处理程序,在这个Click事件处理程序中添加程序代码如下:
Label1.Text=
"您所输入的信息是:<hr align=center>数据库服务器:"+TextBox1.Text
+"<br>用户名:"+TextBox2.Text
+"<br>密码:"+TextBox3.Text;
5.在Page_Load事件处理程序中,添加如下代码:
Label1.Text="";
Response.Write("<center><b>使用TextBox控件</b></center>");
6.在“解决方案资源管理器”窗口中的文件UseTextBox.aspx上右击,弹出快捷菜单,单击【生成并
浏览】命令,可以直接在中浏览程序运行结果,如图 7.12所示。
用户输入要连接的数据库服务器名称,以及相应的用户名和密码,单击【连接数据库】按钮,显示如图 7.13所示。
注意:因为密码框的Text属性设为“Password”,此时用户的输入值以“**”显示。
图 7.12 UseTextBox.aspx运行结果
图 7.13连接数据库成功
试一试:同学们可以通过设置“数据库服务器名称”文本框和“用户名”文本框的Text属性,来设定默认值。
7.2.6DropDownList控件
DropDownList控件是创建单一选择下拉列表控件。
通过设置 BorderColor、BorderStyle 和BorderWidth 属性可以控制 DropDownList 控件的外观。
若要指定在 DropDownList 控件中显示的项,请针对每个项在 DropDownList 控件的开始和结束标记之间放置一个 ListItem 元素。
使用 DataTextField 和 DataValueField 属性分别指定每个列表项的 Text 和 Value 属性。
另外,此控件有一个常用的重要属性——AutoPostBack属性,在Web窗体中,我们通常通过单击按钮(Button、LinkButton、ImageButton等)来驱动Click事件程序以处理Web窗体的数据,但有时候我们希望能够更及时的相应用户的输入或选择的变化,例如:当用户在一个下拉列表中选取了一项后,不用单击提交按钮就可以显示该选取项,这需要使用控件的AutoPostBack属性,以及与之紧密相关的网页的IsPostBack属性。
下面通过一个简单的例子说明如何使用DropDownList 控件。
具体实现步骤如下:
1.仍在项目WebCourse中,在文件夹chapter7中,添加一个Web窗体:useDropDownList.aspx。
2.在useDropDownList.aspx的“设计”视图中,打开【表】菜单—【插入】—【表】,打开“插入
表”对话框,将“行”设置为:3,“列”设置为:2,单击【确定】。
则插入一个3行2列的表,
并适当的调整位置。
将表的第一行中的两个单元格合并,方法是:选中这两个单元格右击,弹出快捷菜单,单击【合并单元格】命令,用同样的方法将第三行中的两个单元格合并
3.在表的前两个单元格中输入提示文本信息。
从“工具箱”中的“web窗体”工具箱中分别拖一个
“DropDownList”控件和一个“Label”控件到表的另外两个单元格中,并适当地调整位置。
选中“DropDownList”控件右击,弹出快捷菜单,单击【属性】命令,如图7.14所示,设置DropDownList 控件的AutoPostBack属性的值为“true”,然后,设置Items属性,即单击,打开ListItem集合编辑器,如图 7.15所示,添加三个列表项,单击【确定】,设计界面如图 7.16所示。
图 7.14设置DroptDownList控件的属性
图 7.15 ListItem集合编辑器
图 7.16 useDropDownList.aspx的“设计”视图
4.在UseDropDownList.aspx.cs的Page_Load()事件处理程序中,添加如下代码:
if(!IsPostBack)
{
Label1.Text="您没有选择学校!";
}
else
{
Label1.Text="您所选择的学校是:"+DropDownList1.SelectedItem.Text;
}
5.在“解决方案资源管理器”窗口中的文件UseDropDownList.aspx上右击,弹出快捷菜单,单击
【生成并浏览】命令,可以直接在中浏览程序运行结果,如图 7.17所示。
选择下拉列表中的某一项后,所选择的信息会马上显示在网页上,如图 7.18所示。
图 7.17 UseDropDownList.aspx运行结果1
图 7.18 UseDropDownList.aspx运行结果2
在Page_Load事件程序中使用的Page的IsPostBack属性。
该属性获取一个值,该值指示该页是为响应客户端回发而加载,还是被首次加载访问。
如果是为响应客户端回发而加载该页,则为 true;否则为 false。
如果在DropDownList控件中增加了AutoPostBack属性后,只要用户改变了DropDownList的选项,都会促使网页被重新加载(即执行Page_Load事件),那么在Page_Load事件程序中就必须有因为选项改变所要执行的程序,即上面的程序代码,代码将网页第一次加载和响应客户端回发而加载两种情况进行了分别处理,这是通过使用Page的IsPostBack属性来实现的。
试一试:如果将DropDownList控件AutoPostBack设为false,会是什么效果。
注意:除了DropDownList之外,在本章介绍的TextBox (文本框)控件; ListBox(列表框)控件;CheckBox(复选框)控件和CheckBoxList(复选框列表)控件;RadioButton(单选按钮)控件和RadioButtonList(单选按钮列表)控件中都可以使用AutoPostBack属性。
当用户改变控件的输入或选项时,会促使网页被重新加载。
7.2.7ListBox控件
ListBox 控件是创建允许进行单项或多项选择的列表控件。
使用 Rows 属性指定控件的高度。
若要启用多项选择,请将 SelectionMode 属性设置为 Multiple。
若要指定要在 ListBox 控件中显示的项,请针对每个项在 ListBox 控件的开始和结束标记之间放置一个 ListItem 元素。
使用 DataTextField 和 DataValueField 属性分别指定控件中每个列表项的Text 和 Value 属性。
如果 SelectionMode 属性设置为 Multiple,则通过循环访问 Items 集合并测试集合中每一项的Selected 属性来确定 ListBox 控件中的选定项。
如果 SelectionMode 属性设置为 Single,则可以使用 SelectedIndex 属性确定选定项的索引。
然后,可以使用此索引从 Items 集合中检索该项。
下面通过一个实例介绍如何使用ListBox控件,该例的功能是使用左边的ListBox 控件向用户显示预定义选项列表,单击【>>】按钮,将用户选择的项添加到右边的ListBox控件中,单击【<<】按钮,将右边的ListBox控件中用户选择的项添加到左边的ListBox控件中。
此例中ListBox控件SelectionMode 属性设置为默认的Single,这样用户一次只可以选择一项。
具体实现步骤如下:
1.仍项目WebCourse中,在文件夹chapter7中,添加一个Web窗体:useListBox.aspx。
2.在UseListBox.aspx的“设计”视图中,打开【表】菜单—【插入】—【表】,打开“插入表”对
话框,将“行”设置为:3,“列”设置为:3,“边框大小”设置为:0,单击【确定】。
则插入一个3行3列的表,并适当的调整位置。
3.在UseListBox.aspx的“设计”视图中,从“工具箱”中的“web窗体”工具箱中分别拖两个“”
控件和两个“Button”控件到表中,并输入相应的提示文本信息。
设置两个“Button”控件的Text属性分别为“>>”和“<<”。
设置左边的ListBox1控件的 Items属性,即在该控件的ListItem集合编辑器中,添加七个列表项,如图 7.19所示,单击【确定】,设计界面如图 7.20所示。
图 7.19 ListItem集合编辑器
图 7.20 UseListBox.aspx的“设计”视图
4.在UseListBox.aspx的“设计”视图中,双击上一步刚刚添加的两个Button控件,则在
UseListBox.aspx.cs自动添加了两个按钮的Click事件处理程序,在这两个Click事件处理程序中添加程序代码如下:
private void Button1_Click(object sender, System.EventArgs e)
{
//列表项不空
if(ListBox1.Items.Count!=0 )
{
//保证列表框中有被选中的项
if(ListBox1.SelectedIndex>-1)
{
ListBox2.Items.Add(ListBox1.SelectedItem);
ListBox1.Items.Remove(ListBox1.SelectedItem);
ListBox2.ClearSelection();
}
else
{
Response.Write("<script language='javascript'> alert('你没有选中左边的列表项!
')</script>");
}
}
}
private void Button2_Click(object sender, System.EventArgs e)
{
if(ListBox2.Items.Count!=0 )
{
if(ListBox2.SelectedIndex>-1)
{
ListBox1.Items.Add(ListBox2.SelectedItem);
ListBox2.Items.Remove(ListBox2.SelectedItem);
ListBox1.ClearSelection();
}
else
{
Response.Write("<script language='javascript'> alert('你没有选中右边的列表项!
')</script>");
}
}
}
5.生成并浏览UseListBox.aspx,单击【>>】或【<<】按钮,可以在两个列表框之间互换数据,运行
结果如图 7.21所示。
图 7.21 UseListBox.aspx运行结果
7.2.8CheckBox控件和CheckBoxList控件
CheckBox 控件在“Web 窗体”页上创建复选框,该复选框允许用户在 true 或 false 状态之间切换。
通过设置 Text 属性可以指定要在控件中显示的标题。
标题可显示在复选框的右侧或左侧。
设置TextAlign 属性以指定标题显示在哪一侧。
若要确定是否已选中 CheckBox 控件,请测试 Checked 属性。
当 CheckBox 控件的状态在向服务器的各次发送过程间更改时,将引发 CheckedChanged 事件。
可以为 CheckedChanged 事件提供事件处理程序,以便当 CheckBox 控件的状态在向服务器的各次发送过程间更改时执行特定的任务。
默认情况下,CheckBox 控件在被单击时不会自动向服务器发送窗体。
若要启用自动发送,请将AutoPostBack 属性设置为 true。
当创建多个CheckBox 控件时,还可以使用CheckBoxList 控件。
CheckBoxList 控件的RepeatDirection属性用于设置控件是垂直(Vertical)显示还是水平(Horizontal)显示,RepeatColumns属性用于设置要在 CheckBoxList 控件中显示的列数。
下面通过一个实例介绍如何使用CheckBox 控件和CheckBoxList 控件。
具体实现步骤如下:
1.仍项目WebCourse中,在文件夹chapter7中,添加一个Web窗体:useCheckBox.aspx。
2.在UseCheckBox.aspx的“设计”视图中,打开【表】菜单—【插入】—【表】,打开“插入表”
对话框,将“行”设置为:3,“列”设置为:2,“边框大小”设置为:0,单击【确定】。
则插入一个3行2列的表,并适当的调整位置。
3.在UseCheckBox.aspx的“设计”视图中,从“工具箱”中的“web窗体”工具箱中分别拖三个
“CheckBox”控件和一个“CheckBoxList”控件到表中,并输入相应的提示文本信息。
在表的下面放置一个“Button”控件和一个“Label”控件。
设置三个“CheckBox”控件、一个“Button”控件和一个“Label”控件的Text属性分别为“东部”,“中部”,“西部”,“提交”和“”。
设置“CheckBoxList”控件的 Items属性,即在该控件的ListItem集合编辑器中,添加十二个列表项,如图 7.22所示,单击【确定】,并设置“CheckBoxList”控件的RepeatDirection属性为“Horizontal”,RepeatColumns属性为“4”。
设计界面如图 7.23所示。
图 7.22 ListItem集合编辑器
图 7.23 UseCheckBox.aspx的“设计”视图
4.在UseCheckBox.aspx的“设计”视图中,双击上一步刚刚添加的Button控件,则在
UseCheckBox.aspx.cs自动添加了此按钮的Click事件处理程序,在这个Click事件处理程序中添加程序代码如下:
string ss="您关注的地区是:";
if(CheckBox1.Checked==true)
{
ss+=CheckBox1.Text;
}
if(CheckBox2.Checked==true)
{
ss+=" "+CheckBox2.Text;
}
if(CheckBox3.Checked==true)
{
ss+=" "+CheckBox3.Text;
}
ss+="。
<br>您关注的方向是:";
for(int i=0;i<CheckBoxList1.Items.Count;i++)
{
if(CheckBoxList1.Items[i].Selected==true)
{
ss+=CheckBoxList1.Items[i].Value+" ";
}
}
Label1.Text=ss;
5.生成并浏览UseCheckBox.aspx,运行结果如图 7.24所示。
用户选择相应的项后,单击【提交】按
钮,显示相应的信息,如图 7.25所示。
图 7.24 UseCheckBox.aspx运行结果1
图 7.25 UseCheckBox.aspx运行结果2
7.2.9RadioButton控件和RadioButtonList控件
RadioButton 控件在“Web 窗体”页上创建一个单选按钮。
通过设置 Text 属性指定要在控件中显示的文本。
该文本可显示在单选按钮的左侧或右侧。
设置 TextAlign 属性来控制该文本显示在哪一侧。
如果为每一个 RadioButton 控件指定了相同的 GroupName,则可以将多个单选按钮分为一组。
将单选按钮分为一组将只允许从该组中进行互相排斥的选择。
若要确定 RadioButton 控件是否已选中,请测试 Checked 属性。
当创建多个单选按钮时,还可以使用 RadioButtonList 控件。
下面通过一个实例介绍如何使用RadioButton 控件和RadioButtonList 控件。
具体实现步骤如下:
1.仍项目WebCourse中,在文件夹chapter7中,添加一个Web窗体:useRadioButton.aspx。
2.在UseRadioButton.aspx的“设计”视图中,打开【表】菜单—【插入】—【表】,打开“插入表”
对话框,将“行”设置为:3,“列”设置为:2,“边框大小”设置为:0,单击【确定】。
则插入一个3行2列的表,并适当调整位置。
3.在UseRadioButton.aspx的“设计”视图中,从“工具箱”中的“web窗体”工具箱中分别拖两个
“RadioButton”控件和一个“RadioButton List”控件到表中,并输入相应的提示文本信息。
在表的下面放置一个“Button”控件和一个“Label”控件。
设置两个“RadioButton”控件的Text属性分别为“男”,“女”,“GroupName”都为:RadioGroup1,Radio1的Check属性设为“true”。
“Button”控件和“Label”控件的Text属性分别为“提交”和“”。
设置“RadioButton List”控件的 Items属性,即在该控件的ListItem集合编辑器中,添加五个列表项,如图 7.26所示,单击【确定】,并设置“RadioButton List”控件的RepeatDirection 属性为“Horizontal”,RepeatColumns属性为“3”。
设计界面如图 7.27所示
图 7.26 ListItem集合编辑器
图 7.27 UseRadioButton.aspx的“设计”视图
4.在UseRadioButton.aspx的“设计”视图中,双击上一步刚刚添加的Button控件,则在
UseRadioButton.aspx.cs自动添加了此按钮的Click事件处理程序,在这个Click事件处理程序中添加程序代码如下:
string ss="性别:";
if(RadioButton1.Checked==true)
{
ss+=RadioButton1.Text;
}
if(RadioButton2.Checked==true)
{
ss+=RadioButton2.Text;
}
ss+=";学历:";
if(RadioButtonList1.SelectedIndex>-1)
{
ss+=RadioButtonList1.SelectedItem.Text;
}
Label1.Text=ss;
5.生成并浏览Ex05_04_05aspx,运行结果如图 7.28所示。
用户选择相应的项后,单击“提交”按钮,
显示相应的信息,如图 7.29所示。
图 7.28 UseRadioButton.aspx运行结果1
图 7.29 UseRadioButton.aspx运行结果2
7.2.10Panel 控件
Panel 控件是其他控件的容器。
如果打算以编程方式生成多个控件或者打算隐藏/显示一组控件,此控件尤其有用。
下面通过一个实例介绍如何使用Panel 控件,该例模仿Word中的查找对话框。
具体实现步骤如下:
1.仍在项目webCourse中,在文件夹chapter7中,添加一个Web窗体:usePanel.aspx。
2.按图 7.30所示,设计用户界面,并按表 7.1所示,设置控件的属性。
图 7.30 设计usePanel.aspx的用户界面
表 7.1设置usePanel.aspx的控件属性
控件ID 设置控件的属性
Panel1 BackImageUrl="images/bk.JPG"
BorderStyle="Double"
Panel2 BackImageUrl="images/bk.JPG"
BorderStyle="Double"
Visible="False"
Tabel1 align="center" border="0"
Tabel2 align="center" border="0"
TextBox1
Button1 Text="高级↓"
Button2 Text="查找下一处"
Button3 Text=" 取消"
DropDownList1 <asp:ListItem Value="全部">全部</asp:ListItem>
<asp:ListItem Value="向上">向上</asp:ListItem>
<asp:ListItem Value="向下">向下</asp:ListItem>
CheckBox1 Text="区分大小写"
CheckBox2 Text="全字匹配"
CheckBox3 Text="使用通配符"
CheckBox4 Text="同音"
3.在usePanel.aspx的“设计”视图中,双击【高级↓】这个Button控件,则在usePanel.aspx.cs
自动添加了按钮(Button1)的Click事件处理程序,在这个Click事件处理程序中添加程序代码如下:
if(Panel2.Visible==false)
{
Panel2.Visible=true;
Button1.Text="常规↑";
}
else
{
Panel2.Visible=false;
Button1.Text="高级↓";
}
4.生成并浏览usePanel.aspx,如图 7.31所示。
单击【高级↓】按钮后,会显示下面的一组控件,
同时按钮的显示变为【常规↑】,如图 7.32所示。
单击【常规↑】按钮后,又会隐藏下面的一组控件。
图 7.31 usePanel.aspx的运行结果1
图 7.32 usePanel.aspx的运行结果2
7.3 数据验证控件
本节主要介绍数据验证控件的使用方法。
首先对数据验证机制作了一个简单的介绍,然后详细介绍了六大类数据验证控件的使用方法。
7.3.1数据验证机制介绍
数据验证服务器控件可以提供易用但功能强大的方法检查输入窗体中的错误,并在必要时向用户显示消息。
验证控件像其他服务器控件一样添加到 Web 窗体页。
有不同的控件用于特定的验证类型,如范围检查或模式匹配,以及确保用户不跳过输入字段的 RequiredFieldValidator等。
可以将多个验证控件附加到一个输入控件。
例如,可以既指定需要输入,又指定输入必须包含特定范围的值。
表 7.2列出了所有的验证控件。
接下来将分别详细介绍这些控件的使用方法。
表 7.2验证控件的类型
控件名称说明
确保用户不跳过输入。
RequiredFieldValidator
CompareValidator使用比较运算符(小于、等于、大于等)将用户的。