第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件

Presentation on theme: "第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件"— Presentation transcript:

1 第6章 HTML控件和Web服务器控件 本章讲述的主要内容 6.1 ASP.NET控件概述 6.2 标准服务器端控件 6.3 数据验证控件
6.2 标准服务器端控件 6.3 数据验证控件 6.4 用户自定义控件

2 6.1 ASP.NET控件概述 HTML控件 HTML控件在默认情况下属于客户端（浏览器）控件，服务器无法对其进行控制。HTML控件是从HTML标记衍生而来的，每个控件对应于一个或一组HTML标记。例如，前面我们经常使用的HTML表格控件，就是一个常用于页面布局工具的HTML控件，如果不使用工具箱中的控件，而直接在源视图中书写相应的HTML代码也可以得到相同的效果，但使用控件可以节省大量的代码书写时间，且使操作变成了可视化的方式。 HTML控件可以通过修改代码将其变成Web服务器端控件，几乎所有的HTML标记只要加上runat = "server"，这个服务器控件标识属性后都可以变成服务器端控件。这与普通HTML标记相比最大的区别在于，服务器端控件可以通过服务器端代码来控制。

3 6.1 ASP.NET控件概述 6.1.2 服务器端控件 1. 服务器端控件的执行过程
服务器端控件 1. 服务器端控件的执行过程 当用户请求一个包含有Web服务器端控件的.aspx页面时，服务器首先对页面进行处理，将页面中包含的服务端控件及其他内容解释成标准的HTML代码，然后将处理结果以标准HTML的形式一次性发送给客户端。 2. ASP.NET页面的处理过程 当用户通过浏览器发出一个对ASP.NET页面的请求后，Web服务器将用户的请求交由ASP.NET引擎来处理。系统首先会检查在服务器缓存中是否有该页面，或此页面是否已被编译成了.dll文件（Dynamic Link Library，动态链接库）。若没有则将页面转换为源程序代码，然后由编译器将其编译成.dll文件，否则直接利用已编译过的.dll文件建立对象，并将执行结果返回到客户端浏览器。

4 6.2 标准服务器端控件 6.2.1 ImageButton和HyperLink控件
6.2 标准服务器端控件 ImageButton和HyperLink控件 ImageButton（图像按钮）、Image（图像）和HyperLink（超链接）控件都可以在控件中显示图片，且都具有超链接跳转的功能。 1. ImageButton控件

5 6.2 标准服务器端控件 6.2.1 ImageButton和HyperLink控件 2. HyperLink控件
6.2 标准服务器端控件 ImageButton和HyperLink控件 2. HyperLink控件 双击HyperLink（超链接）控件在工具箱中的图标，可将控件添加到当前页面光标所在位置。HyperLink控件与标签控件很相似，但该控件支持用户的单击事件，可以在控件中显示图片，可以指定超链接的目标框架等特有属性。

6 6.2 标准服务器端控件 6.2.2 Image和ImageMap控件 Image控件和ImageMap控件都是用于图片显示的控件。
6.2 标准服务器端控件 Image和ImageMap控件 Image控件和ImageMap控件都是用于图片显示的控件。 1. Image控件

7 6.2 标准服务器端控件 6.2.2 Image和ImageMap控件 2. ImageMap控件 例6-1
6.2 标准服务器端控件 Image和ImageMap控件 2. ImageMap控件 例6-1 利用ImageMap控件可以创建一个图像，该图像包含任意数目的，用户可以单击的区域，这些区域称为“作用点”。每一个作用点都可以是一个单独的超链接或回发事件。ImageMap控件与其他网页编辑工具（如Dreamware）提供的“热点地图”功能类似。 ImageMap控件主要由以下两个部分组成： 1) 显示于控件中的图像。它可是任何标准Web图形格式的图形，如*.gif、*.jpg 或*.png文件，该图像构成用户操作界面。 2) 隐藏在图像中的作用点集合。每个作用点控件都是一个不同的Web元素。对于每个作用点控件，需要定义其形状（圆形、矩形或多边形）以及用于指定作用点位置和大小的坐标。例如，如果创建一个圆形作用点，则应定义圆心的x、y坐标及圆的半径。

8 6.2 标准服务器端控件 6.2.3 RadioButton和RadioButtonList控件
6.2 标准服务器端控件 RadioButton和RadioButtonList控件 1. 单选按钮控件（RadioButton）

9 6.2 标准服务器端控件 6.2.3 RadioButton和RadioButtonList控件
6.2 标准服务器端控件 RadioButton和RadioButtonList控件 2. 单选按钮组控件（RadioButtonList）

10 6.2 标准服务器端控件 6.2.4 CheckBox和CheckList控件
6.2 标准服务器端控件 CheckBox和CheckList控件 CheckBox（复选框）与CheckList（复选框组）控件的作用十分相似，都是用于向用户提供多选输入数据的控件。用户可以在控件提供的多个选项中选择一个或多个。被选中的对象中带有一个“√”标记，CheckBox和CheckList控件的外观如图6-15所示。

