1、7ASPNET Web 服务器控件第7章 ASP.NET Web服务器控件7.1 ASP.NET服务器控件简介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 Req
2、uiredFieldValidator控件7.3.3 CompareValidator控件7.3.4 RangeValidator 控件7.3.5 RegularExpressionValidator控件7.3.6 CustomValidator 控件7.3.7 ValidationSummary控件第7章 ASP.NET Web服务器控件7.1 ASP.NET服务器控件简介创建 Web 窗体页时，可以使用以下控件类型： HTML 服务器控件 HTML 服务器控件以HTML标记为基础而衍生出来的服务器控件，HTML 服务器控件比HTML标记多了两个属性，一个是“ runat=server ”，
3、一个是“ id=控件名称 ”。这两个属性的作用是控件可以在服务器端作为一个对象使用。默认情况下，服务器无法使用 Web 窗体页上的 HTML 元素，但是，通过将 HTML 元素转换为 HTML 服务器控件，可将其公开为可在服务器上编程的元素。如果要将ASP网页改写为ASP.NET网页，可以通过在原来的HTML标记中增加这两个属性，从而很容易的完成转换工作。 Web 服务器控件HTML 服务器控件只是使编程更简便，在功能上并没有超越HTML标记。而Web 服务器控件则是为了超越HTML标记而诞生的，Web 服务器控件比 HTML 服务器控件具有更多内置功能。Web 服务器控件不只包括一般的窗体类
4、型的控件，例如按钮和文本框，而且还包括特殊用途的控件，例如日历，另外还新增了数据验证控件和数据访问控件。控件新增的功能以及新增的控件不仅增强了ASP.NET的功能，同时将以往由开发人员完成的许多繁琐重复的工作都交给控件去完成了。 用户控件 虽然 ASP.NET提供了大量的服务器控件，但它们并不能涵盖每一种情况。根据应用程序的需要用户可以自定义控件。定义用户控件所使用的编程技术与用于编写 Web 窗体页的技术相同，用户控件用文件扩展名 .ascx 来进行标识。 本章主要介绍Web 服务器控件中的一般的窗体类型的控件（我们将这种类型的控件称为基本Web服务器控件）和数据验证控件，数据访问控件的使用
5、将在第9章详细介绍。7.2 基本Web服务器控件本节主要介绍如何使用基本Web服务器控件，基本Web服务器控件主要包括: 可提供显示文本功能的Label控件； 可提供提交或链接功能的三种类型的按钮控件：标准命令按钮（Button 控件）、图形化按钮（ImageButton 控件）和超级链接样式按钮（LinkButton 控件）； 可提供输入或选择功能的控件：TextBox （文本框）控件、DropDownList（下拉列表）控件、ListBox（列表框）控件、CheckBox（复选框）控件和CheckBoxList（复选框列表）控件；RadioButton（单选按钮）控件和RadioButto
6、nList（单选按钮列表）控件； 可作为其他控件的容器的Panel 控件。7.2.1 Label控件Label控件是web服务器控件中最简单的一个控件，用来在 Web 页上显示文本。它的最常用的属性是Text属性，通过设置Text属性可以自定义显示文本。我们前面6.3.1节的HelloBehindVS.aspx中已经使用过。声明Label控件的语法如下：初始显示的文本可以使用此 id 引用以编程方式在运行时操作服务器控件的对象模型，例如，在Page_Load事件处理程序中添加如下代码：Message.Text = 您好7.2.2 Button控件Web 服务器控件包括三种类型的按钮：标准命令按
7、钮（Button 控件）、图形化按钮（ImageButton 控件）和超级链接样式按钮（LinkButton 控件）。这三种按钮都可提供提交或链接功能，但具有不同的外观。当用户单击时，所有三种类型的按钮都会使窗体被提交给服务器。这使得在基于服务器的代码中，页面被处理，任何挂起的事件被引发。这些按钮还可引发它们自己的 Click 事件，您可以为这些事件编写事件处理程序。本节首先介绍如何使用标准命令按钮Button 控件。使用 Button 控件可以在 Web 页上创建普通按钮。下面通过一个实例介绍如何使用Button控件，该例的功能是单击Button控件时，Label控件显示的文字信息以及背景颜
8、色会发生变化，同时Button控件显示的文字信息改变，并且此Button控件变为不可用的状态。具体的实现步骤如下：1. 单击【开始】|【程序】|【Microsoft Visual Studio.NET】|【Microsoft Visual Studio.NET】。然后打开前面已建的项目：WebCourse， 2. 在“解决方案资源管理器”窗口中，新建一个文件夹：chapter7，在此文件夹中添加一个Web窗体：useButton.aspx。3. 在useButton.aspx 的“设计”视图中，从“工具箱”中的“web窗体”工具箱中拖一个“Label”控件和一个“Button”控件到“设计”视
9、图中，并适当的调整位置，如图 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.
10、 在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上右击，弹出快捷菜单，单击【生成并浏览】命令，可以
11、直接在VS.NET中浏览程序运行结果，如图 7.3所示。单击【练习】按钮之后，显示如图 7.4所示图 7.3 useButton.aspx的运行结果图 7.4单击【Click Me】按钮之后7.2.3 LinkButton控件LinkButton控件是在 Web 页上显示超级链接样式的按钮控件。 LinkButton 控件的外观与 HyperLink 控件相同，但功能与 Button控件相同。如果要在单击控件时链接到另一个 Web 页，请使用 HyperLink 控件，HyperLink的使用很简单，与标记相类似，但它新增了图片链接的功能。下面通过一个实例介绍如何使用LinkButton控件，
12、该例的功能是单击LinkButton控件时控件的外观发生变化。程序代码均写在LinkButton控件的Click事件处理程序中。 具体实现步骤如下：1. 仍在项目WebCourse中，在chapter7文件夹中，添加一个Web窗体：useLinkButton.aspx。2. 在UseLinkButton.aspx的“设计”视图中，从“工具箱”中的“web窗体”工具箱中拖一个“LinkButton”控件到“设计”视图中，并适当的调整位置。将LinkButton控件的Text属性设置为“加外框线”，如图 7.5所示。 图 7.5设置LinkButton控件的Text属性3. 在UseLinkBut
13、ton.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.BorderSty
14、le=System.Web.UI.WebControls.BorderStyle.Double; LinkButton1.Text=去外框线;4. 在Page_Load事件处理程序中，添加如下代码：Response.Write(改变LinkButton控件的外观); 5. 在“解决方案资源管理器”窗口中的文件UseLinkButton.aspx上右击，弹出快捷菜单，单击【生成并浏览】命令，可以直接在VS.NET中浏览程序运行结果，如图 7.6所示。单击【加外框线】按钮，加上按钮的外框线，同时该控件显示【去外框线】，如图 7.7所示。再次单击此按钮，去掉按钮的外框线，同时该控件显示【加外框线】。
15、图 7.6 UseLinkButton.aspx运行结果1图 7.7单击【加外框线】按钮之后7.2.4 ImageButton控件ImageButton控件与Button控件的功能相同的，单击按钮都可引发它们自己的 Click 事件，您可以编写相应的事件处理程序。所不同的是，使用ImageButton控件的ImageUrl属性，允许您将一个图形指定为按钮。这对于提供丰富的按钮外观非常有用。下面通过一个实例介绍如何使用ImageButton控件，该例的功能是单击ImageButton控件时控件的外观发生变化。程序代码均写在ImageButton控件的Click事件处理程序中。具体实现步骤如下：1
16、. 仍在项目WebCourse中，在chapter7文件夹中，添加一个Web窗体：useImageButton.aspx。2. 在文件夹chapter7中新建一个文件夹：images，在这个新建的文件夹上右击，弹出快捷菜单，将光标指向【添加】，单击【添加现有项】命令，弹出“添加现有项”对话框，如图 7.8所示，到相应的文件路径下找到所要添加的文件，此例是在webPictures文件夹中，选中“NEXT.jpg”和“NEXTd.jpg”文件，单击【打开】。这样就在文件夹images中的添加了两个图像文件。图 7.8添加现有项对话框3. 在UseImageButton.aspx的“设计”视图中，从
17、“工具箱”中的“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;
18、 else ImageButton1.ImageUrl=images/NEXT.jpg; 试一试：NEXT.jpg和NEXTd.jpg是图像文件，同学们也可以自己选择合适的图像文件代替。5. 在Page_Load事件处理程序中，添加如下代码：Response.Write(改变ImageButton控件的外观); 6. 在“解决方案资源管理器”窗口中的文件UseImageButton.aspx上右击，弹出快捷菜单，单击【生成并浏览】命令，可以直接在VS.NET中浏览程序运行结果，如图 7.9所示。单击【Next】按钮，按钮被按下，如图 7.10所示，再次单击此按钮，按钮弹起。注意：之所以能达到这
19、个效果，其实是因为使用了两个不同的按钮图片。图 7.9 UseImageButton.aspx运行结果1图 7.10 UseImageButton.aspx运行结果27.2.5 TextBox控件TextBox 控件是让用户输入文本的输入控件。默认情况下，TextMode 属性设置为 SingleLine，它创建只包含一行的文本框。还可将此属性设置为 MultiLine 或 Password。MultiLine 创建包含多个行的文本框。Password 创建可以屏蔽用户输入的值的单行文本框。文本框的显示宽度由其 Columns 属性确定。如果文本框是多行文本框，则显示高度由 Rows 属性确定
20、。使用 Text 属性确定 TextBox 控件的内容。通过设置 MaxLength 属性，可以限制可输入到此控件中的字符数。将 Wrap 属性设置为 true 来指定当到达文本框的结尾时，单元格内容应自动在下一行继续。下面通过一个实例介绍如何使用TextBox控件，该例的功能是检查登录某一个SQLServer数据库服务器的用户的合法身份。用户提供要登录的某一个SQLServer数据库服务器的名称，用户名和密码，单击“连接数据库”按钮，然后显示提示信息。具体实现步骤如下：1. 仍在项目WebCourse中，在chapter7文件夹中，添加一个Web窗体：useTextBox.aspx。2. 在
21、UseTextBox.aspx的“设计”视图中，打开【表】菜单【插入】【表】，打开“插入表”对话框，将“行”设置为：4，“列”设置为：2，单击【确定】。则插入一个4行2列的表，并适当的调整位置。3. 在UseTextBox.aspx的“设计”视图中，从“工具箱”中的“web窗体”工具箱中分别拖三个“TextBox”控件和一个“Button”控件到表的第二列的四个单元格中，并在表的第一列的前三个单元格中输入提示文本信息，在表格的下面放置一个“Label”控件,并调整大小及位置。设置“TextBox3”的TextMode属性的值为“Password”，设置“Button1”的Text属性的值为“连
22、接数据库”，如图 7.11所示。图 7.11 UseTextBox.aspx的“设计”视图4. 在UseTextBox.aspx的“设计”视图中，双击上一步刚刚添加的Button控件，则在UseTextBox.aspx.cs自动添加了此按钮的Click事件处理程序，在这个Click事件处理程序中添加程序代码如下：Label1.Text= 您所输入的信息是：数据库服务器：+TextBox1.Text +用户名：+TextBox2.Text+密码：+TextBox3.Text;5. 在Page_Load事件处理程序中，添加如下代码：Label1.Text=; Response.Write(使用Te
23、xtBox控件); 6. 在“解决方案资源管理器”窗口中的文件UseTextBox.aspx上右击，弹出快捷菜单，单击【生成并浏览】命令，可以直接在VS.NET中浏览程序运行结果，如图 7.12所示。用户输入要连接的数据库服务器名称，以及相应的用户名和密码，单击【连接数据库】按钮，显示如图 7.13所示。注意：因为密码框的Text属性设为“Password”，此时用户的输入值以“*”显示。图 7.12 UseTextBox.aspx运行结果图 7.13连接数据库成功试一试：同学们可以通过设置“数据库服务器名称”文本框和“用户名”文本框的Text属性，来设定默认值。7.2.6 DropDownL
24、ist控件DropDownList控件是创建单一选择下拉列表控件。通过设置 BorderColor、BorderStyle 和 BorderWidth 属性可以控制 DropDownList 控件的外观。若要指定在 DropDownList 控件中显示的项，请针对每个项在 DropDownList 控件的开始和结束标记之间放置一个 ListItem 元素。使用 DataTextField 和 DataValueField 属性分别指定每个列表项的 Text 和 Value 属性。另外，此控件有一个常用的重要属性AutoPostBack属性，在Web窗体中，我们通常通过单击按钮（Button、L
25、inkButton、ImageButton等）来驱动Click事件程序以处理Web窗体的数据，但有时候我们希望能够更及时的相应用户的输入或选择的变化，例如：当用户在一个下拉列表中选取了一项后，不用单击提交按钮就可以显示该选取项，这需要使用控件的AutoPostBack属性，以及与之紧密相关的网页的IsPostBack属性。下面通过一个简单的例子说明如何使用DropDownList 控件。具体实现步骤如下：1. 仍在项目WebCourse中，在文件夹chapter7中，添加一个Web窗体：useDropDownList.aspx。2. 在useDropDownList.aspx的“设计”视图中，
26、打开【表】菜单【插入】【表】，打开“插入表”对话框，将“行”设置为：3，“列”设置为：2，单击【确定】。则插入一个3行2列的表，并适当的调整位置。将表的第一行中的两个单元格合并，方法是：选中这两个单元格右击，弹出快捷菜单，单击【合并单元格】命令，用同样的方法将第三行中的两个单元格合并3. 在表的前两个单元格中输入提示文本信息。从“工具箱”中的“web窗体”工具箱中分别拖一个“DropDownList”控件和一个“Label”控件到表的另外两个单元格中，并适当地调整位置。选中“DropDownList”控件右击，弹出快捷菜单，单击【属性】命令，如图 7.14所示，设置DropDownList 控
27、件的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=您所选择的学校是：+Dro
28、pDownList1.SelectedItem.Text; 5. 在“解决方案资源管理器”窗口中的文件UseDropDownList.aspx上右击，弹出快捷菜单，单击【生成并浏览】命令，可以直接在VS.NET中浏览程序运行结果，如图 7.17所示。选择下拉列表中的某一项后，所选择的信息会马上显示在网页上，如图 7.18所示。图 7.17 UseDropDownList.aspx运行结果1图 7.18 UseDropDownList.aspx运行结果2在Page_Load事件程序中使用的Page的IsPostBack属性。该属性获取一个值，该值指示该页是为响应客户端回发而加载，还是被首次加载访
29、问。如果是为响应客户端回发而加载该页，则为 true；否则为 false。如果在DropDownList控件中增加了AutoPostBack属性后，只要用户改变了DropDownList的选项，都会促使网页被重新加载（即执行Page_Load事件），那么在Page_Load事件程序中就必须有因为选项改变所要执行的程序，即上面的程序代码，代码将网页第一次加载和响应客户端回发而加载两种情况进行了分别处理，这是通过使用Page的IsPostBack属性来实现的。试一试：如果将DropDownList控件AutoPostBack设为false，会是什么效果。注意：除了DropDownList之外，在本
30、章介绍的TextBox （文本框）控件； ListBox（列表框）控件；CheckBox（复选框）控件和CheckBoxList（复选框列表）控件；RadioButton（单选按钮）控件和RadioButtonList（单选按钮列表）控件中都可以使用AutoPostBack属性。当用户改变控件的输入或选项时，会促使网页被重新加载。7.2.7 ListBox控件ListBox 控件是创建允许进行单项或多项选择的列表控件。使用 Rows 属性指定控件的高度。若要启用多项选择，请将 SelectionMode 属性设置为 Multiple。若要指定要在 ListBox 控件中显示的项，请针对每个项在
31、 ListBox 控件的开始和结束标记之间放置一个 ListItem 元素。使用 DataTextField 和 DataValueField 属性分别指定控件中每个列表项的 Text 和 Value 属性。如果 SelectionMode 属性设置为 Multiple，则通过循环访问 Items 集合并测试集合中每一项的 Selected 属性来确定 ListBox 控件中的选定项。如果 SelectionMode 属性设置为 Single，则可以使用 SelectedIndex 属性确定选定项的索引。然后，可以使用此索引从 Items 集合中检索该项。下面通过一个实例介绍如何使用ListBox控件，该例的功能是使用左边的ListBox 控件向用户显示预定义选项列表，单击【】按钮，
