asp:repeater控件使用-阿里云开发者社区

repeater.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建一个基本的Repeater控件</title>
<style type="text/css">
*{padding:0;margin:0;}
.section1,.section2
{
padding:10px 0;
color:#369;
}
.section2
{
background-color:#f0f6f9;
}
</style>
</head>
<body>
<asp:repeater
id="repDepts"
runat="server"
>
<headertemplate>
<h3>下面是所有雇员的一个列表:</h3>
</headertemplate>
<itemtemplate>
<div class="section1">
<%# "<b>部门:</b> "
+ DataBinder.Eval(Container.DataItem, "ID")
+ " - "
+ DataBinder.Eval(Container.DataItem, "FirstName")
%>
</div>
</itemtemplate>
<alternatingitemtemplate>
<div class="section2">
<%# "<b>部门:</b> "
+ DataBinder.Eval(Container.DataItem, "ID")
+ " - "
+ DataBinder.Eval(Container.DataItem, "FirstName")
%>
</div>
</alternatingitemtemplate>
<separatortemplate>
<div>--------------------------------------------------</div>
</separatortemplate>
<footertemplate>
<div id="lstFoot">全部记录都已显示.</div>
</footertemplate>
</asp:repeater>
</body>
</html>

repeater.aspx.cs:

using System;
using System.Data;
using System.Data.OleDb;
namespace MyWebservice
{
public partial class repeater : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!IsPostBack)
{
OleDbConnection DBConn = new OleDbConnection("PROVIDER=Microsoft.Jet.OLEDB.4.0;DATA SOURCE=" + Server.MapPath("App_Data/EmployeeDatabase.mdb"));
OleDbDataAdapter DBCommand = new OleDbDataAdapter("Select ID, FirstName From Employee Order By FirstName", DBConn);
DataSet ds=new DataSet();
DBCommand.Fill(ds, "Employee");
repDepts.DataSource = ds.Tables["Employee"].DefaultView;
repDepts.DataBind();
}
}
}
}

图片:

参考:

当然了可以很轻松的实现导航菜单的结构，repeater是个完全基于模板驱动的一个控件，不生成多余代码，完整靠我们自己来布局，非常自由:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建一个基本的Repeater控件</title>
<style type="text/css">
*{padding:0;margin:0;}
ul,li{list-style:none;}
.hMenu
{
background-color:#090;
overflow:hidden;
width:500px;
margin:10px auto;
}
.hMenu li
{
float:left;
padding:5px;
}
</style>
</head>
<body>
<asp:repeater
id="repDepts"
runat="server"
>
<headertemplate>
<ul class="hMenu">
</headertemplate>
<itemtemplate>
<li>
<%# DataBinder.Eval(Container.DataItem, "OpName") %>
</li>
</itemtemplate>
<separatortemplate>
<li>|</li>
</separatortemplate>
<footertemplate>
</ul>
</footertemplate>
</asp:repeater>
</body>
</html>

也可以实现table表格：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建一个基本的Repeater控件</title>
<style type="text/css">
*{padding:0;margin:0;}
#myTable
{
}
#myTable th,#myTable td
{
border:1px solid #c00;
}
#myTable th
{ background-color:#fc0;}
#myTable .altCell
{ background-color:#fff0f0;color:#c00;}
</style>
</head>
<body>
<asp:repeater
id="repDepts"
runat="server"
>
<headertemplate>
<table id="myTable">
<thead>
<tr>
<th>标识</th><th>号码</th><th>名称</th>
</tr>
</thead>
<tbody>
<tr>
</headertemplate>
<itemtemplate>
<td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td>
</itemtemplate>
<AlternatingItemTemplate>
<td class="altCell"><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td class="altCell"><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td class="altCell"><%# DataBinder.Eval(Container.DataItem, "OpName") %></td>
</AlternatingItemTemplate>
<separatortemplate>
</tr><tr>
</separatortemplate>
<footertemplate>
```
       </tr> 
```
</tbody>
</table>
</footertemplate>
</asp:repeater>
</body>
</html>

当然交替也可以这样简单些:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="repeater.aspx.cs" Inherits="MyWebservice.repeater" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>创建一个基本的Repeater控件</title>
<style type="text/css">
*{padding:0;margin:0;}
#myTable
{
}
#myTable th,#myTable td
{
border:1px solid #c00;
}
#myTable th
{ background-color:#fc0;}
#myTable .altRow
{ background-color:#fff0f0;color:#c00;}
</style>
</head>
<body>
<asp:repeater
id="repDepts"
runat="server"
>
<headertemplate>
<table id="myTable">
<thead>
<tr>
<th>标识</th><th>号码</th><th>名称</th>
</tr>
</thead>
<tbody>
</headertemplate>
<itemtemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td>
</tr>
</itemtemplate>
<AlternatingItemTemplate>
<tr class="altRow">
<td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td>
</tr>
</AlternatingItemTemplate>
<footertemplate>
</tbody>
</table>
</footertemplate>
</asp:repeater>
</body>
</html>

我们可以在每一行的开始加上序号，如下所示:

模板修改如下:

<itemtemplate>
<tr>
<td><%# i++ %></td><td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td>
</tr>
</itemtemplate>
<AlternatingItemTemplate>
<tr class="altRow">
<td><%# i++ %></td><td><%# DataBinder.Eval(Container.DataItem, "OpCode") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpNo") %></td><td><%# DataBinder.Eval(Container.DataItem, "OpName") %></td>
</tr>
</AlternatingItemTemplate>

后置类中添加如下的保护变量，以便派生的页面可以访问到变量i:

本文转自 xcf007 51CTO博客，原文链接：http://blog.51cto.com/xcf007/362079，如需转载请自行联系原作者

asp:repeater控件使用