ASP.NET+SQL入门：GridView控件操作数据库及模糊查询

sqlserver

需积分: 5 104 浏览量更新于2024-07-07 收藏 12.65MB DOC 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

1 这里以实现对 Patron 表的

编辑添加删除为例进行介绍

3 将工具箱中

FormView 控件拖放

到页面

4 执行“新建数据

源”操作

新建 FormView 控件数据源的方法

与 GridView 控件类似，这里只给

出新建过程的截图，不再详细说明

2 新建一个页面

单击

1 选中该选项

2 在浏览器中浏览这个页

面，如下图所示

该页面具有换页、编辑、新

建和删除功能

1 单击上图中的“编辑”链

接，打开如本图所示的界

面

2 修改数据后可单击“更新”链接，

将修改的数据保存到数据库

3 注意：这个编辑界面并

不友好，后面会详细介绍

如何修改

这是新建界面，与编辑界面类

似，只是在该界面没有数据

1 这里以实现对 Patron 表的

编辑添加删除为例进行介绍

3 将工具箱中

DetailsView 控件拖放到

页面

4 执行“新建数据

源”操作

新建 DetailsView 控件数据源的方

法与 FormView 控件类似，这里只

给出新建过程的截图，不再详细说

明

2 新建一个页面

单击

1 选中这些选项

2 将该页面在浏览器中浏

览，如下图所示

这是前面用 FormView 控件设计的页面，与 DetailsView 控件的

主要区别是它不是用表格的形式来显示页面内容。用DetailsView

控件设计的页面界面友好，设计容易，适合初学者。用FormView

控件设计的页面并不友好，但设计比较灵活，适合具有一定设计能

力的人设计

该页面具有换页、编辑、新

建和删除功能

1 单击上图中的“编辑”链

接，打开如本图所示的界

面

2 修改数据后可单击“更新”链接，

将修改的数据保存到数据库

3 注意：这个编辑界面并

不友好，后面会详细介绍

如何修改

该页面与 FormView 页面类似，但也

有不同的地方，仔细比较两者的不同

这是新建界面，与编辑界面类

似，只是在该界面没有数据

上面是这个例子 DetailsView 控件的代

码。DetailsView 控件不但界面友好，代码也比

较简单

拖动 DetailsView 控件的边

框，使其的宽度符合实际需要

执行“编辑字段”命令

按下来介绍修改这里的字段属性的

方法，先介绍如何修改标题

通过修改字段的 HeaderText

属性可以修改字段标题

这是经过上面修改后 DetailsView 控件的代码，粗体部分是刚

才修改的属性。熟练掌握后可以直接对源代码进行修改

这个表格第一列的宽度是自动产生

的，可能不符合我们要求，可以按下

面方法设置第一列的宽度

1 在编辑字段窗口修改 Width 属

性，在此除了可以修改标题的宽度属

性外，还可以修改字体、颜色、对齐方

式等属性，同学门可以尝试修改这些

属性看看修改后的效果

2 所有字段的标题宽度都是相

同的，只要设置其中一个字

段的标题宽度即可

这是上面修改后的效果

3 设置“借书证号”字段的背景

颜色，其它字段也按此设置

1 选中“性别”字段

这是编辑界面，这个界面并

不友好，接下来介绍如何设

计如下图所示的界面

在介绍如何设计前，先看一下目

前 DetailsView 控件的代码，以

便在后面对比设计后代码的变化

2 执行这里的“将此字段转换为 TemplateField” 功能

3 单击

执行这里的“编辑模板”

功能

1 选中这里的“ EditItemTemplate”

2 删除这里的文本框控件

1 将这里的 RadioButtonList

控件拖放到页面

2 从工具箱将 RadioButtonList

控件拖放到此，然后编辑该控件

的选项，两个选项“男”和“女”

将该 RadioButtonList 控件

RepeatDirection 属性改为 Horizontal ，这

样它的选项就改为水平排列

执行这里的“结束编辑

模板”功能

采用与修改“性别”字段的类似方法修改“部门”字段，所不同的

是在此放置 DropDownList 控件，设置它的选项为“电信学

院”、“工商学院”、“计算机学院”和“数学学院”等

采用与修改“性别”字段的同样

方法修改“类型”字段，它的选

项是“教师”和“学生”

执行这里的 “ 编辑

DataBindings” 功能

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式。注意，

这里使用 Eval() 函数，即单向绑

定，不要使用双向绑定

1 选中该属性

采用与修改“性别”字段的类似方法

修改“出生日期”字段，所不同的是

在此放置 Calendar 控件

按本图设置该字段的数据绑定

按本图设置“出生日期”字段的数据绑定

经过上面修改后编辑读者界面

达到了本图的效果

注意，如果按照教材 [1] 设计 TSG 数

据库， Patron 表中 Type 字段的类型

为 char(10) ，需要将它改为

varchar(10) ，或 char(4) ，否则该

页面在浏览器中打开时会出现如下图

所示的错误信息

请同学分析一下该错误的原因

在浏览器中打开该页面，点击“新建”链

接，打开新建界面，这是页面的效果

这是当天日期的显示效果

在新建页面输入读者信息，单击

“插入”链接按钮，完成该读者信息

的输入

ASP.NET 的日历控件功能比较弱，只能通过

“ <” 和“ >” 按钮切换月份，没有切换年份的

按钮，如果输入年份较早的日期，用该日历

控件输入日期很不方便， ASP.NET 的日历控

件不是很实用，可以使用 jQuery 的日历控

件

这是新添加的读者

上图中“出生日期”显示的格式并不

友好，下面介绍如何按年月日的

格式显示出生日期

修改这里的数据绑定代码，使

其按年月日的格式显示，其中

{0:D} 指的是日期格式

采用类似 GridView 控件的设计方

法实现 FormView 控件的查询功

能。本图实现的是最简单的查询，

也可像前面那样设计复杂的查询，

下面介绍的 DetailsView 控件也

可采用类似方法设计，同学们可自

行练习

这是在 4.1 中设计的例子

由于 FormView 控件的代码比较复杂，这里折叠了编辑、插入和阅

读三个模板的代码，从这里可以看出它不像 DetailsView 控件每

个字段可以根据需要是否转换为模板，它是每一个模板中包含所

有字段相关的控件

编辑模板是在编辑模式下显示

的界面，这是编辑模板的代码

采用与阅读模板类似的方法修改编

辑模板，修改后的代码如下

这是阅读模板的代码

下面先介绍修改字段标题，可

直接在此修改

这是修改后的效果

在前面的 DetailsView 控件的例子中可以看出该控

件使用表格来布局界面。对于FormView 我们也可以

用表格布局来达到本图的效果，下面介绍如何设计

将阅读模板的代码改为

1 除了直接修改代码外，还可

以采用下面方法修改模板

2 执行这里的“编辑功能”

1 在此选择 ItemTemplate

2 在此修改 ItemTemplate

这是修改后的页面效果

注意，在编辑界面中借书证

号不能修改

先按前面介绍的方法设计按

“姓名”模糊查询的页面

1 再在页面中创建一个

DetailsView 控件

2 按下面介绍的方

法配置数据源

3 选中这里的两个选项

按本图和下图为

