您现在的位置是：网站首页> 编程资料编程资料

在ASP.NET 2.0中操作数据之二十九：用DataList和Repeater来显示数据_自学过程_

2023-05-24 369人已围观

简介在ASP.NET 2.0中操作数据之二十九：用DataList和Repeater来显示数据_自学过程_

导言

　　在之前的28篇教程的例子里,如果我们需要显示某个数据源的多条记录,我们使用GridView .GridView 的一行表示数据源的一条记录,列表示一个字段.虽然GridView 用来显示数据,分页,排序,编辑,删除非常的方便,但是有点臃肿.而且GridView 结构的标记是固定的—它包含一个带有和的HTML

标记.

　　为了在显示多条记录时,有更好的自定义功能,ASP.NET 2.0提供了DataList 和Repeater (ASP.NET 1.x版本里也有 ).DataList 和Repeater 使用模板来显示内容,而不是象在GridView里那样使用BoundFields, CheckBoxFields, ButtonFields等.DataList 的标记语言为HTML

, 不过它允许每一行显示多条记录.另一方面,Repeater不会生成多余的标记语言,因此如果你想精确控制标记语言的生成,它是最理想的选择.

　　在后面的若干章教程里,我们将从使用DataList 和Repeater 的模板显示数据开始,来学习它们的最基本的用法.我们将学习如何控制这些控件的格式,如何在DataList里改变数据的布局,最常见的主/从场景,编辑和删除数据的方法,以及如何分页等.

第一步 1: 添加DataList 和Repeater 教程页

　　在开始本篇教程前,我们首先花点时间来创建一些页,这些页会在本篇和后面的几篇教程里用到.先添加一个名为DataListRepeaterBasics的文件夹,然后,添加下面的页,添加页的时候确保每页都选择了 Site.master作为母板页:

Default.aspx
Basics.aspx
Formatting.aspx
RepeatColumnAndDirection.aspx
NestedControls.aspx

//img.jbzj.com/file_images/article/201605/2016050910075729.png

图 1: 创建 DataListRepeaterBasics 文件夹和添加页

　　打开Default.aspx页的设计视图,从UserControls文件夹将SectionLevelTutorialListing.ascx用户控件拖进来.这个用户控件提供的功能就是列出教程章节.我们在母板页和站点导航里创建的它.

//img.jbzj.com/file_images/article/201605/2016050910075730.png

图 2: 添加SectionLevelTutorialListing.ascx 用户控件到Default.aspx

最后,将这些页的地址加到 Web.sitemap 的条目里.在Paging and Sorting 之后添加下面的标记.

//img.jbzj.com/file_images/article/201605/2016050910075731.png

图 3: 向 Site Map 里添加新的页

第二步: 在 DataList里显示Product信息

　　和FormView一样,DataList 使用模板来显示信息,而非BoundFields, CheckBoxFields等.而与FormView不同的是,DataList 是被用来显示一组记录,而不是单独的一条.现在我们开始本章的教程.首先看看如何将product 绑定到DataList.打开DataListRepeaterBasics 文件夹里的Basics.aspx 页,然后从工具箱里拖一个DataList 进来.如图4所示,在指定模板前,设计器会是灰色的.

//img.jbzj.com/file_images/article/201605/2016050910080032.png

图 4: 从工具箱拖一个DataList到设计器里

　　打开DataList的智能标签,添加一个ObjectDataSource ,使用ProductsBLL 类的GetProducts 方法来配置它.因为在本教程里创建的DataList 为只读的,因此在INSERT, UPDATE, 和DELETE 标签的下拉列表里都选择None.

//img.jbzj.com/file_images/article/201605/2016050910080033.png

图 5: 创建一个新的ObjectDataSource

//img.jbzj.com/file_images/article/201605/2016050910080134.png

图 6: 用ProductsBLL 类来配置ObjectDataSource

//img.jbzj.com/file_images/article/201605/2016050910080135.png

图 7: 使用GetProducts 方法来获取所有Product的信息

　　通过智能标签里配置完ObjectDataSource ,并把它和DataList 关联起来后,Visual Studio会在DataList 里自动为数据源返回的每个字段创建一个ItemTemplate 用来显示name 和value (见下面的代码).这个默认的ItemTemplate看起来和绑定FormView 时自动产生的模板是一样的.

 ProductID: 
 ProductName: 
 SupplierID: 
 CategoryID: 
 QuantityPerUnit: 
 UnitPrice: 
 UnitsInStock: 
 UnitsOnOrder: 
 ReorderLevel: 
 Discontinued: 
 CategoryName: 
 SupplierName:

　　注意：当通过智能标签将数据源绑定到FormView 时，Vistual Studio会创建一个ItemTemplate，一个InsertItemTemplate和一个EditItemTemplate．然而对DataList来说，只会创建一个ItemTemplate ．这是因为DataList 不象FormView那样，有内置的编辑和插入功能．DataList 没有编辑和删除相关的事件，虽然要完成这些功能，对DataList 来说没有FormView那么简单，我们仍然可以加少量代码来实现它．我们在以后的教程里会讲到如何在DataList 里完成编辑和删除的功能．

　　让我们花点时间来改善一下模板的外观．我们只显示product的name，supplier，category，数量和单价．而且我们用

来显示名字，其它字段都放在

heading下的

里．你可以通过DataList的只能标签里的 Edit Templates ，或者直接修改页面声明语法来达到以上目的．如果你是通过Edit Templates 来实现，那你的页面代码可能和下面的不完全一样．但是通过浏览器浏览你的页面应该和图８看起来差不多．

Category:		Supplier:
Qty/Unit:		Price:

　　注意：上面的例子使用的是Text指定为数据绑定的值的Label控件．我们也可以不使用Label，而只是保留数据绑定的代码．也就是说，我们可以用<%# Eval("CategoryName") %>来代替．

　　使用Label控件有两个好处,第一点在下一章我们会看到,就是提供了一个格式化数据的简单途径.第二点是不使用web控件的时候,Edit Templates 不显示声明的数据绑定代码.通过Edit Templates 的界面很容易操作静态标记语言和web控件,其前提是所有的数据绑定都是通过web控件的智能标签里的Edit DataBindings对话框来实现.因此,使用DataList的时候,我建议使用Label控件,这样通过Edit Templates 就可以操作其内容.我们会看到,使用Repeater 时如果需要编辑其内容,需要切换到源视图.而设计Repeater模板的时候,我通常不使用Label控件,除非我需要格式化绑定数据的外观.

//img.jbzj.com/file_images/article/201605/2016050910080136.png

图 8: 用DataList的 ItemTemplate显示Product

第三步: 改善DataList的外观

　　和GridView一样,DataList 提供了一些和风格有关的属性,比如Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle等.当使用 GridView 和DetailsView 时,我们首先在DataWebControls Theme里创建了一些皮肤文件,这些文件预定义了这两个控件的CssClass 属性和RowStyle, HeaderStyle等.我们使用DataList的时候也采取这种方法.

　　象在使用ObjectDataSource展现数据里谈到的那样,一个Skin 文件定义了一个web控件的默认显示属性.一个Theme 是一组Skin, CSS, image, 和JavaScript files 的集合,它定义了一个web站点的外观.在使用ObjectDataSource展现数据那一章里,我们创建了一个DataWebControls Theme(App_Themes 文件夹下) ,它包含两个Skin文件- GridView.skin 和DetailsView.skin.我们现在来为DataList添加第三个.右键单击App_Themes/DataWebControls 文件夹,选择Add a New Item,选择Skin File,在名字里填DataList.skin.

//img.jbzj.com/file_images/article/201605/2016050910080137.png