第5章ASP.NET常用控件本章讲述的主要内容5.1ASP.NET控件概述5.2常用标准服务器端控件5.3数据验证控件5.4用户自定义控件5.1ASP.NET控件概述5.1.1HTML控件和服务器端控件的概念1.HTML控件HTML控件在默认情况下属于客户端(浏览器)控件,服务器无法对其进行控制。HTML控件是从HTML标记衍生而来的,每个控件对应于一个或一组HTML标记。2.服务器端控件在VisualStudio的工具箱中,只有“HTML”选项卡中的控件是客户端控件(也称为浏览器控件),其他所有控件都是Web服务器端控件。其中“标准”选项卡中的控件是最常用的控件。在类库中,所有Web控件都是从System.Web.UI.Control.WebControls直接或间接派生而来的。5.1ASP.NET控件概述5.1.2控件和页面的执行过程1.服务器端控件的执行过程当用户请求一个包含有Web服务器端控件的.aspx页面时,服务器首先对页面进行处理,将页面中包含的服务端控件及其他内容解释成标准的HTML代码,然后将处理结果以标准HTML的形式一次性发送给客户端。2.ASP.NET页面的处理过程当用户通过浏览器发出一个对ASP.NET页面的请求后,Web服务器将用户的请求交由ASP.NET引擎来处理。系统首先会检查在服务器缓存中是否有该页面,或此页面是否已被编译成了.dll文件。若没有则将页面转换为源程序代码,然后由编译器将其编译成.dll文件,否则直接利用已编译过的.dll文件建立对象,并将执行结果返回到客户端浏览器。5.2常用标准服务器端控件5.2.1ImageButton和HyperLink控件ImageButton(图像按钮)、Image(图像)和HyperLink(超链接)控件都可以在控件中显示图片,且都具有超链接跳转的功能。1.ImageButton控件5.2标准服务器端控件5.2.1ImageButton和HyperLink控件2.HyperLink控件双击HyperLink(超链接)控件在工具箱中的图标,可将控件添加到当前页面光标所在位置。HyperLink控件与标签控件很相似,但该控件支持用户的单击事件,可以在控件中显示图片,可以指定超链接的目标框架等特有属性。5.2标准服务器端控件5.2.2Image和ImageMap控件Image控件和ImageMap控件都是用于图片显示的控件。1.Image控件5.2标准服务器端控件5.2.2Image和ImageMap控件2.ImageMap控件利用ImageMap控件可以创建一个图像,该图像包含任意数目的,用户可以单击的区域,这些区域称为“作用点”。每一个作用点都可以是一个单独的超链接或回发事件。ImageMap控件与其他网页编辑工具(如Dreamware)提供的“热点地图”功能类似。ImageMap控件主要由以下两个部分组成:1)显示于控件中的图像。它可是任何标准Web图形格式的图形,如*.gif、*.jpg或*.png文件,该图像构成用户操作界面。2)隐藏在图像中的作用点集合。每个作用点控件都是一个不同的Web元素。对于每个作用点控件,需要定义其形状(圆形、矩形或多边形)以及用于指定作用点位置和大小的坐标。例如,如果创建一个圆形作用点,则应定义圆心的x、y坐标及圆的半径。5.2标准服务器端控件5.2.3RadioButton和RadioButtonList控件1.单选按钮控件(RadioButton)5.2标准服务器端控件5.2.3RadioButton和RadioButtonList控件2.单选按钮组控件(RadioButtonList)5.2标准服务器端控件5.2.4CheckBox和CheckList控件CheckBox(复选框)与CheckList(复选框组)控件的作用十分相似,都是用于向用户提供多选输入数据的控件。用户可以在控件提供的多个选项中选择一个或多个。被选中的对象中带有一个“√”标记,CheckBox和CheckList控件的外观如图6-15所示。5.2标准服务器端控件5.2.5ListBox和DropDownList控件ListBox(列表框)和DropDownList(下拉列表框)控件也是一种常见的用于向用户提供输入数据选项的控件,其外观如图6-15和图6-16所示。5.2标准服务器端控件5.2.6FileUpload控件文件上传(FileUpload)控件,顾名思义是用于将文件从本地计算机上传到远程Web服务器的控件,使用该控件可替代ASP程序中常用FSO(文件系统对象),且FileUpload控件具有更高的效率和安全性。FileUpload控件在工具箱的图标为。如图5-9所示,从外观上看FileUpload控件有一个文本框和一个“浏览”按钮控件组成,用户可直接在文本框中输入希望上传的文件名(包括文件存放路径)。若用户在Web页面中单击控件的“浏览”按钮时,系统将自动弹出一个“选择文件”对话框(类似与Windows的“打开”对话框),通过该对话框用户可根据需要选择希望上传到远程Web服务器的文件。出于安全方面的考虑,不能将文件名预先加载到FileUpload控件中。5.2标准服务器端控件5.2.7Table控件前面介绍过在Web页面中用于页面布局的HTML表格控件,那是一种用于静态环境的布局工具。在工具箱“标准”选项卡中也有一个Table控件,其图标为。这是一个Web服务器端控件,使用该控件可更易于编程,用户可通过程序代码方便地控制表格中显示的内容及表格的行、列数。Tabel控件除了具有HTML表格的一般属性,如BackImageUrl(背景图片)、BackColor(背景颜色)、BorderStyle(边框样式)、BorderColor(背景颜色)、CellPadding(单元格内间距)、CellSpacing(单元格之间距离)、GridLines(单元格框线)、Width(宽)、Height(高)等,还具有两个关键的子对象TableRow和TableCell,前者用于创建和设置表格中的行,后者用于创建和设置表格中的列。通常可以通过TableCell对象的Text属性从单元格读取,或向其中写入数据。5.2标准服务器端控件5.2.8容器控件所谓“容器”控件是指可以安放其他控件的控件。ASP.NET2.0提供有两种容器控件,PlaceHolder和Panel控件。PlaceHolder控件用于在Web页面上保留一个位置,以便在程序运行时向其中动态地添加其他控件,这对动态网页的布局设计是十分有利的。Panel控件对应于HTML的div标记,其作用与PlaceHolder控件相似,可以将放置在其中的一组控件作为一个整体来操作。最常用的是通过设置Panel的Visible属性来控制这一组控件的显示或隐藏。5.3数据验证控件5.3.1数据验证控件概述数据验证控件可以像其他Web服务器控件一样添加到Web页面中。不同的验证控件用于特定的检验类型,如范围检查、模式匹配以及确保用户不会跳过必填字段的RequierdFieldValidator等。在实际应用中,通常将多个验证控件附加到同一个输入控件(如文本框)上,从而实现多方面控制用户输入的有效性。例如,可以指定文本框为必填,同时输入的数据只能是某特定范围内的数据等。5.3数据验证控件5.3.1数据验证控件概述5.3数据验证控件5.3.1数据验证控件概述2.数据验证的处理机制在处理用户输入时,Web窗体将用户的输入传送给与输入控件相关联的验证控件。验证控件检测用户的输入,并设置属性以指示是否通过了验证。处理完所有的验证控件后,将设置Web窗体上的IsValid属性,该属性值为True表示所有验证通过,否则该属性值为False。如果验证控件发现用户输入的数据有错误,则出错信息可由该验证控件显示到页面中,也可以由布局在页面其他位置的ValidationSummary控件,专门负责显示出错信息。如果客户端使用的是IE4.0以上版本的浏览器,即支持DHTML,则验证控件可以使用客户端脚本进行数据验证,由于减少了一次服务器的往返,所以使用客户端脚本验证的效率更高一些。5.3数据验证控件5.3.1数据验证控件概述3.验证控件的通用属性5.3数据验证控件5.3.2必须项验证控件(RequiredFieldValidator)RequiredFieldValidator控件用于判断用户是否完成了必须填写的输入数据。正常情况下验证控件在页面中是不显示的,只有在出现了输入错误时,才会在控件中显示出错提示信息。在页面布局时,一般可将验证控件放置在被验证控件的旁边。当执行验证时,若验证控件的初始值(InitialValue属性值)没有改变,则导致验证失败。InitialValue的初始默认值为空字符串。为了避免用户输入若干空格来通过验证,系统会在验证前自动调用Trim()方法,将字符串前后多于的空格移除。也就是说被验证控件中不能输入完全由空格组成的字符串。5.3数据验证控件5.3.3比较验证控件(CompareValidator)CompareValidator将输入控件的值与常数或其他输入控件中的值进行比较,以确定这两个值是否与由比较运算符(==、!=、、等)指定的关系匹配。5.3数据验证控件5.3.4范围验证控件(RangeValidator)RangeValidator控件的作用是计算被验证控件的值,以确定该值是否处于指定的最大和最小值(范围)之间。使用RangeValidator控件可以检查用户的输入是否在指定的范围之间,可以检查由数字对、字母对和日期对限定的范围,范围边界(最大值和最小值)用常数表示。5.3数据验证控件5.3.5正则表达式验证控件(RegularExpressionValidator)RegularExpressionValidator控件用于计算输入控件的值以确定该值是否与某个正则表达式所定义的模式相匹配。在使用RegularExpressionValidator控件时应注意以下几个问题:1)如果输入控件的值为空,则不调用任何验证函数且可以通过验证,这通常需要使用必须项验证控件的配合,以避免用户跳过某项的输入。2)除非浏览器不支持客户端验证,或禁用了客户端验证,否则客户端验证和服务器端验证都要被执行。客户端的正则表达式验证语法与服务器端略有不同。在客户端使用的是JScript正则表达式语法,在服务器端使用的是Regex语法。由于JScript正则表达式语法是Regex语法的子集,故最好使用JScript,以便使客户端和服务器端得到相同的结果。5.3数据验证控件5.3.6自定义验证控件(CustomValidator)CustomValidator控件用于计算输入控件的值,以确定它是否通过自定义的验证逻辑。例如,可以通过自定义的验证逻辑来创建CustomValidator控件,以控制用户输入的数据不能包含汉字。5.3数据验证控件5.3.7验证摘要控件(ValidatorSummary)若页面中存在有很多各类验证控件,则可能出现大量提示信息占用较多页面的情况,这对Web页面的美观性十分不利。VisualStudio提供的ValidatorSummary控件可以将页面中所有验证控件的提示信息集中起来,在指定区域或以一个弹出信息框的形式显示给用户。ValidatorSummary控件为页面中每个验证控件显示的错误信息,是由每个验证控件的ErrorMessage属性确定。若某验证控件没有设置ErrorMessage属性,则在ValidatorSummary控件中不显示该控件的错误信息。ValidatorSummary控件必须与其他验证控件一起使用,可分别将各验证控件的Display属性设置为“None”,而通过ValidatorSummary控件收集所有验证错误,并在指定的网页区域中或以信息框的形式显示给用户。5.4用户自定义控件5.4.1用户自定义控件概述使用Web用户控件可根据程序的需要