DetailsView1 控件的数

据源控件添加 WHERE 子

句

在 DetailsView1 控件的数据源控

件的“高级 SQL 生成选项”窗口选中

该选项

1 选中该数据源控件

2 在此双击，打开如下图所示的编

程窗口，为 DetailsView1 控件的

数据源控件编写 Updated 事件处

理程序

DetailsView1 控件的数据源控件编写 Updated 事件处理程序在更新数据

结束后触发， GridView1.DataBind() 的意思为绑定 GridView1 控件的数

据，起到刷新 GridView1 控件的作用，也就是说当 DetailsView1 控件修

改数据后刷新一下 GridView1 控件，让它显示修改后的最新数据

采用同样的方法为 DetailsView1 控件的

数据源控件编写 Inserted 和 Deleted 事

件处理程序，代码如下图所示

1 先介绍一下本例要实现的功能

2 这是刚打开页面时的界面

3 该页面具有模糊查询和删除功能

4 单击“选择”超链接，打开

如下图所示的界面

在该页面中通过 DetailsView 控

件实现编辑和添加功能

1 在浏览器中打开刚才设计的页面

2 该页面已基本达到前面所说的功能要

求，只是该 GridView 控件的标题还需要

修改。将会在后面介绍修改

3 单击“选择”超链接，打开

如下图所示的界面

这个 DetailsView 控件的界面比较粗糙，

接下来按 4.3 中介绍的方法修改它的模

板。只要将4.3 中介绍的例子的所有字段

的代码拷贝过来即可。如果该控件的宽度不

够，则适当调整一下

再修改 GridView 控件

各字段的标题

这是 DetailsView 控件的编辑界

面，即在 4.3 中介绍的例子的界

面，插入界面也类似

删除该 DetailsView 控件的

数据源，选择

SqlDataSource1 控件作为

它的数据源

为 GridView 控件编写

SelectedIndexChanged 事件处理程序

这是面板控件

1 将工具箱中的面板控件拖放到此

注意，采用这种方法设计不必像方法一那样为数据库源

控件编写 Updated 、Inserted 、Deleted 事件处理程

序

2 将这里的代码剪切粘贴到面板控

件内，如下图所示

1 将这部分的代码移到面板控件内

2 将该面板控件的 ID 属性改为 GridViewPanel

同样方法再创建一个面板控件， ID 属性为

DetailsViewPanel ，将它的 Visible 属性设为 "false" ，刚

打开该页面时看不见这部分内容。将DetailsView 控件的代

码放在面板控件内

2 执行该命令将命令字段转换为模板字段

1 选中命令字段

这是转换后命令字段的代码

在此再增加一行代码

在此选择命令字段的 ItemTemplate

模板，打开命令字段的

ItemTemplate 模板设计界面

1 选中 [ 返回 ] 按钮

2 在此双击打开 [ 返回 ] 按钮

的 Click 事件处理程序编程窗

口，如下图所示

1 为“返回”链接按钮编写这部分代码，该代码的作用是当单击 [ 返回 ] 按钮时，显

示 GridViewPanel 面板，隐藏 DetailsViewPanel ，然后再重新绑定 GridView

控件

2 再为 GridView 控件的 SelectedIndexChanged 事件处

理程序增加这两行代码，它们的作用是当单击 [ 返回 ] 按钮

时，隐藏 GridViewPanel 面板，显示 DetailsViewPanel

1 先介绍一下本例要实现的功能

2 这是刚打开页面时的界面

3 该页面具有模糊查询和删除功能

4 单击“选择”超链接，打开

如下图所示的界面

单击 [ 返回 ] 按钮返回到上

图的界面

在这个例子中 GridView 控件与

DetailsView 不同时在页面中

出现

将 Title 、Author 、Publisher 字段的类型改

成可变长字符型，这样更加合理

将 Name 、Type 、Depart 字段的类型改成可变长字符型，这样更加

合理。为了方便介绍验证控件，再增加Phone 、Email 、HomePage

三个字段

这是刚打开页面时的效果，与

5.2 介绍的例子相同

这里没有新增加的三个字段，

也可以根据实际需要增加新增

加的三个字段

在此增加新增加的三个字段

在编辑和插入界面也增加

新增加的三个字段

以上这些内容的设计不再

详细介绍

接下来介绍上面设计的页面存在的问题

在插入界面如果不输入借书证号，单击插入

链接，则显示如下图所示的错误

产生这个错误的原因是借书证号不能为空，

否则无法插入，下面介绍如何解决这种错误

1 先将 PatronID 字

段转换成模板字段

2 打开 PatronID

字段的插入模板

3 在此输入“ *” ，将颜色设置

为红色，表示该字段非空

4 这是

RequiredFieldValidator 验证

控件

5 将 RequiredFieldValidator 验证

控件拖放到此

1 选中该验证控件

该文本框控件名为

TextBox1 ，它用来输入读者

的借书证号

2 设置该验证控件的 ControlToValidate 属

性为 TextBox1 ，表示它对 TextBox1 控件

的值进行验证。RequiredFieldValidator 验

证控件是要求值非空的验证控件，即当借书

证号为空时不允许提交

2 设置该验证控件的 ErrorMessage 属性“借

书证号不能为空！”， ForeColor 属性设为

Red ，即当借书证号为空时用红色显示“借书

证号不能为空！”提示信息

再在该页面的 Load 事件处理程序中增加如下语句：

UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

如果在该页面的 Load 事件处理程序中不增加如下语句：

UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

则在打开插入页面进行验证时会出现如本图所示的错误

按照上面设计后打开插入页面，

如果没有输入借书证号单击“插

入”链接，则在此出现错误提示信

息，并且不允许提交

本例在此放置一个 [ 添加 ]

按钮，这样设计更加合理

在浏览界面单击“选择”链接

打开本图界面

这是浏览界面

去除了这里的“新建”链接

在浏览界面单击 [ 新建 ] 按

钮打开本图界面

这里去除了“取消”链接，增加“返回”链接，

单击该“返回”链接返回到浏览界面。单击“插

入”链接插入读者并返回到浏览界面

在此增加 [ 添加 ] 按钮

为 [ 添加 ] 按钮编写 Click 事件

处理程序

修改“返回”链接的 Click 事件处

理程序

修改 GridView1 控件的

SelectedIndexChanged 事件处理程序

为 SqlDataSource1 控件编写

Inserting 事件处理程序

该事件处理程序的作用为当插入记录后返

回到浏览界面并刷新 GridView1 控件

这部分代码是上面设计的

RequiredFieldValidator 验证控件代码

采用类似的方法为读者姓名字段的编辑和插入模

板设计如本图所示的 RequiredFieldValidator 验

证控件

这部分代码是上面设计的针对编辑模板中读

者姓名字段的 RequiredFieldValidator 验

证控件的代码

这部分代码是上面设计的针对插入模板中

读者姓名字段的

RequiredFieldValidator 验证控件的代

码

采用类似的方法为性别字段的编辑和插入模板设

计如本图所示的 RequiredFieldValidator 验证控

件

这是相关的代码

对类型字段采用同样方法设计，这是相关的代码

1 接下来介绍如何对电话号码进行合法性验证

这是经过上面设计后“电话”字段的相关代码

