asp.net 动态网页设计案例教程 - abook.cn · pdf file用linq to sql...

高等职业教育“十二五”规划教材

高职高专计算机网络系列教材

ASP.NET 动态网页设计案例教程

郭建东主编

蔡雪莲彭丹副主编

王宇川主审

北京

科

学出版社

职教技术出版中心

www.abook.cn

内容简介

本书详细介绍了使用 Visual Studio 2010.NET 和 SQL Server 2008 进行

ASP.NET 4.0 Web 应用程序开发的基础知识和设计技巧，采用 C#语言进行

编写代码，书中内容除了包括 ASP.NET 开发必备的基础知识：网站的创建、

调试和发布、常用 Web 控件、CSS 样式布局和母版页设计、Web 页面的生

命周期、状态管理、ASP.NET 数据控件、ADO 数据访问、网站导航、网

站安全等，还包括 ASP.NET 4.0 的新特性，如图表控件、分页控件、采用

LINQ to SQL 访问数据库、AJAX 应用等，最后介绍了一个购物网站开发

的实例。本书结构合理，论述准确，内容翔实，步骤清晰，通过大量的案例讲

解，使读者轻松快速掌握 ASP.NET 开发的关键技术。本书提供所有实例的

源程序，以方便教学使用。

图书在版编目(CIP)数据

ASP.NET 动态网页设计案例教程/郭建东主编. —北京：科学出版社，2012（高等职业教育“十二五”规划教材·高职高专计算机网络系统教材） ISBN 978-7-03-033198-4 Ⅰ. ①A… Ⅱ. ①郭… Ⅲ. ①网页制作工具－程序设计－高等职业

教育－教材 Ⅳ. ①TP393.092 中国版本图书馆 CIP 数据核字（2011）第 277302 号

责任编辑：孙露露 / 责任校对：耿耘责任印制：吕春珉 / 封面设计：耕者设计工作室

出版

北京东黄城根北街 16 号邮政编码：100717

http://www.sciencep.com 北京双清印刷厂印刷

科学出版社发行各地新华书店经销 *11

2012 年 3 月第一版 2012 年 3 月第一次印刷

开本：787×1092 1/16 印张：17

字数：385 000

定价：29.00 元

（如有印装质量问题，我社负责调换<环伟>）

销售部电话 010-62142126 编辑部电话 010-62135763-8212

版权所有，侵权必究

举报电话：010-64030229；010-64034315；13501151303

前言

近年来，ASP.NET 技术已经成为越来越多的 Web 应用开发人员的首选。随着

Microsoft .NET Framework 4.0 的发布，采用 ASP.NET 4.0 和 SQL Server 2008 进行动态网站

开发，无论在设计思想、开发效率、编程模式等方面都有很大的进步，代码更精简、更安

全，采用已编译的、由事件驱动的编程模型，支持将应用程序逻辑与用户界面相隔离，使

应用程序性能得到提高。本书共分9章，通过案例详细介绍了使用Visual Studio.NET 2010创建基于ASP.NET 4.0

的 Web 应用程序的基础知识和设计技巧。第 1 章介绍了.NET Framework 技术、创建

ASP.NET 网站的基本步骤及网站的调试和发布；第 2 章介绍了 CSS 样式设计基础及母版页

设计；第 3 章介绍了 Web 页面的生命周期、控件事件、ASP.NET 的 Web 服务器控件和验

证控件的应用；第 4 章介绍了 ASP.NET 的数据在同一页面和不同页面进行数据保留与传递

的基本方法；第 5 章介绍了数据访问基础，包括通过数据源控件和数据显示控件访问数据

库、通过 ADO.NET 编程方式访问数据库、采用存储过程访问数据库，另外还介绍了利用

Chart 控件将数据采用图表显示，分页控件和 ListView 控件的应用，数据的事务处理和使

用 LINQ to SQL 来访问数据库；第 6 章介绍了 ASP.NET 站点导航功能，为站点一致的、容

易管理的导航提供解决方案；第 7 章介绍了如何通过 ASP.NET 的成员和角色管理实现网站

的安全性，主要内容通过网站管理工具配置安全性、登录控件应用及通过编程方式管理用

户和角色；第 8 章介绍了 AJAX 的基本原理和基本控件，以及基本控件的应用；第 9 章讲

述基于 ASP.NET 4.0 创建一个网上购物网站的过程。本书编写过程力求体现高职高专技能应用型人才的培养目标，全书以“学习要点→案

例分析→实现步骤及知识点讲解→运行结果”的总体思路编写而成。案例尽可能采用多种

实现方式进行讲解并做比较，突出教材的实用性、应用性和先进性。除第 9 章外，每章后

面都附有上机实训，供读者课外巩固所学内容。本书由郭建东、蔡雪莲、彭丹共同编写，其中第 1 章、第 5 章、第 9 章由郭建东编写；

第 2 章由郭建东和彭丹共同编写；第 3 章、第 8 章由彭丹编写；第 4 章、第 6 章、第 7 章

由蔡雪莲编写。由于作者水平所限，书中疏漏和错误之处在所难免，希望广大读者批评指正。

科学出版社


www.abook.cn

目录

第 1 章 ASP.NET 入门................................................................................................................................. 1

1.1 .NET Framework 概述 ..................................................................................................................... 1

1.2 ASP.NET 4.0 引入的新功能........................................................................................................... 2

1.3 ASP.NET 开发要求.......................................................................................................................... 2

1.4 创建简单的 ASP.NET 网站............................................................................................................ 3

1.4.1 创建、打开网站....................................................................................................................... 3 1.4.2 网站中的特殊目录 ................................................................................................................... 5 1.4.3 创建 Web 页面.......................................................................................................................... 6 1.4.4 调试应用程序........................................................................................................................... 9 1.4.5 部署 Web 应用程序和测试网站 ............................................................................................ 10

上机实训 1................................................................................................................................................. 13

第 2 章 CSS 样式与母版页...................................................................................................................... 14

2.1 使用 CSS 布局页面 ....................................................................................................................... 14

2.1.1 CSS 概述................................................................................................................................. 14 2.1.2 ASP.NET 中应用 CSS 样式 ................................................................................................... 15 2.1.3 常见的布局类型样式 ............................................................................................................. 20

2.2 母版页 .............................................................................................................................................. 23

2.2.1 母版页基础............................................................................................................................. 23 2.2.2 创建母版页............................................................................................................................. 23 2.2.3 创建内容页面......................................................................................................................... 26 2.2.4 在母版页中设置默认内容 ..................................................................................................... 28 2.2.5 访问母版页中的控件和属性 ................................................................................................. 29 2.2.6 指定母版页............................................................................................................................. 31 2.2.7 嵌套母版页............................................................................................................................. 31

2.3 主题和外观...................................................................................................................................... 33

2.3.1 创建主题................................................................................................................................. 33 2.3.2 应用主题................................................................................................................................. 34 2.3.3 删除主题................................................................................................................................. 35

上机实训 2................................................................................................................................................. 36

第 3 章常用服务器控件............................................................................................................................ 38

3.1 ASP.NET 事件和生命周期........................................................................................................... 39

3.1.1 ASP.NET 页面的生命周期 .................................................................................................... 39 3.1.2 Page 对象属性 ........................................................................................................................ 41 3.1.3 理解和处理控件事件 ............................................................................................................. 42

iv ASP.NET 动态网页设计案例教程

3.2 Web 服务器控件............................................................................................................................. 42

3.2.1 Web 服务器控件概述............................................................................................................. 42 3.2.2 简单控件................................................................................................................................. 44 3.2.3 选择控件................................................................................................................................. 48 3.2.4 列表控件................................................................................................................................. 55 3.2.5 文件上传控件......................................................................................................................... 60 3.2.6 Table 控件 ............................................................................................................................... 63 3.2.7 广告控件................................................................................................................................. 65 3.2.8 日历控件................................................................................................................................. 67 3.2.9 视图控件和向导控件 ............................................................................................................. 69

3.3 验证控件 .......................................................................................................................................... 73

3.3.1 RequiredFieldValidator 控件 .................................................................................................. 74 3.3.2 CompareValidator 控件........................................................................................................... 75 3.3.3 RangeValidator 控件 ............................................................................................................... 75 3.3.4 RegularExpressionValidator 控件 ........................................................................................... 76 3.3.5 CustomValidator 控件............................................................................................................. 76 3.3.6 ValidationSummary 控件 ........................................................................................................ 79 3.3.7 取消验证................................................................................................................................. 80

上机实训 3................................................................................................................................................. 82

第 4 章状态管理.......................................................................................................................................... 83

4.1 按页保留数据 ................................................................................................................................. 83

4.2 查询字符串实现页面间数据传递 .............................................................................................. 86

4.3 使用会话状态实现页面间的数据传递 ..................................................................................... 87

4.4 使用跨页提交功能实现页面间的数据传递............................................................................. 90

4.5 利用 Cookie 实现用户信息的保存............................................................................................. 90

4.6 利用配置文件属性实现用户信息的保存 ................................................................................. 93

4.7 Application....................................................................................................................................... 96

4.8 状态管理机制的比较 .................................................................................................................... 98

上机实训 4................................................................................................................................................. 99

第 5 章数据库访问基础...........................................................................................................................100

5.1 ADO.NET 简介..............................................................................................................................100

5.2 Web.config 文件的配置 ...............................................................................................................101

5.3 数据源控件.....................................................................................................................................102

5.4 利用数据显示控件显示数据信息 .............................................................................................104

5.4.1 GridView 控件 .......................................................................................................................105 5.4.2 DetailsView 控件 ...................................................................................................................109 5.4.3 FormView 控件......................................................................................................................112 5.4.4 DataList 控件 .........................................................................................................................113

科

学出版社


www.abook.cn

v 目录

5.4.5 ListView 和 DataPager 分页控件 ..........................................................................................117 5.5 利用数据控件实现对数据库信息的管理 ................................................................................118

5.5.1 数据库表信息的添加、编辑及删除 ....................................................................................118 5.5.2 设置数据显示控件的分页模式 ............................................................................................126

5.6 使用 ADO.NET 编程访问数据 ..................................................................................................127

5.6.1 使用 Connection 创建数据库连接........................................................................................127 5.6.2 使用 Command 执行对数据库的操作..................................................................................129 5.6.3 使用 DataReader 读取数据库查询结果 ...............................................................................130 5.6.4 使用 DataAdapter 与 DataSet 读取数据库查询结果 ...........................................................134

5.7 存储过程的应用 ............................................................................................................................137

5.8 Chart 控件与图表..........................................................................................................................142

5.9 ADO.NET 中的事务.....................................................................................................................144

5.10 使用 LINQ to SQL 访问数据库 ...............................................................................................145

5.10.1 创建 LINQ to SQL 实体......................................................................................................145 5.10.2 使用 LINQ to SQL 执行数据库查询 ..................................................................................146 5.10.3 使用 LinqDataSource 控件 ..................................................................................................147 5.10.4 插入、更新、删除数据库信息 ..........................................................................................149

上机实训 5................................................................................................................................................150

第 6 章网站导航.........................................................................................................................................152

6.1 站点地图 .........................................................................................................................................152

6.2 SiteMapPath 站点导航控件.........................................................................................................154

6.3 Menu 导航控件的应用.................................................................................................................156

6.4 TreeView 导航控件.......................................................................................................................158

6.4.1 静态方式添加节点数据 ........................................................................................................159 6.4.2 绑定到站点地图方式添加节点数据 ....................................................................................160 6.4.3 绑定到数据库........................................................................................................................162 6.4.4 绑定到 XML 文件 .................................................................................................................165

6.5 三种导航控件的比较 ...................................................................................................................167

上机实训 6................................................................................................................................................167

第 7 章网站安全性与登录 ......................................................................................................................168

7.1 配置网站、成员资格和角色 ......................................................................................................168

7.1.1 配置成员资格用户 ................................................................................................................168 7.1.2 创建和管理角色....................................................................................................................172 7.1.3 创建和管理规则....................................................................................................................174

7.2 登录控件 .........................................................................................................................................176

7.2.1 Login 控件 .............................................................................................................................177 7.2.2 Loginview 控件 .....................................................................................................................178 7.2.3 LoginStatus 控件....................................................................................................................178

vi ASP.NET 动态网页设计案例教程

7.2.4 CreateUserWizard 控件 .........................................................................................................181 7.2.5 ChangePassword 控件 ...........................................................................................................183 7.2.6 PasswordRecovery 控件 .......................................................................................................184 7.2.7 配置邮件服务器....................................................................................................................184

7.3 Membership、MembershipUser 和 Roles 类............................................................................186

7.3.1 Membership 类.......................................................................................................................186 7.3.2 Roles 类..................................................................................................................................186

7.4 站点地图及其安全性调整 ..........................................................................................................193

上机实训 7................................................................................................................................................196

第 8 章 ASP.NET AJAX 框架 .................................................................................................................197

8.1 AJAX 原理......................................................................................................................................197

8.1.1 AJAX 简介 ............................................................................................................................197

8.1.2 AJAX 技术 ............................................................................................................................198 8.1.3 AJAX 实例 ............................................................................................................................199

8.2 ASP.NET AJAX 基本控件...........................................................................................................202

8.2.1 ASP.NET AJAX 体系结构 ....................................................................................................202 8.2.2 ScriptManager、ScriptManagerProxy ...................................................................................202 8.2.3 UpdatePanel、UpdateProgress ..............................................................................................205 8.2.4 Timer 控件 .............................................................................................................................207

上机实训 8................................................................................................................................................209

第 9 章网上购物商店 ...............................................................................................................................210

9.1 功能和需求分析 ............................................................................................................................210

9.2 总体设计 .........................................................................................................................................210

9.3 数据库结构设计 ............................................................................................................................211

9.3.1 创建数据库表........................................................................................................................211 9.3.2 创建视图................................................................................................................................212 9.3.3 创建存储过程........................................................................................................................212

9.4 系统配置、通用模块、样式和母版页设计............................................................................214

9.4.1 Web.config 配置文件 ............................................................................................................214 9.4.2 通用模块设计........................................................................................................................214 9.4.3 CSS 样式设计........................................................................................................................218 9.4.4 母版页设计............................................................................................................................219

9.5 主页面设计.....................................................................................................................................223

9.6 登录注册页面设计........................................................................................................................225 9.6.1 网站会员注册........................................................................................................................225 9.6.2 会员登录................................................................................................................................229

9.7 购物模块设计 ................................................................................................................................230

9.7.1 产品搜索浏览........................................................................................................................230

科

学出版社


www.abook.cn

vii 目录

9.7.2 选购产品................................................................................................................................232 9.7.3 提交订单................................................................................................................................243 9.7.4 查看订单................................................................................................................................251

9.8 管理员后台管理模块设计 ..........................................................................................................253

9.8.1 管理员登录............................................................................................................................253 9.8.2 用户管理................................................................................................................................255 9.8.3 产品种类管理........................................................................................................................255 9.8.4 产品管理................................................................................................................................256 9.8.5 订单管理................................................................................................................................258

9.9 小结..................................................................................................................................................258

参考文献 ...........................................................................................................................................................260

第 1 章 ASP.NET 入门

了解.NET Framework

创建自己的第一个网站

网站的调试

网站的发布安装

.NET Framework 4.0 对 Web 应用开发方面的进一步改进，使得在 ASP.NET 4.0 环境下

开发 Web 应用程序更加优越。ASP.NET 1.0 的引入改变了 Web 编程模型，而 ASP.NET 4.0大大提高了编程人员的开发效率。当创建 ASP.NET Web 应用程序时，可使用 Visual Basic、C#、JScript.NET、J#等与公共语言运行库（CLR）兼容的语言来编写代码。

本书主要介绍基于.NET Framework 4.0 的 ASP.NET 4.0 的基础知识，以及如何使用

Visual Studio.NET 2010（以下简称 Visual Studio 2010）结合 SQL Server 2008 数据库创建

ASP.NET 动态网站，开发语言采用 C#语言。本书大部分程序也可在 Visual Studio 2008 运行，数据库也可采用 SQL Server 2005。

1.1 .NET Framework 概述

.NET Framework 具有两个主要组件：公共语言运行库 CLR 和 .NET Framework 类库。

公共语言运行库是 .NET Framework 的基础，可以将运行库看作一个在执行时管理代码的

代理，它提供内存管理、线程管理和远程处理等核心服务，并且还强制实施严格的类型安

全以及可提高安全性和可靠性的其他形式的代码准确性。.NET Framework 的类库包含了

13 000 多个可用于构建应用程序的类，是一个综合性的面向对象的可重用类型集合，可以

使用它开发的应用程序和服务有控制台应用程序、Windows GUI 应用程序（Windows 窗体）、ASP.NET 应用程序、XML Web Services、Windows 服务等。

微软于 2002 年发布.NET Framework 1.0 以来，经历了以下几代： 1）2002 年.NET Framework 1.0 发布。 2）2005 年发布了.NET Framework 2.0，为设计和编写 Windows 软件的开发人员提供

了更好的工作环境，效率也更高。 3）2006 年发布的.NET Framework 3.0 是从 2.0 版本演化而来，在.NET Framework 2.0

之上附加了四大部分新技术：Windows Presentation Foundation（WPF）、Windows Workflow Foundation（WF）、Windows Communication Foundation（WCF）和 Windows CardSpace，对.NET Framework 2.0 原有的组件没有任何改变或删除。

学习要点

第 1 章

ASP.NET 入门

科

学出版社


www.abook.cn

2 ASP.NET 动态网页设计案例教程

4）2008 年发布的.NET Framework 3.5 延续了.NET Framework 3.0 提出的加性算法，

在.NET Framework 2.0/3.0 现有的 DLL 设置上增加了一些组件。ASP.NET 3.5 包括三个新增

的控件，即 ListView、DataPager 和 LinqDataSource；改进后的 IDE 也可以用于 ASP.NET 4.0项目，如支持 JavaScript 的动态智能感知和调试；新增了 CSS 引擎和一个支持嵌套母版页

的 HTML 设计器。 5）2010 年发布的.NET Framework 4.0，除了包含之前版本的功能外，其他新增功能和

改进有应用程序兼容性和部署、核心新增功能和改进、Managed Extensibility Framework、并行计算、网络、Web、客户端、数据、Windows Communication Foundation、Windows Workflow Foundation 等。

在.NET Framework 4.0 中，增加了 System.Numerics 命名空间，提供 BigInteger 功能。

另外，对许多功能进行了大幅度更新，包括 System.Linq.Expressions 命名空间里新增的语

句树的支持，System.Scripting 等与脚本语言相关的支持等。

1.2 ASP.NET 4.0 引入的新功能

ASP.NET 4.0 引入的新功能如下。 1）核心服务：包括可用来扩展缓存的新 API、支持对会话状态的数据进行压缩以及新

的应用程序预加载管理器（自动启动功能）。 2）Web 窗体：包括对 ASP.NET 路由的更集中化支持、对 Web 标准的增强支持、

更新的浏览器支持、数据控件的新功能以及视图状态管理的新功能。 3）Web 窗体控件：包括新的 Chart 控件。 4）MVC：包括视图的新帮助器方法、对分区的 MVC 应用程序的支持以及异步控

制器。 5）动态数据：包括对现有 Web 应用程序的支持、对多对多关系和继承的支持、新的

字段模板和特性以及增强的数据筛选。 6）Microsoft Ajax：包括对 Microsoft Ajax 库中的基于客户端的 Ajax 应用程序的附

加支持。 7）Visual Web Developer：包括改进的 JScript IntelliSense、针对 HTML 和 ASP.NET

标记的新的自动完成代码段以及增强的 CSS 兼容性。 8）部署：包括用于自动化典型部署任务的新工具。 9）多目标：包括针对目标版本的 .NET Framework 中未提供功能的更好的筛选功能。

1.3 ASP.NET 开发要求

1．.NET Framework 与 Visual Studio 2010 同时发布的.NET Framework 是 4.0 版本， .NET Framework 的公

共语言运行库和类库提供了 ASP.NET 开发所必需的框架服务平台。

3 第 1 章 ASP.NET 入门

2．Web 服务器

ASP.NET 作为一项服务，必须使用浏览器向承载应用程序的 Web 服务器发出请求，

通常使用 IIS（Internet 信息服务）作为 Web 服务器。使用 Visual Studio 2010 作为集成开

发环境时，也可以使用该开发环境内置的 ASP.NET 开发服务器来测试 ASP.NET 网页，可

以不安装 IIS。但部署 ASP.NET Web 应用程序时仍然要安装 IIS 作为 Web 服务器。通常要求在安装.NET Framework 4.0 或安装带有.NET Framework 4.0 框架的 Visual

Studio 2010 前先安装好 IIS，在安装.NET Framework 时将在 IIS 中注册 ASP.NET。

如果在已安装.NET Framework 4.0 的情况下安装 IIS，则要通过下面方法注册

ASP.NET，假设操作系统为 Windows 7，安装在 C 盘根目录下，则在 DOS 提示符界面

输入路径：\Windows\Microsoft.NET\Framework\v4.0.30319 \aspnet_regiis -i，按回车键

运行注册程序来注册 ASP.NET。

3．ASP.NET Web 应用程序

ASP.NET Web 应用程序也称为 ASP.NET 网站。

4．网页

ASP.NET 网页是 Web 应用程序中的窗体，包括服务器控件的可编程网页，使用一种

已编译的、由事件驱动的编程模型，可以提高程序性能并支持将应用程序逻辑与用户界面

相隔离。

5．数据库

如创建需要动态存储数据的网站，则需要有数据库的支持。微软还发布了新一代的关

系数据库管理系统 SQL Server 2008。可使用 SQL Server 数据库来存储与网站相关的所有信

息，SQL Server 2008 还提供了一个免费的轻量级版本，名为 SQL Server 2008 Express。本

书使用 MS SQL Server 2008 Express 作为网站开发使用的数据库。

1.4 创建简单的ASP.NET 网站

1.4.1 创建、打开网站

在 Visual Studio 2010 中，可以用文件系统方式、HTTP 方式、FTP 方式来创建和打开

Web 项目。Visual Studio 2010 可以在没有安装 IIS 的计算机上以文件系统方式创建网站。

1．文件系统（File System）方式

