Web应用开发技术--数据绑定

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