2 将“电话”字段转换成模板列，切换

到“电话”字段的模板编辑界面

3 这是 RegularExpressionValidator 验证控

件

5 在此放置一个 RegularExpressionValidator 验证控

件

2 设置该 RegularExpressionValidator 验证控件的

ControlToValidate 属性为 PhoneTextBox

这是用于输入“电话”的文本框控件，

该控件的 ID 为 PhoneTextBox

1 选中该 RegularExpressionValidator 验证控

件

单击该按钮打开如下图所示的办界面

1 在此选择该选项

2 单击 [ 确定 ] 按钮，返回到下图界面

1 在此输入当输入的电话号码格式不正确时的提示信息

在插入模板中选中该验证控

件，采用与编辑模板中相同的

设置方法设置该控件的属性

2 再设置该提示信息的颜色为红色

针对“ Email” 字段设计与 “电

话”字段类似的正则表达式验证

控件，如本图所示

在设计针对“ Email” 字段的正则表达式验证控件

时，在“正则表达式编辑器”窗口中要选择该选项

针对“个人主页”字段设计与“电

话”字段类似的正则表达式验证

控件，如本图所示

在设计针对“个人主页”字段的正则表达式验证控件

时，在“正则表达式编辑器”窗口中要选择该选项

如果在电话输入框输入的电话号码格

式不对，例如本图的电话号码是一个

不符合格式的电话，则当光标离开输

入框时，会出现如本图所示的错误提

示信息。如果在Email 和个人主页输

入框输入的格式不正确也会出现错误

提示信息

1 接下来先看一下上面设计的效

果，在浏览器中打开该页面，然后

点击 [ 添加 ] 按钮，打开插入页面

1 如果不输入借书证号、读者姓名，

不选择性别和类型，则当点击“插入”

链接时，会出现如本图所示的错误提

示信息

2 对于编辑页面也有类似的验证效

果，这里就不详细介绍

假设要添加如本图所示的学生信息，

将学生的借书证号输错了，在 S 后面

多输入了一个 0 ，单击“插入”链接出

现如下图所示的错误信息

出现该错误的原因是借书证号字段的

宽度为 10 ，而输入的借书证号的位

数超过了 10 位

1 接下来介绍如何通过 CustomValidator 验证控件解决上面问

题

3 在此放置一个 CustomValidator 验证控件

这是 CustomValidator 验证控

件

按本图设置该 CustomValidator

验证控件的

Display 、ErrorMessage 、Fore

Color 属性。同时也将前面要求借

书证号不为空的验证控件的

Display 属性设为 Static

2 打开借书证号的模板设计界面

同学们试验一下，如果这两个验证

控件的 Display 属性为 Static ，

当出现错误提示信息时将会什么结

果

再打开插入界面进行测试，如

果输入的借书证号位数超过

10 位，则当单击“插入”链接时

出现该错误信息，不允许提交

注意，前面介绍的两个控件都是客户端验证，

而这个定制验证控件在服务器端验证。它要在客

户端验证控件全部验证通过后再验证

为该控件编写 ServerValidate 事

件处理程序，代码在下面

对于读者姓名、电话、Email 、个人主页字

段也采用类似方法设计，防止在提交输入

的数据时，当输入的内容超过字段的宽度

时出现错误

这是 ValidationSummary 验证摘要控

件

2 在此放置 ValidationSummary 验证

摘要控件，将它的 ForeColor 属性设为

Red

3 将每个验证控件的 Display

属性设为 None

ValidationSummary 验证摘要控件的

作用是让错误信息通过验证摘要控件集

中显示，如本图所示

1 接下来介绍如何设计

ValidationSummary 验证摘要

控件

注意，为借书证号文本框控件设置属

性 MaxLength="10" ，可以防止输

入的内容超过 10 个字符长度，这种

方法更有效，这里采用

CustomValidator 验证控件纯粹是

为了举例

3 日历控件的 VisibleDate

属性是什么功能呢？同学们

可观察一下设置该属性与不

设置该属性的页面效果

如果没有完成方法一例子，但已建立了与 TSG 数

据库的连接，则在此出现这个连接名称 ( 在不同的

计算机中这个名称不同，它与 SQL Server 服务器

的名称有关 ) ，选中这个连接。如果在此之前没有

建立与 TSG 数据库的连接，则单击右边的 [ 新建

连接 ] 按钮建立与 TSG 数据库的连接

1 在此选择 Patron 表

2 在此选择需要在页面中显示的字

段。选择* 表示显示所有的字段

2 单击

1 这里以实现对 Patron 表的

编辑添加删除为例进行介绍

3 将工具箱中

FormView 控件拖放

到页面

4 执行“新建数据

源”操作

新建 FormView 控件数据源的方法

与 GridView 控件类似，这里只给

出新建过程的截图，不再详细说明

2 新建一个页面

单击

1 选中该选项

2 在浏览器中浏览这个页

面，如下图所示

该页面具有换页、编辑、新

建和删除功能

1 单击上图中的“编辑”链

接，打开如本图所示的界

面

2 修改数据后可单击“更新”链接，

将修改的数据保存到数据库

3 注意：这个编辑界面并

不友好，后面会详细介绍

如何修改

这是新建界面，与编辑界面类

似，只是在该界面没有数据

1 这里以实现对 Patron 表的

编辑添加删除为例进行介绍

3 将工具箱中

DetailsView 控件拖放到

页面

4 执行“新建数据

源”操作

新建 DetailsView 控件数据源的方

法与 FormView 控件类似，这里只

给出新建过程的截图，不再详细说

明

2 新建一个页面

单击

1 选中这些选项

2 将该页面在浏览器中浏

览，如下图所示

这是前面用 FormView 控件设计的页面，与 DetailsView 控件的

主要区别是它不是用表格的形式来显示页面内容。用DetailsView

控件设计的页面界面友好，设计容易，适合初学者。用FormView

控件设计的页面并不友好，但设计比较灵活，适合具有一定设计能

力的人设计

该页面具有换页、编辑、新

建和删除功能

1 单击上图中的“编辑”链

接，打开如本图所示的界

面

2 修改数据后可单击“更新”链接，

将修改的数据保存到数据库

3 注意：这个编辑界面并

不友好，后面会详细介绍

如何修改

该页面与 FormView 页面类似，但也

有不同的地方，仔细比较两者的不同

这是新建界面，与编辑界面类

似，只是在该界面没有数据

上面是这个例子 DetailsView 控件的代

码。DetailsView 控件不但界面友好，代码也比

较简单

拖动 DetailsView 控件的边

框，使其的宽度符合实际需要

执行“编辑字段”命令

按下来介绍修改这里的字段属性的

方法，先介绍如何修改标题

通过修改字段的 HeaderText

属性可以修改字段标题

这是经过上面修改后 DetailsView 控件的代码，粗体部分是刚

才修改的属性。熟练掌握后可以直接对源代码进行修改

这个表格第一列的宽度是自动产生

的，可能不符合我们要求，可以按下

面方法设置第一列的宽度

1 在编辑字段窗口修改 Width 属

性，在此除了可以修改标题的宽度属

性外，还可以修改字体、颜色、对齐方

式等属性，同学门可以尝试修改这些

