13
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 表中的内容