从“开始”菜单进入 Visual Studio 2010 操作界面，单击“文件”菜单，选择“新建→

网站”命令，进入图 1-1 所示新建网站界面，在图 1-1 左上角“已安装的模板”里选择开

发语言 Visual C#，在中间栏选择 ASP.NET 网站，Visual Studio 2010 内置的 Web 服务器

提示

科

学出版社


www.abook.cn


使得在本地机没有安装 IIS 或不希望通过 IIS 创建站点时也能以文件系统方式创建 Web 网

站。在新建网站界面的“Web 位置”下拉列表框中选择“文件系统”，同时输入 Web 站点

的存放路径，或单击“浏览”按钮选择 Web 站点的存放路径。

图 1-1 以文件系统方式创建网站

以文件系统方式创建的站点，在本地调试完后，可移植到 IIS 服务器上，只要在 IIS 上

建立虚拟目录即可实现。

2．HTTP 方式

HTTP 方式是通过本地 IIS 创建 Web 站点，可以充分发挥本地 IIS 的强大功能为

ASP.NET 提供支持。在图 1-1 所示左下角的“Web 位置”下拉列表框中选择“HTTP 方式”，单击“浏览”

按钮，进入“选择位置”对话框，选择“本地 IIS”，如图 1-2 所示，可在“本地 Web 服

务器”选择一个本地站点或单击右上角的“创建新 Web 应用程序”按钮，或单击“创建

新虚拟目录”按钮新建一个 Web 站点。

图 1-2 以 HTTP 方式创建网站


3．FTP 方式

通过 FTP 协议在远程服务器上建立或打开 Web 站点。在新建网站界面的“Web 位置”

下拉列表框中选择“FTP 方式”，再单击“浏览”按钮，进入图 1-3 所示 FTP 站点界面,输入正确的 FTP 服务器地址、端口号、用户名、密码即可连接 Web 站点，对网站进行编辑

更新等操作。

图 1-3 设置 FTP 站点

1.4.2 网站中的特殊目录

在 ASP.NET 4.0 的网站根目录中保留了一些预定义的存放特定内容的目录，除建网站

时同步生成的 App_Data、Account、Scripts、Styles 文件夹外，在解决方案资源管理器界面

右单击网站名，在弹出的快捷菜单中选中“添加 ASP.NET 文件夹”命令，可添加 ASP.NET预定义的文件夹，如图 1-4 所示。预定义文件夹如下。

图 1-4 添加 ASP.NET 文件夹

1）App_Data：存放网站的本地数据库。如存放.mdb、.mdf、.xml 类型的文件。 2）Styles 文件夹：增加了默认的 css 样式文件。使用 css 样式文件能很方便地调整网站

风格，Visual Studio 2010 在新建网站时会增加一个名为 Site.css 的样式文件，它位于 Styles文件夹下。

3）Account：Visual Studio 2010 新增功能，在大多数网站和应用程序中需要进行认证，

因此在新模板中增加了认证功能，使得用户能在 Web 项目中对身份认证快速上手，有关身

份认证的模块文件都放在 Account 文件夹下。

科

学出版社


www.abook.cn


4）Scripts 文件夹：集成 jQuery。jQuery 是一个非常强大的 JavaScript 类库，它可以让

Web 开发人员很方便地操作 XHTML 文档，在 Visual Studio 2008 中需要安装 SP1 才支持，

而在 Visual Studio 2010 中就直接支持了，jQuery 类库文件在 Scripts 文件夹下。 5）Bin 目录：包含要在网站中引用的控件、组件或其他代码的已编译程序集（.dll

文件）。 6）App_Code 目录：App_Code 文件夹中代码的内容可以用在网站的所有页面中，而

且 App_Code 文件夹中可以包含任意的文件与文件夹。存放的源代码在运行网站时将被自

动编译，存放.cs、.vb、.xsd 和自定义的文件类型。 7）App_GlobalResources（R）：创建全局资源文件.resx 资源文件，此外，ASP.NET 还

生成一个强类型对象，提供一种以编程方式访问全局资源的简单方法。 8）App_LocalResources（C）：本地.resx 类型的资源文件，可以存在于应用程序的任何

文件夹中，这与 App_GlobalResources 根文件夹不同。通过资源文件名将一组资源文件与

特定的网页相关联。 9）App_WebReferences（B）：在添加一个新的 Web 引用时，会创建一个新的

App_WebReferences 文件夹，其中包含所生成的客户代理文件，存放.wsdl 类型文件。 10）App_Browsers（W）：包含.browser 文件，.browser 文件描述浏览器的特征和功能。

ASP.NET 在安装路径下的 Config\Browser 文件夹中安装了大量.browser 文件，这些文件供

所有应用程序共享。 11）主题（E）：主题包含在 App_Themes 文件夹下的一个文件夹，存放.skin、.css、.xsl

等类型文件。一个主题是一组带有样式信息的文件。主题文件夹中的文件内容被编译，以

生成一个类，而该类被页面调用以编程的方式设置主题化控件的样式。此外，基于 Visual Studio 2010 建立的网站增加了默认的母版页。使用母版页能比较方

便地统一网站网页的展示，如涉及网页顶部、用户登录状态显示及菜单部分，默认的母版

页文件名为 Site.master。

1.4.3 创建 Web 页面

ASP.NET 4.0 使用一个改进的代码后置模型，自动为 Web 窗体创建两个独立的文件。

一个是扩展名为.aspx 的文本文件，由静态 HTML 标记（Tag）与 ASP.NET 服务器控件所

构成的，用于设计窗体的版面和外观。另一个是存放与窗体交互用户接口逻辑代码的文件，称为代码后置类文件，Visual

Basic .NET 撰写代码后置类文件，其扩展名将是 .aspx.vb；如果以 Visual C# 撰写代码后置

类文件，其扩展名将是 .aspx.cs。运行窗体时，用户接口逻辑的代码后置类文件会随之运

行并动态产生网页的输出，代码后置类文件会被编译成一个动态链接程序库.dll。案例 1-1 创建一个页面，使用户可输入自己的用户名，单击显示信息后可以看到自

己输入的信息。

实现步骤

1）单击“开始”菜单，单击 Microsoft Visual Studio 2010，进入.NET 系统界面。

2）按文件系统方式创建一个名为“FirstASPNET”的网站，同时自动生成一个默认名

为 Default.aspx 和一个名为 Default.aspx.cs 的后置代码类文件，如图 1-5 所示，默认的


Default.aspx 文件应用了网站自带的母版 Site.master 格式，而母版又应用了 Site.css 样式。 3）单击创建网站时生成的 Default.aspx 文件，进入设计视图。在设计视图中，单击“布

局→插入表”命令，插入一个 4 行 2 列的表，合并表格的第 1 行和第 4 行，在第 1 行输入

“第一个 ASP.NET 网页”文字。鼠标分别停留在第 1 列第 2 行、第 3 行单元格，设置单元

格对齐属性 Align 为 right（右对齐），设置第 2 列的第 2 行、第 3 行单元格对齐属性 Align为 Left（左对齐）。在表格边缘移动鼠标，出现图标时按左键，选取整个表格，在“表

格属性”设置框中，单击 Style 属性右边的图标，进入“表格样式”设置界面，设置表

格的“边缘”标签样式，设置表格的高度为 150px，宽度为 200px。

图 1-5 第一个 ASP.NET 网页的页面布局

4）从工具箱中拖入标签控件、文本框控件和按钮控件，如图 1-6 所示布局页面。

图 1-6 表格控件布局

5）分别选取控件，在右下角的属性窗口中设置控件的属性，如表 1-1 所示。

表 1-1 设置控件属性值

控件类型 ID 属性值

Label lbluser Text="用户名："

Label lblmessage Text=" "

TextBox txtuser Text=" "

Button btnshow Text="显示信息"

Button btnclear Text="清除信息"

6）编写事件代码。双击“显示信息”按钮，进入代码后置类文件页面，编写按钮事件如下：

科

学出版社


www.abook.cn


protected void btnshow_Click(object sender, EventArgs e) { lblmessage.Text = txtuser.Text + " 欢迎您！"; }

双击“清除信息”按钮，进入代码后置类文件编辑按钮事件，代码如下： protected void btnclear_Click(object sender, EventArgs e) { txtuser.Text = ""; lblmessage.Text = ""; }

7）切换到网页源视图下，可看到系统自动生成的 HTML 代码如下：

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master"

AutoEventWireup= "true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID=

"HeadContent"> </asp:Content> <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID=

"MainContent"> <h2> 欢迎使用ASP.NET! </h2>

<table style="border-right: thistle thin solid; border-top: thistle thin solid; border-left: thistle thin solid; border-bottom: thistle thin solid; height: 150px; width: 200px;">

<tr> <td align="center" colspan="2"> 第一个ASP.NET网页</td></tr> <tr> <td style="width: 74px; height: 22px;" align="right">

<asp:Label ID="lbluser" runat="server" Text="用户名："> </asp:Label></td>

<td style="width: 100px; height: 22px;"> <asp:TextBox ID="txtuser" runat="server">

</asp:TextBox> </td> </tr> <tr> <td style="width: 74px" align="right">

<asp:Button ID="btnshow" runat="server" Text="显示信息" Width="67px" /></td>

<td style="width: 100px" align="center"> <asp:Button ID="btnclear" runat="server" Text="清除信息"/> </td> </tr>

<tr> <td align="left" colspan="2"> <asp:Label ID="lblmessage" runat="server">

</asp: Label></td> </tr> </table>

</asp:Content>

说明源代码第一行的@Page 指令如下：

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup ="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

其中，@Page 指令用于定义 ASP.NET 页分析器和编译器使用的页特定属性，属性如下：

Language="C#" 指明对页中所有内联呈现（<% %>和<%= %>）内的代码和代

码声明块进行编译时使用的语言为 C#语言。 MasterPageFile 指明页面引用了母版。 AutoEventWireup 属性指明页的事件是自动绑定。 CodeFile 属性指定页的代码后置类文件的名称。 Inherits 属性定义供页继承的代码后置文件的类。


1.4.4 调试应用程序

在 Visual Studio 开发环境中，有多种方式运行和查看网页的效果。

1．在调试模式下运行网页

单击“调试”菜单的“启动调试”命令，或按快捷键 F5，或单击工具栏上的按钮，

可以在调试模式下运行当前网页。如果新建的网站以前从未运行过任何网站中的网页，则将弹出如图 1-7 所示的消息框，

提示启用调试所必须执行的操作。选择“修改 Web.config 文件以启用调试”，单击“确定”

按钮，则在 Web.config 文件中添加了<compilation debug="true" targetFramework="4.0"/>节点，以后的所有本网站的网页都可以调试模式下运行。

图 1-7 “未启用调试”对话框

运行结果单击启动调试后，用户在文本框中输入用户名后，单击“显示信息”按

钮，则在页面出现所输入的用户名的欢迎信息，如图 1-8 所示。

2．在调试模式下监控变量值的变化

在调试模式下可以启用调试器并通过设置监视窗口监视变量值的变化，步骤如下： 1）在需要监控的程序行设置断点，方法是在程序行的左侧单击鼠标，如图 1-9 所示，

出现红色的圆形断点图标，或将光标定位到要设断点的行，单击调试菜单的“切换断点”

命令设置或取消断点。 2）单击“调试”按钮调试程序，在文本框中输入信息，并单击“显示信息”按钮

后，程序运行到断点处停下来，这时可设置监视窗口监视变量值或控件属性值的变化，方

法是单击“调试”菜单，选择“窗口→监视→监视 1”命令，如图 1-10 所示，设置监视窗口。

图 1-8 在文本框中输入用户名单击“显示信息”

按钮后显示的界面

图 1-9 设置断点

科

学出版社


www.abook.cn


图 1-10 设置监视窗口

3）在图 1-11 所示的监视窗口中，添加要监视的控件属性值 txtuser.Text，设置完要监

视的变量或控件属性值后，在图 1-15 中可看到所监视的属性值为当前用户在文本框中输入

的值，然后再单击“逐语句 ”命令，继续运行程序。

图 1-11 往监视窗口添加监视对象

3．不进行调试直接运行网页

在“调试”菜单界面中直接单击“开始执行（不调试）”命令，不启动调试器直接运

行网页。

4．直接在浏览器中查看网页

在解决方案资源管理器中，右击要查看的网页，在弹出的快捷菜单中选择“在浏览器

中查看”命令，如图 1-12 所示。如果要更改默认的浏览器，则可在图 1-12 中选择“浏览

方式”命令，弹出图 1-13 所示的界面，在这里可设置浏览器窗口的大小和选择不同的浏览

器查看网页或添加新的浏览器。

图 1-12 在浏览器中查看网页图 1-13 更改浏览器

1.4.5 部署 Web 应用程序和测试网站

Web 应用程序的部署可以使用 FTP 方式传输、发布站点、制作 MSI 安装程序、复制站

点等多种方式。下面介绍发布站点方式部署案例 1-1 中的 Web 应用程序，同时测试网站是

否部署成功。以发布网站方式部署应用程序并测试网站步骤如下： 1）在解决方案资源管理器中，右击网站项目名，弹出快捷菜单如图 1-14 所示，选择


“生成网站”命令，生成完毕再选择快捷菜单中的“发布网站”命令，弹出如图 1-15 所示

的发布网站对话框。

图 1-14 用快捷菜单命令发布网站

图 1-15 发布网站对话框

2）在图 1-15 中，单击按钮选择发布网站的目标位置，单击“确定”按钮。发布完

成后可在目标文件夹中看到所生成的文件如图 1-16 所示。

图 1-16 发布生成的文件

3）在控件面板中，通过“管理工具”进入“Internet 信息服务（IIS）管理器”界面，

或在“开始”菜单的“运行”对话框中输入 inetmgr，单击“确定”按钮后进入“Internet 信息服务（IIS）管理器”界面，如图 1-17 所示。在左边“连接”栏选择网站，在右边的操作

栏单击“添加网站”图标，进入图 1-18 所示对话框，在“网站名称”栏填写 myweb（可以

和实际网站名不同），选择“应用程序池”为 ASP.NET v4.0，物理路径选择刚发布的网站

路径，绑定端口号改为 81。单击图 1-18 中“连接为（C）…”按钮，进入图 1-19 所示的传递身份验证的用户设定

对话框，选择“特定用户”，用户名和密码为登录操作系统的用户名和密码。设置完后再

单击“测试设置（G）…”按钮，身份验证和授权验证都通过，如图 1-20 所示。

科

学出版社


www.abook.cn


图 1-17 IIS 信息服务器

图 1-18 添加网站

图 1-19 用户设定图 1-20 测试连接

4）测试网站，如图 1-21 所示，单击“Internet 信息服务（IIS）管理器”界面右侧的“浏

览*：81（http）”链接，或在浏览器地址栏输入 http://localhost:81/，可看到如图 1-22 所示

的运行结果。

图 1-21 浏览网站图 1-22 发布站点测试运行


上机实训 1

1．实训目的

创建并发布自己的第一个网站。

2．实训内容

新建一个名为 linkWeb 的网站，可以链接到新浪网和 Hao123 网。

3．实训步骤

1）新建一个名为 linkWeb 的网站。 2）单击创建网站时生成的 Default.aspx 文件，进入设计视图，在设计视图中单击“布

局→插入表”命令，插入一个 3 行 1 列的表，在第 1 行输入“第一个 ASP.NET 网页”文字。

鼠标停留在表格的第 1 行，设置单元格的对齐属性 Align 为 Center，再将鼠标分别停留在

第 2、3 行单元格中，设置单元格对齐属性 Align 为 Left（左对齐）。在表格边缘移动鼠标，

出现图标时按左键，选取整个表格，设置表格的 Border 属性值为 1，单击 Style 属性

右边的图标，设置表格边框格式和表格的高度宽度。 3）从工具箱中拖入两个 HyperLink 超链接按钮控件分别放置在表格的第 2、3 行。

4）在解决方案资源管理器子视图中，右击网站名，选择“新建文件夹”命令，将文件

夹重命名为 image，在解决方案资源管理器中可看到新增加了一个 image 的文件夹。 5）打开 http://www.hao123.com/网页，下载“网址之家”的图片另存到 image 文件夹

中。鼠标右击 image 文件夹，选择“刷新文件夹”命令。 6）在网页的设计视图中，分别选择两个超链接按钮，设置超链接按钮控件属性如

表 1-2 所示。

表 1-2 设置控件属性值

控件类型 ID 属性值

HyperLink HyperLink1

Text=新浪网，Target=_blank， NavigateUrl=http://www.sina.com.cn/， ToolTip=新浪网，其他属性按默认值设置

HyperLink HyperLink2

ImageUrl=~/image/logo.gif, NavigateUrl=http://www.hao123.com/， Target=_blank，ToolTip=网址之家，其他属性按默认值设置

7）运行并发布网站。

科

学出版社


www.abook.cn

第 2 章 CSS 样式与母版页

掌握简单 CSS 样式设计

掌握母版页的创建、应用及在母版页中使用样式

掌握主题的应用

Visual Studio 2010 提供了许多工具帮助简化页面布局和 CSS 管理，所见即所得的设计

界面使在 ASP.NET 中更容易进行 CSS 样式设计。在 ASP.NET 中应用的 CSS 样式文件，可

在 ASP.NET 平台中添加样式文件后编写样式代码，也可以通过其他编辑器完成样式文件编

写后再导入到网站。母版页的引入，可将 Web 站点中的公共页面内容，分离到母版页中，作为 Web 站点

的“网页模版”，将该模版应用到网页中，使网页具有相同的风格。当需要对这些内容进

行修改时，只需修改母版页，Web 站点中应用了母版的页面，将自动进行更新，有效地提

高了开发效率。

2.1 使用 CSS 布局页面

使用 CSS 布局网页是 Web 标准的基础，使用 CSS，可对页面的布局、字体、颜色、

背景和其他效果实现更加精确的控制。使用 CSS＋Div 布局页面主要优点如下： 1）结构清晰，容易被搜索引擎搜索到。 2）缩短改版时间，只要修改 CSS 文件就可以重新设计页面。 3）表现与内容相分离，将设计部分分离出来放在一个独立的样式文件中。 4）可方便将网页的风格格式同时更新。

2.1.1 CSS 概述

CSS 是 Cascading Style Sheets 的简称，通过 CSS 可将所有有关文档的样式指定内容全

部脱离出来，通过外部样式文件供 HTML 调用。CSS 样式表的主要目的是将网页上的元素

进行精确定位，把网页上的内容结构和格式控制相分离。把一个网页页面当作是一个盒子，用 CSS 来定义盒子的位置、大小、边框、内外边距、

内容排列方式等。CSS 方框模型参考如图 2-1 所示。其中，Padding 称为内边距也称为填充；

Border 称为边框；Margin 称为外边距或称为空白边。直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以

外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

学习要点

第 2 章

CSS 样式与母版页

15 第 2 章 CSS 样式与母版页

图 2-1 CSS 方框模型参考

假设外边距上下边距为 5px，左右外边距为 10px，内边距为 5px，无边框。如果希望

这个盒子模型框达到 120px 宽，60px 高，就需要将内容的宽度设置为 90px，高度设置为

40px，盒子模型如图 2-2 所示。

120px

5px

10px 10px

5px

Padding:5px

网页内容框：90px×40px

60px

图 2-2 盒子模型示例

CSS 代码如下：

#box { width: 90px; margin: 5px 10px ;padding: 5px; ｝

2.1.2 ASP.NET 中应用 CSS 样式

在 Visual Studio 2010 中，当进入样式编写设计视图时，在菜单栏可以看到样式菜单，

在快捷工具栏出现“添加样式规则”和“生成样式”的快捷按钮，如图 2-3 所示。

快捷按钮样式菜单

图 2-3 Visual Studio 2010 界面

科

学出版社


www.abook.cn


1．建立 CSS 样式文件

右击网站中的 Styles 样式文件夹，添加样式表文件 StyleSheet.css。

2．添加样式规则

双击样式文件，进入代码编辑器界面，单击“添加样式规则”快捷按钮，进入图 2-4所示界面，定义样式类型。

图 2-4 “添加样式规则”对话框

1）元素样式：重新定义特定的元素（如 h1）的格式，样式名前面不加任何符号，以

h1 样式名为例，引用方式一般为：<h1>内容</h1>。 2）类名样式：可重用在页面上任何结构和内容上，也可对选定元素进行重定义。样式

的定义以点开头，以 class=“类样式名”进行引用。 3）元素 ID 样式：一个页面中只可使用一次，用于区分不同的结构和内容。样式定义

以＃开头，以 id=“元素 ID 样式名”进行引用。

3．设置样式属性

ASP.NET 中的 CSS 样式属性设置包括对字体、块、背景、边框、方框、定位、布局、

列表、表格共 9 大类进行设置，下面分别进行介绍。（1）字体属性设置网页中的文字的字体、颜色、风格等，如图 2-5 所示。

图 2-5 字体属性

font-family：指定文本的字体。 font-size：对文字的大小进行设置。


font-weight：设置字体的粗细。 font-style：设置字体的风格。 font-varian：设置文本的大小写字母。 text-transform：控制字母的大小写转换。 color：设置文本的颜色。 text-decoration：控件链接文本的显示状态。

（2）块属性 CSS 中的区块指的是网页中的文本、图像和层等替代元素，属性内容如图 2-6 所示，

主要控制块中内容的间隔、对齐等。

图 2-6 块属性内容

line-height：行高设置。 vertical-align：块的垂直对齐方式。 text-align：块的水平对齐方式。 text-indent：设置块的缩进程度。 white-space：设置空白格式，在 HTML 里，空格（空白）默认是被忽略的。 word-spacing：字之间的空白。 letter-spacing：字符之间的空白。

（3）背景属性用于在网页元素后面加固定的背景色或图像，界面如图 2-7 所示。

图 2-7 背景属性

background-color：设置背景颜色。 background-image：设置背景图片。 background-repeat：当显示图片的位置与图片大小不同时，确定背景图片是否重复

显示及如何重复显示。

科

学出版社


www.abook.cn


background-attachment：确定背景图片是固定在原始位置还是随内容一起滚动。 background-position（x）或（y）：指定图片相对元素的初始位置（对齐方式）。

