用Repeater控件显示数据

简介:

如果你正在使用ASP.NET,你一定对DataGrid控件非常熟悉。DataGrid控件提供了各种特性,通过这些特性可以很容易地在一个Web页面上以列表形式显示数据。但是,如果你不想使用HTML表格形式呢?此时,可以使用一个DataGrid的一个鲜为人知的兄弟控件,即Repeater控件。Repeater控件提供显示你所需要数据的灵活性。

Repeater控件是什么?

Repeater是一个可重复操作的控件,也就是说,它通过使用模板显示一个数据源的内容,而你可以很容易地配置这些模板。Repeater包含如标题和页脚这样的数据,它可以遍历所有的数据选项并应用到模板中。

与DataGrid和DataList控件不同,Repeater控件并不是由WebControl类派生而来。所以,它不包括一些通用的格式属性,比如控制字体,颜色,等等。然而,使用Repeater控件,HTML(或者一个样式表)或者ASP.NET类可以处理这些属性。

HTML在哪里?
Repeater控件与DataGrid(以及DataList)控件的主要区别是在于如何处理HTML。ASP.NET建立HTML代码以显示DataGrid控件,但Repeater允许开发人员决定如何显示数据。所以,你可以选择将数据显示在一个HTML表格中或者一个顺序列表中。这主要取决于你的选择,但你必须将正确的HTML插入到ASP.NET页面中。

模板与DataList一样,Repeater控件只支持模板。以下的模板可供选择:

AlternatingItemTemplate:指定如何显示每一其它选项。
ItemTemplate:指定如何显示选项。(AlternatingItemTemplate可以覆盖这一模板。)
HeaderTemplate:建立如何显示标题。
FooterTemplate:建立如何显示页脚。
SeparatorTemplate:指定如何显示不同选项之间的分隔符。
你可以使用这些模板来显示你希望的数据。唯一具有强制性的模板是ItemTemplate,所有其它的模板都是具有选择性的。

数据
对于处理一个数据源,Repeater控件具有与DataGrid与DataList相同的属性:

DataMember:获得或者设置与Repeater控件绑定的相应DataSource属性的表格。

DataSource:获得或者设置为Repeater显示提供数据的数据源。

除此之外,还有一个Items属性,你可以通过这一属性编程访问Repeater数据中单一选项。它返回一个RepeaterItemCollection对象,为一组RepeaterItem对象的集合,代表Repeater数据的每一行。

ASP.NETWeb数据控件还有其它一个共性:它们都使用DataBind方法来生成用户界面。调用这一方法可以返回并显示数据(假设DataSource和DataMember属性设置正确)。在查看DataBind方法之前,我们先看看如何在一个Web页面中使用一个Repeater控件。

使用Repeater控件
使用Repeater控件的第一步骤是决定我们将要使用的数据源和字段。例如,我们将要使用SQLServerNorthwind数据库中的Employees列表。Web页面将显示职工的完整名字,地址,以及电话号码。HTML将使用DIV标记,用Repeater模板来分隔内容。下面是Web页面的HTML内容:

<%@Pagelanguage="c#"%>
<%@ImportNamespace="System.Data"%>
<%@ImportNamespace="System.Data.SqlClient"%>
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.0Transitional//EN">
<html><head>
<title>Builder.comRepeaterExample</title>
<metaname="GENERATOR"Content="MicrosoftVisualStudio.NET7.1">
<metaname="CODE_LANGUAGE"Content="C#">
<style>
.alternate{
FONT-WEIGHT:bold;
COLOR:black;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:yellow
}
.row{
FONT-WEIGHT:bold;
COLOR:black;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:white
}
.footer{
FONT-WEIGHT:bold;
COLOR:red;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:gray
}
.header{
FONT-WEIGHT:bold;
COLOR:yellow;
FONT-FAMILY:Verdana,'TimesNewRoman';
BACKGROUND-COLOR:gray
}
.box{
BORDER-RIGHT:bluegroove;
BORDER-TOP:bluegroove;
DISPLAY:block;
VERTICAL-ALIGN:baseline;
OVERFLOW:auto;
BORDER-LEFT:bluegroove;
CURSOR:wait;
BORDER-BOTTOM:bluegroove;
FONT-FAMILY:verdana;
TEXT-ALIGN:center
}
body{
background:#333;
}
</style>
<scriptlanguage="C#"runat="server">
privatevoidPage_Load(objectsender,System.EventArgse){
if(!IsPostBack){
DataSetdset=newDataSet();
stringconn="server=(local);InitialCatalog=Northwind;UID=ctester;PWD=password";
stringqry="SELECTfirstname,lastname,address,city,region,postalcode,
homephoneFROMemployees";
SqlDataAdaptersda=newSqlDataAdapter(qry,conn);
sda.Fill(dset);
Repeater1.DataSource=dset.Tables[0].DefaultView;
Repeater1.DataBind();
}}
</script></head>
<bodyMS_POSITIONING="GridLayout"bgColor="#00cc99">
<formid="Form1"method="post"runat="server">
<divclass="box">
<asp:Repeaterid="Repeater1"runat="server">
<HeaderTemplate>
<divclass="header"id="header">NorthwindEmployees</div>
</HeaderTemplate>
<SeparatorTemplate><hr/></SeparatorTemplate>
<ItemTemplate><divclass="row">
<%#((DataRowView)Container.DataItem)["FirstName"]%>
<%#((DataRowView)Container.DataItem)["LastName"]%><br>
<%#((DataRowView)Container.DataItem)["Address"]%><br>
<%#((DataRowView)Container.DataItem)["City"]%>,
<%#((DataRowView)Container.DataItem)["Region"]%>
<%#((DataRowView)Container.DataItem)["PostalCode"]%><br>
<%#((DataRowView)Container.DataItem)["HomePhone"]%>
</div></ItemTemplate>
<AlternatingItemTemplate><divclass="alternate">
<%#((DataRowView)Container.DataItem)["FirstName"]%>
<%#((DataRowView)Container.DataItem)["LastName"]%><br>
<%#((DataRowView)Container.DataItem)["Address"]%><br>
<%#((DataRowView)Container.DataItem)["City"]%>,
<%#((DataRowView)Container.DataItem)["Region"]%>
<%#((DataRowView)Container.DataItem)["PostalCode"]%><br>
<%#((DataRowView)Container.DataItem)["HomePhone"]%>
</div></AlternatingItemTemplate>
<FooterTemplate><divclass="footer">
<%#((DataView)Repeater1.DataSource).Count+"employeesfound."%>
</div></FooterTemplate>
</asp:Repeater></div></form></body></html>