属性看看修改后的效果

2 所有字段的标题宽度都是相

同的，只要设置其中一个字

段的标题宽度即可

这是上面修改后的效果

3 设置“借书证号”字段的背景

颜色，其它字段也按此设置

1 选中“性别”字段

这是编辑界面，这个界面并

不友好，接下来介绍如何设

计如下图所示的界面

在介绍如何设计前，先看一下目

前 DetailsView 控件的代码，以

便在后面对比设计后代码的变化

2 执行这里的“将此字段转换为 TemplateField” 功能

3 单击

执行这里的“编辑模板”

功能

1 选中这里的“ EditItemTemplate”

2 删除这里的文本框控件

1 将这里的 RadioButtonList

控件拖放到页面

2 从工具箱将 RadioButtonList

控件拖放到此，然后编辑该控件

的选项，两个选项“男”和“女”

将该 RadioButtonList 控件

RepeatDirection 属性改为 Horizontal ，这

样它的选项就改为水平排列

执行这里的“结束编辑

模板”功能

采用与修改“性别”字段的类似方法修改“部门”字段，所不同的

是在此放置 DropDownList 控件，设置它的选项为“电信学

院”、“工商学院”、“计算机学院”和“数学学院”等

采用与修改“性别”字段的同样

方法修改“类型”字段，它的选

项是“教师”和“学生”

执行这里的 “ 编辑

DataBindings” 功能

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式。注意，

这里使用 Eval() 函数，即单向绑

定，不要使用双向绑定

1 选中该属性

采用与修改“性别”字段的类似方法

修改“出生日期”字段，所不同的是

在此放置 Calendar 控件

按本图设置该字段的数据绑定

按本图设置“出生日期”字段的数据绑定

经过上面修改后编辑读者界面

达到了本图的效果

注意，如果按照教材 [1] 设计 TSG 数

据库， Patron 表中 Type 字段的类型

为 char(10) ，需要将它改为

varchar(10) ，或 char(4) ，否则该

页面在浏览器中打开时会出现如下图

所示的错误信息

请同学分析一下该错误的原因

在浏览器中打开该页面，点击“新建”链

接，打开新建界面，这是页面的效果

这是当天日期的显示效果

在新建页面输入读者信息，单击

“插入”链接按钮，完成该读者信息

的输入

ASP.NET 的日历控件功能比较弱，只能通过

“ <” 和“ >” 按钮切换月份，没有切换年份的

按钮，如果输入年份较早的日期，用该日历

控件输入日期很不方便， ASP.NET 的日历控

件不是很实用，可以使用 jQuery 的日历控

件

这是新添加的读者

上图中“出生日期”显示的格式并不

友好，下面介绍如何按年月日的

格式显示出生日期

修改这里的数据绑定代码，使

其按年月日的格式显示，其中

{0:D} 指的是日期格式

采用类似 GridView 控件的设计方

法实现 FormView 控件的查询功

能。本图实现的是最简单的查询，

也可像前面那样设计复杂的查询，

下面介绍的 DetailsView 控件也

可采用类似方法设计，同学们可自

行练习

这是在 4.1 中设计的例子

由于 FormView 控件的代码比较复杂，这里折叠了编辑、插入和阅

读三个模板的代码，从这里可以看出它不像 DetailsView 控件每

个字段可以根据需要是否转换为模板，它是每一个模板中包含所

有字段相关的控件

编辑模板是在编辑模式下显示

的界面，这是编辑模板的代码

采用与阅读模板类似的方法修改编

辑模板，修改后的代码如下

这是阅读模板的代码

下面先介绍修改字段标题，可

直接在此修改

这是修改后的效果

在前面的 DetailsView 控件的例子中可以看出该控

件使用表格来布局界面。对于FormView 我们也可以

用表格布局来达到本图的效果，下面介绍如何设计

将阅读模板的代码改为

1 除了直接修改代码外，还可

以采用下面方法修改模板

2 执行这里的“编辑功能”

1 在此选择 ItemTemplate

2 在此修改 ItemTemplate

这是修改后的页面效果

注意，在编辑界面中借书证

号不能修改

先按前面介绍的方法设计按

“姓名”模糊查询的页面

1 再在页面中创建一个

DetailsView 控件

2 按下面介绍的方

法配置数据源

3 选中这里的两个选项

按本图和下图为

DetailsView1 控件的数

据源控件添加 WHERE 子

句

在 DetailsView1 控件的数据源控

件的“高级 SQL 生成选项”窗口选中

该选项

1 选中该数据源控件

2 在此双击，打开如下图所示的编

程窗口，为 DetailsView1 控件的

数据源控件编写 Updated 事件处

理程序

DetailsView1 控件的数据源控件编写 Updated 事件处理程序在更新数据

结束后触发， GridView1.DataBind() 的意思为绑定 GridView1 控件的数

据，起到刷新 GridView1 控件的作用，也就是说当 DetailsView1 控件修

改数据后刷新一下 GridView1 控件，让它显示修改后的最新数据

采用同样的方法为 DetailsView1 控件的

数据源控件编写 Inserted 和 Deleted 事

件处理程序，代码如下图所示

1 先介绍一下本例要实现的功能

2 这是刚打开页面时的界面

3 该页面具有模糊查询和删除功能

4 单击“选择”超链接，打开

如下图所示的界面

在该页面中通过 DetailsView 控

件实现编辑和添加功能

1 在浏览器中打开刚才设计的页面

2 该页面已基本达到前面所说的功能要

求，只是该 GridView 控件的标题还需要

修改。将会在后面介绍修改

3 单击“选择”超链接，打开

如下图所示的界面

这个 DetailsView 控件的界面比较粗糙，

接下来按 4.3 中介绍的方法修改它的模

板。只要将4.3 中介绍的例子的所有字段

的代码拷贝过来即可。如果该控件的宽度不

够，则适当调整一下

再修改 GridView 控件

各字段的标题

这是 DetailsView 控件的编辑界

面，即在 4.3 中介绍的例子的界

面，插入界面也类似

删除该 DetailsView 控件的

数据源，选择

SqlDataSource1 控件作为

它的数据源

为 GridView 控件编写

SelectedIndexChanged 事件处理程序

这是面板控件

1 将工具箱中的面板控件拖放到此

注意，采用这种方法设计不必像方法一那样为数据库源

控件编写 Updated 、Inserted 、Deleted 事件处理程

序

2 将这里的代码剪切粘贴到面板控

件内，如下图所示

1 将这部分的代码移到面板控件内

2 将该面板控件的 ID 属性改为 GridViewPanel

同样方法再创建一个面板控件， ID 属性为

DetailsViewPanel ，将它的 Visible 属性设为 "false" ，刚

打开该页面时看不见这部分内容。将DetailsView 控件的代

码放在面板控件内

2 执行该命令将命令字段转换为模板字段

1 选中命令字段

这是转换后命令字段的代码

在此再增加一行代码

在此选择命令字段的 ItemTemplate

模板，打开命令字段的

ItemTemplate 模板设计界面

1 选中 [ 返回 ] 按钮

2 在此双击打开 [ 返回 ] 按钮

的 Click 事件处理程序编程窗

口，如下图所示