（4）边框属性边框是位于外边距和内边距间的线。使用 CSS 的边框属性，可以创建出如同表格一样

效果的边框样式，可应用于任何元素上，每个边框分为上、右、下、左四个边，如图 2-8所示。

border-style：设置边框的样式。 border-width：设置边框的粗细。 border-color：设置边框的颜色。

图 2-8 边框属性

（5）方框属性 CSS 把所有块元素都当作一个由一个方框包围，可对每个块元素设置外边距和填充空

间大小。可分别设置上、右、下、左四个方向的边距，属性如图 2-9 所示。 padding：块元素内边距。 margin：块元素外边距。

图 2-9 方框属性

（6）定位属性利用定位属性，可以建立列式布局，即布局的一部分与另一部分重叠，包括如图 2-10

所示的几种 CSS 属性。 position：确定定位类型。 z-index：设置块元素的叠放顺序。 width、height：确定元素的宽度和高度。 top、right、bottom、left：设置元素上、右、下、左的位置。


图 2-10 定位属性

（7）布局属性用于设置块元素在网页中的显示方式，主要方式如图 2-11 所示。

visibility、display：控制元素的隐藏、显示。 float：设置块元素的浮动效果。 clear：清除块元素的浮动效果。 cursor：某个元素使用光标的形状。 overflow：当元素高度或宽度超出时溢出处理方式。 clip：元素被定为绝对定位类型后，对块元素的剪切。

图 2-11 布局模式设置

（8）列表属性控制列表内各项元素，如图 2-12 所示。

list-style-type：列表内每一项前使用的符号。 list-style-image：用于代替每一列表项前符号的图片。 list-style-position：列表位置。

图 2-12 列表属性设置

科

学出版社


www.abook.cn


（9）表格属性设置表格外观相关属性，如图 2-13 所示。

table-layout：完成表布局的方式。 border-collapse：设置表格的边框是否

被合并为一个单一的边框。 border-spacing：设置相邻单元格的边框

与边框间的距离（空白）。 empty-cells：设置是否显示表格中的空

单元格（仅用于“分离边框”模式）。 caption-side：设置表格标题的位置。

4．样式引用

样式分为外部样式和内部样式，内部样式直接写在 HTML 页面文件上，只需要在相应

的块中进行引用即可。外部样式一般存放在专门的文件夹中，ASP.NET 4.0 有专门存放样

式文件的文件夹 Style，对外部样式文件的引用需要在 HTML 的<Head>标签内引用代码。假设在 Style 文件夹下建立了一个 StyleSheet.css 样式文件，样式文件中分别建好了名

为#header、#main 和#footer 的三个定义了相同宽度且居中的元素 ID 样式，分别布局在网页

的上、中和下三部分。将编写好的 CSS 文件应用到 ASP.NET 窗体页面，需要在窗体页面的源视图下，在

<head>标签内添加如下代码：

<link href="~/Styles/StyleSheet.css" rel="stylesheet" type="text/css" />

其中，href="~/Styles/StyleSheet.css"指明所引用样式文件的路径，rel="stylesheet"指链接的

是一个样式表文档。在页面布局相应位置对所设置的样式进行引用。页面的源视图<html>标签代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>一列固定宽度居中</title> <link href="Styles/StyleSheet.css" rel="Stylesheet" type="text/css" />

</head> <body> <form id="form1" runat="server">

<div id="header">页眉 </div> <div id="main">页面内容部分</div> <div id="footer">页脚</div> </form> </body></html>

2.1.3 常见的布局类型样式

1．一列固定宽度、居中

页面整体居中是网页设计中普遍应用的形式，在传统表格布局中，使用表格的

align="center"属性来实现。div 本身也支持 align="center"属性使 div 处于居中状态，但这样

图 2-13 表格属性设置


写又违背 CSS 实现表格和内容的分离的原则，因此选择用 CSS 实现内容的居中，以一列固

定宽度、居中样式为例，如图 2-10 所示在定位样式框填写页面高度和宽度，在图 2-9 方框

样式框里填写页面的上下外边距为 0，左右外边距为自动适应，再选择背景色，CSS 代

码如下：

#header {

height: 100px; width: 960px; margin: 0px auto; background-color: #00FF00; }

其中，margin 属性用于控制对象的上、右、下、左四个方向的外边距，当 margin 使用

两个参数时，第一个参数表示上下边距，第二个参数表示左右边距。除了直接使用数值之

外，margin 还支持 auto 值，auto 值是让浏览器自动判断边距，将 div 的左右边距设为相当，

并呈现为居中状态，从而实现了局中效果。

2．一列自适应

自适应布局也是网页设计中常见的布局形式。自适应的布局能够根据浏览器窗口的大

小，自动改变其宽度和高度值，对不同分辨率的显示器都能提供较好的显示效果。实际上，

div 默认状态的占据整行的空间，便是宽度为 100%的自适应布局的表现形式，一列自适应

布局只需要将宽度由固定值改为百分比值的形式即可，代码如下：

#main { height: 500px; width: 80%; margin: 0px auto; background-color:

#FF00FF; }

3．二列固定宽度、居中

在一列固定宽度之中，使用 margin:0px auto;这样的设置，使一个 div 得以达到居中显

示，二列分栏布局则需要在二列外面再添加一个 div 的嵌套式设计，使外层的 div 居中作为

容器，将二列分栏的两个 div 放置在容器中，从而实现二列的居中显示，样式代码结构

如下：

#page { width:960px; margin: 20px auto 0px auto; } #left_main { padding: 0px; height: 500px; width: 200px; float: left; background-

color: #008080;} #right_main { padding: 0px;height: 500px;width: 760px;background-color: #008000;

margin-left: 200px; }

为了实现二列式布局，左边样式采用了浮动属性 float。float 属性是 CSS 布局中非常重

要的一个属性，用于控制对象的浮动布局方式，float 的可选参数为 none/left/right，none 值

科

学出版社


www.abook.cn


表示对象不浮动，使用 left 时，对象将向左浮动，使用 right 时，对象将向右浮动。右边页

面设置左外边距值为左页面宽度。在 Web 窗体页面引用样式，源视图<html>标签代码如下：

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>二列固定宽度居中</title>

<link href="Styles/StyleSheet.css" rel="Stylesheet" type ="text/ css" /> </head> <body>

<form id="form1" runat="server"> <div id="page"> <div id="left_main">左页面内容</div> <div id="right_main">右页面内容</div>

</div> </form>

</body> </html>

4．三列固定宽度、居中

三列固定宽度、居中布局也是网页常用布局，需要左栏向左浮动且固定宽度，右栏向

右浮动且固定宽度，并且在三列外面增加一个 div 作为容器，样式名为#page，设置该容器

居中。代码如下：

#page { width:960px; margin: 20px auto 0px auto; } #left_main { padding: 0px; height: 500px; width: 200px; float: left; background-

color: #008080;} #center { float: left;padding: 0px;height: 500px;width: 600px; background-

color: #FF00FF; } #right { padding: 0px;height: 500px;width: 160px;background-color: #008000;

float: right;}

在窗体页面的源代码视图对样式的引用如下：

<form id="form1" runat="server"> <div id="page"> <div id="left_main">左页面内容</div> <div id="center">中间页面内容</div> <div id="right">右页面内容</div> </div> </form>


2.2 母版页

2.2.1 母版页基础

母版页实际上就是一个网页模版，可以应用到多个网页中。在 Web 应用程序中使用母

版页技术，必须创建母版页（Master），再创建内容页面（应用母版的页面）。运行时，

ASP.NET 会自动地将两个页面进行整合，显示给用户。母版页类似于 HTML 中的框架页，将页面分割成几个内容区域，其他是固定部分。固

定部分用于设置所有网页共同的内容，如网页标头、导航结构等。内容区域用来设置各个

网页不同的内容，使用 ContentPlaceHolder 控件占位，运行时，使用内容页面中的相应的

Content 控件的内容进行填充，固定部分和内容区域整合后，得到实际显示的页面。工作过

程如图 2-14 所示。

图 2-14 母版页工作过程

2.2.2 创建母版页

在 Visual Studio 2010 中，新建网站时，已经自动新建了一个母版页 Site.Master，可以

在该母版页的基础上进行修改，也可以自己新建母版页。在ASP.NET 中创建母版页的方式与创建Web窗体的方式类似。在工具栏中单击按

钮，弹出“添加新项”对话框，选择“母版页”。创建三个文件 Site1.Master、Site1.Master.cs 和 Site1.Master.designer.cs，Site1.Master 是

母版页的页面文件，Site1.Master.cs 是后置代码文件。Site1.Master 文件中<html>标签的代

码如下：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title></title> <asp:ContentPlaceHolder ID="head" runat="server">

</asp:ContentPlaceHolder>

</head> <body>

<form id="form1" runat="server">

科

学出版社


www.abook.cn


<div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" "server">

</asp:ContentPlaceHolder> </div> </form> </body></html>

在 Site1.Master 文件中的第一行语句是一个 Master 指令，表明该页面不是普通的页面，

而是母版页，在指令中指定了母版页的编程语言、后置代码文件和类名。在 Site1.Master 文件中包含 html、head、body、form 等标记，在内容页面中不需要再

出现 html、head、body、form 等标记。在 form 标记中，包含一个 ContentPlaceHolder 控件，

表示在这个位置将用内容页面中的 Content 控件内容进行填充。在 ContentPlaceHolder 控件

中也可以包含默认内容，当内容页面中没有相应的 Content 控件时，将显示默认内容。在

母版页中，可以包含多个 ContentPlaceHolder 控件。如果要增加 ContentPlaceHolder 控件，

在页面设计视图中，在工具箱中的“标准”控件组中选择 ContentPlaceHolder 控件，拖放到

母版页中。母版页中除 ContentPlaceHolder 控件之外的内容都是固定内容，可以在其中添加 HTML

标记，也可以添加 Web 控件，定义页面的公共内容。案例 2-1 创建母版页。

案例分析创建一个母版页，页面由 4 部分组成，包括页面标头、页面导航区域、

内容区域和页面脚注，其中页面标头、页面导航区域和页面脚注是 Web 应用中所有页面的

公共内容。母版页布局如图 2-15 所示。

页面标头

导航区域

页面脚注

内容区域

图 2-15 案例 2-1 母版页布局

实现步骤

1）新建一个母版页，命名为 ForumMaster.Master。 2）在页面视图中，选择“布局”菜单中的“插入表”命令，插入一个 3 行 2 列居中的

表格；合并表格第 1 行的两个单元格，合并表格第 3 行的两个单元格。将母版页中自动创

建的 ContentPlaceHolder 控件的 ID 属性改为 myContent，并移动到表格第 2 行的第 2 个单

元格中。根据需要调整表格大小。 3）在表格的第 1 行中，添加静态文本“程序员学习交流论坛”，添加两个 LinkButton


按钮，分别命名为 lbtnLogin 和 lbtnRegister，Text 属性分别为“登录”和“用户注册”。

表格的第 1 行作为页面的标头，是 Web 应用中页面的固定内容部分。 4）在表格第 2 行的第 1 个单元格中，添加四个 LinkButton 按钮，分别命名为 lbtnNet、

lbtnJava、lbtnDelphi 和 lbtnOracle，Text 属性分别设为“.NET”、“Java”、“Delphi”和

“Oracle”。表格的第 2 行作为页面的导航区域，是 Web 应用中页面的固定内容部分。在实

际应用中，一般使用导航控件 TreeView、Menu 或 SiteMapPath 等来进行页面导航，这将在

后续章节中介绍。 5）在表格的第 3 行添加静态文本“版权所有：虚拟公司”。表格的第 3 行作为页面脚

注，是 Web 应用中页面的固定内容部分。 6）母版页布局如图 2-16 所示。

图 2-16 案例 2-1 母版页布局

7）ForumMaster.Master 文件中生成的源代码如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind= "ForumMaster.master.cs" Inherits="chapter2.ForumMaster" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">

<title>程序员学习交流论坛</title> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <style type="text/css"> .style1 { width: 121%; } </style> </head> <body>

<form id="form1" runat="server"> <div> <div style="text-align: center"> <table style="width: 705px; height: 439px">

<tr style="height:80px; width:100%"> <td colspan="2" style="text-align: center; background-image:

url(image/BBS.jpg); height: 78px;"> 程序员学习交流论坛<br /> <asp:LinkButton ID="lbtnLogin" runat="server">登录

科

学出版社


www.abook.cn


</asp: LinkButton> <asp:LinkButton ID="lbtnRegister" runat="server">用户注册

</asp:LinkButton></td> </tr>

<tr>

<td style="width: 20%; vertical-align: top; text-align: left;"> <asp:LinkButton ID="lbtnNet" runat="server" onclick=

"LinkButton4_Click">.NET</asp:LinkButton><br />

<asp:LinkButton ID="lbtnJava" runat="server">Java </asp:LinkButton><br />

<asp:LinkButton ID="lbtnDelphi" runat="server"> Delphi

</asp:LinkButton> <br/> <asp:LinkButton ID="lbtnOracle" runat="server">Oracle

</asp:LinkButton> </td>

<td style="vertical-align: top;height:90%" class="style1"> <asp:ContentPlaceHolder ID=" ContentPlaceHolder1" runat

="server">

</asp:ContentPlaceHolder> </td> </tr> <tr>

<td colspan="2"style="height:26px">版权所有：虚拟公司</td>

</tr> </table> </div> </div>

</form></body></html>

在案例 2-1 中，ContentPlace Holder1 控件所在位置将由内容页面中相应的 Content 控件

的内容进行填充。

2.2.3 创建内容页面

创建完母版页之后，需要创建内容页面。单击工具栏上的按钮，选择“添加新项”

命令，弹出“添加新项”对话框，在对话框中选择“使用母版页的 Web 窗体”，输入页面

文件名“ForumPage.aspx”；单击“添加”按钮，弹出“选择母版页”对话框，在对话框

中，选择要应用的母版页，单击“确定”按钮，创建一个内容页面 ForumPage.aspx。 ForumPage.aspx 中的文件内容如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/ForumMaster.Master"

AutoEventWireup="true" CodeBehind="ForumPage.aspx.cs" Inherits=

"chapter2.ForumPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID=" ContentPlaceHolder1"

runat="server"> </asp:Content>

在 Page 指令中，通过 MasterPageFile 指定母版页。因为在母版页中，已经使用了 html、

head、body、form 等标记，在 ForumPage.aspx 文件中，不需要再重复使用这些标记。在

Content 控件中可以添加静态文本和 Web 控件。Content 控件的 ContentPlaceHolderID 属性

指定了母版页中对应的 ContentPlaceHolder 控件。页面运行时，将用 Content 控件的内容填


充母版页中对应的 ContentPlaceHolder 控件。在 Web 窗体设计视图中，内容页面只有 Content 控件所在区域是可编辑的，从母版页

中继承来的内容不可编辑，如图 2-17 所示。

图 2-17 在设计视图中的内容页面

案例 2-2 创建内容页面，应用案例 2-1 中的母版页。

案例分析创建内容页面，套用案例 2-1 中的母版页，根据用户在母版页中的导航区

域所选择的论坛栏目，在内容区域显示相应栏目的信息。

实现步骤

1）新建一个 Web 窗体，命名为 ForumPage.aspx，在该页面中应用母版页 ForumMaster. Master。

2）在 ForumPage 页面的后置代码文件 ForumPage.aspx.cs 中，添加方法 GetSubjectInfo的定义，代码如下：

protected string GetSubjectInfo() { string strSubjectInfo = ""; string subjectID = Session["SubjectID"].ToString(); switch (subjectID) { case "1": strSubjectInfo = "欢迎进入.NET编程世界！"; break; case "2": strSubjectInfo = "欢迎进入Java编程世界！"; break; case "3": strSubjectInfo = "欢迎进入Delphi编程世界！"; break; case "4": strSubjectInfo = "欢迎进入Oracle编程世界！"; break; } return strSubjectInfo; }

3）在 ForumPage.aspx 的 Content2 控件中添加一个 Label 控件，命名为 lblSubjectInfo，

为 lblSubjectInfo 进行数据绑定，添加控件 lblSubjectInfo 后，ForumPage.aspx 的代码如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/ForumMaster.Master" AutoEventWireup="true" CodeBehind="ForumPage.aspx.cs" Inherits= "chapter2.ForumPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat=

科

学出版社


www.abook.cn


"server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"

runat="server"> <asp:Label ID="lblSubjectInfo" runat="server" Text=

"<%#GetSubjectInfo() %>" ></asp:Label> </asp:Content>

4）在案例 2-1 中的母版页 ForumMaster.Master.cs 中为 lbtnNet、lbtnJava、lbtnDelphi

和 lbtnOracle 编写 Click 事件处理过程代码如下：

protected void lbtnNet_Click(object sender, EventArgs e) { Session["SubjectID"]=1; //将LinkButton所代表的论坛栏目编号保存在Session中 //内容页中的lblSubjectInfo控件进行数据绑定

this.ContentPlaceHolder1.FindControl("lblSubjectInfo").DataBind(); } protected void lbtnDelphi_Click(object sender, EventArgs e) { Session["SubjectID"] = 3; this.ContentPlaceHolder1.FindControl("lblSubjectInfo").DataBind(); } protected void lbtnJava_Click(object sender, EventArgs e) { Session["SubjectID"] = 2; this.ContentPlaceHolder1.FindControl("lblSubjectInfo").DataBind(); } protected void lbtnOracle_Click(object sender, EventArgs e) { Session["SubjectID"] = 4; this.ContentPlaceHolder1.FindControl("lblSubjectInfo").DataBind(); }

5）在案例 2-1 的 ForumMaster.Master.cs 中，为 Page_Load 事件处理过程编写代码如下：

protected void Page_Load(object sender, EventArgs e) { //如果首次访问页面，设置Session("subjectID")的初始值为1。 if (Page.IsPostBack == false) { Session["SubjectID"] = 1; this.ContentPlaceHolder1.FindControl("lblSubjectInfo").

DataBind(); } }

运行结果首次访问页面，执行效果如图 2-18 所示。

图 2-18 案例 2-2 首次访问页面执行效果

2.2.4 在母版页中设置默认内容

在母版页中的 ContentPlaceHolder 控件中，也可以放置静态文本和 Web 控件，这些称

为母版页的默认内容。如果内容页面中有与 ContentPlaceHolder 相对应的 Content 控件，将

显示内容页面 Content 中的内容；否则，将显示 ContentPlaceHolder 控件中的默认内容。


案例 2-3 母版页默认内容的应用。

实现步骤

1）新建一个母版页，命名为 2_3DefaultContentMaster.Master。 2）在 2_3DefaultMaster.Master 中，自动创建了一个 ID 值为 ContentPlaceHolder1 的

ContentPlaceHolder 控件；手动添加一个 ContentPlaceHolder 控件，命名为 ContentPlace Holder2。

3）在 ContentPlaceHolder1 中，添加一个标签控件，命名为 Label1，设置 Text 属性为

“这是母版页 ContentPlaceHolder1 的默认内容。”；在 ContentPlaceHolder2 中，添加一个

标签控件，命名为 Label2，设置 Text 属性为“这是母版页 ContentPlaceHolder2的默认内容。”。 4）新建一个内容页面，命名为 2_3DefaultContentPage.aspx，在该内容页面中使用母版

页 2_3DefaultContentMaster.Master。 5）在 2_3DefaultContentPage.aspx 的 Content2 中添加一个标签控件，命名为 Label1，

设置 Text 属性为“这是内容页面 Content1 中的内容。”；在 2_3DefaultContentPage.aspx文件中，将控件 Content3 的定义删除。2_3DefaultContentPage.aspx 文件中的代码如下：

<%@ Page Title="" Language="C#" MasterPageFile=

"~/2_3DefaultContentMaster.Master" AutoEventWireup="true" CodeBehind= "2_3DefaultContentPage.aspx.cs" Inherits="chapter2._2_3

DefaultContentPage" %>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"

runat="server"> <asp:Label ID="label1" Text="这是内容页面Content1中的内容。" runat="server" />

</asp:Content>

运行结果案例 2-3 运行效果如图 2-19 所示。

在案例 2-3 中，内容页面提供了 Content2 控件，

填充母版页的 ContentPlaceHolder1，页面运行时，在

ContentPlaceHolder1 位置显示内容页面中 Content2 的

内容；内容页面没有提供 Content 控件填充 Content PlaceHolder2，页面运行时，在 ContentPlaceHolder2位置显示母版页中的默认内容。

2.2.5 访问母版页中的控件和属性

内容页面可以访问母版页中的控件和公共属性。ASP.NET 为内容页面提供了 Master对象，通过Master对象可以访问母版页中的控件和公共属性。使用Master对象的FindControl方法可以访问母版页中的控件。

案例 2-4 访问母版页的控件和属性。

案例分析母版页中有一个标签控件 lblMaster，在内容页面中设置 lblMaster 的文本。

图 2-19 案例 2-3 运行效果科

学出版社


www.abook.cn


实现方案 1

在内容页面中，使用 Master 对象的 FindControl 方法访问母版页中的 lblMaster 控件。

实现步骤

1）新建一个母版页，命名为 2_4MasterControl.Master。 2）在 2_4MasterControl.Master 中，添加一个标签控件，命名为 lblMaster。 3）新建一个内容页面，命名为 2_4MasterControlPage.aspx，应用母版页 2_4Master

Control.Master。 4）在内容页面中，设置母版页中的标签控件 lblMaster 的文本。在内容页面的 Page_Load

事件处理过程中编写代码如下：

protected void Page_Load(object sender, EventArgs e) { Label lblMaster = Master.FindControl("lblMaster") as Label; lblMaster.Text = "Hello,这是在内容页面中的Page_Load。"; }

运行结果运行效果如图 2-20 所示。

实现方案 2 在母版页中，将 Label1 定义为公共属性，在内容页面

中访问该公共属性。

实现步骤

1）同方案 1 的第 1）步。 2）同方案 1 的第 2）步。 3）在母版页的后置代码文件 2_4MasterControl.Master.cs 中，定义一个公共属性

MasterPageLabel，通过该属性封装对标签控件 lblMaster 的访问，代码如下：

public Label MasterPageLabel

