数据绑定控件的用法
- 格式:docx
- 大小:409.84 KB
- 文档页数:8
第11周教学目标通过本周的学习使学生熟练掌握在不使用数据源控件的前提下GridView、DetailsView、FromView、DataList、Repeater和ListView这几种数据绑定控件的用法,能够根据页面操作的要求正确选择有关控件。
教学重点掌握各种数据绑定控件GridView、DetailsView、FormView、ListView、Repeater、DataList的用法。
教学难点在不使用数据源控件的情况下使用各种数据绑定控件展示及更新数据。
GridView、DetailsView控件的模板列的定制及ListView、Repeater、DataList 控件各种模板的定义。
教学过程各种数据绑定控件的常用用法:1、GridView控件是以网格的形式显示多条记录,可实现分页、排序,并可对记录进行选择、编辑、删除操作。
(但不能进行插入)(1) GridView控件提供了多种列类型,默认是BoundField类型,这种类型的列在显示态时是以Label的形式显示数据,在编辑态时用TextBox来接受用户输入。
如果BoundField列不能满足用户要求,可以使用其他类型的列来绑定数据,或者使用TemplateField列定制在不同模板下的列的显示情况。
(2) GridView的模板列主要有以下几种:ItemTemplate、AlternatingItemTemplate、EditItemTemplate、HeaderTemplate、FooterTemplate。
(3) GridView提供了三种操作的命令按钮列CommandField,分别是“选择”、“编辑”和“删除”,要设置对应的ShowSelectButton、ShowEditButton、ShowDeleteButton属性为“T rue”。
●当单击“选择”按钮时会触发SelectedIndexChanging事件,之后触发SelectedIndexChanged事件。
●当单击“删除”按钮时会触发RowDeleting事件,删除后触发RowDeleted事件。
●当单击“编辑”按钮时,触发RowEditing事件,GridView中其他CommandField列会消失,并显示“更新”和“取消”按钮,单击“更新”时会触发RowUpdating事件,更新后触发RowUpdated事件。
单击“取消”时会触发RowCancelingEdit事件。
在相应事件中写代码实现相应功能。
(4)启用“分页”功能后,点击分页编号会触发PageIndexChanging事件,分页后触发PageIndexChanged事件。
(5)启用“排序”功能后,点击列标题,触发Sorting事件,排序后触发Sorted事件。
(6)可以在GridView的RowDataBound事件中写代码,用来实现在每行绑定数据后要执行的操作,比如给每行的“删除”按钮添加一个客户端单击事件,用以确认删除。
(7)如果在GridView中添加了ButtonField类型的列,单击它们时将触发RowCommand事件,可以通过判断CommandName属性值确定单击的是哪一个按钮,以决定做何具体操作。
具体示例见第9章示例中的GridView_withDBHelper页面。
2、DetailsView是以表格形式显示和处理来自数据源的单条数据记录,它提供了与GridView相同的许多数据操作和显示功能,可以对数据进行分页、更新、插入和删除。
3、FormView控件与DetailsView功能相同,也是显示数据源中的一个数据项,并可以添加、编辑和删除数据。
与DetailsView控件不同之处是,FormView 控件完全基于模板,提供了更多的布局控制选项。
(1) FormView控件常用的模板有:ItemTemplate、EditItemTemplate、InsertItemTemplate、HeaderTemplate、FooterTemplate、EmptyDataTemplate、PagerTemplate。
(2) FormView控件不提供自动生成命令按钮以执行更新、删除或插入操作的方法。
必须手动将这些按钮添加在不同的模板中。
FormView控件通过识别按钮的CommandName属性,来执行不同的操作。
(3)如果要用FormView控件实现数据的显示、编辑、插入、删除操作,“New”则在ItemTemplate模板中要添加CommandName分别为“Edit”,和“Delete”的按钮。
在EditItemTemplate模板中要添加CommandName分别为“Update”和“Cancel”的按钮。
在InsertItemTemplate模板中要添加CommandName分别为“Insert”和“Cancel”的按钮。
单击这些按钮会触发相应的事件。
4、DataList可以通过使用不同的模板显示、选择、编辑数据源中的多个数据。
(1) DataList具有ItemTemplate、EditItemTemplate、AlternatingItemTemplate、FooterTemplate、HeaderTemplate、SelectedItemTemplate、SeparatorTemplate这七种模板。
它不能插入数据。
(2)把DataList控件的属性RepeatDirection设置为"Horizontal",它呈现为水平平铺的效果,设置RepeatColumns的值,则决定每行显示的数据个数。
常用于电子商务网站多种商品的展示效果。
当RepeatDirection设置为"Vertical"且RepeatColumns="1"时,呈现的是一种流的形式。
常用于新闻列表或评论等的显示效果。
(3)点击DataList控件中的按钮,会触发ItemCommand事件,如果该按钮的CommandName为“Delete”时,也会触发DeleteCommand事件,顺序是先触发ItemCommand事件,再触发DeleteCommand事件。
同理,如果该按钮的CommandName为“Edit”时,也会触发EditCommand事件,顺序是先触发ItemCommand事件,再触发EditCommand事件。
如果该按钮的CommandName为“Update”时,也会触发UpdateCommand事件,顺序是先触发ItemCommand事件,再触发UpdateCommand事件。
如果该按钮的CommandName为“Cancel”时,也会触发CancelCommand事件,顺序是先触发ItemCommand事件,再触发CancelCommand事件。
具体示例见第9章示例中的DataListDemor页面。
5、Repeater控件主要是通过模板以流的形式来显示数据源中的多条数据,它不能编辑数据。
Repeater提供了ItemTemplate、AlternatingItemTemplate、FooterTemplate、HeaderTemplate、SeparatorTemplate这五种模板。
点击Repeater控件中的按钮,会触发ItemCommand事件。
可以通过判断CommandName属性值确定单击的是哪一个按钮,以决定做何具体操作。
像新闻列表、评论等信息的展示可以使用Repeater控件。
具体示例见第9章示例中的RepeaterDemo页面。
6、ListView控件是一个相当灵活的数据绑定控件,该控件不具有默认的格式呈现,所有格式需要进行模板设计实现。
它集成了GridView、DataList、Repeater、DetailsView和FormView控件的所有功能,可以在页面上自定义多条记录的显示布局。
ListView控件允许用户编辑、插入和删除数据,以及对数据进行排序和分页。
(1) ListView控件包含LayoutTemplate、ItemTemplate、ItemSeparatorTemplate、GroupTemplate、GroupSeparatorTemplate、EmptyItemTemplate、EmptyDataTemplate、SelectedItemTemplate、AlternatingItemTemplate、EditItemTemplate和InsertItemTemplate这11个模板。
在使用时ListView中至少必需包含LayoutTemplate和ItemTemplate这两个模板。
LayoutTemplate模板是ListView用来显示数据的布局模板,ItemTemplate则是每一条数据的显示模板,将ItemTemplate模板放置在LayoutTemplate模板中可以实现定制的布局。
(2)ListView控件的模板布局通常需要手工定义,但ListView控件也提供了5种预定义的布局:网格、平铺、流、单行、项目符号列表。
在不使用数据源控件的前提下,该控件的模板布局要我们手工定义,如果初学者不熟练,也可以先选择某种预定义的布局(要用数据源控件才能使用),然后在此基础上进行修改以符合我们的要求。
这里要强调的一点是当需要使用平铺的效果时,除了要用LayoutTemplate 和ItemTemplate这两个模板外,还要用到GroupTemplate模板。
熟练掌握ListView的用法,基本可以做到用这一个控件就能完成所有页面的数据操作任务。
当然有时其他控件可能用起来会更简单些。
(3)如果要用ListView控件实现编辑、插入和删除数据时,则要在ItemTemplate模板中添加CommandName分别为“Edit”和“Delete”的按钮。
在EditItemTemplate模板中添加CommandName分别为“Update”和“Cancel”的按钮。
在InsertItemTemplate模板中添加CommandName分别为“Insert”和“Cancel”的按钮。
可以设置InsertItemPosition属性的值为"LastItem"或"FirstItem"来指定InsertItemTemplate模板的显现位置。
●单击“Edit”按钮,会触发ItemEditing事件。
●单击“Delete”按钮,会触发ItemDeleting和ItemDeleted事件。
●单击“Update”按钮,会触发ItemUpdating和ItemUpdated事件。
●单击“Cancel”按钮,会触发ItemCanceling事件。