1 为“返回”链接按钮编写这部分代码，该代码的作用是当单击 [ 返回 ] 按钮时，显

示 GridViewPanel 面板，隐藏 DetailsViewPanel ，然后再重新绑定 GridView

控件

2 再为 GridView 控件的 SelectedIndexChanged 事件处

理程序增加这两行代码，它们的作用是当单击 [ 返回 ] 按钮

时，隐藏 GridViewPanel 面板，显示 DetailsViewPanel

1 先介绍一下本例要实现的功能

2 这是刚打开页面时的界面

3 该页面具有模糊查询和删除功能

4 单击“选择”超链接，打开

如下图所示的界面

单击 [ 返回 ] 按钮返回到上

图的界面

在这个例子中 GridView 控件与

DetailsView 不同时在页面中

出现

将 Title 、Author 、Publisher 字段的类型改

成可变长字符型，这样更加合理

将 Name 、Type 、Depart 字段的类型改成可变长字符型，这样更加

合理。为了方便介绍验证控件，再增加Phone 、Email 、HomePage

三个字段

这是刚打开页面时的效果，与

5.2 介绍的例子相同

这里没有新增加的三个字段，

也可以根据实际需要增加新增

加的三个字段

在此增加新增加的三个字段

在编辑和插入界面也增加

新增加的三个字段

以上这些内容的设计不再

详细介绍

接下来介绍上面设计的页面存在的问题

在插入界面如果不输入借书证号，单击插入

链接，则显示如下图所示的错误

产生这个错误的原因是借书证号不能为空，

否则无法插入，下面介绍如何解决这种错误

1 先将 PatronID 字

段转换成模板字段

2 打开 PatronID

字段的插入模板

3 在此输入“ *” ，将颜色设置

为红色，表示该字段非空

4 这是

RequiredFieldValidator 验证

控件

5 将 RequiredFieldValidator 验证

控件拖放到此

1 选中该验证控件

该文本框控件名为

TextBox1 ，它用来输入读者

的借书证号

2 设置该验证控件的 ControlToValidate 属

性为 TextBox1 ，表示它对 TextBox1 控件

的值进行验证。RequiredFieldValidator 验

证控件是要求值非空的验证控件，即当借书

证号为空时不允许提交

2 设置该验证控件的 ErrorMessage 属性“借

书证号不能为空！”， ForeColor 属性设为

Red ，即当借书证号为空时用红色显示“借书

证号不能为空！”提示信息

再在该页面的 Load 事件处理程序中增加如下语句：

UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

如果在该页面的 Load 事件处理程序中不增加如下语句：

UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

则在打开插入页面进行验证时会出现如本图所示的错误

按照上面设计后打开插入页面，

如果没有输入借书证号单击“插

入”链接，则在此出现错误提示信

息，并且不允许提交

本例在此放置一个 [ 添加 ]

按钮，这样设计更加合理

在浏览界面单击“选择”链接

打开本图界面

这是浏览界面

去除了这里的“新建”链接

在浏览界面单击 [ 新建 ] 按

钮打开本图界面

这里去除了“取消”链接，增加“返回”链接，

单击该“返回”链接返回到浏览界面。单击“插

入”链接插入读者并返回到浏览界面

在此增加 [ 添加 ] 按钮

为 [ 添加 ] 按钮编写 Click 事件

处理程序

修改“返回”链接的 Click 事件处

理程序

修改 GridView1 控件的

SelectedIndexChanged 事件处理程序

为 SqlDataSource1 控件编写

Inserting 事件处理程序

该事件处理程序的作用为当插入记录后返

回到浏览界面并刷新 GridView1 控件

这部分代码是上面设计的

RequiredFieldValidator 验证控件代码

采用类似的方法为读者姓名字段的编辑和插入模

板设计如本图所示的 RequiredFieldValidator 验

证控件

这部分代码是上面设计的针对编辑模板中读

者姓名字段的 RequiredFieldValidator 验

证控件的代码

这部分代码是上面设计的针对插入模板中

读者姓名字段的

RequiredFieldValidator 验证控件的代

码

采用类似的方法为性别字段的编辑和插入模板设

计如本图所示的 RequiredFieldValidator 验证控

件

这是相关的代码

对类型字段采用同样方法设计，这是相关的代码

1 接下来介绍如何对电话号码进行合法性验证

这是经过上面设计后“电话”字段的相关代码

2 将“电话”字段转换成模板列，切换

到“电话”字段的模板编辑界面

3 这是 RegularExpressionValidator 验证控

件

5 在此放置一个 RegularExpressionValidator 验证控

件

2 设置该 RegularExpressionValidator 验证控件的

ControlToValidate 属性为 PhoneTextBox

这是用于输入“电话”的文本框控件，

该控件的 ID 为 PhoneTextBox

1 选中该 RegularExpressionValidator 验证控

件

单击该按钮打开如下图所示的办界面

1 在此选择该选项

2 单击 [ 确定 ] 按钮，返回到下图界面

1 在此输入当输入的电话号码格式不正确时的提示信息

在插入模板中选中该验证控

件，采用与编辑模板中相同的

设置方法设置该控件的属性

2 再设置该提示信息的颜色为红色

针对“ Email” 字段设计与 “电

话”字段类似的正则表达式验证

控件，如本图所示

在设计针对“ Email” 字段的正则表达式验证控件

时，在“正则表达式编辑器”窗口中要选择该选项

针对“个人主页”字段设计与“电

话”字段类似的正则表达式验证

控件，如本图所示

在设计针对“个人主页”字段的正则表达式验证控件

时，在“正则表达式编辑器”窗口中要选择该选项

如果在电话输入框输入的电话号码格

式不对，例如本图的电话号码是一个

不符合格式的电话，则当光标离开输

入框时，会出现如本图所示的错误提

示信息。如果在Email 和个人主页输

入框输入的格式不正确也会出现错误

提示信息

1 接下来先看一下上面设计的效

果，在浏览器中打开该页面，然后

点击 [ 添加 ] 按钮，打开插入页面

1 如果不输入借书证号、读者姓名，

不选择性别和类型，则当点击“插入”

链接时，会出现如本图所示的错误提

示信息

2 对于编辑页面也有类似的验证效

果，这里就不详细介绍

假设要添加如本图所示的学生信息，

将学生的借书证号输错了，在 S 后面

多输入了一个 0 ，单击“插入”链接出

现如下图所示的错误信息

出现该错误的原因是借书证号字段的

宽度为 10 ，而输入的借书证号的位

数超过了 10 位

1 接下来介绍如何通过 CustomValidator 验证控件解决上面问

题

3 在此放置一个 CustomValidator 验证控件

这是 CustomValidator 验证控

件

按本图设置该 CustomValidator

验证控件的

Display 、ErrorMessage 、Fore

Color 属性。同时也将前面要求借

书证号不为空的验证控件的

Display 属性设为 Static

2 打开借书证号的模板设计界面

同学们试验一下，如果这两个验证

控件的 Display 属性为 Static ，

当出现错误提示信息时将会什么结

果

再打开插入界面进行测试，如

果输入的借书证号位数超过

10 位，则当单击“插入”链接时

出现该错误信息，不允许提交

注意，前面介绍的两个控件都是客户端验证，

