Web程序设计-第6章-HTML控件和Web服务器控件

第6章HTML控件和Web效劳器控件本章讲述的主要内容 6.1ASP.NET控件概述 6.2标准效劳器端控件 6.3数据验证控件 6.4用户自定义控件 6.1ASP.NET控件概述6.1.1HTML控件HTML控件在默认情况下属于客户端〔浏览器〕控件，效劳器无法对其进行控制。HTML控件是从HTML标记衍生而来的，每个控件对应于一个或一组HTML标记。例如，前面我们经常使用的HTML表格控件，就是一个常用于页面布局工具的HTML控件，如果不使用工具箱中的控件，而直接在源视图中书写相应的HTML代码也可以得到相同的效果，但使用控件可以节省大量的代码书写时间，且使操作变成了可视化的方式。HTML控件可以通过修改代码将其变成Web效劳器端控件，几乎所有的HTML标记只要加上runat="server"，这个效劳器控件标识属性后都可以变成效劳器端控件。这与普通HTML标记相比最大的区别在于，效劳器端控件可以通过效劳器端代码来控制。6.1ASP.NET控件概述6.1.2效劳器端控件1.效劳器端控件的执行过程当用户请求一个包含有Web效劳器端控件的.aspx页面时，效劳器首先对页面进行处理，将页面中包含的效劳端控件及其他内容解释成标准的HTML代码，然后将处理结果以标准HTML的形式一次性发送给客户端。2.ASP.NET页面的处理过程当用户通过浏览器发出一个对ASP.NET页面的请求后，Web效劳器将用户的请求交由ASP.NET引擎来处理。系统首先会检查在效劳器缓存中是否有该页面，或此页面是否已被编译成了.dll文件〔DynamicLinkLibrary，动态链接库〕。假设没有那么将页面转换为源程序代码，然后由编译器将其编译成.dll文件，否那么直接利用已编译过的.dll文件建立对象，并将执行结果返回到客户端浏览器。6.2标准效劳器端控件6.2.1ImageButton和HyperLink控件ImageButton〔图像按钮〕、Image〔图像〕和HyperLink〔超链接〕控件都可以在控件中显示图片，且都具有超链接跳转的功能。1.ImageButton控件

6.2标准效劳器端控件6.2.1ImageButton和HyperLink控件2.HyperLink控件双击HyperLink〔超链接〕控件在工具箱中的图标，可将控件添加到当前页面光标所在位置。HyperLink控件与标签控件很相似，但该控件支持用户的单击事件，可以在控件中显示图片，可以指定超链接的目标框架等特有属性。6.2标准效劳器端控件6.2.2Image和ImageMap控件Image控件和ImageMap控件都是用于图片显示的控件。1.Image控件6.2标准效劳器端控件6.2.2Image和ImageMap控件2.ImageMap控件例6-1利用ImageMap控件可以创立一个图像，该图像包含任意数目的，用户可以单击的区域，这些区域称为“作用点”。每一个作用点都可以是一个单独的超链接或回发事件。ImageMap控件与其他网页编辑工具〔如Dreamware〕提供的“热点地图”功能类似。ImageMap控件主要由以下两个局部组成：1)显示于控件中的图像。它可是任何标准Web图形格式的图形，如*.gif、*.jpg或*.png文件，该图像构成用户操作界面。2)隐藏在图像中的作用点集合。每个作用点控件都是一个不同的Web元素。对于每个作用点控件，需要定义其形状〔圆形、矩形或多边形〕以及用于指定作用点位置和大小的坐标。例如，如果创立一个圆形作用点，那么应定义圆心的x、y坐标及圆的半径。6.2标准效劳器端控件6.2.3RadioButton和RadioButtonList控件1.单项选择按钮控件〔RadioButton〕6.2标准效劳器端控件6.2.3RadioButton和RadioButtonList控件2.单项选择按钮组控件〔RadioButtonList〕6.2标准效劳器端控件6.2.4CheckBox和CheckList控件CheckBox〔复选框〕与CheckList〔复选框组〕控件的作用十分相似，都是用于向用户提供多项选择输入数据的控件。用户可以在控件提供的多个选项中选择一个或多个。被选中的对象中带有一个“√”标记，CheckBox和CheckList控件的外观如图6-15所示。6.2标准效劳器端控件6.2.5ListBox和DropDownList控件ListBox〔列表框〕和DropDownList〔下拉列表框〕控件也是一种常见的用于向用户提供输入数据选项的控件，其外观如图6-15和图6-16所示。例6-26.2标准效劳器端控件6.2.6FileUpload控件文件上传〔FileUpload〕控件，顾名思义是用于将文件从本地计算机上传到远程Web效劳器的控件，使用该控件可替代ASP程序中常用FSO〔文件系统对象〕，且FileUpload控件具有更高的效率和平安性。FileUpload控件在工具箱的图标为。如图6-21所示，从外观上看FileUpload控件有一个文本框和一个【浏览】按钮控件组成，用户可直接在文本框中输入希望上传的文件名〔包括文件存放路径〕。假设用户在Web页面中单击控件的【浏览】按钮时，系统将自动弹出一个“选择文件”对话框〔类似与Windows的“翻开”对话框〕，通过该对话框用户可根据需要选择希望上传到远程Web效劳器的文件。出于平安方面的考虑，不能将文件名预先加载到FileUpload控件中。6.2标准效劳器端控件6.2.7Table控件前面介绍过在Web页面中用于页面布局的HTML表格控件，那是一种用于静态环境的布局工具。在工具箱“标准”选项卡中也有一个Table控件，其图标为。这是一个Web效劳器端控件，使用该控件可更易于编程，用户可通过程序代码方便地控制表格中显示的内容及表格的行、列数。Tabel控件除了具有HTML表格的一般属性，如BackImageUrl〔背景图片〕、BackColor〔背景颜色〕、BorderStyle〔边框样式〕、BorderColor〔背景颜色〕、CellPadding〔单元格内间距〕、CellSpacing〔单元格之间距离〕、GridLines〔单元格框线〕、Width〔宽〕、Height〔高〕等，还具有两个关键的子对象TableRow和TableCell，前者用于创立和设置表格中的行，后者用于创立和设置表格中的列。通常可以通过TableCell对象的Text属性从单元格读取，或向其中写入数据。例6-46.2标准效劳器端控件6.2.8容器控件所谓“容器”控件是指可以安放其他控件的控件。ASP.NET2.0提供有两种容器控件，PlaceHolder和Panel控件。PlaceHolder控件用于在Web页面上保存一个位置，以便在程序运行时向其中动态地添加其他控件，这对动态网页的布局设计是十分有利的。Panel控件对应于HTML的<div>标记，其作用与PlaceHolder控件相似，可以将放置在其中的一组控件作为一个整体来操作。最常用的是通过设置Panel的Visible属性来控制这一组控件的显示或隐藏。【例6-5】6.2标准效劳器端控件6.2.9Calendar控件1.Calendar控件的常用属性2.Calendar控件的主要事件3.Calendar控件应用实例