11 6.2 标准服务器端控件 6.2.5 ListBox和DropDownList控件
6.2 标准服务器端控件 ListBox和DropDownList控件 ListBox（列表框）和DropDownList（下拉列表框）控件也是一种常见的用于向用户提供输入数据选项的控件，其外观如图6-15和图6-16所示。 例6-2

12 6.2 标准服务器端控件 6.2.6 FileUpload控件
6.2 标准服务器端控件 FileUpload控件 文件上传（FileUpload）控件，顾名思义是用于将文件从本地计算机上传到远程Web服务器的控件，使用该控件可替代ASP程序中常用FSO（文件系统对象），且FileUpload控件具有更高的效率和安全性。FileUpload控件在工具箱的图标为 。 如图6-21所示，从外观上看FileUpload控件有一个文本框和一个【浏览】按钮控件组成，用户可直接在文本框中输入希望上传的文件名（包括文件存放路径）。若用户在Web页面中单击控件的【浏览】按钮时，系统将自动弹出一个“选择文件”对话框（类似与Windows的“打开”对话框），通过该对话框用户可根据需要选择希望上传到远程Web服务器的文件。出于安全方面的考虑，不能将文件名预先加载到FileUpload控件中。

13 6.2 标准服务器端控件 Table控件 前面介绍过在Web页面中用于页面布局的HTML表格控件，那是一种用于静态环境的布局工具。在工具箱“标准”选项卡中也有一个Table控件，其图标为 。这是一个Web服务器端控件，使用该控件可更易于编程，用户可通过程序代码方便地控制表格中显示的内容及表格的行、列数。 Tabel控件除了具有HTML表格的一般属性，如BackImageUrl（背景图片）、BackColor（背景颜色）、BorderStyle（边框样式）、BorderColor（背景颜色）、CellPadding（单元格内间距）、CellSpacing（单元格之间距离）、GridLines（单元格框线）、Width（宽）、Height（高）等，还具有两个关键的子对象TableRow和TableCell，前者用于创建和设置表格中的行，后者用于创建和设置表格中的列。通常可以通过TableCell对象的Text属性从单元格读取，或向其中写入数据。 例6-4

14 6.2 标准服务器端控件 容器控件 所谓“容器”控件是指可以安放其他控件的控件。ASP.NET 2.0提供有两种容器控件，PlaceHolder和Panel控件。 PlaceHolder控件用于在Web页面上保留一个位置，以便在程序运行时向其中动态地添加其他控件，这对动态网页的布局设计是十分有利的。 Panel控件对应于HTML的<div>标记，其作用与PlaceHolder控件相似，可以将放置在其中的一组控件作为一个整体来操作。最常用的是通过设置Panel的Visible属性来控制这一组控件的显示或隐藏。 【例6-5】

15 6.2 标准服务器端控件 6.2.9 Calendar控件 1. Calendar控件的常用属性 2. Calendar控件的主要事件
6.2 标准服务器端控件 Calendar控件 1. Calendar控件的常用属性 2. Calendar控件的主要事件 3. Calendar控件应用实例 【例6-6】

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

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

18 6.3 数据验证控件 数据验证控件概述

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

20 6.3 数据验证控件 数据验证控件概述 3. 验证控件的通用属性

21 6.3 数据验证控件 6.3.2 必须项验证控件（RequiredFieldValidator）
6.3 数据验证控件 必须项验证控件（RequiredFieldValidator） RequiredFieldValidator控件用于判断用户是否完成了必须填写的输入数据。正常情况下验证控件在页面中是不显示的，只有在出现了输入错误时，才会在控件中显示出错提示信息。在页面布局时，一般可将验证控件放置在被验证控件的旁边。 当执行验证时，若验证控件的初始值（InitialValue属性值）没有改变，则导致验证失败。InitialValue的初始默认值为空字符串。为了避免用户输入若干空格来通过验证，系统会在验证前自动调用Trim()方法，将字符串前后多于的空格移除。也就是说被验证控件中不能输入完全由空格组成的字符串。 例6-8

22 6.3 数据验证控件 6.3.3 比较验证控件（CompareValidator）
6.3 数据验证控件 比较验证控件（CompareValidator） CompareValidator将输入控件的值与常数或其他输入控件中的值进行比较，以确定这两个值是否与由比较运算符（==、!=、<、>等）指定的关系匹配。 例6-9

23 6.3 数据验证控件 6.3.4 范围验证控件（RangeValidator）
6.3 数据验证控件 范围验证控件（RangeValidator） RangeValidator控件的作用是计算被验证控件的值，以确定该值是否处于指定的最大和最小值（范围）之间。 使用RangeValidator控件可以检查用户的输入是否在指定的范围之间，可以检查由数字对、字母对和日期对限定的范围，范围边界（最大值和最小值）用常数表示。 例6-10

