第8章 数据绑定
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第8章 数据绑定
Web 程序设计——ASP.NET实用网站开发
1
本章要点：
熟练掌握ListControl类控件与数据源的绑定 熟练掌握GridView控件与数据源的绑定 熟练掌握DetailsView控件与数据源的绑定
Web 程序设计——ASP.NET实用网站开发
2
目录
8.1 数据绑定概述 8.2 ListControl类控件 8.3 GridView控件
Web 程序设计——ASP.NET实用网站开发
17
TemplateField中不同类型的模板对应表
模板 AlternatingItemTemplate
EditItemTemplate EmptyDataTemplate FooterTemplate HeaderTemplate ItemTemplate PagerTemplate
Web 程序设计——ASP.NET实用网站开发
11
8.3.2 定制数据绑定列
为开发人员提供了灵活的列定制功能，如增加 复选框列、显示图像列等。 需要设置属性AutoGenerateColumns值为false。 实际上，GridView中的每一列都是一个 DataControlField类，并从该类派生出不同类 型的子类。
Web 程序设计——ASP.NET实用网站开发
19
数据绑定方法
需要包含在<%#......%>中。 Eval()：用于单向（只读）绑定。 Bind()：用于双向（可更新）绑定。
Web 程序设计——ASP.NET实用网站开发
20
实例8-4 使用模板列
复选框列和CategoryID列为模板列。 源程序：GridViewTemplate.aspx 程序说明：在模板列中不能直接访问各模板中 的控件，若要访问这些控件，一般可使用方法 FindControl()在GridView控件的 GridViewRow对象中查找。
与数据库数据显示有关的属性主要包括： AppendDataBoundItem 、 DataSourceID 、 DataSource、 DataTextField、DataValueField。 AppendDataBoundItem用于将数据绑定项追加 到静态声明的列表项上； DataTextField绑定的字段用于显示列表项； DataValueField绑定的字段用于设置列表项的 值。
7
8.3 GridView控件
用于显示二维表格式的数据，可以在不编写任 何代码，仅设置属性的情况下，实现数据绑定、 分页、排序、行选择、更新、删除等功能。
Web 程序设计——ASP.NET实用网站开发
8
8.3.1 分页和排序
要实现分页功能需要设置属性AllowPaging值 为True。分页的效果可在属性集合 PagerSettings中设置，包括：用于分页类型的 属性Mode、用于“第一页”按钮图像URL的 属性FirstPageImageUrl等。 要实现排序功能需要设置属性AllowSorting值 为True。
Web 程序设计——ASP.NET实用网站开发
12
GridView中不同类型的数据绑定列对应表
类型
BoundField
说明
用于显示普通文本内容。属性DataField设置绑定 的数据列名称；属性HeaderText设置表头的列名 称，如用于将原来为英文的字段名转换为中文显 示。 用于显示布尔类型数据。 用于创建命令按钮列。属性ShowEditButton、 ShowDeleteButton、ShowCancelButton和 ShowSelectButton设置是否显示对应类型的按钮。
27
程序说明
HyperLinkField列的属性DataNavigateUrlFields值 对应页面显示时到超链接的NavigateUrl属性； DataNavigateUrlFormatString值确定目标URL的 格式，其中{0}在网页浏览时会被 DataNavigateUrlFields对应的字段值代替； DateTextField值对应页面显示时到超链接的Text 属性。 当单击主表网页中的链接时，相应的查询字符串 传递到从表网页，再获取其中的CategoryID值赋 给where表达式的参数@CategoryID。
<asp:ImageField DataImageUrlField="Image" HeaderText="图片" DataImageUrlFormatString="~\img\{0}" > </asp:ImageField>
Web 程序设计——ASP.NET实用网站开发
16
8.3.3 使用模板列
说明 为交替项指定要显示的内容
为处于编辑的项指定要显示的内容 为空数据项指定要显示的内容 为脚注项指定要显示的内容 为标题项指定要显示的内容 为TemplateField列指定要显示的内容 为页码项指定要显示的内容
18
Web 程序设计——ASP.NET实用网站开发
8.3.3 使用模板列（续）
AlternatingItemTemplate需与ItemTemplate配 合使用。 若未设置AlternatingItemTemplate，则 GridView的所有数据行都以ItemTemplate显示； 若已设置AlternatingItemTemplate，则 GridView中的奇数数据行以ItemTemplate显示， 偶数数据行以AlternatingItemTemplate显示。
Web 程序设计——ASP.NET实用网站开发
21
8.3.4 利用GridView编辑、删除数据
“启用编辑”和“启用删除”，可提供编辑和 删除数据功能。 绑定至GridView的数据源控件也要提供更新、 删除功能。 通过添加JavaScript代码可给出删除提示信息。
Web 程序设计——ASP.NET实用网站开发
Web 程序设计——ASP.NET实用网站开发
26
实例8-7 在不同页显示主从表
当单击CategoryID列中的链接时，在另一个网 页显示该分类包含的产品。 源程序：GridViewSubDiff1.aspx 源程序：GridViewSubDiff2.aspx
Web 程序设计——ASP.NET实用网站开发
Web 程序设计——ASP.NET实用网站开发
6
实例8-1 DropDownList和SqlDataSource结合显示数据
在DropDownList中将显示Category表的Name 字段值，而列表项的值对应CategoryId字段值。 源程序：DropDownListSqlDS.aspx
Web 程序设计——ASP.NET实用网站开发
23
程序说明（续）
GridView的RowDataBound事件在数据被分别绑 定到行时触发。由于单击编辑按钮后，删除按钮 将不存在，此时就不能获取删除按钮对象，所以 通过使用try„catch结构使得用户单击编辑按钮时 将不执行任何操作（catch块为空）。事件代码中 的e.Row能获取所在行，Cells集合对应指定行中所 有单元格，Controls集合对应指定单元格中所有控 件。RowType用于确定GridView中行的类型，值 包括DataRow（数据行）、Footer（脚注行）、 Header（标题行）、EmptyDataRow（空行）、 Pager（导航行）和Separator（分隔符行）。
4
8.1 数据绑定概述（续）
数据绑定控件若与数据源控件结合显示数据， 则需设置属性DataSourceID值为数据源控件 的ID； 若与LINQ技术结合，则需设置DataSource为 LINQ查询结果值，并调用DataBind()方法显 示数据。
Web 程序设计——ASP.NET实用网站开发
5
8.2 ListControl类控件
22
实例8-5 为GridView中删除按钮添加客户端提示信息
当用户单击删除按钮试图删除某行数据时系统 将给出提示信息让用户确认。 源程序：GridViewDelete.aspx 程序说明：表的主键不能被编辑，GridView的 属性DataKeyNames包含了表的主键信息。
Leabharlann Baidu
Web 程序设计——ASP.NET实用网站开发
14
HyperLinkField
ButtonField
TemplateField
Web 程序设计——ASP.NET实用网站开发
实例8-3 自定义GridView数据绑定列
GridView呈现Product表的部分数据，其中表 头信息以中文表示，显示图片的列为 ImageField列。 源程序：GridViewBound.aspx
Web 程序设计——ASP.NET实用网站开发
15
程序说明
本示例使用的Product表的字段Image存储了对 应图片的路径，此时要在GridView中显示图片， 只需设置ImageField列的属性 DataImageUrlField值为字段名Image，但若在 存储时仅存储图片的文件名，则还需配合使用 DataImageUrlFormatString。例如，假设图片 统一存放在网站根文件夹下的img文件夹中， 字段Image存储图片的文件名，则设置如下：
Web 程序设计——ASP.NET实用网站开发
9
实例8-2 对GridView中数据实现分页和排序
本实例将根据用户选择的每页显示条数来显示 每页的数据，同时显示当前的页码和总页数。 源程序：GridViewPageSort.aspx
Web 程序设计——ASP.NET实用网站开发
10
程序说明
页面载入时，GridView根据设置的属性显示结果。 当用户选择每页显示条数后。触发 SelectedIndexChanged事件，设置GridView的属 性PageSize，再重新绑定数据。 GridView的RowDataBound事件在对行进行数据 绑定后被触发，因此，当改变当前页或改变每页 显示条数时会触发该事件。此时，获取GridView 的属性PageIndex值即当前页码，但要注意 PageIndex的编号从0开始；获取属性PageCount值 即为总页数。
13
CheckBoxField CommandField
Web 程序设计——ASP.NET实用网站开发
GridView中不同类型的数据绑定列对应表（续）
ImageField 用于显示图片列。属性DataImageUrlField设置要 绑定图片路径的数据列；属性 DataImageUrlFormatString设置图片列中每个图 像的URL的格式。 用于显示超链接列。属性DataTextField绑定的数 据列将显示为超链接的文字；属性 DataNavigateUrlFields绑定的数据列将作为超链 接的URL地址。 定义按钮列，与CommandField列不同的是： ButtonField所定义的按钮与GridView没有直接关 系，可以自定义相应的操作。 以模板的形式自定义数据列。
Web 程序设计——ASP.NET实用网站开发
24
8.3.5 显示主从表
需要显示主从表的情形常与数据库中的“一对 多”联系对应，如一种分类有多种产品，一个 供应商供应多种产品等。 要显示多张表就涉及表的同步问题。
Web 程序设计——ASP.NET实用网站开发
25
实例8-6 在同一页显示主从表
当单击“选择”时，从表中将显示主表中不同 分类包含的产品。 源代码： GridViewSub.aspx 程序说明：当单击选择按钮时， GridView1.SelectedValue返回选择行所对应的 主键CategoryID值，再将该值传递给 SqlDataSource2中查询语句的参数 @CategoryID。
28
Web 程序设计——ASP.NET实用网站开发
8.4 DetailsView控件
以表格形式显示和处理来自数据源的单条记录， 其表格只包含两个数据列。一个数据列逐行显 示数据列名，另一个数据列显示对应列名相关 的数据值。 DetailsView增加了数据插入的功能。
8.3.1 8.3.2 8.3.3 8.3.4 8.3.5 分页和排序 定制数据绑定列 使用模板列 利用GridView编辑、删除数据 显示主从表
8.4 DetailsView控件 8.5 小结
Web 程序设计——ASP.NET实用网站开发
3
8.1 数据绑定概述
Web 程序设计——ASP.NET实用网站开发
Web 程序设计——ASP.NET实用网站开发
1
本章要点：
熟练掌握ListControl类控件与数据源的绑定 熟练掌握GridView控件与数据源的绑定 熟练掌握DetailsView控件与数据源的绑定
Web 程序设计——ASP.NET实用网站开发
2
目录
8.1 数据绑定概述 8.2 ListControl类控件 8.3 GridView控件
Web 程序设计——ASP.NET实用网站开发
17
TemplateField中不同类型的模板对应表
模板 AlternatingItemTemplate
EditItemTemplate EmptyDataTemplate FooterTemplate HeaderTemplate ItemTemplate PagerTemplate
Web 程序设计——ASP.NET实用网站开发
11
8.3.2 定制数据绑定列
为开发人员提供了灵活的列定制功能，如增加 复选框列、显示图像列等。 需要设置属性AutoGenerateColumns值为false。 实际上，GridView中的每一列都是一个 DataControlField类，并从该类派生出不同类 型的子类。
Web 程序设计——ASP.NET实用网站开发
19
数据绑定方法
需要包含在<%#......%>中。 Eval()：用于单向（只读）绑定。 Bind()：用于双向（可更新）绑定。
Web 程序设计——ASP.NET实用网站开发
20
实例8-4 使用模板列
复选框列和CategoryID列为模板列。 源程序：GridViewTemplate.aspx 程序说明：在模板列中不能直接访问各模板中 的控件，若要访问这些控件，一般可使用方法 FindControl()在GridView控件的 GridViewRow对象中查找。
与数据库数据显示有关的属性主要包括： AppendDataBoundItem 、 DataSourceID 、 DataSource、 DataTextField、DataValueField。 AppendDataBoundItem用于将数据绑定项追加 到静态声明的列表项上； DataTextField绑定的字段用于显示列表项； DataValueField绑定的字段用于设置列表项的 值。
7
8.3 GridView控件
用于显示二维表格式的数据，可以在不编写任 何代码，仅设置属性的情况下，实现数据绑定、 分页、排序、行选择、更新、删除等功能。
Web 程序设计——ASP.NET实用网站开发
8
8.3.1 分页和排序
要实现分页功能需要设置属性AllowPaging值 为True。分页的效果可在属性集合 PagerSettings中设置，包括：用于分页类型的 属性Mode、用于“第一页”按钮图像URL的 属性FirstPageImageUrl等。 要实现排序功能需要设置属性AllowSorting值 为True。
Web 程序设计——ASP.NET实用网站开发
12
GridView中不同类型的数据绑定列对应表
类型
BoundField
说明
用于显示普通文本内容。属性DataField设置绑定 的数据列名称；属性HeaderText设置表头的列名 称，如用于将原来为英文的字段名转换为中文显 示。 用于显示布尔类型数据。 用于创建命令按钮列。属性ShowEditButton、 ShowDeleteButton、ShowCancelButton和 ShowSelectButton设置是否显示对应类型的按钮。
27
程序说明
HyperLinkField列的属性DataNavigateUrlFields值 对应页面显示时到超链接的NavigateUrl属性； DataNavigateUrlFormatString值确定目标URL的 格式，其中{0}在网页浏览时会被 DataNavigateUrlFields对应的字段值代替； DateTextField值对应页面显示时到超链接的Text 属性。 当单击主表网页中的链接时，相应的查询字符串 传递到从表网页，再获取其中的CategoryID值赋 给where表达式的参数@CategoryID。
<asp:ImageField DataImageUrlField="Image" HeaderText="图片" DataImageUrlFormatString="~\img\{0}" > </asp:ImageField>
Web 程序设计——ASP.NET实用网站开发
16
8.3.3 使用模板列
说明 为交替项指定要显示的内容
为处于编辑的项指定要显示的内容 为空数据项指定要显示的内容 为脚注项指定要显示的内容 为标题项指定要显示的内容 为TemplateField列指定要显示的内容 为页码项指定要显示的内容
18
Web 程序设计——ASP.NET实用网站开发
8.3.3 使用模板列（续）
AlternatingItemTemplate需与ItemTemplate配 合使用。 若未设置AlternatingItemTemplate，则 GridView的所有数据行都以ItemTemplate显示； 若已设置AlternatingItemTemplate，则 GridView中的奇数数据行以ItemTemplate显示， 偶数数据行以AlternatingItemTemplate显示。
Web 程序设计——ASP.NET实用网站开发
21
8.3.4 利用GridView编辑、删除数据
“启用编辑”和“启用删除”，可提供编辑和 删除数据功能。 绑定至GridView的数据源控件也要提供更新、 删除功能。 通过添加JavaScript代码可给出删除提示信息。
Web 程序设计——ASP.NET实用网站开发
Web 程序设计——ASP.NET实用网站开发
26
实例8-7 在不同页显示主从表
当单击CategoryID列中的链接时，在另一个网 页显示该分类包含的产品。 源程序：GridViewSubDiff1.aspx 源程序：GridViewSubDiff2.aspx
Web 程序设计——ASP.NET实用网站开发
Web 程序设计——ASP.NET实用网站开发
6
实例8-1 DropDownList和SqlDataSource结合显示数据
在DropDownList中将显示Category表的Name 字段值，而列表项的值对应CategoryId字段值。 源程序：DropDownListSqlDS.aspx
Web 程序设计——ASP.NET实用网站开发
23
程序说明（续）
GridView的RowDataBound事件在数据被分别绑 定到行时触发。由于单击编辑按钮后，删除按钮 将不存在，此时就不能获取删除按钮对象，所以 通过使用try„catch结构使得用户单击编辑按钮时 将不执行任何操作（catch块为空）。事件代码中 的e.Row能获取所在行，Cells集合对应指定行中所 有单元格，Controls集合对应指定单元格中所有控 件。RowType用于确定GridView中行的类型，值 包括DataRow（数据行）、Footer（脚注行）、 Header（标题行）、EmptyDataRow（空行）、 Pager（导航行）和Separator（分隔符行）。
4
8.1 数据绑定概述（续）
数据绑定控件若与数据源控件结合显示数据， 则需设置属性DataSourceID值为数据源控件 的ID； 若与LINQ技术结合，则需设置DataSource为 LINQ查询结果值，并调用DataBind()方法显 示数据。
Web 程序设计——ASP.NET实用网站开发
5
8.2 ListControl类控件
22
实例8-5 为GridView中删除按钮添加客户端提示信息
当用户单击删除按钮试图删除某行数据时系统 将给出提示信息让用户确认。 源程序：GridViewDelete.aspx 程序说明：表的主键不能被编辑，GridView的 属性DataKeyNames包含了表的主键信息。
Leabharlann Baidu
Web 程序设计——ASP.NET实用网站开发
14
HyperLinkField
ButtonField
TemplateField
Web 程序设计——ASP.NET实用网站开发
实例8-3 自定义GridView数据绑定列
GridView呈现Product表的部分数据，其中表 头信息以中文表示，显示图片的列为 ImageField列。 源程序：GridViewBound.aspx
Web 程序设计——ASP.NET实用网站开发
15
程序说明
本示例使用的Product表的字段Image存储了对 应图片的路径，此时要在GridView中显示图片， 只需设置ImageField列的属性 DataImageUrlField值为字段名Image，但若在 存储时仅存储图片的文件名，则还需配合使用 DataImageUrlFormatString。例如，假设图片 统一存放在网站根文件夹下的img文件夹中， 字段Image存储图片的文件名，则设置如下：
Web 程序设计——ASP.NET实用网站开发
9
实例8-2 对GridView中数据实现分页和排序
本实例将根据用户选择的每页显示条数来显示 每页的数据，同时显示当前的页码和总页数。 源程序：GridViewPageSort.aspx
Web 程序设计——ASP.NET实用网站开发
10
程序说明
页面载入时，GridView根据设置的属性显示结果。 当用户选择每页显示条数后。触发 SelectedIndexChanged事件，设置GridView的属 性PageSize，再重新绑定数据。 GridView的RowDataBound事件在对行进行数据 绑定后被触发，因此，当改变当前页或改变每页 显示条数时会触发该事件。此时，获取GridView 的属性PageIndex值即当前页码，但要注意 PageIndex的编号从0开始；获取属性PageCount值 即为总页数。
13
CheckBoxField CommandField
Web 程序设计——ASP.NET实用网站开发
GridView中不同类型的数据绑定列对应表（续）
ImageField 用于显示图片列。属性DataImageUrlField设置要 绑定图片路径的数据列；属性 DataImageUrlFormatString设置图片列中每个图 像的URL的格式。 用于显示超链接列。属性DataTextField绑定的数 据列将显示为超链接的文字；属性 DataNavigateUrlFields绑定的数据列将作为超链 接的URL地址。 定义按钮列，与CommandField列不同的是： ButtonField所定义的按钮与GridView没有直接关 系，可以自定义相应的操作。 以模板的形式自定义数据列。
Web 程序设计——ASP.NET实用网站开发
24
8.3.5 显示主从表
需要显示主从表的情形常与数据库中的“一对 多”联系对应，如一种分类有多种产品，一个 供应商供应多种产品等。 要显示多张表就涉及表的同步问题。
Web 程序设计——ASP.NET实用网站开发
25
实例8-6 在同一页显示主从表
当单击“选择”时，从表中将显示主表中不同 分类包含的产品。 源代码： GridViewSub.aspx 程序说明：当单击选择按钮时， GridView1.SelectedValue返回选择行所对应的 主键CategoryID值，再将该值传递给 SqlDataSource2中查询语句的参数 @CategoryID。
28
Web 程序设计——ASP.NET实用网站开发
8.4 DetailsView控件
以表格形式显示和处理来自数据源的单条记录， 其表格只包含两个数据列。一个数据列逐行显 示数据列名，另一个数据列显示对应列名相关 的数据值。 DetailsView增加了数据插入的功能。
8.3.1 8.3.2 8.3.3 8.3.4 8.3.5 分页和排序 定制数据绑定列 使用模板列 利用GridView编辑、删除数据 显示主从表
8.4 DetailsView控件 8.5 小结
Web 程序设计——ASP.NET实用网站开发
3
8.1 数据绑定概述
Web 程序设计——ASP.NET实用网站开发