而这个定制验证控件在服务器端验证。它要在客

户端验证控件全部验证通过后再验证

为该控件编写 ServerValidate 事

件处理程序，代码在下面

对于读者姓名、电话、Email 、个人主页字

段也采用类似方法设计，防止在提交输入

的数据时，当输入的内容超过字段的宽度

时出现错误

这是 ValidationSummary 验证摘要控

件

2 在此放置 ValidationSummary 验证

摘要控件，将它的 ForeColor 属性设为

Red

3 将每个验证控件的 Display

属性设为 None

ValidationSummary 验证摘要控件的

作用是让错误信息通过验证摘要控件集

中显示，如本图所示

1 接下来介绍如何设计

ValidationSummary 验证摘要

控件

注意，为借书证号文本框控件设置属

性 MaxLength="10" ，可以防止输

入的内容超过 10 个字符长度，这种

方法更有效，这里采用

CustomValidator 验证控件纯粹是

为了举例

3 日历控件的 VisibleDate

属性是什么功能呢？同学们

可观察一下设置该属性与不

设置该属性的页面效果

单击

在此增加了

SqlDataSource 数据源控

件

将该页面在浏览器中，如下

图所示

3 查询设计

3.1 按姓名模糊查询读者信息，通过 GridView 控件显示

查询结果

3.1.1 通过 CONTAINS 运算符实现模糊查询

接下来介绍通过 CONTAINS 运算符按姓名模糊查询读者信息，通过 GridView 控件显

示查询结果。

1 这里以实现对 Patron 表的

编辑添加删除为例进行介绍

3 将工具箱中

FormView 控件拖放

到页面

4 执行“新建数据

源”操作

新建 FormView 控件数据源的方法

与 GridView 控件类似，这里只给

出新建过程的截图，不再详细说明

2 新建一个页面

单击

1 选中该选项

2 在浏览器中浏览这个页

面，如下图所示

该页面具有换页、编辑、新

建和删除功能

1 单击上图中的“编辑”链

接，打开如本图所示的界

面

2 修改数据后可单击“更新”链接，

将修改的数据保存到数据库

3 注意：这个编辑界面并

不友好，后面会详细介绍

如何修改

这是新建界面，与编辑界面类

似，只是在该界面没有数据

1 这里以实现对 Patron 表的

编辑添加删除为例进行介绍

3 将工具箱中

DetailsView 控件拖放到

页面

4 执行“新建数据

源”操作

新建 DetailsView 控件数据源的方

法与 FormView 控件类似，这里只

给出新建过程的截图，不再详细说

明

2 新建一个页面

单击

1 选中这些选项

2 将该页面在浏览器中浏

览，如下图所示

这是前面用 FormView 控件设计的页面，与 DetailsView 控件的

主要区别是它不是用表格的形式来显示页面内容。用DetailsView

控件设计的页面界面友好，设计容易，适合初学者。用FormView

控件设计的页面并不友好，但设计比较灵活，适合具有一定设计能

力的人设计

该页面具有换页、编辑、新

建和删除功能

1 单击上图中的“编辑”链

接，打开如本图所示的界

面

2 修改数据后可单击“更新”链接，

将修改的数据保存到数据库

3 注意：这个编辑界面并

不友好，后面会详细介绍

如何修改

该页面与 FormView 页面类似，但也

有不同的地方，仔细比较两者的不同

这是新建界面，与编辑界面类

似，只是在该界面没有数据

上面是这个例子 DetailsView 控件的代

码。DetailsView 控件不但界面友好，代码也比

较简单

拖动 DetailsView 控件的边

框，使其的宽度符合实际需要

执行“编辑字段”命令

按下来介绍修改这里的字段属性的

方法，先介绍如何修改标题

通过修改字段的 HeaderText

属性可以修改字段标题

这是经过上面修改后 DetailsView 控件的代码，粗体部分是刚

才修改的属性。熟练掌握后可以直接对源代码进行修改

这个表格第一列的宽度是自动产生

的，可能不符合我们要求，可以按下

面方法设置第一列的宽度

1 在编辑字段窗口修改 Width 属

性，在此除了可以修改标题的宽度属

性外，还可以修改字体、颜色、对齐方

式等属性，同学门可以尝试修改这些

属性看看修改后的效果

2 所有字段的标题宽度都是相

同的，只要设置其中一个字

段的标题宽度即可

这是上面修改后的效果

3 设置“借书证号”字段的背景

颜色，其它字段也按此设置

1 选中“性别”字段

这是编辑界面，这个界面并

不友好，接下来介绍如何设

计如下图所示的界面

在介绍如何设计前，先看一下目

前 DetailsView 控件的代码，以

便在后面对比设计后代码的变化

2 执行这里的“将此字段转换为 TemplateField” 功能

3 单击

执行这里的“编辑模板”

功能

1 选中这里的“ EditItemTemplate”

2 删除这里的文本框控件

1 将这里的 RadioButtonList

控件拖放到页面

2 从工具箱将 RadioButtonList

控件拖放到此，然后编辑该控件

的选项，两个选项“男”和“女”

将该 RadioButtonList 控件

RepeatDirection 属性改为 Horizontal ，这

样它的选项就改为水平排列

执行这里的“结束编辑

模板”功能

采用与修改“性别”字段的类似方法修改“部门”字段，所不同的

是在此放置 DropDownList 控件，设置它的选项为“电信学

院”、“工商学院”、“计算机学院”和“数学学院”等

采用与修改“性别”字段的同样

方法修改“类型”字段，它的选

项是“教师”和“学生”

执行这里的 “ 编辑

DataBindings” 功能

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式

1 选中该属性

2 按本图输入代码表达式。注意，

这里使用 Eval() 函数，即单向绑

定，不要使用双向绑定

1 选中该属性

采用与修改“性别”字段的类似方法

修改“出生日期”字段，所不同的是

在此放置 Calendar 控件

按本图设置该字段的数据绑定

按本图设置“出生日期”字段的数据绑定

经过上面修改后编辑读者界面

达到了本图的效果

注意，如果按照教材 [1] 设计 TSG 数

据库， Patron 表中 Type 字段的类型

为 char(10) ，需要将它改为

varchar(10) ，或 char(4) ，否则该

页面在浏览器中打开时会出现如下图

所示的错误信息

请同学分析一下该错误的原因

在浏览器中打开该页面，点击“新建”链

接，打开新建界面，这是页面的效果

这是当天日期的显示效果

在新建页面输入读者信息，单击

“插入”链接按钮，完成该读者信息

的输入

ASP.NET 的日历控件功能比较弱，只能通过

“ <” 和“ >” 按钮切换月份，没有切换年份的

按钮，如果输入年份较早的日期，用该日历

控件输入日期很不方便， ASP.NET 的日历控

件不是很实用，可以使用 jQuery 的日历控

件

这是新添加的读者

上图中“出生日期”显示的格式并不

友好，下面介绍如何按年月日的

格式显示出生日期

修改这里的数据绑定代码，使

其按年月日的格式显示，其中

{0:D} 指的是日期格式

采用类似 GridView 控件的设计方

法实现 FormView 控件的查询功

能。本图实现的是最简单的查询，