可以注意到,每个Repeater行中样式表控制着文字的外观。除此之外,在网页内容中还添加了一个文本框。嵌入式C#代码从Repeater的数据源中获取相应的列。每个数据项都被转换成一个DataRowView对象以便显示。

这一页面并不是使用ASP.NET的“后台代码”性质。由于这一原因,页面引用了两个System.Data和System.Data.SqlClient空间名称。这对于使用DataRowView对象和与SQLServer交互访问是必需的。

当调用页面时就会触发Page_Load事件。此时会把数据源连接到Repeater控件上,并查询数据库。每一Repeater行的代码从潜在数据源中载入数据,并且Web页面显示这些数据。

这一设计使用了样式表(以及HTMLdiv标记),所以更改外观只需要更改必要的样式表代码。为了进一步地将数据和显示分离,你可以在一个独立文件中存储样式表,并以一个HTMLLINK标记来引用它们。

一个很好的选择
当与其他ASP.NET开发者交流时,开发人员对Repeater控件知之甚少,这真让我感到惊讶。虽然它不如DataGrid功能强大,但它在许多场合中仍然提供了出色的灵活性。Repeater控件缺少编辑和排序功能,但可以通过进一步编程而实现。

目录
相关文章
|
存储 SQL
表单控件的副产品——查询控件
查询控件 温故而知新能自己“跑”的表单控件,思路,雏形,源码。vs2005版本 表单控件续(1)——应用接口来简化和分散代码     当初在写表单控件的时候,突然想到,这个表单控件稍微修改一下不就是一个查询控件了吗?     那么查询控件需要做的什么事情呢?          1、自己描绘控件,比如能够自己添加文本框、下拉列表框这一类的控件。
636 0
|
C# 前端开发
wpf中的datagrid绑定操作按钮是否显示或者隐藏
如图,需要在wpf中的datagrid的操作那列有个确认按钮,然后在某些条件下确认按钮可见,某些情况下不可见的,放在mvc里直接在cshtml页面中if..else就行了。 但是在wpf里不行。。网上搜索了好久才找到解决方法,原来只是binding那个visiable属性就行了,
6864 0
|
C#
WPF DataGrid 每行ComboBox 内容不同的设置方法
原文:WPF DataGrid 每行ComboBox 内容不同的设置方法 ...
1062 0
|
数据库 算法 缓存

热门文章

最新文章

  • 1
    流量控制系统,用正则表达式提取汉字
    25
  • 2
    Redis09-----List类型,有序,元素可以重复,插入和删除快,查询速度一般,一般保存一些有顺序的数据,如朋友圈点赞列表,评论列表等,LPUSH user 1 2 3可以一个一个推
    26
  • 3
    Redis08命令-Hash类型,也叫散列,其中value是一个无序字典,类似于java的HashMap结构,Hash结构可以将对象中的每个字段独立存储,可以针对每字段做CRUD
    26
  • 4
    Redis07命令-String类型字符串,不管是哪种格式,底层都是字节数组形式存储的,最大空间不超过512m,SET添加,MSET批量添加,INCRBY age 2可以,MSET,INCRSETEX
    27
  • 5
    S外部函数可以访问函数内部的变量的闭包-闭包最简单的用不了,闭包是内层函数+外层函数的变量,简称为函数套函数,外部函数可以访问函数内部的变量,存在函数套函数
    24
  • 6
    Redis06-Redis常用的命令,模糊的搜索查询往往会对服务器产生很大的压力,MSET k1 v1 k2 v2 k3 v3 添加,DEL是删除的意思,EXISTS age 可以用来查询是否有存在1
    30
  • 7
    Redis05数据结构介绍,数据结构介绍,官方网站中看到
    22
  • 8
    JS字符串数据类型转换,字符串如何转成变量,+号只要有一个是字符串,就会把另外一个转成字符串,- * / 都会把数据转成数字类型,数字型控制台是蓝色,字符型控制台是黑色,
    20
  • 9
    JS数组操作---删除,arr.pop()方法从数组中删除最后一个元素,并返回该元素的值,arr.shift() 删除第一个值,arr.splice()方法,删除指定元素,arr.splice,从第一
    20
  • 10
    定义好变量,${age}模版字符串,对象可以放null,检验数据类型console.log(typeof str)
    19