用Repeater控件顯示數據

2024-07-21 02:24:29

字體：大中小

來源：轉載

供稿：網友

如果你正在使用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>