也可像前面那样设计复杂的查询，

下面介绍的 DetailsView 控件也

可采用类似方法设计，同学们可自

行练习

这是在 4.1 中设计的例子

由于 FormView 控件的代码比较复杂，这里折叠了编辑、插入和阅

读三个模板的代码，从这里可以看出它不像 DetailsView 控件每

个字段可以根据需要是否转换为模板，它是每一个模板中包含所

有字段相关的控件

编辑模板是在编辑模式下显示

的界面，这是编辑模板的代码

采用与阅读模板类似的方法修改编

辑模板，修改后的代码如下

这是阅读模板的代码

下面先介绍修改字段标题，可

直接在此修改

这是修改后的效果

在前面的 DetailsView 控件的例子中可以看出该控

件使用表格来布局界面。对于FormView 我们也可以

用表格布局来达到本图的效果，下面介绍如何设计

将阅读模板的代码改为

1 除了直接修改代码外，还可

以采用下面方法修改模板

2 执行这里的“编辑功能”

1 在此选择 ItemTemplate

2 在此修改 ItemTemplate

这是修改后的页面效果

注意，在编辑界面中借书证

号不能修改

先按前面介绍的方法设计按

“姓名”模糊查询的页面

1 再在页面中创建一个

DetailsView 控件

2 按下面介绍的方

法配置数据源

3 选中这里的两个选项

按本图和下图为

DetailsView1 控件的数

据源控件添加 WHERE 子

句

在 DetailsView1 控件的数据源控

件的“高级 SQL 生成选项”窗口选中

该选项

1 选中该数据源控件

2 在此双击，打开如下图所示的编

程窗口，为 DetailsView1 控件的

数据源控件编写 Updated 事件处

理程序

DetailsView1 控件的数据源控件编写 Updated 事件处理程序在更新数据

结束后触发， GridView1.DataBind() 的意思为绑定 GridView1 控件的数

据，起到刷新 GridView1 控件的作用，也就是说当 DetailsView1 控件修

改数据后刷新一下 GridView1 控件，让它显示修改后的最新数据

采用同样的方法为 DetailsView1 控件的

数据源控件编写 Inserted 和 Deleted 事

件处理程序，代码如下图所示

1 先介绍一下本例要实现的功能

2 这是刚打开页面时的界面

3 该页面具有模糊查询和删除功能

4 单击“选择”超链接，打开

如下图所示的界面

在该页面中通过 DetailsView 控

件实现编辑和添加功能

1 在浏览器中打开刚才设计的页面

2 该页面已基本达到前面所说的功能要

求，只是该 GridView 控件的标题还需要

修改。将会在后面介绍修改

3 单击“选择”超链接，打开

如下图所示的界面

这个 DetailsView 控件的界面比较粗糙，

接下来按 4.3 中介绍的方法修改它的模

板。只要将4.3 中介绍的例子的所有字段

的代码拷贝过来即可。如果该控件的宽度不

够，则适当调整一下

再修改 GridView 控件

各字段的标题

这是 DetailsView 控件的编辑界

面，即在 4.3 中介绍的例子的界

面，插入界面也类似

删除该 DetailsView 控件的

数据源，选择

SqlDataSource1 控件作为

它的数据源

为 GridView 控件编写

SelectedIndexChanged 事件处理程序

这是面板控件

1 将工具箱中的面板控件拖放到此

注意，采用这种方法设计不必像方法一那样为数据库源

控件编写 Updated 、Inserted 、Deleted 事件处理程

序

2 将这里的代码剪切粘贴到面板控

件内，如下图所示

1 将这部分的代码移到面板控件内

2 将该面板控件的 ID 属性改为 GridViewPanel

同样方法再创建一个面板控件， ID 属性为

DetailsViewPanel ，将它的 Visible 属性设为 "false" ，刚

打开该页面时看不见这部分内容。将DetailsView 控件的代

码放在面板控件内

2 执行该命令将命令字段转换为模板字段

1 选中命令字段

这是转换后命令字段的代码

在此再增加一行代码

在此选择命令字段的 ItemTemplate

模板，打开命令字段的

ItemTemplate 模板设计界面

1 选中 [ 返回 ] 按钮

2 在此双击打开 [ 返回 ] 按钮

的 Click 事件处理程序编程窗

口，如下图所示

1 为“返回”链接按钮编写这部分代码，该代码的作用是当单击 [ 返回 ] 按钮时，显

示 GridViewPanel 面板，隐藏 DetailsViewPanel ，然后再重新绑定 GridView

控件

2 再为 GridView 控件的 SelectedIndexChanged 事件处

理程序增加这两行代码，它们的作用是当单击 [ 返回 ] 按钮

时，隐藏 GridViewPanel 面板，显示 DetailsViewPanel

1 先介绍一下本例要实现的功能

2 这是刚打开页面时的界面

3 该页面具有模糊查询和删除功能

4 单击“选择”超链接，打开

如下图所示的界面

单击 [ 返回 ] 按钮返回到上

图的界面

在这个例子中 GridView 控件与

DetailsView 不同时在页面中

出现

将 Title 、Author 、Publisher 字段的类型改

成可变长字符型，这样更加合理

将 Name 、Type 、Depart 字段的类型改成可变长字符型，这样更加

合理。为了方便介绍验证控件，再增加Phone 、Email 、HomePage

三个字段

这是刚打开页面时的效果，与

5.2 介绍的例子相同

这里没有新增加的三个字段，

也可以根据实际需要增加新增

加的三个字段

在此增加新增加的三个字段

在编辑和插入界面也增加

新增加的三个字段

以上这些内容的设计不再

详细介绍

接下来介绍上面设计的页面存在的问题

在插入界面如果不输入借书证号，单击插入

链接，则显示如下图所示的错误

产生这个错误的原因是借书证号不能为空，

否则无法插入，下面介绍如何解决这种错误

1 先将 PatronID 字

段转换成模板字段

2 打开 PatronID

字段的插入模板

3 在此输入“ *” ，将颜色设置

为红色，表示该字段非空

4 这是

RequiredFieldValidator 验证

控件

5 将 RequiredFieldValidator 验证

控件拖放到此

1 选中该验证控件

该文本框控件名为

TextBox1 ，它用来输入读者

的借书证号

2 设置该验证控件的 ControlToValidate 属

性为 TextBox1 ，表示它对 TextBox1 控件

的值进行验证。RequiredFieldValidator 验

证控件是要求值非空的验证控件，即当借书

证号为空时不允许提交

2 设置该验证控件的 ErrorMessage 属性“借

书证号不能为空！”， ForeColor 属性设为

Red ，即当借书证号为空时用红色显示“借书

证号不能为空！”提示信息

再在该页面的 Load 事件处理程序中增加如下语句：

UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

如果在该页面的 Load 事件处理程序中不增加如下语句：

UnobtrusiveValidationMode = UnobtrusiveValidationMode.None;

则在打开插入页面进行验证时会出现如本图所示的错误

按照上面设计后打开插入页面，

如果没有输入借书证号单击“插

入”链接，则在此出现错误提示信

息，并且不允许提交

本例在此放置一个 [ 添加 ]

按钮，这样设计更加合理

在浏览界面单击“选择”链接

