首页 > 编程 > .NET > 正文

ASP.NET用Repeater控件显示数据

2024-07-10 13:11:05
字体:
来源:转载
供稿:网友

    如果你正在使用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.net web数据控件还有其它一个共性:它们都使用databind方法来生成用户界面。调用这一方法可以返回并显示数据(假设datasource和datamember属性设置正确)。在查看databind方法之前,我们先看看如何在一个web页面中使用一个repeater控件。
  
  使用repeater控件
  使用repeater控件的第一步骤是决定我们将要使用的数据源和字段。例如,我们将要使用sql server northwind数据库中的employees列表。web页面将显示职工的完整名字,地址,以及电话号码。html将使用div标记,用 repeater 模板来分隔内容。下面是 web 页面的 html 内容:
  
  <%@ page language="c#" %>
  <%@ import namespace="system.data" %>
  <%@ import namespace="system.data.sqlclient" %>
  <!doctype html public "-//w3c//dtd html 4.0 transitional//en" >
  <html><head>
  <title>builder.com repeater example</title>
  <meta name="generator" content="microsoft visual studio .net 7.1">
  <meta name="code_language" content="c#">
  <style>
  .alternate {
  font-weight: bold;
  color: black;
  font-family: verdana, 'times new roman';
  background-color: yellow
  }

   .row {
  font-weight: bold;
  color: black;
  font-family: verdana, 'times new roman';
  background-color: white
  }
  .footer {
  font-weight: bold;
  color: red;
  font-family: verdana, 'times new roman';
  background-color: gray
  }
  .header {
  font-weight: bold;
  color: yellow;
  font-family: verdana, 'times new roman';
  background-color: gray
  }
  .box {
  border-right: blue groove;
  border-top: blue groove;
  display: block;
  vertical-align: baseline;
  overflow: auto;
  border-left: blue groove;
  cursor: wait;
  border-bottom: blue groove;
  font-family: verdana;
  text-align: center
  }
  body {
  background: #333;
  }
  </style>
  <script language="c#" runat="server">
  private void page_load(object sender, system.eventargs e) {
  if (!ispostback) {
  dataset dset = new dataset();
  string conn = "server=(local);initial catalog=northwind;uid=ctester;pwd=password";
  string qry = "select firstname, lastname, address, city, region, postalcode,
  homephone from employees";
  sqldataadapter sda = new sqldataadapter(qry, conn);
  sda.fill(dset);
  repeater1.datasource = dset.tables[0].defaultview;
  repeater1.databind();
  } }
  </script></head>
  <body ms_positioning="gridlayout" bgcolor="#00cc99">
  <form id="form1" method="post" runat="server">
  <div class="box">
  <asp:repeater id="repeater1" runat="server">
  <headertemplate>
  <div class="header" id="header">northwind employees</div>
  </headertemplate>
  <separatortemplate><hr /></separatortemplate>
  <itemtemplate><div class="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><div class="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><div class="footer">
  <%# ((dataview)repeater1.datasource).count + " employees found." %>
  </div></footertemplate>
  </asp:repeater></div></form></body></html>
  
  
  可以注意到,每个 repeater 行中样式表控制着文字的外观。除此之外,在网页内容中还添加了一个文本框。嵌入式 c# 代码从 repeater 的数据源中获取相应的列。每个数据项都被转换成一个datarowview对象以便显示。
  
  这一页面并不是使用asp.net的“后台代码”性质。由于这一原因,页面引用了两个system.data和system.data.sqlclient空间名称。这对于使用datarowview对象和与 sql server 交互访问是必需的。
  
  当调用页面时就会触发page_load事件。此时会把数据源连接到 repeater 控件上,并查询数据库。每一repeater行的代码从潜在数据源中载入数据,并且web页面显示这些数据。
  
  这一设计使用了样式表(以及 html div 标记),所以更改外观只需要更改必要的样式表代码。为了进一步地将数据和显示分离,你可以在一个独立文件中存储样式表,并以一个html link标记来引用它们。
  
  一个很好的选择
  当与其他 asp.net 开发者交流时,开发人员对 repeater 控件知之甚少,这真让我感到惊讶。虽然它不如datagrid功能强大,但它在许多场合中仍然提供了出色的灵活性。repeater 控件缺少编辑和排序功能,但可以通过进一步编程而实现。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表