1、第4章 HTML控件和Web服务器控件,本章讲述的主要内容4.1 ASP.NET控件概述4.2 标准服务器端控件4.3 数据验证控件4.4 用户自定义控件,4.1 基本的Web控件,ASP.NET提供的Web控件提供了丰富功能,可以使程序的开发变得更加简单和丰富。 Web控件中包括传统的表单控件,如TextBox和Button,以及其它更高抽象级别的控件,如Calendar和DataGrid控件。它们提供了一些能够简化开发工作的特性: 1. 丰富而一致的对象模型 。 2. 对浏览器的自动检测 。 3. 数据绑定 。 4. 支持主题 。,4.1 基本的Web控件,ASP.NET提供了与HTML元
2、素相对应的基本Web控件,下表列举了ASP.NET提供的基本的Web控件。,4.1 服务器控件,ASP.NET服务器控件主要分为以下三种类型:HTML服务器控件Web服务器控件标准服务器控件验证控件导航控件数据控件登录控件等。用户自定义服务器控件,4.1.1 服务器控件的分类,4.1 服务器控件,HTML服务器控件,4.1.1 服务器控件的分类,HTML服务器控件类是在命名空间Syetem.Web.UI.HtmlControls中定义的。HTML服务器控件的语法格式如下:例如,如下输入密码的文本框控件: ,4.1 ASP.NET控件概述,HTML控件HTML控件在默认情况下属于客户端(浏览器)
3、控件,服务器无法对其进行控制。HTML控件是从HTML标记衍生而来的,每个控件对应于一个或一组HTML标记。例如,前面我们经常使用的HTML表格控件,就是一个常用于页面布局工具的HTML控件,如果不使用工具箱中的控件,而直接在源视图中书写相应的HTML代码也可以得到相同的效果,但使用控件可以节省大量的代码书写时间,且使操作变成了可视化的方式。HTML控件可以通过修改代码将其变成Web服务器端控件,几乎所有的HTML标记只要加上runat = “server“,这个服务器控件标识属性后都可以变成服务器端控件。这与普通HTML标记相比最大的区别在于,服务器端控件可以通过服务器端代码来控制。,4.1
4、 ASP.NET控件概述,服务器端控件1. 服务器端控件的执行过程当用户请求一个包含有Web服务器端控件的.aspx页面时,服务器首先对页面进行处理,将页面中包含的服务端控件及其他内容解释成标准的HTML代码,然后将处理结果以标准HTML的形式一次性发送给客户端。2. ASP.NET页面的处理过程当用户通过浏览器发出一个对ASP.NET页面的请求后,Web服务器将用户的请求交由ASP.NET引擎来处理。系统首先会检查在服务器缓存中是否有该页面,或此页面是否已被编译成了.dll文件(Dynamic Link Library,动态链接库)。若没有则将页面转换为源程序代码,然后由编译器将其编译成.d
5、ll文件,否则直接利用已编译过的.dll文件建立对象,并将执行结果返回到客户端浏览器。,4.1 服务器控件,Web服务器控件,4.1.2 服务器控件的分类,Web服务器控件类定义在Syetem.Web.UI.WebControls命名空间中。 Web服务器控件的语法格式如下:或,4.1 基本的Web控件,在ASP.NET中,Web控件是使用相应的标记来编写控件的。Web控件的标记有特定的格式:以结束,在其间可以设置各种属性。例如,这里定义了一个TextBox控件:当客户端请求该控件所在.aspx页面时,服务器就会把下面的代码送到客户端:使用Web控件,使得程序员不用详细了解HTML元素就可以设
6、计页面。在Visual Studio中,程序员可以把Web控件拖拽到页面上来设计页面。,4.1 基本的Web控件,Web控件可分为两部分: 1. Web控件:用来组成与用户进行交互的页面。这 类控件包括常用的按钮控件、文本框控件、标签控 件等,还有验证用户输入的控件,以及日历控件等。 2.数据绑定控件,用来实现数据的绑定和显示。这 类控件包括广告控件、表格控件等,还有用于导航 的菜单控件和树型控件。,4.1服务器控件,用户自定义服务器控件,4.1.3 服务器控件的分类,自定义控件被定义在命名空间System.Web.UI.Control或Syetem.Web.UI.WebControls中,是
7、编程人员自行设计和开发的控件。它存放在扩展名为.ascx的文件中,使用时只须将它们集成进ASP.NET应用程序中。通过这个方法,用户不仅可以使用自己定义的控件,还可以很方便地使用第三方提供的现成控件,如图表工具和树形图等,且大部分控件都可以在网上免费下载,这为广大程序开发者高效、快速的地开发Web程序提供了方便。,4.1服务器控件,Web服务器控件的共有属性,4.1.4 Web服务器控件的属性、事件和方法,4.1 服务器控件,Web服务器控件的方法,4.1.5 Web服务器控件的属性、事件和方法,4.1 服务器控件,Web服务器控件事件和事件过程,4.1.6Web服务器控件的属性、事件和方法,
8、Web服务器控件事件是使某个控件进入活动状态的一种操作或动作。例如,按下某个键、单击一下鼠标等都可触发一个控件事件。在例7-1中,单击“登录”和“取消”按钮都会触发Button控件的鼠标单击事件。事件发生以后,如果有相应的事件处理过程,就会完成过程所要求的功能。如“取消”按钮的单击事件过程,将“用户名”输入框和“密码”输入框的内容清空,并将光标定位到“用户名”输入框上。,4.2 标准服务器端控件,4.2.1 ImageButton和HyperLink控件ImageButton(图像按钮)、Image(图像)和HyperLink(超链接)控件都可以在控件中显示图片,且都具有超链接跳转的功能。1.
9、 ImageButton控件,4.2 标准服务器端控件,4.2.1 ImageButton和HyperLink控件2. HyperLink控件双击HyperLink(超链接)控件在工具箱中的图标,可将控件添加到当前页面光标所在位置。HyperLink控件与标签控件很相似,但该控件支持用户的单击事件,可以在控件中显示图片,可以指定超链接的目标框架等特有属性。,4.2 标准服务器端控件,4.2.2 Image和ImageMap控件Image控件和ImageMap控件都是用于图片显示的控件。1. Image控件,4.2 标准服务器端控件,4.2.2 Image和ImageMap控件2. ImageM
10、ap控件利用ImageMap控件可以创建一个图像,该图像包含任意数目的,用户可以单击的区域,这些区域称为“作用点”。每一个作用点都可以是一个单独的超链接或回发事件。ImageMap控件与其他网页编辑工具(如Dreamware)提供的“热点地图”功能类似。 ImageMap控件主要由以下两个部分组成:1) 显示于控件中的图像。它可是任何标准Web图形格式的图形,如*.gif、*.jpg 或*.png文件,该图像构成用户操作界面。2) 隐藏在图像中的作用点集合。每个作用点控件都是一个不同的Web元素。对于每个作用点控件,需要定义其形状(圆形、矩形或多边形)以及用于指定作用点位置和大小的坐标。例如,
11、如果创建一个圆形作用点,则应定义圆心的x、y坐标及圆的半径。,使用Image控件、ImageButton控件、HyperLink控件和ImageMap控件制作一个ASP.NET网站 ImageAndHyper.aspx,4.2 标准服务器端控件,4.2.3 RadioButton和RadioButtonList控件1. 单选按钮控件(RadioButton),4.2 标准服务器端控件,4.2.3 RadioButton和RadioButtonList控件2. 单选按钮组控件(RadioButtonList),一个实例 Groupname DataSource DataTable的用法 IsPo
12、stBack和page_load AutoPostback属性和SelectedIndexChanged,4.2 标准服务器端控件,4.2.4 CheckBox和CheckList控件CheckBox(复选框)与CheckList(复选框组)控件的作用十分相似,都是用于向用户提供多选输入数据的控件。用户可以在控件提供的多个选项中选择一个或多个。被选中的对象中带有一个“”标记,CheckBox和CheckList控件的外观如图6-15所示。,联合循环语句讲解,4.2 标准服务器端控件,4.2.5 ListBox和DropDownList控件ListBox(列表框)和DropDownList(下拉
13、列表框)控件也是一种常见的用于向用户提供输入数据选项的控件,其外观如图6-15和图6-16所示。,参看RadioButtonList的例子,4.2 标准服务器端控件,4.2.8 容器控件所谓“容器”控件是指可以安放其他控件的控件。ASP.NET 2.0提供有两种容器控件,PlaceHolder和Panel控件。PlaceHolder控件用于在Web页面上保留一个位置,以便在程序运行时向其中动态地添加其他控件,这对动态网页的布局设计是十分有利的。Panel控件对应于HTML的标记,其作用与PlaceHolder控件相似,可以将放置在其中的一组控件作为一个整体来操作。最常用的是通过设置Panel的
14、Visible属性来控制这一组控件的显示或隐藏。,4.2 标准服务器端控件,4.2.7 Table控件前面介绍过在Web页面中用于页面布局的HTML表格控件,那是一种用于静态环境的布局工具。在工具箱“标准”选项卡中也有一个Table控件,其图标为 。这是一个Web服务器端控件,使用该控件可更易于编程,用户可通过程序代码方便地控制表格中显示的内容及表格的行、列数。Tabel控件除了具有HTML表格的一般属性,如BackImageUrl(背景图片)、BackColor(背景颜色)、BorderStyle(边框样式)、BorderColor(背景颜色)、CellPadding(单元格内间距)、Cel
15、lSpacing(单元格之间距离)、GridLines(单元格框线)、Width(宽)、Height(高)等,还具有两个关键的子对象TableRow和TableCell,前者用于创建和设置表格中的行,后者用于创建和设置表格中的列。通常可以通过TableCell对象的Text属性从单元格读取,或向其中写入数据。 例6-4 TableDynamic.aspx,【例6-5】Placeholder.aspx 联合placeholder和Table,4.2 标准服务器端控件,4.2.6 FileUpload控件 文件上传(FileUpload)控件,顾名思义是用于将文件从本地计算机上传到远程Web服务器
16、的控件,使用该控件可替代ASP程序中常用FSO(文件系统对象),且FileUpload控件具有更高的效率和安全性。FileUpload控件在工具箱的图标为 。如图6-21所示,从外观上看FileUpload控件有一个文本框和一个【浏览】按钮控件组成,用户可直接在文本框中输入希望上传的文件名(包括文件存放路径)。若用户在Web页面中单击控件的【浏览】按钮时,系统将自动弹出一个“选择文件”对话框(类似与Windows的“打开”对话框),通过该对话框用户可根据需要选择希望上传到远程Web服务器的文件。出于安全方面的考虑,不能将文件名预先加载到FileUpload控件中。 参见FileUploadPa
17、ge.aspx,4.2 标准服务器端控件,4.2.9 Calendar控件1. Calendar控件的常用属性2. Calendar控件的主要事件3. Calendar控件应用实例【例6-6】,4.2 标准服务器端控件,4.2.10 AdRotator控件AdRotator(广告)控件,可配合XML说明文件,在页面中产生一个可动态显示图片的广告展现框。若将鼠标指针指向图片,可显示出预设的广告词,单击图片可导航到预设的URL地址。用户每次刷新页面广告展现框中的图片都会有所不同,且不同图片出现的频率,可由XML文件中的设置决定。,4.3 数据验证控件,4.3.1 数据验证控件概述数据验证控件可以像
18、其他Web服务器控件一样添加到Web页面中。不同的验证控件用于特定的检验类型,如范围检查、模式匹配以及确保用户不会跳过必填字段的RequierdFieldValidator等。在实际应用中,通常将多个验证控件附加到同一个输入控件(如文本框)上,从而实现多方面控制用户输入的有效性。例如,可以指定文本框为必填,同时输入的数据只能是某特定范围内的数据等。1. 数据验证控件的类型ASP.NET 2.0提供了6类数据验证控件,这些控件存放在工具箱“验证”选项卡中。其名称及说明见表6-13。,4.3 数据验证控件,4.3.1 数据验证控件概述,4.3 数据验证控件,4.3.1 数据验证控件概述2. 数据验
19、证的处理机制在处理用户输入时,Web窗体将用户的输入传送给与输入控件相关联的验证控件。验证控件检测用户的输入,并设置属性以指示是否通过了验证。处理完所有的验证控件后,将设置Web窗体上的IsValid属性,该属性值为True表示所有验证通过,否则该属性值为False。如果验证控件发现用户输入的数据有错误,则出错信息可由该验证控件显示到页面中,也可以由布局在页面其他位置的ValidationSummary控件,专门负责显示出错信息。如果客户端使用的是IE4.0以上版本的浏览器,即支持DHTML,则验证控件可以使用客户端脚本进行数据验证,由于减少了一次服务器的往返,所以使用客户端脚本验证的效率更高
20、一些。,4.3 数据验证控件,4.3.1 数据验证控件概述3. 验证控件的通用属性,4.3 数据验证控件,4.3.2 必须项验证控件(RequiredFieldValidator)RequiredFieldValidator控件用于判断用户是否完成了必须填写的输入数据。正常情况下验证控件在页面中是不显示的,只有在出现了输入错误时,才会在控件中显示出错提示信息。在页面布局时,一般可将验证控件放置在被验证控件的旁边。 当执行验证时,若验证控件的初始值(InitialValue属性值)没有改变,则导致验证失败。InitialValue的初始默认值为空字符串。为了避免用户输入若干空格来通过验证,系统会
21、在验证前自动调用Trim()方法,将字符串前后多于的空格移除。也就是说被验证控件中不能输入完全由空格组成的字符串。例6-8,4.3 数据验证控件,4.3.3 比较验证控件(CompareValidator)CompareValidator将输入控件的值与常数或其他输入控件中的值进行比较,以确定这两个值是否与由比较运算符(=、!=、等)指定的关系匹配。例6-9,4.3 数据验证控件,4.3.4 范围验证控件(RangeValidator)RangeValidator控件的作用是计算被验证控件的值,以确定该值是否处于指定的最大和最小值(范围)之间。 使用RangeValidator控件可以检查用户
22、的输入是否在指定的范围之间,可以检查由数字对、字母对和日期对限定的范围,范围边界(最大值和最小值)用常数表示。例6-10,4.3 数据验证控件,4.3.5 正则表达式验证控件(RegularExpressionValidator)RegularExpressionValidator控件用于计算输入控件的值以确定该值是否与某个正则表达式所定义的模式相匹配。在使用RegularExpressionValidator控件时应注意以下几个问题:1) 如果输入控件的值为空,则不调用任何验证函数且可以通过验证,这通常需要使用必须项验证控件的配合,以避免用户跳过某项的输入。2) 除非浏览器不支持客户端验证,
23、或禁用了客户端验证,否则客户端验证和服务器端验证都要被执行。客户端的正则表达式验证语法与服务器端略有不同。在客户端使用的是JScript正则表达式语法,在服务器端使用的是Regex语法。由于JScript正则表达式语法是Regex语法的子集,故最好使用JScript,以便使客户端和服务器端得到相同的结果。,4.3 数据验证控件,4.3.6 自定义验证控件(CustomValidator)CustomValidator控件用于计算输入控件的值,以确定它是否通过自定义的验证逻辑。例如,可以通过自定义的验证逻辑来创建CustomValidator控件,以控制用户输入的数据不能包含汉字。例6-11,4
24、.3 数据验证控件,4.3.7 验证摘要控件(ValidatorSummary)若页面中存在有很多各类验证控件,则可能出现大量提示信息占用较多页面的情况,这对Web页面的美观性十分不利。VS 2005提供的ValidatorSummary控件可以将页面中所有验证控件的提示信息集中起来,在指定区域或以一个弹出信息框的形式显示给用户。ValidatorSummary控件为页面中每个验证控件显示的错误信息,是由每个验证控件的ErrorMessage属性确定。若某验证控件没有设置ErrorMessage属性,则在ValidatorSummary控件中不显示该控件的错误信息。ValidatorSumma
25、ry控件必须与其他验证控件一起使用,可分别将各验证控件的Display属性设置为“None”,而通过ValidatorSummary控件收集所有验证错误,并在指定的网页区域中或以信息框的形式显示给用户。,4.4 用户自定义控件,4.4.1 用户自定义控件概述使用Web用户控件可根据程序的需要方便地定义控件,且在设计用户控件时所使用的编程技术与设计Web页面的技术完全相同,为了确保用户控件不能作为一个独立的Web窗体来使用,用户控件文件名以“.ascx”为扩展名进行标识。在用户控件上可以使用标准Web窗体上相同的HTML控件和Web服务器控件。例如,希望创建一个网站导航栏用户控件,则可将若干Im
26、ageButton控件通过HTML表格进行布局,并创建这些ImageButton的事件处理程序即可。 用户控件页与Web窗体页主要有以下两点区别: 1) 用户控件页只能以.ascx为扩展名; 2) 在用户控件文件中不能包含、元素,这些元素应位于宿主页(用户控件所在的Web窗体页)中。,4.4 用户自定义控件,4.4.2 创建用户控件,4.4 用户自定义控件,4.4.3 在设计视图中添加用户控件用户控件的界面和事件处理程序编写完毕后,还必须将其放置在一个Web窗体页中才能使用。在设计视图中打开希望添加用户控件的Web窗体页面,注意一定要将页面切换到“设计”视图。在解决方案资源管理器中将设计完毕的
27、用户控件直接拖动到页面适当的位置。窗体设计器能自动向Web页面添加Register页面指示符,从此开始用户控件就成为了Web窗体的一个组成部分。此外,当用户控件被添加到Web窗体中后,该控件的公共属性、事件和方法也将向Web窗体公开,并可以通过编程的方式来使用。例6-13,4.4 用户自定义控件,4.4.4 程序运行时动态添加用户控件用户控件也可以在程序运行时通过代码动态地加载,这样就能根据实际需要向页面中添加不同的用户控件,或通过循环向页面中添加若干个相同的用户控件。在实际应用中,通常需要在主Web页面中添加一个容器控件PlaceHolder,作为用户自定义控件的“占位”控件。在程序运行时通
28、过代码创建一个用户控件的实例,而后将用户控件添加到容器控件中。例如: protected void Page_Load(object sender, EventArgs e) Control head = LoadControl(“header.ascx”);PlaceHolder1.Controls.Add(head); ,4.4 用户自定义控件,4.4.5 公开构成控件的属性组成用户控件的控件称为“构成控件”。这些控件通常被声明为私有的,因此开发人员不能访问它们。如果想要使将来的用户可以使用这些控件的属性,则必须将其公开。通过创建用户控件中的自定义属性,并使用该属性的Get和Set访问器,
29、影响构成控件的私有属性,就可以使构成控件的属性得以公开。公开构成控件属性需要进行以下3个操作。1) 创建用户控件的公共属性。2) 在此属性的get部分,编写用于检索要公开的属性值的代码。3) 在此属性的set部分,编写用于将此属性的值传递给构成控件的公开属性的代码。,4.4 用户自定义控件,4.4.5 公开构成控件的属性组成用户控件的控件称为“构成控件”。这些控件通常被声明为私有的,因此开发人员不能访问它们。如果想要使将来的用户可以使用这些控件的属性,则必须将其公开。通过创建用户控件中的自定义属性,并使用该属性的Get和Set访问器,影响构成控件的私有属性,就可以使构成控件的属性得以公开。公开构成控件属性需要进行以下3个操作。1) 创建用户控件的公共属性。2) 在此属性的get部分,编写用于检索要公开的属性值的代码。3) 在此属性的set部分,编写用于将此属性的值传递给构成控件的公开属性的代码。,