{ get { return this.lblMaster; } set { this.lblMaster = value; } }

4）同方案 1 的第 3）步。 5）在 2_4MasterControlPage.aspx 文件中添加 MasterType 指令，使用 VirtualPath 属性

指定要参考的母版文件路径，2_4MasterControlPage.asp 文件代码如下：

<%@ Page Title="" Language="C#" MasterPageFile="~/2_4MasterControl.

Master" AutoEventWireup="true" CodeBehind="2_4MasterControlPage. aspx.cs" Inherits="chapter2._2_4MasterControlPage" %>

<%@ MasterType VirtualPath="~/2_4MasterControl.Master" %>


<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"

runat="server"> </asp:Content>

图 2-20 案例 2-4 运行效果


6）在 2_4MasterControlPage.aspx.cs 中，编写 Page_Load 事件处理过程代码如下：

protected void Page_Load(object sender, EventArgs e) { //访问Master对象的MasterPageLabel属性，即lblMaster控件。 Master.MasterPageLabel.Text = "Hello,这是在内容页面中的Page_Load。"; }


2.2.6 指定母版页

有四种方式可以在内容页面中指定母版页。 1）在内容页面的 Page 指令中，使用 MasterPageFile 属性指定母版页。

<%@ Page Title="" Language="C#" MasterPageFile="~/2_4MasterControl.

Master" AutoEventWireup="true" CodeBehind="2_4MasterControlPage. aspx.cs" Inherits="chapter2._2_4MasterControlPage" %>

2）指定 Web 站点中所有内容页面的母版页。在 Web 站点的配置文件 web.config 的<system.web>节点中，添加 pages 节点，例如：

<system.web>

<pages masterPageFile ="2_4MasterControl.Master"/> </system.web>

将母版页 2_4MasterControl.Master 应用到 Web 站点的所有内容页面。 3）为 Web 站点中某一文件夹中的所有内容页面指定母版页。在配置文件 web.config 的<configuration>节点中，添加 location 节点，例如：

<configuration>

<location path ="Admin"> <system.web>

<pages masterPageFile ="2_4MasterControl.Master"/>

</system.web> </location>

</configuration>

将母版页 Example2_4Master.master 应用到 Web 站点 Admin 文件夹中的所有内容页面。 4）通过代码动态指定母版页。 Page 对象生命周期中先发生的是 PreInit 事件，在 Page_PreInit 事件处理过程中通过

代码动态指定内容页面的母版页。

protected void Page_PreInit(object sender, EventArgs e) { Page.MasterPageFile = "2_4MasterControl.Master"; }

2.2.7 嵌套母版页

在设计 Web 应用时，页面风格可能需要不同层次的统一，例如整个网站的网页都要求

有横幅，其中某些页面要求有左侧导航，其他页面不需要导航。应用嵌套母版可以满足这

类要求，首先设计一个父级母版页，在该母版页中设置横幅；在父级母版页的基础上设计

科

学出版社


www.abook.cn


子级母版页，添加左侧导航。

1．创建父级母版页

新建一个母版页，命名为 parentMaster.Master，在该母版页中添加横幅，代码如下：

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind=

"ParentMaster.master.cs" Inherits="chapter2.ParentMaster" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<title></title>

<asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>

</head>

<body> <form id="form1" runat="server">

<div> <div id="banner">

<img src="image/BBS.jpg" alt="banner"/> </div> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder> </div>


2．创建子级母版页

单击菜单“项目→添加新项”命令，在对话框中选择“嵌套的母版页”，新建子级母

版页 SonMaster.master，单击“添加”按钮，弹出“选择母版页”对话框，选择父级母版页

ParentMaster.Master。在子级母版页中的 Content2 中设置左栏内容，并在右栏添加一个 ContentPlaceHolder

控件。代码如下：

<%@ Master Language="C#" MasterPageFile="~/ParentMaster.Master"

AutoEventWireup="true" CodeBehind="SonMaster.master.cs" Inherits=

"chapter2.SonMaster" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div> <table style="width: 705px; height: 439px">

<tr> <td style="width: 20%; vertical-align: top; text-align: left;">

<asp:LinkButton ID="lbtnNet" runat="server"

onclick="lbtnNet_Click">.NET</asp:LinkButton><br /> <asp:LinkButton ID="lbtnJava" runat="server"

onclick="lbtnJava_Click">Java</asp:LinkButton> <br />

<asp:LinkButton ID="lbtnDelphi" runat="server" onclick="lbtnDelphi_Click">Delphi</asp:LinkButton><br/>


<asp:LinkButton ID="lbtnOracle" runat="server"

onclick="lbtnOracle_Click">Oracle</asp:LinkButton> </td>

<td style="vertical-align: top;height:90%" class="style1">

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder> </td>

</tr> </table> </div> </asp:Content>

Web 应用中只需要横幅的页面，可将 ParentMaster.Master 设为母版页；既需要横幅，

又需要左栏的页面，可将 SonMaster.master 作为母版页。

2.3 主题和外观

在 Web 应用中，页面一般都有相似的外观样式。ASP.NET 提供了主题功能，集中设

置页面的外观样式，并可将该样式应用到站点中的多个页面。将页面的布局信息和控件的

样式放到一个文件夹中，该文件夹称为一个主题。应用于服务器控件的样式称为皮肤。在 Web 应用中，如果要使用主题，则必须先在站点目录下创建一个 App_Themes 子目

录，在该目录中，可以包含多个主题子目录。在主题目录中包含外观文件（.skin）、CSS文件和图片文件。

因而，创建主题的步骤如下： 1）正确设置主题目录。在站点目录下，创建 App_Themes 目录，在 App_Themes 目录

中创建主题目录，例如要创建一个 Spring 的主题，则在 App_Themes 中创建一个 Spring 子

目录。 2）创建外观文件（.skin）、CSS 文件和图片文件，并将这些文件保存在主题目录中，

例如 Spring 中。

2.3.1 创建主题

1．创建主题目录

在解决方案资源管理器中，创建主题目录，创建后，

目录结构如图 2-21 所示。

2．创建外观文件

外观文件扩展名为 skin，是一个文本文件，在该文件

中可以指定服务器控件的外观样式。在解决方案资源管理

器中，右击 Spring 文件夹，在弹出的快捷菜单中选择“添

加→新建项”命令，弹出“添加新项”对话框，在对话框

中选择“外观文件”，添加一个 webControl.skin 文件。

图 2-21 主题目录结构

科

学出版社


www.abook.cn


在 webControl.skin 文件中添加代码，设置服务器控件外观样式。有两种定义外观的方

法：一种是定义命名的外观；另一种是定义默认外观。定义命名的外观，需要指定 SkinId，应确保 SkinId 的唯一性。在同一主题中，不允许

一个控件类型有重复的 SkinId。在同一主题中，可以为一个控件类型定义多个命名外观，

例如：

<asp:Label runat="server" SkinId="LabelSkin1" BackColor=

"LightGray" BorderColor="Black" BorderStyle="Double" Font-Bold="True" Font-Italic="True" Font-Names="隶书" Font-Underline="True" ForeColor=

"Red"/>

<asp:Label runat="server" SkinId="LabelSkin2" BackColor="White" ForeColor="Red"/>

为标签控件定义了两个命名外观，在应用外观时，使用 SkinId 指定应用哪个外观样式。

没有指定 SkinId 的外观，即为默认外观，例如：

<asp:Label runat="server" BackColor="LightGray" ForeColor="Blue"/>

同一主题的每个服务器控件类型只能指定一个默认外观。在页面中，如果某个标签控

件没有指定使用哪种外观，ASP.NET 将自动使用默认外观。

3．创建 CSS 文件

在主题中，也可以使用 CSS（层叠样式表）来设置控件和页面的外观。外观文件（.skin）只能设置服务器控件的样式，当需要对页面中的 HTML 标记等定义外观时，可以使用 CSS文件。

在解决方案资源管理器中右击，在弹出的快捷菜单中选择“添加→新建项”命令，弹

出“添加新项”对话框，在对话框中选择“样式表文件”，添加一个 StyleSheet.css 文件。

4．使用图片文件

主题可以为控件加上图片，如 Menu、TreeView 等，将页面中需要用到的图片文件放

到主题目录中。

2.3.2 应用主题

1．在页面中应用主题

在页面的 Page 指令中添加 Theme 属性或 StylesheetTheme 属性，指定主题。例如，使

用 Theme 指定主题，代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind=

"2_5ThemeExample.aspx.cs" Inherits="chapter2._2_5ThemeExample" Theme="Spring"%>

使用 StylesheetTheme 指定主题，代码如下：



"2_5ThemeExample.aspx.cs" Inherits="chapter2._2_5ThemeExample"

StylesheetTheme="Spring"%>

Theme 属性和 StylesheetTheme 属性都可以将主题应用到页面，两者之间的区别是：如

果在控件定义时，设置了控件的外观属性，当使用 Theme 应用主题时，控件定义时的外观

属性设置将被覆盖；当使用 StylesheetTheme 属性应用主题时，控件定义时的外观属性设置

将不变。

2．在 Web 站点中应用主题

在 Web 站点的配置文件 web.config 中，在<system.web>节点中增加<pages>节点，在

pages 节点中增加 theme 属性，指定 Web 站点应用的主题。例如：

<system.web> <pages theme ="Spring"/> </system.web>

3．通过代码动态应用主题

在页面先发生的 PreInit 事件的处理过程中，编写代码，通过 Page 对象的 Theme 属

性应用主题，例如：

protected void Page_PreInit(object sender, System.EventArgs e) { if(Page.Theme==null) //如果页面中没有应用主题，则应用主题Spring Page.Theme = "Spring"; }

2.3.3 删除主题

1．删除页面上的主题

在配置文件 web.config 中指定了站点应用的主题，如果站点中某一个页面不需要应用

主题，则要在页面上删除主题。可以在页面的 Page 指令中，使用 EnableTheming 属性删除主题，例如：


"2_5ThemeExample.aspx.cs" Inherits="chapter2._2_5ThemeExample" EnableTheming="false" %>

也可以在 Page 对象的 PreInit 事件处理过程中使用代码动态删除主题，例如：

protected void Page_PreInit(object sender, EventArgs e) { Page.EnableTheming = false; }

2．删除控件上的主题

类似地，如果在页面中应用了主题，而页面中的某一控件不需要应用主题，则要在控

件上删除主题。可以在控件定义中，使用 EnableTheming 属性删除主题。也可以在 Page 对象的 PreInit 事件处理过程中使用代码动态删除主题，例如：

protected void Page_PreInit(object sender, EventArgs e)

科

学出版社


www.abook.cn


{ TextBox1.EnableTheming = false; }

案例 2-5 主题应用。

案例分析在Web站点中定义一个主题MyTheme，定义外观，将页面中的所有标签控

件的前景色设为红色，背景色设为银灰色；定义CSS文件，将页面中的body标记中的字体

设为Larger、字体颜色设为蓝色。

实现步骤

1）在 Web 站点目录下创建子目录 App_Theme，在 App_Theme 目录下创建子目录

MyTheme。 2）在解决方案资源管理器中，在 MyTheme 目录中添加一个外观文件 mySkin.skin，在

该文件中设置标签控件的外观，代码如下：

<asp:Label runat="server" BackColor="Silver" ForeColor="Red" ></asp:Label>

3）在解决方案资源管理器中，在 MyTheme 目录中添加一个 CSS 文件 myCSS.css，在

该文件中设置 body 标记的外观属性，代码如下：

body { color :Blue ;}

4）新建 Web 窗体，命名为 2_5ThemePage.aspx。 5）在 Web 窗体中添加一个标签控件，命名为 lblMessage，设置 Text 属性为“欢迎

光临！”。 6）在 2_5ThemePage.aspx 页面的 Page 指令中添加 Theme 属性，设置如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="2_5ThemePage.

aspx.cs" Inherits="chapter2._2_5ThemePage" Theme="MyTheme" %>

运行结果运行效果如图 2-22 所示。在案例 2-5 中，为 body 标记和标签控件指定了外观，页

面中的静态文本位于 body 标记中，应用 CSS 文件中的样式，

以蓝色字体显示；在 CSS 中定义文本颜色是蓝色，在外观文

件中定义标签控件字体颜色为红色，当外观文件和 CSS 文件

冲突时，优先使用外观文件中的样式。因此，标签控件中的

文本字体颜色为红色，背景色为银灰色（Sliver）。

上机实训 2

1．实训目的

掌握 ASP.NET 中母版和主题的应用。

2．实训要求

1）程序运行正确无误，界面友好，结果清晰。

图 2-22 案例 2-5 运行效果


2）填写好实训报告。

3．实训内容

创建一个母版页，页面标头和页面脚注是固定内容，页面中间包含两个

ContentPlaceHolder 控件；再创建一个内容页面。页面布局如图 2-23 所示。

页面标头

页面脚注

ContentPlaceHolder1

ContentPlaceHolder2

图 2-23 母版页布局

科

学出版社


www.abook.cn

第 3 章常用服务器控件

理解页面生命周期概念

掌握常用的页面生命周期事件

生命周期事件与数据的绑定

理解和处理控件事件

掌握常用的 Web 服务器控件的使用

掌握验证控件的应用

ASP.NET 的工具箱提供了丰富的控件，帮助开发人员通过可视化的方式设计网页，提

高开发效率。控件可以分为 Web 服务器控件（标准控件）、HTML 控件、验证控件、登录

控件、数据控件、导航控件、CrystalReports 控件、Webparts 控件。 ASP.NET 中的控件都是从 System.Web.UI.Control 类中继承而来的，控件类的层次结构

如图 3-1 所示。

图 3-1 ASP.NET 控件层次结构

Control 类属于 System.Web.UI 名称空间，常用的 Page 类和 UserControl 类也属于该名

称空间。Control 类定义了 ASP.NET 控件共有的属性、方法和事件，如定义了 Parent、Visible、EnableViewState 等基本属性，Focus 和 Dispose 等方法，以及 Init、Load 和 Unload 等事件。

常用来构建 Web 窗体用户界面的 HTML 控件和 Web 服务器控件分别属于

System.Web.UI.HtmlControls 和 System.Web.UI.WebControls 名称空间。本章通过实例介绍页面事件和生命周期，以及常用的 Web 服务器控件和验证控件。

学习要点

第 3 章

常用服务器控件

39 第 3 章常用服务器控件

3.1 ASP.NET 事件和生命周期

ASP.NET 页面运行时，将经历一个生命周期，了解页面生命周期，就能在生命周期的

合适阶段编写代码，以达到预期效果。此外，如果要开发自定义控件，就必须熟悉页面的

生命周期，以便正确进行控件初始化。

3.1.1 ASP.NET 页面的生命周期

一个 ASP.NET 页面，从创建到销毁的过程称为页面的生命周期，在生命周期中将执行

一系列处理步骤，这些步骤包括初始化、实例化控件、还原和维护状态、运行事件处理程

序代码，以及进行呈现。页面的生命周期过程事件如图 3-2 所示。

初始化页面加载页面呈现

PreInit

Init

InitComplete

PreLoad

Load

LoadComplete

PreRender

PreRendComplete

Render

图 3-2 页面生命周期事件

页面生命周期事件说明如表 3-1 所示。

表 3-1 页面生命周期事件说明

事件名称说明

PreInit 通常在此事件中检查 IsPostBack 属性，动态创建控件或动态设计主题

Init 页面所有控件初始化完成时触发，可在此事件中访问控件初始化属性。在 Web 窗体的生命周期中该

事件只触发一次

InitComplete 此事件发生时，页面上所有控件和页面本身初始化已经完成

PreLoad 页面加载前触发，在此事件中加载页面和控件的视图状态，并处理回发数据

Load 页面加载事件，可在此事件中设置控件属性

PreRender 页面即将呈现时触发，可在此事件中对页面或控件属性值及外观进行后的修改

Unload 在 Web 窗体从内存中卸载时触发，在 Web 窗体的生命周期中该事件只触发一次

一般来说，页要经历表 3-2 的各个阶段。除了页面生命周期阶段以外，在请求前后还

存在应用程序阶段，但是这些阶段并不特定于页。

表 3-2 应用程序阶段

阶段说明

页请求页请求发生在页生命周期开始之前。用户请求页时，ASP.NET 将确定是否需要分析和编译页（从而开

始页的生命周期），或者是否可以在不运行页的情况下发送页的缓存版本以进行响应

科

学出版社


www.abook.cn


续表阶段说明

开始在开始阶段，将设置页属性，如 Request 和 Response。在此阶段，页还将确定请求是回发请求还是新

请求，并设置 IsPostBack 属性。此外，在开始阶段期间，还将设置页的 UICulture 属性

页初始化页初始化期间，可以使用页中的控件，并将设置每个控件的 UniqueID 属性。此外，任何主题都将应

用于页。如果当前请求是回发请求，则回发数据尚未加载，并且控件属性值尚未还原为视图状态中的值

加载加载期间，如果当前请求是回发请求，则将使用从视图状态和控件状态恢复的信息加载控件属性

验证在验证期间，将调用所有验证程序控件的 Validate 方法，此方法将设置各个验证程序控件和页的

IsValid 属性

回发事件处理如果请求是回发请求，则将调用所有事件处理程序

呈现在呈现之前，会针对该页和所有控件保存视图状态。在呈现阶段中，页会针对每个控件调用 Render 方

法，它会提供一个文本编写器，用于将控件的输出写入页的 Response 属性的 OutputStream 中

卸载完全呈现页并已将页发送至客户端、准备丢弃该页后，将调用卸载。此时，将卸载页属性（如 Response

和 Request）并执行清理

案例 3-1 页面的生命周期。

实现步骤

1）新建 Web 窗体 3_1PageLiftCycle.aspx。 2）在 Web 窗体中添加文本框控件，设置 ID 属性为 txtinput，Label 控件 ID 属性为

lblMessage，Text 属性值为空；添加 Button 控件，设置 ID 属性为 btnsubmit，设置 Text 属性为“确定”。

3）在窗体中双击“确定”按钮，进入后置代码编辑窗口。在后置代码编写按钮点击事

件代码如下：

protected void btnsubmit_Click(object sender, EventArgs e) { Response.Write ("按钮点击事件<br/>");

lblmessage.Text = "你输入的文字为" + txtinput.Text; }

4）双击文本框，编辑文本框 Text_Changed 事件代码如下：

protected void txtinput_TextChanged(object sender, EventArgs e) { Response.Write("文本框触发TextChange事件输入的文字为'" + txtinput.Text +

"'<br/>"); }

5）重载 Page 类与页面生命周期相关的方法，代码如下：

protected void Page_Load(object sender, EventArgs e) { Response.Write("页面加载Page_Load事件<br/>"); } protected override void AddedControl(Control control, int index) { Response.Write(string.Format ("控件被加载：{0}<br/>",control.GetType

().Name )); base.AddedControl(control, index);}

protected override void OnInit(EventArgs e) { Response.Write("页面初始化事件OnInit<br/>");

base.OnInit(e); } protected override void OnLoadComplete(EventArgs e) { Response.Write("页面加载完毕OnLoadComplete<br/>");

base.OnInit(e); } protected override void OnPreLoad(EventArgs e) { Response.Write("页面即将加载事件OnPreLoad<br/>");


base.OnInit(e); }

6）在页面呈现前修改控件的绑定数据，如果用户在文本框中输入字符数大于 6，则只

显示 6 个字符，代码如下：

protected override void OnPreRender(EventArgs e) { Response.Write("页面预呈现事件OnPreRender<br/>");

if (txtinput.Text.Length > 6) lblmessage.Text ="你输入的文字为："+ txtinput.Text.Trim().

Substring(0, 6); base.OnInit(e); }

运行结果在文本框中输入文字后页面

效果如图 3-3 所示。从页面效果图可以看出，控件首先被加载，

然后触发预初始化和初始化 Init 事件，在初始

化事件完成后才进行页面预加载、页面加载，

然后进行控件的数据绑定，用户在文本框中录

入内容后触发文本框 TextChanged 事件，通过

单击按钮触发按钮点击事件，页面加载完成后，

开始页面的预呈现，这时可对控件绑定的内容

做进一步修改，使页面呈现后用户看到的内容

为已经修改后的内容。

3.1.2 Page 对象属性

一个 ASP.NET 页面是一个 System.Web.UI.Page 类的派生类。在页面生命周期中，Page类会触发多个事件，Page 对象常用的属性有 IsPostBack、IsValid 和 Controls，常用的方法

有 FindControl。 Load 事件在服务器加载 Web 窗体时触发，在 Web 窗体的生命周期中该事件可触发多

次，无论是初次浏览页面还是刷新页面，都会触发该事件。用户可通过 IsPostBack 属性值

判断页面是首次访问，还是回发的。如果 IsPostBack 属性值为 True，则该页面是响应客户

端请求而回发的；否则，该页面是首次访问。 IsValid 属性是一个布尔型的值，表示 Web 窗体是否通过验证。IsValid 属性值为 True，

表示 Web 窗体验证成功；否则，表示未通过验证。当 Web 窗体上放置有验证控件时，可

通过该属性判断 Web 窗体是否通过验证。 Controls 是一个 ControlCollection 类型的只读属性，通过该属性可以动态地在页面中添

加或删除控件。 FindControl 方法可在 Web 窗体中查找指定 ID 的控件。案例 3-2 动态添加、删除控件。

实现步骤

1）新建 Web 窗体 3_2DynControl.aspx。 2）在 Web 窗体中添加两个 Button 控件，ID 属性分别为 btnAdd 和 btnDel，Text 属性

图 3-3 页面生命周期案例

科

学出版社


www.abook.cn


分别为“增加 Label 控件”和“删除 Label 控件”。 3）在 btnAdd 和 btnDel 上双击，进入后置代码编辑窗口，在事件处理程序 btnAdd_Click

和 btnDel_Click 中添加如下代码：

protected void btnAdd_Click(object sender, EventArgs e)

{ Label lblNew=new Label(); lblNew.ID = "addLabel"; lblNew.Text = "<font color='red'>新增加的控件</fort>";

Page.Controls.Add(lblNew); } protected void btnDel_Click(object sender, EventArgs e)

{ Label lblDelete = new Label();

lblDelete =(Label ) Page.FindControl("addLabel"); Page.Controls.Remove(lblDelete); }

运行结果运行结果如图 3-4 所示。

3.1.3 理解和处理控件事件

大多数的 ASP.NET 控件支持一个或多个事件，如案例 3-1 中的

Button 按钮支持 Click 事件，除此之外还支持其他生命周期事件。当

用户单击浏览器端的按钮后，Click 事件并没有马上引发，直到包含这个按钮的页面被传到

服务器端，Click 事件才会被引发。 Button 的 Click 事件处理程序包含两个参数：第一个参数是名叫 sender 的 object 类型

参数，代表引发事件的控件；第二个参数是名叫 e 的 EventArgs 参数，用于表示与事件关

联的附加的事件信息。当第二个参数类型不是默认的 EventArgs 时，表示有附加信息传递

给了处理程序，如触发 ImageButton 按钮的 Click 事件：ImageButton1_Click（object sender, ImageClickEventArgs e），第二个参数名为 e 的 ImageClickEvenArgs 参数，点击时传递了 X坐标和 Y 坐标信息给处理程序，可通过 e.X.ToString()获取 X 轴坐标。

3.2 Web 服务器控件

3.2.1 Web 服务器控件概述

Web 服务器控件属于 System.Web.UI.WebControls 名称空间，除 Literal、PlaceHolder和 Repeater 是从 System.Web.UI.Control 继承而来，其他 Web 服务器控件都是直接或间接地

从基类 System.Web.UI.WebControls.WebControl 继承而来的。所有的 Web 服务器控件都有

一些共同的属性，如表 3-3 所示。

表 3-3 Web 控件的通用属性

属性说明

AccessKey 热键

ForeColor 前景色

BackColor 背景色

BorderStyle 边框样式

图 3-4 动态添加控件


续表属性说明

BorderWidth 边框宽度

CssClass 用于该控件的层叠样式单（CSS）类名

Font 与字体相关的一系列属性

Enabled 控件是否可用（True 或 False）

Width 宽度

Height 高度

TabIndex Tab 键顺序（从 0 开始）

ToolTip 提示文本

Visible 控件是否可见（True 或 False）

每个控件都有属性和事件，可通过属性窗口进行编辑，如图 3-5（a）所示；在属性窗

口中单击按钮，即可见该控件的事件列表，如图 3-5（b）所示。

（a）属性窗口（b）控件的事件列表

图 3-5 属性窗口和控件的事件列表

每个控件都有一个 ID 属性，作为该控件的唯一标识，Visual Studio.NET 会根据控件的

类型和控件在页面中出现的次数自动产生 ID 值，为了提高代码的可读性，建议用户根据控

件的用途，将控件的 ID 值修改为有意义的名称。用户可以通过下面几种方式在页面上添加控件或删除控件。 1）从工具箱中拖控件到页面中。在工具箱中选择要添加的控件，直接拖放到页面中

（设计视图），在 aspx 文件中将自动产生相应的代码。例如，在工具箱中选择 Web 服务器

控件，在 aspx 文件中将自动产生如下代码：

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

在工具箱中选择 HTML 控件，在 aspx 文件中将自动产生如下代码： <input id="Text1" type="text" />

2）在 aspx 窗体文件中添加代码。直接在 aspx 文件（源视图）中输入要添加控件的

代码。

科

学出版社


www.abook.cn


3）在运行过程中动态添加控件。在代码文件（cs）中输入代码，动态添加控件。例如，

在页面空白处双击，进入后置代码文件，在 Page_Load 事件中编写代码如下：

protected void Page_Load(object sender,.EventArgs e) { Label lblNew=new Label(); //创建一个Label对象 lblNew.ID = "Label1"; //指定Label控件的名称

lblNew.Text = "Hello World!"; //指定Label控件的显示文本

Page.Controls.Add(lblNew); //将Label控件加入到页面中

}

4）在运行过程中动态删除控件。在页面中增加按钮 btnRemoveLabel，在设计视图双击

按钮，进入后置代码文件，在按钮的 Click 事件处理过程中编写代码如下：

protected void btnRemoveLabel_Click(object sender, EventArgs e) { //在Web窗体中查找ID为"addLabel"的控件

Label lblDelete = Page.FindControl("addLabel") as Label; Page.Controls.Remove(lblDelete); //将Label控件从Web窗体中删除

}

3.2.2 简单控件

一般的网站，如论坛、网上购物等，都需要验证用户的身份。这就要求用户登录网站

后，才能使用网站的一些服务，如在论坛中，只有登录用户才可以发表评论；在购物网站

中，只有登录用户才可以进行购物。在 ASP.NET 中，可以应用 Label、TextBox 和 Button等简单控件实现登录功能。

1．Label 控件

Label 控件是 ASP.NET 中基本的输出控件，用于页面上显示信息。Label 控件通过

Text 属性设置显示信息内容。如果在页面上显示的信息是静态的，建议使用静态的 HTML文本，以提高页面的性能。

2．TextBox 控件

TextBox 控件是 ASP.NET 中基本的输入控件，用于在页面上输入文本信息。TextBox控件的常用属性如表 3-4 所示。

表 3-4 TextBox 控件的常用属性

属性说明

Text 设置或获取控件中的文本

TextMode 文本框类型：SingleLine（单行）、MultiLine（多行）、Password（密码）

Rows 文本框类型为多行时，显示的行数

Columns 文本框显示的字符数（文本框的宽度）

ReadOnly 文本框内容是否可以更改（True 或 False）

AutoCompleteType 设置文本框的自动完成功能

EnableViewState 文本框是否启用视图状态（页面刷新后，是否保留文本框中的文本）

AutoPostBack 文本框中文本修改后（失去焦点），是否回发给服务器


ViewState 是 ASP.NET 中的一种机制，能够将 Web 服务器控件的值暂时存储在客户端，

当客户端将页面回发给服务器时，ViewState 中所存储的值也会回发给服务器端，服务器端

进行解析，用 ViewState 中存储的值来填充相应的控件。因此，如果将 EnableViewState 属

性设为 True，当页面刷新时，TextBox 控件中的文本将保持不变。

如果 TextBox 的 TextMode 属性设为 Password 时，为保证密码的安全性，页面

刷新时，TextBox 中的密码将不被保留。如果 AutoPostBack 属性设为 True，当 TextBox 失去焦点时，页面将自动回发，

将触发 TextChanged 事件，执行 TextBox1_TextChanged 事件处理过程中的代码

（TextBox1 是文本框控件的 ID）。 TextBox 控件的常用方法有 Focus 方法，可以让文本框控件获得焦点。

3．按钮控件（Button、LinkButton、ImageButton）

当页面输入完成、提交给服务器时，常常用到按钮控件。ASP.NET 中有三种按钮控件：

Button、LinkButton 和 ImageButton。这三种按钮控件的基本功能相同，外观上有些区别。

Button 是普通按钮，LinkButton 以超链接的形式出现，ImageButton 以图像的形式出现。按

钮控件的常用属性如表 3-5 所示。

表 3-5 按钮控件的常用属性

属性说明

CausesValidation 按钮引起页面回发时，是否进行验证

ValidationGroup 按钮引起页面回发时，只调用 ValidationGroup 所指定的验证控件进行验证；如果该属性未设

置值，则调用该页面中的所用验证控件进行验证

CommandName 与按钮相关的命令

CommandArgument 与按钮相关的命令参数

ImageUrl ImageButton 上显示的图像 URL（ImageButton 所特有的属性）

按钮控件的主要事件为 Click 事件和 Command 事件。单击按钮控件时，将触发 Click事件和 Command 事件。一般情况下，只需处理按钮控件的 Click 事件。如果在单击按钮时

需要传递参数，则建议使用 Command 事件，可以通过按钮控件的 CommandName 属性传

递命令名称，通过 CommandArgument 属性传递命令参数。案例 3-3 使用简单控件实现登录功能。

案例分析如果用户所输入的用户名和密码分别为“张三”、“123456”，则显示

登录成功的信息（学习数据库访问技术后，可从数据库中获取合法的用户名和密码）。

实现步骤

1）新建 Web 窗体 3_3Login.aspx。 2）在 Web 窗体中添加三个 Label 控件，分别命名为 lblMessage、lblUserName 和

lblPassword；添加两个 TextBox 控件，分别命名为 txtUserName 和 txtPassword；添加一个

Button 控件，命名为 btnLogin，各控件的属性设置如表 3-6 所示。

注意

科

学出版社


www.abook.cn


表 3-6 各控件的属性设置

控件 ID 属性属性值

lblUserName Text 用户名：

lblPassword Text 密码：

lblMessage Text “”

txtUserName Text “”

Text “” txtPassword

TextMode Password

btnLogin Text 登录

3）在设计视图中，双击 Button 控件 btnLogin，进入后置代码编辑视图，编写如下代码：

protected void Button1_Click(object sender, EventArgs e) { if (txtUserName.Text.Trim() == "张三" && txtPassword.Text == "123456")

lblMessage.Text = "用户名和密码正确！";

else lblMessage.Text = "用户名或密码错误！";

}

运行结果运行效果如图 3-6 所示。在 Button 控件 btnLogin 的 Click 事件处理过程中，获

取文本框 txtUserName 和 txtPassword 的文本，并运用 Trim方法删除文本的前后空格，将文本框所输入的用户名和密

码同预先指定的用户名和密码比较，从而判断是否登录成

功。学习数据库访问技术后，可从数据库中查询得到用户

名和密码，同用户输入的用户名和密码进行比较，判断是

否登录成功。

4．简单控件的数据绑定

Label 控件和 TextBox 控件的文本内容，还可以通过数据绑定方法获得。可以使用简单

的语句“<%# 方法调用或表达式 %>”，将 Label 控件或 TextBox 控件的 Text 属性与方法

调用或表达式进行绑定，当执行控件的 DataBind 方法时，才计算表达式的值或得到方法调

用的结果，将表达式的值或方法调用的结果作为 Text 属性的值。案例 3-4 Label 控件数据绑定显示当前时间。

实现步骤

1）新建 Web 窗体 3_4DataBind.aspx。 2）在 Web 窗体中添加 Label 控件，命名为 lblDateTime。 3）在属性窗口中，设置 lblDateTime 的 Text 属性为<%#DateTime.Now%>。3_4DataBind.

aspx 中的代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3_4DataBind. aspx.cs" Inherits="chapter3._3_4DataBind" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

图 3-6 案例 3-3 运行效果




<title>数据绑定——显示当前时间</title>

</head> <body>

<form id="form1" runat="server">

<div><asp:Label ID="lblDateTime" runat="server" Text="<%#Date. Now%>"></asp:Label>

</div>


4）在 Web 窗体空白处双击，进入后置代码编辑窗口，在 Page_Load 中输入如下代码：

protected void Page_Load(object sender, EventArgs e)

{ lblDateTime.DataBind(); //调用Label控件的DataBind方法,将数据源绑定到控件

}

运行结果实现效果如图 3-7 所示。说明案例 3-4 中，将标签控件 lblDateTime 的

Text 属性与表达式 DateTime.Now 绑定。

使用 DateTime 类的 Now 属性，可获取到

当前的日期时间。在 Page_Load中执行标签控件 lblDateTime

的 DataBind 方法，计算表达式 DateTime.Now 的值，并将表达式的值作为 Text 属性值，在页面上显示当前时间。当页面刷新时，重新执行 lblDateTime 的 DataBind方法，计算表达式的值，页面上所显示的时间将进行更新。

控件不仅可以同表达式绑定，还可以绑定到方法，如案例 3-5 所示。

案例 3-5 在文本框中输入一个整数，标签显示该整数是偶数还是奇数。

实现步骤

1）新建 Web 窗体 3_5DataBindByFunction.aspx。 2）在 Web 窗体中，添加一个标签控件，命名为 lblMessage，添加一个文本框控件，

命名为 txtInputNumber。 3）设置 txtInputNumber 的 Text 属性为 1，设置 AutoPostBack 属性为 True。 4）在设计视图中，双击 Web 窗体空白处，进入后置代码编辑视图，创建自定义函数

EvenOrOdd，进行奇偶数的判断。

protected string EvenOrOdd(string strNumber)

{ int intNumber = int.Parse(strNumber); if (intNumber % 2 == 0) return "偶数";

else

图 3-7 Label 控件通过数据绑定显示时间

科

学出版社


www.abook.cn


return "奇数"; } ｝

5）设置 lblMessage 的 Text 属性为<%# EvenOrOdd(txtinputNumber.Text) %>。 6）在后置代码编辑视图中，为 Page_Load 添加如下代码：

protected void Page_Load(object sender, EventArgs e) { lblMessage.DataBind();} //调用Label控件的DataBind方法，将数据源绑定到控件

运行结果运行效果如图 3-8 所示。页面首次访问时，执行 Page_Load，调用

lblMessage 的 DataBind 方法，计算函数

EvenOrOdd 的返回值。txtInputNumber 的 Text属性值等于 1，因此函数的返回值为奇数，标

签控件 lblMessage 的 Text 属性值为奇数，页面

上显示“奇数”。在 txtInputNumber 中输入 4，输入结束，按回车键或在页面空白处单击，使 txtInputNumber 失去焦点，页面将回发（因

为TextBox1的AutoPostBack属性设为True，txtInputNumber失去焦点时，页面将自动回发），

再次执行 Page_Load 方法，再次调用 lblMessage 的 DataBind 方法，重新计算函数 EvenOrOdd的返回值，返回值为偶数，lblMessage 的 Text 属性值为偶数，页面上显示“偶数”。

在 ASP.NET 中，数据绑定技术应用很广泛，不仅可以绑定到表达式、方法（函数），

还可以绑定到数组、数据源。在后续的章节中，将进一步介绍控件的数据绑定技术。

3.2.3 选择控件

在 Web 应用中，经常需要用户在一些选项中进行选择，例如进行工资收入调查，要求

用户选择适当的工资等级，可以使用 CheckBox、CheckBoxList、RadioButton、RadioButtonList来设计页面，满足用户的需求。CheckBox和CheckBoxList可以完成复选的功能，RadioButton和 RadioButtonList 可以完成单选功能。

1．CheckBox 和 CheckBoxList

当要求用户进行多项选择时，可使用 CheckBox 和 CheckBoxList 来实现。CheckBox 控

件代表一个复选项，CheckBoxList 代表一组复选项。CheckBox 的常用属性如表 3-7 所示。

表 3-7 CheckBox 的常用属性

属性说明

Checked 复选框是否被选中（True 或 False）

TextAlign 文本相对于复选框的对齐方式（Right：文本在复选框的右侧；Left：文本在左侧）

CheckBox 控件常用的事件是 CheckedChanged。如果 CheckBox 控件的 AutoPostBack属性设为 True，当控件的状态改变时，将触发 CheckedChanged 事件，即当 CheckBox 控件

由选中状态变为未选中状态时，或由未选中状态变为选中状态时，都将触发 Checked Changed 事件。

图 3-8 在 txtInputNumber 中输入 4 后，

页面输出结果


CheckBox 控件代表一个复选项，CheckBoxList 代表一组复选项，案例 3-6 中的 5 个复

选框控件可以用一个 CheckBoxList 控件代替。CheckBoxList 控件的常用属性如表 3-8 所示。

表 3-8 CheckBoxList 控件的常用属性

属性说明

Items 控件的复选项集合

RepeatColumns 控件的列数，即一行显示几个复选项

RepeatDirection 控件选项的排列方向

RepeatLayout 控件选项的布局方式

SelectedIndex 获取或设置选中项的低索引（运行时属性）

SelectedItem 获取索引值小的选中项（运行时属性）

SelectedValue 获取索引值小的选中项的值，或选择包含指定值的列表项（运行时属性）

DataSource 向控件填入数据的数据源

DataSourceID 数据源控件的 ID

DataMember 用于绑定的数据源中的表或视图

DataTextField 数据源中提供选项文本的字段

DataValueField 数据源中提供选项值的字段

CheckBoxList 控件的 DataSourceID、DataMember、DataTextField 和 DataValueField 用

于从数据库中获取数据进行数据绑定，将在后续的章节中介绍。 DataSource 属性用于设置 CheckBoxList 控件选项的数据来源，可以是数组或数据表，

通过 DataSource 设置数据源之后，一定要调用控件的 DataBind 方法，才会执行数据绑定。 Items 属性用于输入 CheckBoxList 控件的选项，并可设置各选项的选中状态。Items 是

一个 ListItemCollection 对象，是 CheckBoxList 控件的选项集合，它的常用属性如表 3-9 所

示，常用方法如表 3-10 所示。

表 3-9 Items 的常用属性

属性说明

Count 只读属性，用于获取控件的选项个数

Item(index) 只读属性，用于获取控件中的索引值为 index 的选项，返回值是 ListItem 类型的对象

表 3-10 Items 的常用方法

方法说明

Add(ListItem)或 Add(String) 添加一个选项

Insert(ListItem)或 Insert(String) 插入一个选项

Remove(ListItem)或 Remove(String) 删除一个选项

RemoveAt(index) 删除索引值为 index 的一个选项

Clear() 清除所有选项

FindByText(String) 根据选项文本，查找选项

FindByValue(String) 根据选项值，查找选项

CheckBoxList 控件选项的主要属性有 Text、Selected 和 Value，分别表示选项文本、选

项的选中状态和选项值。 CheckBoxList 控件的常用事件是 SelectedIndexChanged，如果控件的 AutoPostBack 属

性设为 True，当控件选项的状态改变时，将触发该事件。

科

学出版社


www.abook.cn


案例 3-6 喜爱的运动项目调查。

案例分析从列举出的运动项目中，选择用户喜爱的运动项目（允许多选），将用

户所选择的运动项目在页面上显示。

实现方案 1

通过复选框控件实现，由一个过程处理页面中的所有复选框控件的 CheckedChanged事件。在该过程中，逐个判断复选框控件的选中状态，进行相应的处理。

实现步骤

1）新建 Web 窗体 3_6_1SprotsQuestionnaire.aspx。 2）在 Web 窗体中添加 5 个复选框控件，分别命名为 chkSport1、chkSport2、chkSport3、

chkSport4 和 chkSport5，添加一个标签控件，命名为 lblMessage。 3）将 5 个复选框控件的 Checked 属性都设为 False，TextAlign 属性都设为 Right，

AutoPostBack 属性设为 True，Text 属性设置如表 3-11 所示。

表 3-11 复选框控件属性设置

控件名称属性属性值

chkSport1 Text 篮球

chkSport2 Text 爬山

chkSport3 Text 乒乓球

chkSport4 Text 跑步

chkSport5 Text 羽毛球

4）在设计视图中，选择复选框控件 chkSport1，在属性窗口中，单击按钮，在事件

列表中选择 CheckedChanged 事件，输入该事件的处理过程名称为 chkSport_Checked Changed。同样地，将其他 4 个复选框控件的 CheckedChanged 事件的处理过程名都设为

chkSport_CheckedChanged。任意某个复选框控件选中状态改变时，触发 CheckedChanged 事

件，将执行同一个事件处理过程，在该事件处理过程中编写如下代码：

protected void chkSport_CheckedChanged(object sender, EventArgs e) {

string strMessage = "你喜爱的运动项目是："; if(chkSport1.Checked) //判断复选框chkSport1是否被选中 strMessage += chkSport1.Text + "，"; if(chkSport2.Checked) //判断复选框chkSport2是否被选中

strMessage += chkSport2.Text + "，"; if(chkSport3 .Checked) //判断复选框chkSport3是否被选中 strMessage += chkSport3.Text + "，"; if(chkSport4.Checked) //判断复选框chkSport4是否被选中 strMessage += chkSport4.Text + "，"; if(chkSport5.Checked) //判断复选框chkSport5是否被选中 strMessage += chkSport5.Text + "，"; //将后一个逗号改为句号 strMessage = strMessage.Substring(0, strMessage.Length - 1) + "。"; lblMessage.Text = strMessage; } //将信息在标签控件中显示



图 3-9 案例 3-6 运行效果

在案例 3-6 的方案 1 中，需要逐个判断复选框控件的选中状态，如果页面中的复选

框较多，要多次使用 IF 结构，且 IF 结构中的代码类似，能否使用循环结构，将方案 1中的代码进行精简？

实现方案 2

Web 窗体中的所有控件是以控件树的形式组织的，在 Page 的 Controls 属性中，存储了

所有直接放在页面上的控件，如 Form 等，Web 服务器控件是放在 Form 控件中，是 Form控件的子控件。按照 Web 窗体中控件的层次结构，可以找到 Form 控件中的所有子控件，

使用循环语句进行遍历，如果子控件是复选框控件，则根据该复选框控件的选中状态，进

行相应的处理。

实现步骤

1）新建 Web 窗体 3_6_2SportsQuestionnaire.aspx。 2）在 Web 窗体中布置控件，并设置控件的属性（同方案 1）。 3）指定一个过程处理所有复选框控件的 CheckedChanged 事件（同方案 1）。 4）在 CheckedChanged 事件处理过程中编写如下代码：

protected void chkSport_CheckedChanged(object sender, EventArgs e) { CheckBox chkSport; string strMessage = "你喜爱的运动项目是：";

//遍历form1中的所有子控件 //Page.FindControl("form1")：在页面中找到ID为form1的控件

//Page.FindControl("form1").Controls：得到form1中的子控件集合

foreach(Control mycontrol in Page.FindControl("form1").Controls) { //判断控件是否是CheckBox控件

if (mycontrol.GetType()==typeof(CheckBox) ) { chkSport = (CheckBox)mycontrol; //转换成CheckBox类型 if(chkSport.Checked) //判断复选框控件是否选中

strMessage += chkSport.Text + "，";

//如果选中，获取复选框控件文本值 }

} //将后一个逗号改为句号

strMessage = strMessage.Substring(0, strMessage.Length - 1) + "。";

lblMessage.Text = strMessage;

}

案例 3-6 还有第三种实现方案，就是使用 CheckBoxList 控件实现。

思考

科

学出版社


www.abook.cn


实现方案 3

1）新建 Web 窗体 3_6_3SportsQuestionnaire.aspx。 2）在 Web 窗体中添加一个 CheckBoxList 控件，命名为 chklstSports，添加一个标签控

件，命名为 lblMessage。 3）设置 chklstSports 控件的 RepeatDirection 属性为 Horizontal，设置 AutoPostBack 属

性为 True。 4）在 chklstSports 控件中添加选项，有三种实现方法： ① 在设计视图中选择 chklstSports 控件，在属性窗口中选择 Items 属性，单击按钮，

弹出对话框如图 3-10 所示，在该对话框中输入控件的各个选项。

图 3-10 CheckBoxList 控件编辑 Items 属性的对话框

② 在首次访问页面时调用 Items 属性的 Add 方法，动态添加 chklstSports 控件的选项，

在 Page_Load 中编写如下代码：

protected void Page_Load(object sender, EventArgs e) { string[] strSports= {"篮球", "爬山", "乒乓球", "跑步", "羽毛球"}; if(Page.IsPostBack==false) //首次访问页面时，给chklstSports控件添加选项 { int i; for(i=0;i<strSports.Length;i++) chklstSports.Items.Add(strSports[i]);}//通过Items属性Add方法添加选项 }

③ 在首次访问页面时使用 DataSource 属性，通过数据绑定，从数组中获得控件选项，

在 Page_Load 中编写如下代码：

protected void Page_Load(object sender, EventArgs e) { string[] strSports= {"篮球", "爬山", "乒乓球", "跑步", "羽毛球"}; if(Page.IsPostBack==false) //首次访问页面时，给cblSports控件添加选项 { //指定chklstSports控件的数据源为数组()

chklstSports.DataSource = strSports; chklstSports.DataBind(); //调用DataBind方法，进行数据绑定 } }

为 CheckBoxList 控件添加选项的三种方法，可任选一种实现，第一种方法是在程

序编译前添加选项，后两种方法是在程序运行过程动态加载选项，也可以混合这几种方

法实现控件选项的静态和动态加载。

注意


5）在设计视图中，双击 chklstSports 控件，进入后台代码编辑视图，在控件的

SelectedIndexChanged 事件处理过程中编写如下代码：

protected void chklstSports_SelectedIndexChanged(object sender, EventArgs e) { int i; string strMessage = "你喜爱的运动项目是："; for (i = 0; i < chklstSports.Items.Count; i++) { if (chklstSports.Items[i].Selected) strMessage += chklstSports.Items[i].Text + "，"; } //将后一个逗号改为句号 strMessage = strMessage.Substring(0, strMessage.Length - 1) + "。"; lblMessage.Text = strMessage; }

2．RadioButton 和 RadioButtonList

单选控件 RadioButton 与复选控件 CheckBox 十分类似，允许用户从几个选项中选择一

个选项。例如，进行工资收入问卷调查时，要求用户只能选择一项收入等级，可以使用

RadioButton 或 RadioButtonList 实现。RadioButton 除了与 CheckBox 相同的基本属性（Text属性、TextAlign 属性和 Checked 属性）外，还有一个重要的属性 GroupName。单个的

RadioButton 是没有意义的，在一组 RadioButton 中进行单项选择，才具有现实意义。要将

多个 RadioButton 控件放在同一组中，只需将 GroupName 属性设为相同的字符串。与复选框控件 CheckBox 类似，RadioButton 的常用事件是 CheckedChanged，如果

AutoPostBack 属性设为 True，当选项状态改变时，将触发该事件。 RadioButtonList 控件表示一组单选项，基本属性与 CheckBoxList 控件相同。由于 Radio

ButtonList 是单选组控件，可以通过运行时属性 SelectedIndex、SelectedItem 或 SelectedValue得到选中项的相关信息。RadioButtonList 控件的常用事件也是 SelectedIndexChanged，如果

RadioButtonList 控件的 AutoPostBack 属性为 True，当选中项改变时，将触发该事件。案例 3-7 工资收入调查。

案例分析根据用户的选择，将工资等级在页面上显示。

实现方案

使用多个 RadioButton 实现，采用循环结构遍历 form1 中的所有控件，判断单选控件的

选中状态，获得选中的单选控件的文本（类似于案例 3-6 中的方案 2）。

实现步骤 1

1）新建 Web 窗体 3_7_1SalaryQuestionnaire.aspx。 2）在 Web 窗体中添加两个标签控件，分别命名为 lblInformation 和 lblMessage；添加

5 个单选控件，分别命名为 radSalary1、radSalary2、radSalary3、radSalary4 和 radSalary5。各控件属性设置如表 3-12 所示。

表 3-12 控件属性设置

控件属性属性值

lblInformation Text 你的工资收入是：

radSalary1…radSalary5 AutoPostBack True

科

学出版社


www.abook.cn


续表控件属性属性值

radSalary1…radSalary5 GroupName SalaryOption

radSalary1 Text 2000 以下

radSalary2 Text 2000～5000



radSalary5 Text 10000 以上

3）将 5 个单选控件的 CheckedChanged 事件处理过程都设为 radSalary_Checked Changed，编写如下代码：

protected void radSalary_CheckedChanged(object sender, EventArgs e) { RadioButton radTemp; //采用循环结构遍历form1中的所有控件（Contol对象） foreach( Control mycontrol in Page.FindControl("form1").Controls) { //判断是否单选控件，如果是单选控件，转换为RadioButton对象 if(mycontrol.GetType()==typeof(RadioButton)) { radTemp =mycontrol as RadioButton; if(radTemp.Checked) //判断单选控件是否选中 { //获得选中项的文本 lblMessage.Text = "你的工资收入是：" + radTemp.Text + "。"; //因为是单选，找到一个选中项后，退出循环 break; } } } }


图 3-11 案例 3-7 运行效果

实现单项选择的更好方法是使用 RadioButtonList 控件。

实现方案 2

使用一个 RadioButtonList 控件实现工资收入调查。

实现步骤

1）新建 Web 窗体 3_7_2SalaryQuestionnaire.aspx。 2）在 Web 窗体中添加两个标签控件，分别命名为 lblInformation 和 lblMessage；添加

一个 RadioButtonList 控件，命名为 radlstSalary。radlstSalary 控件的 Items 属性值为 2000 以

下、2000～5000、5000～8000、8000～10000、10000 以上（Items 属性的设置与案例 3-6的方案 3 相同，可以在属性窗口中添加，也可以通过代码在 Page_Load 中添加）。各控件的

其他属性设置如表 3-13 所示。



控件属性属性值

Label1 Text 你的工资收入是：

radlSalary AutoPostBack True

radlSalary RepeatDirection Horizontal

3）双击 radlSalary 控件，进入后台代码编辑视图，在 SelectedIndexChanged 事件处理

过程中编写如下代码：

protected void radlSalary_SelectedIndexChanged(object sender, EventArgs e) {

//通过RadioButtonList控件的SelectedItem属性，获取选中项，取得选中项的文本 lblMessage.Text = "你的工资收入是：" + radlSalary.SelectedItem.Text; }

3.2.4 列表控件

在 Web 应用中，经常需要将信息以列表的形式显示，例如在某学校的教务管理系统中，

需要将选修课的信息以列表的形式显示，以供学生选择。在 ASP.NET 中，可以使用列表控

件（ListBox、DropDownList 和 BulletedList）实现这种功能。

1．ListBox 控件

ListBox 控件以列表框的形式显示列表项。ListBox 控件的主要属性 DataSourceID、

DataMember、DataTextField、DataValueField、Items，与 CheckBoxList 相似，可参考 3.2.3节中 CheckBoxList 控件的介绍。

SelectionMode 属性可以设置 ListBox 控件是否允许多选，属性值可以是 Single 或

Multiple，Single 表示只允许用户在列表框中选择一个选项，Multiple 表示允许用户在列表

框中选择多个选项，用户可使用 Ctrl 键或 Shift 键进行多选。 Rows 属性表示 ListBox 控件的可见行数。运行时属性 SelectedItem、SelectedIndex 和 SelectedValue 的作用与 CheckBoxList 控件

相同。 ListBox 控件的选项可以通过 DataSource 属性设置数据源，可以是数组、集合和数据表。

同 CheckBoxList 控件类似，可以通过三种方法给 ListBox 控件添加选项，参考案例 3-6 方

案 3 的步骤 4）和～5）。 ListBox 控件的常用事件是 SelectedIndexChanged，与 CheckBoxList 和 RadioButtonList

控件相同。

2．DropDownList 控件

DropDownList 控件以下拉列表的方式显示选项，基本属性和事件与 ListBox 控件相同。案例 3-8 选修课登记。

案例分析用户首先在页面中选择所在系，根据系别列出该系的所有选修课信息，

用户选择课程后，单击按钮，将所选课程以列表的形式显示。根据需要，可以使用

科

学出版社


www.abook.cn


DropDownList控件进行系别的选择，使用ListBox控件列出该系的选修课信息，使用ListBox控件列出用户所选择的课程。

实现步骤

1）新建 Web 窗体 3_8SelectCourses.aspx。 2）在 Web 窗体中添加三个标签控件，分别命名为 lbldep、lblchoice 和 lblchoiceinfo；

一个 DropDownList 控件，命名为 dropDept；两个 ListBox 控件，分别命名为 lstCourses 和lstSelectedCourses；4 个命令按钮，分别命名为 btnlefttoright、btnalltoright、btnrighttoleft 和btnalltoleft。各控件的属性设置如表 3-14 所示。



lbldep Text 请选择系别：

lblchoiceinfo Text 你所选择的选修课：

lblchoice Text “”

dropDept AutoPostBack True lstCourses、lstSelectedCourses SelectionMode Multiple

btnlefttoright Text >

btnalltoright Text >>

btnrighttoleft Text <

btnalltoleft Text <<

3）控件布局参考图如图 3-12 所示。

图 3-12 在左边的列表控件中选择要选修的课程

4）在 Web 窗体空白处双击，进入后台代码编辑视图，定义全局变量。

String[][] strCourses = new string[2][]; //全局变量，数组的数组，存储各系的选修课程名称

5）在 Page_Load 中编写下列代码：

protected void Page_Load(object sender, EventArgs e) { //定义一维数组,存储系名 string[] strDepts = {"计算机系", "机电系"}; //定义一维数组,存储计算机系的选修课程名称 string[] strCoursesOfCS = {"PHP程序设计", "Oracle数据库管理与开发","局

域网组建", "Linux操作系统", "JavaScript"}; //定义一维数组，存储机电系的选修课程名称


string[] strCoursesOfJD= {"影视欣赏", "静态网页设计", "C/C++程序设计", "AutoCAD", "应用文写作"};

strCourses[0] = strCoursesOfCS; //为数组的数组赋值 strCourses[1] = strCoursesOfJD; //首次访问页面时,指定DropDownList控件和ListBox控件的数据源,进行数据绑定 if(Page.IsPostBack==false) { dropDept.DataSource = strDepts; dropDept.DataBind(); //设置DropDownList控件的初始选项为计算机系 dropDept.SelectedIndex = 0; //根据DropDownList控件的选项，指定ListBox控件的数据源,进行数据绑定 lstCourses.DataSource = strCourses[0]; lsttCourses.DataBind(); } //根据DropDownList控件中所选系的名称,设置Label2的显示文本 lblchoice.Text = dropDept.Text + "的选修课程："; }

6）在设计视图中，双击 dropDept 控件，进入后置代码编辑视图，在 dropDept 控件的

SelectedIndexChanged 事件处理过程中编写如下代码：

protected void dropDept_SelectedIndexChanged(object sender, EventArgs e) { //根据DropDownList控件中所选项的索引值，为lstCourses控件设置数据源 lstCourses.DataSource = strCourses[dropDept.SelectedIndex]; //lstCourses控件进行数据绑定 lstCourses.DataBind(); this.lstSelectedCourses.Items.Clear(); }

7）在设计视图中，双击 btnlefttoright 按钮，进入后置代码编辑视图，在 btnlefttoright

的 Click 事件处理过程中编写如下代码：

protected void btnlefttoright_Click(object sender, EventArgs e) { //定义字符串数组，存储列表控件lstCourses中选中项的文本 string[] strDelItem=new string[this.lstCourses.GetSelectedIndices().

Length]; int i=0; //使用For each循环，获取列表控件lstCourses中选定项的文本 foreach( ListItem itemTemp in this.lstCourses.Items) { //判断列表项是否选中 if(itemTemp.Selected==true){ //如果选中，将该列表项加到列表控件lstSelectedCourses中 this.lstSelectedCourses.Items.Add(itemTemp); strDelItem[i]=itemTemp.Text;//将选中项的文本存储到数组中 i = i + 1; } } //设置列表控件lstSelectedCourses没有列表项选中 lstSelectedCourses.SelectedIndex = -1; int j; for( j = i - 1;j>=0;j--) //使用For循环，将列表控件lstCourses中已选修的

课程删除 lstCourses.Items.Remove(strDelItem[j]); }

科

学出版社


www.abook.cn


8）类似地，编写 btnalltoright、btnrighttoleft 和 btnalltoleft 的 Click 事件处理过程如下：

protected void btnalltoright_Click(object sender, EventArgs e) { //将列表控件lstCourses中的列表项全部添加到lstSelectedCourses中 foreach (ListItem item in this.lstCourses.Items) this.lstSelectedCourses.Items.Add(item); //清除列表控件lstCourses中的列表项 this.lstCourses.Items.Clear(); } protected void btnrighttoleft_Click(object sender, EventArgs e) { string[] strDelItem=new string[this.lstSelectedCourses.GetSelectedIndices().Length]; int i = 0; foreach (ListItem item in this.lstSelectedCourses.Items) { if (item.Selected == true) { this.lstCourses.Items.Add(item); strDelItem[i] = item.Text; i++; } } this.lstCourses.SelectedIndex = -1; for (int j = strDelItem.Length - 1; j >= 0; j--) lstSelectedCourses.Items.Remove(strDelItem[j]); } protected void btnalltoleft_Click(object sender, EventArgs e) { foreach (ListItem item in this.lstSelectedCourses.Items) this.lstCourses.Items.Add(item); this.lstSelectedCourses.Items.Clear(); }

运行结果运行效果如图 3-12 和图 3-13 所示。

图 3-13 单击按钮“>”后，将所选修的课程移到右边的列表控件中

说明在案例 3-8 中，当下拉列表控件 dropDept 的选项改变时，列表控件 lstCourses中的列表项也要发生改变，因此，将 dropDept 的 AutoPostBack 属性设为 True，并在

SelectedIndexChanged 事件处理过程中，根据 dropDept 选项的索引值，把 lstCourses 控件绑

定到相应的数组，显示用户所选择系的选修课程；允许选择多个课程，可将 lstCourses 和

lstSelectedCourses 的 SelectionMode 属性设为 Multiple；为了避免用户多次选修同一门课程，

单击按钮“>”时，将 lstCourses 中的选项移到 lstSelectedCourses 中，即将 lstCourses 中的

选项添加到 lstSelectedCourses 中，再将 lstCourses 中的选项删除；单击按钮“>>”时，将

lstCourses 中的所有列表项都添加到 lstSelectedCourses 中，再将 lstCourses 中的选项清除。


按钮“<”和“<<”的处理方法与此类似。

程序中所用到的 ListBox 控件 Items 的方法有哪些？ ListBox 控件和 CheckBoxList 控件获得第 i 项文本值和第 i 项被选中的语句有区

别吗？本例中 DropDownList 控件的 AutoPostBack 属性不设为 True，程序能运行吗？

3．BulletedList 控件

BulletedList 控件可以显示带项目符号的列表，列表项是 ListItem 对象。BulletedList 控件可以通过 DataSource 属性与数据源进行绑定，获取列表项，常用的数据源可以是数组或

数据表，也可以在属性窗口中通过 Items 属性输入列表项。 BulletedList 控件的主要属性有 BulletStyle、BulletImageUrl 和 DisplayMode，如表 3-15

和表 3-16 所示。

表 3-15 BulletedList 控件的常用属性

属性说明

BulletStyle 设置列表项的项目符号

FirstBulletNumber 设置项目编号的起始值

BulletImageUrl 当 BulletStyle 属性为 CustomImage 时，设置项目图片的路径

DisplayMode 设置列表项的显示模式

表 3-16 DisplayMode 显示模式

模式说明

Text 以文本方式显示列表

HyperLink 以超链接方式显示列表，列表项的 Text 属性表示超链接文本，列表项的 Value 属性表示超链接

所指的 URL

LinkButton 以 LinkButton 的方式显示列表，每个列表项都是 LinkButton，可触发 Click 事件。

案例 3-9 用带项目符号的列表显示国家名，单击某个国家，可转向相应的主页。

实现步骤

1）新建 Web 窗体 3_9ListCountry.aspx。 2）在 Web 窗体中添加一个 BulletedList 控件，命名为 blstNation，按照表 3-17 设置

blstNation 的属性。

表 3-17 BulletedList 控件 blNation 属性设置

属性名属性值

BulletStyle CustomImage

BulletImageUrl ~/image/jx02.gif（图片文件的路径）

DisplayMode HyperLink

3）在设计视图，双击页面空白处，进入后台代码编辑窗口，在 Page_Load 中编写代码，

通过数据绑定，设置 blstNation 控件的列表项，编写代码如下：

思考

科

学出版社


www.abook.cn


protected void Page_Load(object sender, EventArgs e) { //首次访问页面时，为blNation进行数据绑定

if( Page.IsPostBack==false) { string[] strNation = {"中国", "美国", "英国"};

blstNation.DataSource = strNation; blstNation.DataBind(); //设置blNation控件的列表项的Value值，即，设置HyperLink的Url

for(int i = 0;i<blstNation.Items.Count;i++) blstNation.Items[i].Value =(i+1).ToString()+".htm"; }

}

4）建立三个 html 文件，分别命名为 1.htm、2.htm 和 3.htm，在三个 html 文件中分别

显示“中国”、“美国”和“英国”。


（a）显示国家名称（b）单击中国后，转向 1.htm

图 3-14 案例 3-9 运行效果

3.2.5 文件上传控件

在 Web 应用中，用户经常需要从客户端发送文件到服务器端，ASP.NET 提供的文件

上传控件 FileUpload 可以满足这种需要。文件上传控件由一个可以输入文件名的文本框和

浏览按钮组成，用户可以通过单击浏览按钮，弹出对话框，选择要上传的文件，也可以直

接在文本框中输入要上传的文件名。文件上传控件 FileUpload 可以在属性窗口设置的属性很少，主要是通过代码设置的运

行时属性，如表 3-18 所示。

表 3-18 文件上传控件 FileUpload 的主要属性

属性说明

HasFile 控件中是否包含文件（True 或 False）

FileName 控件中所包含文件的文件名

PostedFile 获取控件中文件的引用

FileContent 获取控件中文件的流对象

通过 PostedFile 属性，可以获取上传文件的属性，如表 3-19 所示。


表 3-19 PostedFile 的属性

属性说明

ContentLength 获取文件大小

ContentType 获取文件类型

FileName 获取文件名

文件上传控件 FileUpload 通过 SaveAs 方法将文件保存到服务器，该方法通过字符串参

数指定文件的上传路径。案例 3-10 文件上传。

案例分析在页面中允许上传 txt 文件，将文件保存到指定目录，并将文件内容在页

面显示。

实现步骤

1）新建 Web 窗体，命名为 3_10FileUpload.aspx。 2）在 Web 窗体中，添加一个文件上传控件，命名为 FileUpload1；添加一个命令按钮，

命名为 btnSave；添加一个标签控件，命名为 lblMessage；添加一个文本框控件，命名为

txtFileContent。各控件的属性设置如表 3-20 所示。



btnSave Text 上传

lblMessage Text “”

txtFileContent Text “”

txfFileContent TextMode MultiLine

txtFileContent ReadOnly True

txtFileContent Visible False

3）双击命令按钮 btnSave，进入后置代码编辑窗口，在 Click 事件处理过程中编写如下

代码：

protected void btnSave_Click(object sender, EventArgs e) { string filePath = Server.MapPath("./");//获取当前目录 if(FileUpload1.HasFile) //判断文件上传控件中是否有文件 { //判断文件的扩展名是否是txt if(Path.GetExtension(FileUpload1.FileName).ToLower() == ".txt" ) { try { //保存文件到服务器 FileUpload1.SaveAs(filePath + FileUpload1.FileName); lblMessage.Text = "文件上传成功！"; //获取文件的流对象 Stream fileStream= FileUpload1.FileContent; StreamReader fileReader=new StreamReader(fileStream); //从文件中读取第一行 string strLine = null; //使用循环读取文件中的其他行，并在文本框中显示 while((strLine=fileReader.ReadLine ())!=null)

科

学出版社


www.abook.cn


{ txtFileContent.Text +=strLine+"\n"; } txtFileContent.Visible = true; }//设置文本框可见 catch { lblMessage.Text = "文件上传失败！"; } } } }


图 3-15 单击“上传”按钮后，执行效果

在案例 3-10 中可以看出，文件上传控件的使用非常简单，使用 SaveAs 方法即可将文

件保存到服务器，使用 FileContent 属性可获取文件的流对象，通过流对象可以读取文件

内容。

文件上传控件对文件大小有一定的限制，默认情况下，允许上传 4MB(4096KB)

以下的文件。可以在 Web 配置文件中修改对上传文件大小的限制。在 web.config.comments 文

件（位于 C:\WINNT\Microsoft.NET\Framework\v4.0.30319\CONFIG）中找到

httpRuntime 节点，在该节点中修改 maxRequestLength 和 executionTimeout。maxRequestLength 指定发送给服务器的请求大小，以 KB 为单位，可以将

maxRequestLength 设为 11000KB，允许上传 10MB 左右的文件。 executionTimeout 指给服务器发送请求的时间，当上传的文件增大时，发送请求

的时间也要相应的延长；否则，在上传文件的过程中，容易发生超时。在下列代码中将 maxRequestLength 和 executionTimeout 分别修改为“11000”和

“200”。

<httpRuntime executionTimeout="200"

maxRequestLength="11000" requestLengthDiskThreshold="80" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="5000" enableKernelOutputCache="true" enableVersionHeader="true" requireRootedSaveAsPath="true" enable="true"

注意


shutdownTimeout="90" delayNotificationTimeout="5" waitChangeNotification="0" maxWaitChangeNotification="0" enableHeaderChecking="true" sendCacheControlHeader="true" apartmentThreading="false" />

在.NET 的配置文件 web.config.comments 中修改，将影响该服务器中的所有应用

程序，如果要求设置只应用于当前应用程序，则可以在当前应用程序中的

web.config 文件中设置 httpRuntime 节点，覆盖 web.config.comments 中的设置。

用户可根据上传文件的具体要求设置合适的 maxRequestLength，如果将

maxRequestLengthe 设置得过大，服务器很容易受到黑客的攻击。

3.2.6 Table 控件

在静态页面设计中，经常使用<table>标记创建表格，进行页面布局。在 ASP.NET 中提

供了两个 Table 控件，帮助用户进行页面布局。一个是 HtmlTable控件，是在 HTML 的<table>标记中增加了 runat=Server 属性，转换为 HTML 服务器控件；另一个是 Web 服务器控件

Table。HtmlTable 和 Table 控件都可以通过代码动态地创建表格，Table 控件编程更灵活。

本节将介绍如何通过代码动态创建 Table 控件。 Rows 是 Table 控件的主要属性。Rows 是 TableRow 对象的集合，存储 Table 控件中的

所有行。TableRow 的 Cells 属性是 TableCell 对象的集合，存储表格行中的所有单元格。在 Table 控件的单元格中，可以显示普通文本，也可以添加控件。如果要在单元格中

显示普通文本，设置 TableCell 对象的 Text 属性即可；如果要在单元格中添加控件，则先

创建控件，再将控件添加到 TableCell 对象的 Controls 属性中。可以使用 TableHeaderRow 对象定义 Table 的标题行；使用 TableHeaderCell 对象定义

Table 的标题单元格；使用 TableFooterRow 对象定义脚注行。通过代码动态创建 Table 控件的步骤如下： 1）创建 Table 对象，设置表格的外观属性。 2）创建 TableHeaderRow 对象和 TableHeaderCell 对象，添加到 Table 中，设置表格的

标题行。 3）创建 TableRow 对象，即创建表格行，也可设置表格行的外观属性。 4）创建 TableCell 对象，即创建表格单元格，也可设置单元格的外观属性。 5）将表格单元格添加到行。 6）将表格行添加到 Table 中。 7）重复执行第 3）～6）步，为 Table 创建多行。 8）创建 TableFooterRow 对象，添加到 Table 中，设置表格的脚注行。 9）将 Table 控件添加到 Web 窗体中，或添加到 Form 表单中。 Table 控件可以通过 BackColor、BorderColor、BorderWidth 等外观属性设置控件的外

观，也可以定义一个 TableStyle 对象，设置表格外观，再将该样式应用到 Table 控件中。类

似地，也可以定义一个 TableItemStyle 对象，设置外观，再将该样式应用到表格行或表格

科

学出版社


www.abook.cn


单元格。案例 3-11 动态创建表格。

案例分析在页面中，通过下拉列表，选择表格的行数和列数，动态创建表格；表

格的奇数行的单元格显示普通文本，偶数行的单元格添加文本框控件。

实现步骤

1）新建 Web 窗体，命名为 3_11CreateTable.aspx。 2）在 Web 窗体中，添加两个标签控件，分别命名为 Label1 和 Label2，设置 Text 属性

分别为“输入表格行数：”和“输入表格列数：”；添加两个文本框控件，分别命名为 txtRows和 txtCoumns，设置 Text 属性为空；添加一个命名按钮，命名为 btnCreate，设置 Text 属性

为“创建表格”。 3）在 Web 窗体设计视图中，双击命令按钮 btnCreate，进入后台代码编辑窗口，在

btnCreate 的 Click 事件处理过程中编写如下代码：

protected void btnCreate_Click(object sender, EventArgs e) { //获取文本框中输入的表格的行数和列数 int rowCount =int.Parse(txtRows.Text.Trim()); int columnCount = int.Parse(txtColumns.Text.Trim()); //定义TableStyle对象，设置Table的外观样式 TableStyle tabStyle=new TableStyle(); tabStyle.BorderStyle = BorderStyle.Groove; //设置边框样式 tabStyle.HorizontalAlign = HorizontalAlign.Center; //设置表格水平居中 tabStyle.GridLines = GridLines.Both; //设置表格显示网格线 Table table1=new Table(); //创建Table对象 table1.ApplyStyle(tabStyle); //为Table对象应用样式 TableHeaderRow headerRow=new TableHeaderRow();//创建表格标题行和表格标题

单元格 TableHeaderCell headerCell=new TableHeaderCell(); headerCell.ColumnSpan = columnCount; //设置标题单元格横跨的列数 headerCell.RowSpan = 1; //设置标题单元格的显示文本和背景色 headerCell.Text = "动态创建的" + txtRows.Text.Trim() + "行"+txtColumns.

Text.Trim() + "列的表格"; headerCell.BackColor = System.Drawing.Color.Gray; headerRow.Cells.Add(headerCell); //将标题单元格添加到标题行，将标题行添加到

表格 table1.Rows.Add(headerRow); for(int i=0;i<rowCount;i++) //通过循环，创建表格中的各行 { TableRow tempRow=new TableRow(); //创建表格行 for(int j=0;j<columnCount;j++){ TableCell tempCell=new TableCell(); //创建单元格 //奇数行的单元格显示普通文本 if( i % 2 ==1) tempCell.Text = "第" + (i+1).ToString() + "行，第" + (j +

1).ToString()+"列";

else{ //偶数行的单元格添加文本框控件，在文本框控件中显示行数和列数


TextBox tempTextBox=new TextBox(); tempTextBox.Text = "第" + (i + 1).ToString() + "行，第" + (j +

1).ToString() + "列"; tempCell.Controls.Add(tempTextBox); } tempRow.Cells.Add(tempCell); //将单元格添加到表格行 } table1.Rows.Add(tempRow); //将表格行添加到表格 } //将Table控件添加到页面中的form1表单中 Page.FindControl("form1").Controls.Add(table1); }

运行结果程序运行效果如图 3-16 所示。

图 3-16 输入表格行数和列数之后，创建表格

3.2.7 广告控件

在 Web 应用中，经常需要在页面放置广告。应用 ASP.NET 的广告控件 AdRotator，可

以很容易地在 Web 页面中显示广告。在 AdRotator 中，可以显示一组广告中的一个广告（包

括图片以及相关的文字信息），单击广告时，页面将跳转与该广告相关联的页面。在进行

页面刷新时，AdRotator 将改变广告信息，对于比较重要的广告，可以增加广告权重，提高

广告的优先级，从而提高广告的出现频率。AdRotator 中所显示的数据可以来自于具有特定

标记的 XML 文件，或者来自于数据库中的数据。广告控件 AdRotator 的 XML 文件必须满足一定的要求，如下所示：

<?xml version="1.0" encoding="gb2312"?> <Advertisements>

<Ad> <ImageUrl>要显示的广告图片的URL</ImageUrl>

<NavigateUrl>单击图片时的目标URL</NavigateUrl> <AlternateText>无法找到图片时，显示的文字信息</AlternateText> <Impressions>数字，表示广告的权重</Impressions> <Keyword>广告所属的类别</Keyword> </Ad>

</Advertisements>

在广告控件 AdRotator 的 XML 文档中，根标记是 Advertisements，在 Advertisements下可包含多个Ad 标记，每个Ad 标记表示一个广告；在Ad 标记中包含 ImageUrl、NavigateUrl、AlternateText、Impressions 和 Keyword 标记，在 AdRotator 中显示 ImageUrl 所指的图片，

单击广告图片时，页面跳转到NavigateUrl所指的页面，当图片无法正常显示时，在AdRotator

科

学出版社


www.abook.cn


中显示 AlternateText 中的文本，Impressions 表示广告的权重，Impressions 越大，该广告的

显示频率越高，Keyword 表示广告的类别。广告控件 AdRotator 通过 AdvertisementFile 属性与 XML 文件关联，获取广告信息。还可以使用数据源控件从数据库中获取广告控件 AdRotator 中的广告信息，通过

DataSourceID 属性指定数据源控件，ImageUrlField 属性指定数据表中的广告图片路径字段，

NavigateUrlField 属性指定数据表中的广告目标 Url，AlternateText 属性指定数据表中的代替

文本字段。程序运行时，将从数据表的各个字段中获取相应的广告信息。案例 3-12 广告控件 AdRotator 的应用。

实现步骤

1）新建 Web 窗体，命名为 3_12AdRotator.aspx。 2）在 Web 窗体中，添加一个 AdRotator 控件，命名为 AdRotator1。 3）创建一个 XML 文档，保存为 advertisements.xml，代码如下：

<?xml version="1.0" encoding="gb2312"?> <Advertisements>

<Ad> <ImageUrl>image/hao123.gif</ImageUrl> <NavigateUrl>http://www.hao123.com</NavigateUrl> <AlternateText>网站hao123广告</AlternateText> <Impressions>100</Impressions> <Keyword>网站</Keyword>

</Ad> <Ad> <ImageUrl>image/joyo.jpg</ImageUrl> <NavigateUrl>http://www.amazon.cn/</NavigateUrl> <AlternateText>卓越亚马逊</AlternateText> <Impressions>200</Impressions> <Keyword>网站</Keyword>

</Ad> </Advertisements>

4）在网站的当前目录下创建文件夹“image”，放置两个图片文件，分别为“hao123.gif”

和“joyo.jpg”。 5）在 Web 窗体设计视图中选择 AdRotator1，在属性窗口中单击 AdvertisementFile 属

性中的按钮，在“选择 XML 文件”对话框中选择 advertisments.xml 文件，如图 3-17 所示。

图 3-17 选取 XML 文件



（a）在广告控件中显示图片（b）单击广告后，跳转到卓越亚马逊网站

图 3-18 案例 3-12 运行效果

在案例 3-12 中，卓越亚马逊网站广告的 Impressions 大于 hao123 网站的 Impressons，在网页刷新时，卓越亚马逊网站的广告出现频率高于 hao123 网站的广告。

3.2.8 日历控件

在 Web 应用中，经常需要输入日期。ASP.NET 中的日历控件 Calendar，可以根据用户

的要求，以不同的外观形式显示日历，允许用户进行日期的选择。日历控件一般用来显示月历，用户可以通过单击控件上的按钮，移动到上一个月或移

动到下一个月，通过鼠标单击选择日期。日历控件的主要属性用于控件的外观设置，如

表 3-21 所示。

表 3-21 Calendar 控件的主要属性

属性说明

DayNameFormat 日标头文本的格式

FirstDayOfWeek 设置一周中的起始日，默认是星期日

NextMonthText “下一个月”按钮的文本

PrevMonthText “上一个月”按钮的文本

NextPrevFormat “上一个月”和“下一个月”按钮的格式

SelectMonthText “选择月”按钮的文本

SelectWeekText “选择周”按钮的文本

ShowDayHeader 是否显示周标头（星期日、星期一……星期六）

ShowGridLines 是否显示网格线

ShowNextPrevMonth 是否显示“上一个月”和“下一个月”按钮

ShowTitle 是否显示标题

TitleFormat 标题格式

SelectionMode 设置日期选择模式（选择月、星期或日）

DayHeaderStyle 设置应用于日标头行的样式

DayStyle 设置应用于日的样式

NextPrevStyle 设置应用于月导航按钮（“上一个月”和“下一个月”按钮）的样式

OtherMonthDayStyle 设置应用于相邻月中的日的样式

SelectedDayStyle 当前所选中日期的样式

科

学出版社


www.abook.cn


续表属性说明

SelectorStyle 应用于月和周选择器的样式

TitleStyle 应用于标题样式

TodayDayStyle 应用于今天日期的样式

WeekenDayStyle 应用于周末的样式

SelectdDate 当前选定的日期

VisibleDate 要显示的月，例如 VisibleDate=2009-2-1，则控件中显示 2009 年 2 月

用户可以通过属性设置日历控件的外观，也可以使用 Visual Studio .NET 中的样式来设

置日历控件的外观。在 Web 窗体设计视图中，选择日历控件，单击控件右上角的按钮，

弹出快捷菜单，选择“自动套用格式”命令，在对话框中选择某种样式。日历控件常用的事件是 SelectionChanged 和 VisibleMonthChanged。当日历控件当前所

选择的日期改变时，将触发 SelectionChanged 事件；当用户更改日历控件的显示月时，将

触发 VisibleMonthChanged 事件。案例 3-13 Calendar 控件应用。

案例分析在页面的文本框中需要输入日期，通过单击一个图标，弹出一个日历控

件，将日历控件中所选择的日期填入到文本框中，并将日历控件隐藏。

实现步骤

1）新建一个 Web 窗体，命名为 3_13Calendar.aspx。 2）在 Web 窗体中，添加一个标签控件，命名为 Label1，设置 Text 属性为“请输入你

的出生日期：”；添加一个文本框控件，命名为 txtDate，设置 Text 属性为空；添加一个

ImageButton 控件，命名为 ibtnDisplay，并设置 ImageUrl 属性为图片文件的路径；添加一

个日历控件，命名为 Calendar1，设置 Visible 属性为 False。 3）控件 Calendar1 自动套用格式（专业型 2）。 4）在 Web 窗体设计视图中，双击按钮 ibtnDisplay，进入后台代码编辑窗口，在 Click

事件处理过程中编写如下代码：

protected void ibtnDisplay_Click(object sender, ImageClickEventArgs e)

{ this.Calendar1.Visible = true; }//设置控件Calendar1可见

5）在 Web 窗体设计视图中，双击 Calendar1 控件，进入后台代码编辑窗口，在

SelectionChanged 事件处理过程中编写如下代码：

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{ //在TextBox1中显示控件Calendar1中选中的日期

this.txtDate.Text = this.Calendar1.SelectedDate.ToShortDateString();

this.Calendar1.Visible = false; //设置控件Calendar1不可见

}



（a）单击图片按钮后，显示日历控件（b）在日历控件中选择日期后运行效果

图 3-19 案例 3-13 运行效果

3.2.9 视图控件和向导控件

1．视图控件 MultiView 和 View

在 ASP.NET 中，使用 MultiView 和 View 控件，可以做出选项卡的效果，类似于 Visual Basic.NET 中的 TabControl 控件，可以在页面中显示或隐藏不同部分。一个 MultiView 控

件可以包含多个 View 控件，View 控件可以包含子控件，一个 View 控件相当于一个选项

卡。MultiView 控件一次只能显示一个 View，通过切换 View 控件，从而看到不同内容。 MultiView 控件的主要属性是 Views 和 ActiveViewIndex。Views 属性是一个

ViewCollection 对象，是一个 View 对象的集合，存储了 MultiView 控件中所包含的 View对象。ActiveViewIndex 属性表示 MultiView 控件中当前处于活动状态的视图（View）的索

引值，通过设置 ActieViewIndex 属性，可以实现 MultiView 控件的视图切换，如将

ActiveViewIndex 属性设为 1，则在 MultiView 控件中显示第二个视图（索引值从 0 开始），

将 ActiveViewIndex 属性设为-1，则在 MultiView 控件中不显示任何视图，ActiveViewIndex的属性默认值为-1。

MultiView 控件的主要事件是 ActiveViewChanged，当控件中的视图改变时触发。 MultiView 控件的主要方法是 SetActiveView（view As System.Web.UI. WebControls.

View），将参数中的视图作为 MultiView 的当前视图。案例 3-14 使用 MultiView 控件在页面中实现选项卡效果。

案例分析将页面分成财经、科技和新闻三个频道，单击某个频道，在页面中显示

该频道的信息。

实现步骤

1）新建 Web 窗体，命名为 3_14MultiViewExample1.aspx。 2）在 Web 窗体设计视图中，单击“布局”菜单，选择“插入表”命令，弹出“插入

表”对话框，插入 2 行 3 列的表格。在表格的第 1 行的三个单元格中都添加一个 LinkButton，命名为 lbtnFinance、lbtnTechnology 和 lbtnNews，设置 Text 属性分别为“财经”、“科技”

科

学出版社


www.abook.cn


和“新闻”。合并表格第 2 行的三个单元格，添加一个 MultiView控件，命名为 MultiView1，在 MultiView1 中添加三个 View 控件，

分别命名为 View1、View2 和 View3。在 View1 中输入文本“这

是网站的财经频道。”，在 View2 中输入文本“这是网站的科技

频道。”，在 View3 中输入文本“这是网站的新闻频道。”。在

表格上右击，弹出快捷菜单，选择“作为服务器控件运行”命令，

使得表格在服务器可见。页面布局如图 3-20 所示。 3）在 Web 窗体设计视图中的页面空白处双击，在 Page_Load

事件处理过程中编写代码如下：

protected void Page_Load(object sender, EventArgs e) { //如果首次访问页面，设置表格的第一行第二个和第三个单元格的背景色为gray if(Page.IsPostBack ==false) { TABLE1.Rows[0].Cells[1].BgColor = "gray"; TABLE1.Rows[0].Cells[2].BgColor = "gray"; MultiView1.ActiveViewIndex = 0; //MultiView1控件中显示第一个视图。

} }

4）设置 lbtnFinance、lbtnTechnology 和 lbtnNews 的 CommandArgument 属性分别为 0、

1 和 2 ；将三个 LinkButton 控件的 Command 事件处理程序指定为同一过程

ViewChangeCommand，编写代码如下：

protected void ViewChangeCommand(object sender, CommandEventArgs e) { //获取当前单击的LinkButton控件的CommandArgument属性值 int viewIndex=int.Parse(e.CommandArgument.ToString()); //将LinkButton所代表的视图在MultiView1中显示 MultiView1.ActiveViewIndex = viewIndex; //将Table1中的第一行的所有单元格的背景色设为gray for(int i=0;i<TABLE1.Rows[0].Cells.Count;i++) TABLE1.Rows[0].Cells[i].BgColor = "gray"; //将当前单击的LinkButton所在的单元格的背景色设为white TABLE1.Rows[0].Cells[viewIndex].BgColor = "white"; }

运行结果运行效果如图 3-21 所示。在案例 3-14 中，要求单击 LinkButton 控件

lbtnFinance，即单击“财经”按钮，在 MultiView1 控

件中显示第一个视图，单击“科技”按钮，显示第二个

视图，单击“新闻”按钮，显示第三个视图。将 Link Button按钮所对应的视图索引作为CommandArgument，将三个 LinkButton 的 Command 事件指定为同一个过

程，在该过程中，通过按钮的 CommandArgument，设置 MultiView1 控件的 ActiveViewIndex 属性，实现视图的切换。

在 MultiView 控件中，除了直接设置 ActiveViewIndex 属性值，进行视图切换，还可以

在 View 中添加导航按钮，实现视图的切换。可以在 View 中增加按钮控件（Button、LinkButton 或 ImageButton），将这些按钮的 CommandName 属性和 CommandArgument 属

图 3-20 页面布局

图 3-21 单击“科技”按钮，运行效果


性设为指定值，不需编写代码，即可实现视图切换。CommandName 属性和 CommandArgument属性的设置如表 3-22 所示。

表 3-22 View 控件导航按钮的属性设置

导航按钮 CommandName 属性 CommandArgument 属性

上一视图 PrevView 不需设置

下一视图 NextView 不需设置

切换到指定 ID 的视图 SwitchViewByID 要切换的视图的 ID

切换到指定索引值的视图 SwitchViewByIndex 要切换的视图的索引值

案例 3-15 使用导航按钮实现 MultiView 的视图切换。

实现步骤

1）新建 Web 窗体，命名为 3_15MultiViewExample2.aspx。 2）在 Web 窗体中，添加一个 MultiView 控件，命名为 MultiView1；在 MultiView1 中

添加三个 View 控件，分别命名为 View1、View2 和 View3。 3）在 View1 中输入文本“这是第一步。”，并添加两个按钮控件 Button1 和 Button2，

Text 属性分别为 NextView 和 LastView，设置 Button1 的 CommandName 属性为 NextView，

Button2 的 CommandName 属性为 SwitchViewByIndex，CommandArgument 属性为 2。 4）在 View2 中输入文本“这是第二步。”，并添加 4 个按钮控件 Button3、Button4、

Button5 和 Button6，Text 属性分别为 FirstView、PrevView、NextView 和 LastView，设置

Button4 和 Button5 的 CommandName 属性分别为 PrevView 和 NextView，设置 Button3 和

Button6 的 CommandName 属性为 SwitchViewByIndex，Button3 的 CommandArgument 属性

为 0，Button6 的 CommandArgument 属性为 2。 5）在 View3 中输入文本“这是后一步。”，并添加两个按钮控件 Button7 和 Button8，

Text 属性分别为 FirstView 和 PrevView，CommandName 属性分别为 SwitchViewByIndex和 PrevView，设置 Button7 的 CommandArgument 属性为 0。

6）Web 窗体控件布局如图 3-22 所示。 7）设置 MultiView1 的 ActiveViewIndex 属性为 0。

图 3-22 案例 3-15 Web 窗体设计


科

学出版社


www.abook.cn


（a）首次访问页面（b）单击 NextView 按钮后显示效果

图 3-23 案例 3-15 运行效果

在案例 3-15 中，使用导航按钮实现视图的切换，即按照一定的步骤显示信息。ASP.NET提供的向导控件 Wizard，也可以按照一定的步骤显示信息，且该控件自带了导航功能，不

需用户自己添加导航按钮。

2．向导控件 Wizard

向导控件 Wizard 使用多个步骤向用户显示信息或获取用户输入数据，每个步骤都是一

个 WizardStep 对象，存储在向导控件的 WizardSteps 属性中。在 WizardStep 中可以添加

Web 控件或文本信息，可接受用户输入数据。向导控件通过导航按钮和边栏导航允许用户在各个步骤间移动。边栏导航，就是在向

导控件的侧栏显示各个步骤的标题，单击步骤标题，可进入该步骤。向导控件根据步骤，即 WizardStep 的 StepType 属性，自动设置导航按钮。StepType

属性可以是 Auto、Start、Step、Finish、Complete，对应导航按钮设置如下： 1）StepType 的默认值是 Auto，即由 Wizard 决定按钮的放置情况。 2）StepType 属性值设为 Start，表示是起始步骤，则放置一个“下一步”按钮。 3）StepType 属性值设为 Step，表示是中间步骤，则放置“下一步”和“上一步”按钮。 4）StepType 属性值设为 Finish，则放置“上一步”和“完成”按钮。 5）StepType 属性值设为 Complete，显示一些终信息。 Wizard 的 Title 属性，表示步骤的标题，将在边栏导航中显示。AllowReturn 属性，表

示该步骤是否允许返回。向导控件的 ActiveStepIndex 属性，表示当前处于活动状态的步骤的索引值，通过该属

性可设置向导控件的活动步骤。向导控件提供了丰富的属性，设置外观，如 HeaderText 属性，设置向导控件的标题文

本，在每个步骤中都显示；StartNextText 属性和 StartNextButtonType 属性指定起始步骤中

的导航按钮的文本和按钮类型，类似地，可设置其他导航按钮的文本和按钮类型。向导控件还提供了丰富的属性，设置控件的样式，如 StepStyle、HeaderStyle 等。向导控件的常用事件有 ActiveStepChanged、NextButtonClick、PreviousButtonClick、

FinishButtonClick、SideBarButtonClick，事件触发因素如下： 1）控件的当前步骤改变时，将触发 ActiveStepChnaged 事件。 2）单击“下一步”按钮时，将触发 NextButtonClick 事件。 3）单击“上一步”按钮时，将触发 PreviousButtonClick 事件。 4）单击“完成”按钮时，将触发 FinishButtonClick 事件。


5）单击边栏导航时，将触发 SideBarButtonClick 事件。案例 3-16 向导控件应用。

实现步骤

1）新建 Web 窗体，命名为 3_16WizardExample.aspx。 2）在 Web 窗体中添加一个向导控件，命名为 Wizard1，在属性窗口中单击 WizardSteps

属性中的按钮，弹出如图 3-24 所示的对话框，在对话框中创建各个步骤。 3）将 Step1 到 Step4 的 StepType 属性分别设置为 Start、Step、Finish 和 Complete，Title

属性分别设置为 Step 1、Step 2、Step 3 和 Step 4。 4）在 Step 1 中输入文本“这是第一步”；在 Step 2 中输入文本“这是第二步”；在

Step 3 中输入文本“这是后一步”；在 Step 4 中输入文本“谢谢使用向导控件”。 5）设置 Wizard1 的 HeaderText 属性为“向导控件使用介绍”。


图 3-24 WizardStep 集合编辑器

图 3-25 在第一步中单击“下一步”按钮，

执行效果

3.3 验证控件

Web 页面在接受用户数据时，希望用户输入的数据满足一定的要求，如在注册页面中，

要求用户必须输入用户名，确认密码必须与密码一致，电话号码、电子邮件等格式要求正

确等。ASP.NET 提供了一组功能强大的验证控件，可以验证 Web 页面中用户输入的数据

是否有效，如果数据无效，能够为用户提供相关的错误信息。当单击了页面中的按钮，而

且该按钮的 CausesValidation 属性为 True，将启动验证，如果页面中的所有验证控件都验

证成功，该页面的 Page 对象的 IsValid 属性为 True，否则为 False。 ASP.NET 提供了以下 6 种验证控件： 1）RequiredFieldValidator，要求用户必须输入数据，常用于对必填数据的验证，如可

用来验证用户注册页面的用户名信息。 2）CompareValidator，将用户输入的数据与指定的数据或某一控件的值进行比较，验

证用户输入的数据是否小于、大于、等于、不等于、大于等于、小于等于另外一个值，或

验证用户输入的数据是否可以转换为某种数据类型。

科

学出版社


www.abook.cn


3）RangeValidator，验证用户输入的数据是否符合某个范围要求，如可验证用户输入

的年龄是否在 20～30 之间。 4）RegularExpressionValidator，验证用户输入的数据是否符合某个正则表达式的要求，

如可验证电话或电子邮件的格式是否正确。 5）CustomValidator，根据用户自己定义的规则进行验证。 6）ValidationSummary，集中显示页面中的验证错误信息。除 ValidationSummary 控件以外，其他 5 种验证控件的通用属性如表 3-23 所示。

表 3-23 验证控件的通用属性

属性说明

ControlToValidate 要验证的控件的 ID，该属性不能为空，必须指定验证控件对某个用户输入数据的控件进

行验证

Display 控件显示错误信息的方式。None 表示不在控件中显示错误信息；Static 表示在页面中静态

保留错误信息的显示位置；Dynamic 表示验证失败时，在页面显示错误信息

Text 验证失败时显示的文本，验证控件显示

ErrorMessage 验证失败时显示的文本，ValidationSummary 控件显示

IsValid 表示验证控件所关联的控件是否通过验证，True 表示通过

EnabledClientScript 表示是否启用客户端验证

ForeColor 控件文本颜色，即显示错误信息的颜色，默认是红色

3.3.1 RequiredFieldValidator 控件

RequiredFieldValidator 控件将用户数据（在要验证的控件中输入的）与 InitialValue 属

性值进行比较，如果用户数据与 InitialValue 值不相同，则验证成功；否则，验证失败。

InitialValue 属性的默认值是空，即只要用户输入数据（在要验证的控件中输入），就可以

通过验证。例如，在用户注册页面中，必须输入用户名，可以为输入用户名的控件指定一

个 RequiredFieldValidator 控件进行验证，RequiredFieldValidator 控件的 InitialValue 属性为

默认值。在有些情况下，不仅要求用户在控件中输入数据，并且要求输入指定的某一类数据。

例如，在一个进行月份选择的 DropDownList 控件中有 13 个列表项，分别是“请选择月份”

和 1～12 共 12 个整数，希望用户在 DropDownList 控件中选择一个月份列表项，而不是选

择“请选择月份”列表项。可以为 DropDownList 控件指定一个 RequiredFieldValidator 验证

控件，并将该验证控件的 InitialValue 属性设为“请选择月份”，当在 DropDownList 控件

中选中的选项不是“请选择月份”时，才能验证成功。案例 3-17 RequiredFieldValidator 控件的应用。

实现步骤

1）新建 Web 窗体，命名为 3_17MonthValidation.aspx。 2）在 Web 窗体中添加一个 DropDownList，命名为 ddlMonth，设置 ddlMonth 控件的

Items 属性为“请选择月份”和 1～12 共 12 个整数。 3）在 Web 窗体中添加一个 RequiredFieldValidator 控件，命名为 RequiredField

Validator1，设置 ControlToValidate 属性为 ddlMonth，InitialValue 属性为“请选择月份”，


设置 Text 属性为“请选择正确的月份”，设置

Display 属性为 Dynamic。 4）在 Web 窗体中添加一个命令按钮，命名

为 Button1，设置 Text 属性为“验证”。

运行结果在 ddlMonth 控件中选择“请选

择月份”后，单击“验证”按钮，运行效果如

图 3-26 所示。在案例 3-17 中，如果 ddlMonth 中的选中项与 RequiredFieldValidator 控件的 InitialValue

属性值相同，则无法通过验证，从而确保用户在 ddlMonth 中选择的是 1～12 中的某个月份。

3.3.2 CompareValidator 控件

CompareValidator 控件将用户输入的数据与指定的数据或某控件的值进行比较，要求

用户输入的数据与进行比较的值符合指定的关系。 CompareValidator 控件的主要属性有 ControlToCompare、ValueToCompare、Operator、

和 Type。 ControlToCompare 属性指定与用户输入数据进行比较的控件，例如，在用户注册页面

中，要求两次输入的密码必须一致，可以为第二个输入密码的文本框指定 CompareValidator控件进行验证，将第二个输入密码的文本框的值与第一个输入密码的文本框的值进行比较，

则在 CompareValidator 控件的 ControlToCompare 属性中指定第一个输入密码的文本框

的 ID。 ValueToCompare 属性指定与用户输入数据进行比较的常量。 Operator 属性指定进行比较的运算符，可以是 Equal、NotEqual、GreaterThan、

GreaterThanEqual、LessThan、LessThanEqual、DataTypeCheck。 Type 属性表示要比较的两个值的数据类型，包括 String、Integer、Double、Date 和

Currency 类型。当 Operator 属性为 DataTypeCheck 时，将忽略 ControlToCompare 和

ValueToCompare 属性，如果用户输入的数据能够转换成 Type 所指定的数据类型，则验证

通过，否则，验证失败。例如，在文本框中要求输入出生日期，则可以为该文本框指定一

个 CompareValidator 控件，设置 Type 属性为 Date，设置 Operator 属性为 DataTypeCheck，从而确保用户输入的数据是合法的日期数据。

3.3.3 RangeValidator 控件

RangeValidator 控件要求用户输入的数据在一定的范围之内，可以用来限定数值、字符

串和日期类型数据的范围。 RangeValidator 控件的主要属性有 MinimumValue 和 MaximumValue，分别用来指定验

证范围的小值和大值，如果用户输入的数据在该范围之内，则验证通过，否则，验证

失败。例如，要求用户输入的年龄在 20～30 岁之间，则可以使用 RangeValidator 控件进行

验证，设置 MinimumValue 属性为 20，设置 MaximumValue 属性为 30。

图 3-26 RequiredFieldValidator 验证控件应用

科

学出版社


www.abook.cn


3.3.4 RegularExpressionValidator 控件

RegularExpressionValidator 控件使用正则表达式来检查用户输入的数据，可以用来验证

具有特定格式的数据，如电子邮件地址、电话号码、邮政编码、Internet URL 等。 RegularExpressionValidator 控件的主要属性是 ValidationExpression，用来确定有效性的

正则表达式。正则表达式中常用的符号如表 3-24 所示。

表 3-24 正则表达式中的常用符号

符号说明示例

[ ] 表示一个字符集 [a-z]表示 a～z 中的一个小写字母

{m,n} 表示字符个数，m<=n [a-z]{1,3}表示可以输入 1～3 个小写字母

．表示任意字符．{3}表示 3 个任意字符

| 表示选择 a|b 表示可以是 a 或 b

\ d 表示 0～9 之间的一个数字 \d{3}表示输入 3 个数字

\ w 表示一个字（大小写字母、数字、下划线）与[a-zA-Z0-9]相同

在 Visual Studio 2010 中提供了正则表达式编辑器，可以很容易地编辑正则表达式。在

正则表达式编辑器中提供了常用格式的正则表达式，如电话号码、邮政编码、电子邮箱地

址、身份证号和 Internet URL 等。单击 ValidationExpression 属性中的按钮，弹出正则表达

式编辑器，如图 3-27 所示。

图 3-27 正则表达式编辑器

如果用户输入的数据为空，将不会调用验证函数且验证成功。如果某项数据要求用

户必须输入，且符合一定的格式要求，则使用 RequiredFieldValidator 和 RegularExpression Validator 控件共同进行验证。

3.3.5 CustomValidator 控件

ASP.NET 所提供的 RequiredFieldValidator、CompareValidator、RangeValidator 和

RegularExpressionValidator 验证控件，可以满足基本的数据验证要求。在有些情况下，对用

户的输入数据有特别的要求，例如要求用户输入的密码长度在 6 位以上，且必须包含大写

注意


字母、小写字母、数字和特殊字符，则可以使用 CustomValidator 控件，自定义验证规则进

行验证。 CustomValidator 控件可以使用客户端进行验证，即使用客户端脚本语言定义验证函数，

通过 ClientValidationFunction 属性指定客户端验证函数名称。 1）如果使用 VBScript 脚本语言定义客户端验证函数，格式如下：

Sub ValidationFunctionName(source,argumens)

2）如果使用 JavaScript 脚本语言定义客户端验证函数，格式如下：

Function ValidationFunctionName(source,arguments)

在客户端验证函数中，通过 arguments 参数的 Value 属性可以获取要验证的值，通过

arguments 参数的 IsValid 属性返回验证结果，True 表示验证成功，False 表示验证失败。使用客户端验证，避免了数据在客户端与服务器端的来回传递，可以提供页面的响应

速度。但是，在有些情况下，需要根据服务器端的一些信息来对用户数据进行验证，例如

根据数据库中的某些数据来对用户数据进行验证，此时，可以使用服务器端验证，即在

ServerValidate 事件的处理过程中编写代码进行验证。案例 3-18 CustomValidator 控件应用。

案例分析确保用户所输入的密码长度为 6 位以上，且必须包含大写字母、小写字

母、数字和特殊字符。

实现方案 1

使用客户端脚本语言编写客户端验证函数进行验证。

实现步骤

1）新建 Web 窗体，命名为 3_18_1PasswordValidation.aspx。 2）在 Web 窗体中添加一个标签控件，命名为 Label1，设置 Text 属性为“请输入密

码：”；添加一个文本框控件，命名为 txtPassword，设置 Text 属性为空；添加一个

CustomValidator控件，命名为CustomValidator1，设置ControlToValidate属性为 txtPassword，设置 Display 属性为 Dynamic，设置 Text 属性为“密码长度大于等于 6，且必须包含大小写

字母、数字、特殊字符！”；添加一个命令按钮，命名为 btnSubmit，Text 属性设为“提交”。 3）在 Web 窗体的源代码视图中，<head>标记内，定义客户端验证函数 validatePassword；

设置 CustomValidator1 的 ClientValidationFunction 属性值为 validatePassword；3_18_1Password Validation.aspx 文件中的源代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="3_18_1 Password

Validation.aspx.cs" Inherits="_3_18_1 PasswordValidation" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"



<title>客户端验证应用</title>

<script type="text/javascript" language="javascript" > function validatePassword(source, arguments) //定义客户端验证函数

科

学出版社


www.abook.cn


{ var pwd = arguments.Value; //获取要验证的控件的值，即txtPassword 控件的值

var existUpperLetter = false; //定义布尔变量，分别表示是否存在大写字母、小写字母、数字、特殊字符

var existLowerLetter = false; var existDigit = false; var existOtherChar = false; if (pwd.length < 6) //如果密码长度小于6,设置验证控件验证失败 { arguments.IsValid = false; return; } else {

for (i = 0; i < pwd.length - 1; i++) //使用循环，对密码中的字符类型进行判断

{ if (pwd.charCodeAt(i) >= 48 && pwd.charCodeAt(i) <= 57) //数字

{ existDigit = true; } else if (pwd.charCodeAt(i) >= 65 && pwd.charCodeAt(i) <=

90) //大写字母 { existUpperLetter = true; } else if (pwd.charCodeAt(i) >= 97 && pwd.charCodeAt(i)

<= 122) //小写 { existLowerLetter = true; } else //特殊字符 { existOtherChar = true; } } } //根据大写字母、小写字母、数字、特殊字符的存在情况,设置验证控件是否有效 arguments.IsValid = existDigit && existUpperLetter &&

existLowerLetter && existOtherChar; }

</script> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="请输入密码："> </asp: Label> <asp:TextBox ID="txtPassword" runat="server"></asp:TextBox> <asp:CustomValidator ID="CustomValidator1" runat="server"

ControlToValidate="txtPassword" Display="Dynamic" ErrorMessage="CustomValidator"

ClientValidationFunction="validatePassword">密码长度大于等于6，且必须包含大小写字母、数字、特殊字符！</asp:CustomValidator>

<asp:Button ID="Button1" runat="server" Text="提交" /> </div> </form></body></html>


图 3-28 案例 3-18 方案 1 运行效果


实现方案 2

在 CustomValidator 控件的 ServerValidate 事件处理过程中编写代码，进行服务器端

验证。

实现步骤

1）新建 Web 窗体，命名为 3_18_2PasswordValidation.aspx。 2）同方案 1 的步骤 2）。 3）在 Web 窗体设计视图中，选择 CustomValidator1 控件，在属性窗口中单击按钮，

在事件列表中，双击 ServerValidate 事件，编写后台代码如下：

protected void CustomValidator1_ServerValidate(object source, ServerValidateEventArgs args)

{ string strPassword = txtPassword.Text; bool existDigit = false; bool existUpperLetter = false;

bool existLowerLetter = false bool existOtherChar=false;

if (strPassword.Length < 6) { args.IsValid = false; return; } for (int i = 0; i < strPassword.Length; i++) { int ascOfChar = strPassword[i]; if (ascOfChar >= 48 && ascOfChar <= 57) existDigit = true; else if (ascOfChar >= 65 && ascOfChar <= 90) existUpperLetter = true; else if (ascOfChar >= 96 && ascOfChar <= 122) existLowerLetter = true; else existOtherChar = true; } args.IsValid = existDigit && existUpperLetter && existLowerLetter

&& existOtherChar; }

使用 CustomValidator 控件进行验证，当用户输入数据为空时，将不调用验证函数

并且验证成功。如果只定义客户端验证函数进行验证，恶意代码可能会绕过验证。因此，

建议将客户端验证和服务器端验证结合使用，即在页面文件中使用客户端脚本语言定义

客户端验证函数，指定 ClientValidationFunction 属性值为客户端验证函数名，同时在服

务器端处理 ServerValidate 事件，进行服务器端验证。

3.3.6 ValidationSummary 控件

ValidationSummary 控件不对用户输入的数据进行验证，用于统一现实页面中所有验证

控件的错误信息。ValidationSummary 控件的主要输入如表 3-25 所示。

注意科

学出版社


www.abook.cn


表 3-25 ValidationSummary 控件的主要属性

属性说明

DisplayMode 错误信息的显示格式。BulletList 以项目符号列表的方式显示错误信息；List 以列表方式显示

错误信息；SingleParagraph 以单个段落显示错误信息。默认值是 BulletList

HeaderText 控件的标题文本

ShowMessageBox 是否在消息框中显示错误信息

ShowSummary 是否在页面中显示错误信息

如果在页面中使用 ValidationSummary 控件统一显示所有验证控件的错误信息，则将验

证控件的 Display 属性设为 None，并且在 ErrorMessage 属性中设置验证控件的错误信息。

3.3.7 取消验证

在现实应用中，有时需要不调用页面的验证功能，例如在用户注册页面，单击“取消”

按钮，取消用户注册。此时，只需将“取消”按钮的 CausesValidation 属性设为 False，则

单击按钮时，不会调用验证程序。案例 3-19 用户注册页面。

实现步骤

1）新建 Web 窗体，命名为 3_19CancelValidation.aspx。 2）在 Web 窗体中，添加 5 个标签控件，分别命名为 Label1、Label2、Label3、Label4

和 Label5，Text 属性分别为“用户名：”、“密码：”、“确认密码：”、“Email”和“年

龄”；添加 5 个文本框控件，分别命名为 txtUserName、txtPassword、txtConfirmPwd、txtEmial和 txtAge，用于输入用户名、密码、确认密码、Email 和年龄信息；设置 txtPassword 和

txtConfirmPwd 的 TextMode 属性为 Password。 3）在 Web 窗体中添加两个 RequiredFieldValidator 控件，分别命名为 RequiredField

Validator1 和 RequiredFieldValidator2；添加一个 CompareValidator 控件，命名为 Compare Validator1；添加一个 RegularExpressionValidator 控件，命名为 RegularExpressionValidator1；添加一个 RangeValidator 控件，命名为 RangeValidator1；添加一个 ValidationSummary 控件，

命名为 ValidationSummary1。各验证控件的属性设置如表 3-26 所示。

表 3-26 案例 3-19 验证控件属性设置

控件 ID 属性名称属性值

ControlToValidate txtUserName

ErrorMessage “请输入用户名！” RequiredFieldValidator1

Display None

ControlToValidate txtPassword

ErrorMessage “请输入密码！” RequiredFieldValidator2

Display None

ControlToValidate txtConfirmPwd

ControlToCompare txtPasswrod

ErrorMessage 确认密码要与第一次输入的密码一致！ CompareValidator1

Display None


续表控件 ID 属性名称属性值

ControlToValidate txtEmail

ValidationExpression \w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)* 在正则表达式编辑器中，选择“Internet 电子邮

件地址”

ErrorMessage 请按正确的格式输入 Email!

RegularExpressionValidator1

Display None

ControlToValidate txtAge

MinimumValue 20

MaximumValue 30

ErrorMessage 年龄在 20-30 之间！

Display None

RangeValidator1

type Integer

DisplayMode BulletList ValidationSummary1

HeaderText 注册页面错误信息

4）在 Web 窗体中添加两个命令按钮，分别命名为 btnSumbit 和 btnCancel。按钮控件

的属性设置如表 3-27 所示。

表 3-27 案例 3-19 命令按钮属性设置

控件 ID 属性名称属性值

btnSumbit Text 提交

Text 取消 btnCancel

CasuseValidation False

5）页面布局如图 3-29 所示。 6）在 Web 窗体设计视图中，双击“取消”按钮，在 Click 事件处理过程中编写代码

如下：

protected void btnCancel_Click(object sender, EventArgs e) { Response.Write("<script>window.close();</script>"); } //通过脚本语言,关闭当前页面


图 3-29 案例 3-19 页面布局图 3-30 案例 3-19 运行效果

科

学出版社


www.abook.cn


上机实训 3

1．实训目的

1）掌握 ASP.NET 中主要 Web 服务器控件的常用属性、方法和事件。 2）掌握 ASP.NET 中验证控件的使用。

2．实训要求

1）程序运行正确无误，界面友好，结果清晰。 2）填写好实训报告。

3．实训内容

1）在 Web 窗体中动态创建 Button 控件，删除 Button 控件。（提示：要将 Button 控件

添加到 Form 表单中。） 2）应用 FileUpload 控件，实现将文件上传到指定目录，同时允许上传多种类型的文件。 3）使用 Web 控件建立一个用户注册窗体，分步骤完成用户名、密码、姓名、性别、

地址、电话、生日、电子邮件和兴趣爱好等信息的输入，要求使用 Label、TextBox、Button、RadioButton 或 RadioButtonList、DropDownList、CheckBox 或 CheckBoxList、Wizard 或

MultiView 等控件，应用验证控件，对用户录入的内容进行验证。 4）设置两个下拉列表控件，分别显示年级（如 2011 级）和班级（如 11 软件技术班、

11 网络技术班、11 信息管理 1 班、11 信息管理 2 班等），每个年级对应多个班级，要求

用户在年级下拉列表框中选择年级后，在第二个下拉列表框中自动显示出年级所对应的班

级信息。

asp.net 动态网页 设计案例教程 - abook.cn · pdf file用linq to sql...

Documents

asp.net 动态网页设计案例教程 - abook.cn · pdf file用linq to sql...