打开本图界面

这是浏览界面

去除了这里的“新建”链接

在浏览界面单击 [ 新建 ] 按

钮打开本图界面

这里去除了“取消”链接，增加“返回”链接，

单击该“返回”链接返回到浏览界面。单击“插

入”链接插入读者并返回到浏览界面

在此增加 [ 添加 ] 按钮

为 [ 添加 ] 按钮编写 Click 事件

处理程序

修改“返回”链接的 Click 事件处

理程序

修改 GridView1 控件的

SelectedIndexChanged 事件处理程序

为 SqlDataSource1 控件编写

Inserting 事件处理程序

该事件处理程序的作用为当插入记录后返

回到浏览界面并刷新 GridView1 控件

这部分代码是上面设计的

RequiredFieldValidator 验证控件代码

采用类似的方法为读者姓名字段的编辑和插入模

板设计如本图所示的 RequiredFieldValidator 验

证控件

这部分代码是上面设计的针对编辑模板中读

者姓名字段的 RequiredFieldValidator 验

证控件的代码

这部分代码是上面设计的针对插入模板中

读者姓名字段的

RequiredFieldValidator 验证控件的代

码

采用类似的方法为性别字段的编辑和插入模板设

计如本图所示的 RequiredFieldValidator 验证控

件

这是相关的代码

对类型字段采用同样方法设计，这是相关的代码

1 接下来介绍如何对电话号码进行合法性验证

这是经过上面设计后“电话”字段的相关代码

2 将“电话”字段转换成模板列，切换

到“电话”字段的模板编辑界面

3 这是 RegularExpressionValidator 验证控

件

5 在此放置一个 RegularExpressionValidator 验证控

件

2 设置该 RegularExpressionValidator 验证控件的

ControlToValidate 属性为 PhoneTextBox

这是用于输入“电话”的文本框控件，

该控件的 ID 为 PhoneTextBox

1 选中该 RegularExpressionValidator 验证控

件

单击该按钮打开如下图所示的办界面

1 在此选择该选项

2 单击 [ 确定 ] 按钮，返回到下图界面

1 在此输入当输入的电话号码格式不正确时的提示信息

在插入模板中选中该验证控

件，采用与编辑模板中相同的

设置方法设置该控件的属性

2 再设置该提示信息的颜色为红色

针对“ Email” 字段设计与 “电

话”字段类似的正则表达式验证

控件，如本图所示

在设计针对“ Email” 字段的正则表达式验证控件

时，在“正则表达式编辑器”窗口中要选择该选项

针对“个人主页”字段设计与“电

话”字段类似的正则表达式验证

控件，如本图所示

在设计针对“个人主页”字段的正则表达式验证控件

时，在“正则表达式编辑器”窗口中要选择该选项

如果在电话输入框输入的电话号码格

式不对，例如本图的电话号码是一个

不符合格式的电话，则当光标离开输

入框时，会出现如本图所示的错误提

示信息。如果在Email 和个人主页输

入框输入的格式不正确也会出现错误

提示信息

1 接下来先看一下上面设计的效

果，在浏览器中打开该页面，然后

点击 [ 添加 ] 按钮，打开插入页面

1 如果不输入借书证号、读者姓名，

不选择性别和类型，则当点击“插入”

链接时，会出现如本图所示的错误提

示信息

2 对于编辑页面也有类似的验证效

果，这里就不详细介绍

假设要添加如本图所示的学生信息，

将学生的借书证号输错了，在 S 后面

多输入了一个 0 ，单击“插入”链接出

现如下图所示的错误信息

出现该错误的原因是借书证号字段的

宽度为 10 ，而输入的借书证号的位

数超过了 10 位

1 接下来介绍如何通过 CustomValidator 验证控件解决上面问

题

3 在此放置一个 CustomValidator 验证控件

这是 CustomValidator 验证控

件

按本图设置该 CustomValidator

验证控件的

Display 、ErrorMessage 、Fore

Color 属性。同时也将前面要求借

书证号不为空的验证控件的

Display 属性设为 Static

2 打开借书证号的模板设计界面

同学们试验一下，如果这两个验证

控件的 Display 属性为 Static ，

当出现错误提示信息时将会什么结

果

再打开插入界面进行测试，如

果输入的借书证号位数超过

10 位，则当单击“插入”链接时

出现该错误信息，不允许提交

注意，前面介绍的两个控件都是客户端验证，

而这个定制验证控件在服务器端验证。它要在客

户端验证控件全部验证通过后再验证

为该控件编写 ServerValidate 事

件处理程序，代码在下面

对于读者姓名、电话、Email 、个人主页字

段也采用类似方法设计，防止在提交输入

的数据时，当输入的内容超过字段的宽度

时出现错误

这是 ValidationSummary 验证摘要控

件

2 在此放置 ValidationSummary 验证

摘要控件，将它的 ForeColor 属性设为

Red

3 将每个验证控件的 Display

属性设为 None

ValidationSummary 验证摘要控件的

作用是让错误信息通过验证摘要控件集

中显示，如本图所示

1 接下来介绍如何设计

ValidationSummary 验证摘要

控件

注意，为借书证号文本框控件设置属

性 MaxLength="10" ，可以防止输

入的内容超过 10 个字符长度，这种

方法更有效，这里采用

CustomValidator 验证控件纯粹是

为了举例

3 日历控件的 VisibleDate

属性是什么功能呢？同学们

可观察一下设置该属性与不

设置该属性的页面效果

这是上面页面在浏览器中的显示界面，在

该页面中显示了 Patron 表中的内容

剩余63页未读，继续阅读

qq_41984186

粉丝: 8
资源: 48

ASP.NET+SQL入门：GridView控件操作数据库及模糊查询

使用Data控件访问数据库.doc

关于C#.NET中的数据库控件的使用.doc

数据库与数据表操作.doc

Spire.Doc html

c#winform中chart控件如何联合数据库使用

使用数据库绑定控件分页显示数据.net

winform动态控件数据连接数据库

数据库连接到advTree控件

使用数据绑定控件分页显示数基础

AdvTree控件输入数据和数据保存到数据库中

设计1个窗体及5个以上控件实现前后台连接，在控件中输入爬虫内容，从网站中爬取金融数据，进行数据清洗，并将清洗后的数据保存到数据库中。从数据库中读出数据，使用机器学习算法进行预测

mfc列表控件与数据库之间的连接

Asp.net--DropDownList控件绑定数据库数据

用datagridview控件显示数据库二进制数据图片

写一段在MFC应用下对数据库test.accdb文件中对食堂窗口表中查找出受欢迎程度为10分的数据并显示在ID为IDC_LIST1的list控件中

哪里有炫酷的delphi的控件

b'c#datagridview连接数据库'的意思是使用C#中的DataGridView控件连接数据库。

qt 利用treeview控件 从数据库中动态载入数据

C#利用list控件显示数据库中数据信息

功能:1.用户注册，登陆。2.登陆成功，调到新闻列表页。3.点击新闻标题，浏览器新闻。要求:1.数据来源sqlite数据库。2.Listview的使用。3.数据解析。4.UI界面设计。5.Activity。写出Android代码

最新资源

qt 利用treeview控件从数据库中动态载入数据