24 6.3 数据验证控件 6.3.5 正则表达式验证控件（RegularExpressionValidator）
6.3 数据验证控件 正则表达式验证控件（RegularExpressionValidator） RegularExpressionValidator控件用于计算输入控件的值以确定该值是否与某个正则表达式所定义的模式相匹配。 在使用RegularExpressionValidator控件时应注意以下几个问题： 1) 如果输入控件的值为空，则不调用任何验证函数且可以通过验证，这通常需要使用必须项验证控件的配合，以避免用户跳过某项的输入。 2) 除非浏览器不支持客户端验证，或禁用了客户端验证，否则客户端验证和服务器端验证都要被执行。客户端的正则表达式验证语法与服务器端略有不同。在客户端使用的是JScript正则表达式语法，在服务器端使用的是Regex语法。由于JScript正则表达式语法是Regex语法的子集，故最好使用JScript，以便使客户端和服务器端得到相同的结果。

25 6.3 数据验证控件 6.3.6 自定义验证控件(CustomValidator)
6.3 数据验证控件 自定义验证控件(CustomValidator) CustomValidator控件用于计算输入控件的值，以确定它是否通过自定义的验证逻辑。例如，可以通过自定义的验证逻辑来创建CustomValidator控件，以控制用户输入的数据不能包含汉字。 例6-11

26 6.3 数据验证控件 6.3.7 验证摘要控件（ValidatorSummary）
6.3 数据验证控件 验证摘要控件（ValidatorSummary） 若页面中存在有很多各类验证控件，则可能出现大量提示信息占用较多页面的情况，这对Web页面的美观性十分不利。 VS 2005提供的ValidatorSummary控件可以将页面中所有验证控件的提示信息集中起来，在指定区域或以一个弹出信息框的形式显示给用户。 ValidatorSummary控件为页面中每个验证控件显示的错误信息，是由每个验证控件的ErrorMessage属性确定。若某验证控件没有设置ErrorMessage属性，则在ValidatorSummary控件中不显示该控件的错误信息。 ValidatorSummary控件必须与其他验证控件一起使用，可分别将各验证控件的Display属性设置为“None”，而通过ValidatorSummary控件收集所有验证错误，并在指定的网页区域中或以信息框的形式显示给用户。

27 6.4 用户自定义控件 用户自定义控件概述 使用Web用户控件可根据程序的需要方便地定义控件，且在设计用户控件时所使用的编程技术与设计Web页面的技术完全相同，为了确保用户控件不能作为一个独立的Web窗体来使用，用户控件文件名以“.ascx”为扩展名进行标识。 在用户控件上可以使用标准Web窗体上相同的HTML控件和Web服务器控件。例如，希望创建一个网站导航栏用户控件，则可将若干ImageButton控件通过HTML表格进行布局，并创建这些ImageButton的事件处理程序即可。 用户控件页与Web窗体页主要有以下两点区别： 1) 用户控件页只能以.ascx为扩展名； 2) 在用户控件文件中不能包含<html>、<body>、<from>元素，这些元素应位于宿主页（用户控件所在的Web窗体页）中。

28 6.4 用户自定义控件 创建用户控件

29 6.4 用户自定义控件 在设计视图中添加用户控件 用户控件的界面和事件处理程序编写完毕后，还必须将其放置在一个Web窗体页中才能使用。在设计视图中打开希望添加用户控件的Web窗体页面，注意一定要将页面切换到“设计”视图。 例6-13

30 6.4 用户自定义控件 6.4.4 程序运行时动态添加用户控件
6.4 用户自定义控件 程序运行时动态添加用户控件 用户控件也可以在程序运行时通过代码动态地加载，这样就能根据实际需要向页面中添加不同的用户控件，或通过循环向页面中添加若干个相同的用户控件。 在实际应用中，通常需要在主Web页面中添加一个容器控件PlaceHolder，作为用户自定义控件的“占位”控件。在程序运行时通过代码创建一个用户控件的实例，而后将用户控件添加到容器控件中。例如： protected void Page_Load(object sender, EventArgs e) { Control head = LoadControl(“header.ascx”); PlaceHolder1.Controls.Add(head); }

31 6.4 用户自定义控件 公开构成控件的属性 组成用户控件的控件称为“构成控件”。这些控件通常被声明为私有的，因此开发人员不能访问它们。如果想要使将来的用户可以使用这些控件的属性，则必须将其公开。通过创建用户控件中的自定义属性，并使用该属性的Get和Set访问器，影响构成控件的私有属性，就可以使构成控件的属性得以公开。 公开构成控件属性需要进行以下3个操作。 1) 创建用户控件的公共属性。 2) 在此属性的get部分，编写用于检索要公开的属性值的代码。 3) 在此属性的set部分，编写用于将此属性的值传递给构成控件的公开属性的代码。

32 6.4 用户自定义控件 公开构成控件的属性 组成用户控件的控件称为“构成控件”。这些控件通常被声明为私有的，因此开发人员不能访问它们。如果想要使将来的用户可以使用这些控件的属性，则必须将其公开。通过创建用户控件中的自定义属性，并使用该属性的Get和Set访问器，影响构成控件的私有属性，就可以使构成控件的属性得以公开。 公开构成控件属性需要进行以下3个操作。 1) 创建用户控件的公共属性。 2) 在此属性的get部分，编写用于检索要公开的属性值的代码。 3) 在此属性的set部分，编写用于将此属性的值传递给构成控件的公开属性的代码。