【例6-6】

6.2标准效劳器端控件6.2.10AdRotator控件AdRotator〔广告〕控件，可配合XML说明文件，在页面中产生一个可动态显示图片的广告展现框。假设将鼠标指针指向图片，可显示出预设的广告词，单击图片可导航到预设的URL地址。用户每次刷新页面广告展现框中的图片都会有所不同，且不同图片出现的频率，可由XML文件中的设置决定。

6.3数据验证控件6.3.1数据验证控件概述数据验证控件可以像其他Web效劳器控件一样添加到Web页面中。不同的验证控件用于特定的检验类型，如范围检查、模式匹配以及确保用户不会跳过必填字段的RequierdFieldValidator等。在实际应用中，通常将多个验证控件附加到同一个输入控件〔如文本框〕上，从而实现多方面控制用户输入的有效性。例如，可以指定文本框为必填，同时输入的数据只能是某特定范围内的数据等。1.数据验证控件的类型ASP.NET2.0提供了6类数据验证控件，这些控件存放在工具箱“验证”选项卡中。其名称及说明见表6-13。6.3数据验证控件6.3.1数据验证控件概述

6.3数据验证控件6.3.1数据验证控件概述2.数据验证的处理机制在处理用户输入时，Web窗体将用户的输入传送给与输入控件相关联的验证控件。验证控件检测用户的输入，并设置属性以指示是否通过了验证。处理完所有的验证控件后，将设置Web窗体上的IsValid属性，该属性值为True表示所有验证通过，否那么该属性值为False。如果验证控件发现用户输入的数据有错误，那么出错信息可由该验证控件显示到页面中，也可以由布局在页面其他位置的ValidationSummary控件，专门负责显示出错信息。如果客户端使用的是IE4.0以上版本的浏览器，即支持DHTML，那么验证控件可以使用客户端脚本进行数据验证，由于减少了一次效劳器的往返，所以使用客户端脚本验证的效率更高一些。6.3数据验证控件6.3.1数据验证控件概述

3.验证控件的通用属性

6.3数据验证控件6.3.2必须项验证控件〔RequiredFieldValidator〕RequiredFieldValidator控件用于判断用户是否完成了必须填写的输入数据。正常情况下验证控件在页面中是不显示的，只有在出现了输入错误时，才会在控件中显示出错提示信息。在页面布局时，一般可将验证控件放置在被验证控件的旁边。当执行验证时，假设验证控件的初始值〔InitialValue属性值〕没有改变，那么导致验证失败。InitialValue的初始默认值为空字符串。为了防止用户输入假设干空格来通过验证，系统会在验证前自动调用Trim()方法，将字符串前后多于的空格移除。也就是说被验证控件中不能输入完全由空格组成的字符串。例6-86.3数据验证控件6.3.3比较验证控件〔CompareValidator〕CompareValidator将输入控件的值与常数或其他输入控件中的值进行比较，以确定这两个值是否与由比较运算符〔==、!=、<、>等〕指定的关系匹配。例6-96.3数据验证控件6.3.4范围验证控件〔RangeValidator〕RangeValidator控件的作用是计算被验证控件的值，以确定该值是否处于指定的最大和最小值〔范围〕之间。使用RangeValidator控件可以检查用户的输入是否在指定的范围之间，可以检查由数字对、字母对和日期对限定的范围，范围边界〔最大值和最小值〕用常数表示。例6-106.3数据验证控件6.3.5正那么表达式验证控件〔RegularExpressionValidator〕RegularExpressionValidator控件用于计算输入控件的值以确定该值是否与某个正那么表达式所定义的模式相匹配。在使用RegularExpressionValidator控件时应注意以下几个问题：1)如果输入控件的值为空，那么不调用任何验证函数且可以通过验证，这通常需要使用必须项验证控件的配合，以防止用户跳过某项的输入。2)除非浏览器不支持客户端验证，或禁用了客户端验证，否那么客户端验证和效劳器端验证都要被执行。客户端的正那么表达式验证语法与效劳器端略有不同。在客户端使用的是JScript正那么表达式语法，在效劳器端使用的是Regex语法。由于JScript正那么表达式语法是Regex语法的子集，故最好使用JScript，以便使客户端和效劳器端得到相同的结果。6.3数据验证控件6.3.6自定义验证控件(CustomValidator)CustomValidator控件用于计算输入控件的值，以确定它是否通过自定义的验证逻辑。例如，可以通过自定义的验证逻辑来创立CustomValidator控件，以控制用户输入的数据不能包含汉字。例6-116.3数据验证控件6.3.7验证摘要控件〔ValidatorSummary〕假设页面中存在有很多各类验证控件，那么可能出现大量提示信息占用较多页面的情况，这对Web页面的美观性十分不利。VS2005提供的ValidatorSummary控件可以将页面中所有验证控件的提示信息集中起来，在指定区域或以一个弹出信息框的形式显示给用户。ValidatorSummary控件为页面中每个验证控件显示的错误信息，是由每个验证控件的ErrorMessage属性确定。假设某验证控件没有设置ErrorMessage属性，那么在ValidatorSummary控件中不显示该控件的错误信息。ValidatorSummary控件必须与其他验证控件一起使用，可分别将各验证控件的Display属性设置为“None”，而通过ValidatorSummary控件收集所有验证错误，并在指定的网页区域中或以信息框的形式显示给用户。6.4用户自定义控件6.4.1用户自定义控件概述使用Web用户控件可根据程序的需要方便地定义控件，且在设计用户控件时所使用的编程技术与设计Web页面的技术完全相同，为了确保用户控件不能作为一个独立的Web窗体来使用，用户控件文件名以“.ascx”为扩展名进行标识。在用户控件上可以使用标准Web窗体上相同的HTML控件和Web效劳器控件。例如，希望创立一个网站导航栏用户控件，那么可将假设干ImageButton控件通过HTML表格进行布局，并创立这些ImageButton的事件处理程序即可。用户控件页与Web窗体页主要有以下两点区别：1)用户控件页只能以.ascx为扩展名；2)在用户控件文件中不能包含<html>、<body>、<from>元素，这些元素应位于宿主页〔用户控件所在的Web窗体页〕中。6.4用户自定义控件6.4.2创立用户控件6.4用户自定义控件6.4.3在设计视图中添加用户控件用户控件的界面和事件处理程序编写完毕后，还必须将其放置在一个Web窗体页中才能使用。在设计视图中翻开希望添加用户控件的Web窗体页面，注意一定要将页面切换到“设计”视图。在解决方案资源管理器中将设计完毕的用户控件直接拖动到页面适当的位置。窗体设计器能自动向Web页面添加@Register页面指示符，从此开始用户控件就成为了Web窗体的一个组成局部。此外，当用户控件被添加到Web窗体中后，该控件的公共属性、事件和方法也将向Web窗体公开，并可以通过编程的方式来使用。例6-136.4用户自定义控件6.4.4程序运行时动态添加用户控件用户控件也可以在程序运行时通过代码动态地加载，这样就能根据实际需要向页面中添加不同的用户控件，或通过循环向页面中添加假设干个相同的用户控件。在实际应用中，通常需要在主Web页面中添加一个容器控件PlaceHolder，作为用户自定义控件的“占位”控件。在程