ASP.NET Web Forms – Repeater 控件完全实战手册(2025 版)
Repeater 是 Web Forms 中最灵活、最常用、最推荐的数据绑定控件!
它不像 GridView 那么重,也不像 DataList 那么花哨,但你可以用它做出任何你想要的样子。
Repeater 的 5 大模板(必须记住)
| 模板名 | 作用 | 是否必须 |
|---|---|---|
<HeaderTemplate> | 表头(只显示一次) | 否 |
<ItemTemplate> | 普通行(数据行) | 是 |
<AlternatingItemTemplate> | 交替行(斑马纹) | 否 |
<SeparatorTemplate> | 每行之间的分隔符(如 ) | 否 |
<FooterTemplate> | 表尾(只显示一次) | 否 |
完整实战示例(一个页面全部搞定)
<!-- RepeaterDemo.aspx -->
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RepeaterDemo.aspx.cs" Inherits="WebDemo.RepeaterDemo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Repeater 控件终极示例</title>
<style>
.table { width:100%; border-collapse:collapse; margin:20px 0; font-family:Arial; }
.table th { background:#0066cc; color:white; padding:12px; }
.table td { padding:10px; border-bottom:1px solid #ddd; }
.row-alt { background:#f5f8ff; }
.btn { padding:5px 10px; margin:0 3px; cursor:pointer; }
.empty { text-align:center; color:#999; padding:40px; font-size:18px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>学生成绩管理系统(纯 Repeater 实现)</h2>
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table class="table">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>分数</th>
<th>操作</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# Eval("Id") %></td>
<td><%# Eval("Name") %></td>
<td><%# Eval("Age") %></td>
<td><%# HighlightCity(Eval("City").ToString()) %></td>
<td><%# FormatScore(Convert.ToInt32(Eval("Score"))) %></td>
<td>
<asp:Button ID="btnEdit" runat="server" Text="编辑" CssClass="btn"
CommandName="Edit" CommandArgument='<%# Eval("Id") %>' />
<asp:Button ID="btnDelete" runat="server" Text="删除" CssClass="btn"
CommandName="Delete" CommandArgument='<%# Eval("Id") %>' OnClientClick="return confirm('确定删除吗?');" />
</td>
</tr>
</ItemTemplate>
<AlternatingItemTemplate>
<tr class="row-alt">
<td><%# Eval("Id") %></td>
<td><strong><%# Eval("Name") %></strong></td>
<td><%# Eval("Age") %></td>
<td><%# HighlightCity(Eval("City").ToString()) %></td>
<td><%# FormatScore(Convert.ToInt32(Eval("Score"))) %></td>
<td>
<asp:Button ID="btnEdit" runat="server" Text="编辑" CssClass="btn"
CommandName="Edit" CommandArgument='<%# Eval("Id") %>' />
<asp:Button ID="btnDelete" runat="server" Text="删除" CssClass="btn"
CommandName="Delete" CommandArgument='<%# Eval("Id") %>' OnClientClick="return confirm('确定删除吗?');" />
</td>
</tr>
</AlternatingItemTemplate>
<SeparatorTemplate>
<tr><td colspan="6"><hr /></td></tr>
</SeparatorTemplate>
<FooterTemplate>
<tr>
<td colspan="6" style="text-align:center; background:#f0f0f0;">
共 <b><%= Repeater1.Items.Count %></b> 条记录
</td>
</tr>
</table>
</FooterTemplate>
</asp:Repeater>
<!-- 空数据模板(数据为空时显示) -->
<asp:Repeater ID="Repeater1" runat="server">
<EmptyDataTemplate>
<div class="empty">暂无学生数据,<a href="AddStudent.aspx">点击添加</a></div>
</EmptyDataTemplate>
</asp:Repeater>
<br />
<asp:Button ID="btnRefresh" runat="server" Text="刷新数据" OnClick="btnRefresh_Click" />
</form>
</body>
</html>
// RepeaterDemo.aspx.cs
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class RepeaterDemo : Page
{
// 模拟数据源(实际项目用数据库、XML、WebAPI 等)
private List<Student> GetStudents()
{
return new List<Student>
{
シリーズ new Student { Id=1, Name="张三", Age=23, City="北京", Score=89 },
new Student { Id=2, Name="李四", Age=25, City="上海", Score=95 },
new Student { Id=3, Name="王五", Age=22, City="广州", Score=76 },
new Student { Id=4, Name="赵六", Age=24, City="深圳", Score=92 },
new Student { Id=5, Name="周七", Age=26, City="北京", Score=88 }
};
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BindRepeater();
}
}
private void BindRepeater()
{
Repeater1.DataSource = GetStudents();
Repeater1.DataBind();
}
// 按钮刷新
protected void btnRefresh_Click(object sender, EventArgs e)
{
BindRepeater();
}
// Repeater 内置命令事件(最重要!)
protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
{
int id = Convert.ToInt32(e.CommandArgument);
switch (e.CommandName)
{
case "Edit":
Response.Redirect($"EditStudent.aspx?id={id}");
break;
case "Delete":
// 删除逻辑(这里演示从 Session 或数据库删除)
DeleteStudent(id);
BindRepeater();
break;
}
}
private void DeleteStudent(int id)
{
// 实际项目删除数据库,此处仅演示
Response.Write($"<script>alert('已删除 ID={id} 的学生');</script>");
}
// 在模板中调用的自定义方法
public string HighlightCity(string city)
{
return city == "北京" ? $"<span style='color:red;font-weight:bold;'>{city}★</span>" : city;
}
public string FormatScore(int score)
{
if (score >= 90) return $"<span style='color:green;font-weight:bold;'>{score}</span>";
if (score >= 80) return $"<span style='color:blue;'>{score}</span>";
return $"<span style='color:red;'>{score}</span>";
}
}
public class Student
{
public int Id { get; set; }
public string Name { get; set; }
public int Age { get; set; }
public string City { get; set; }
public int Score { get; set; }
}
Repeater 高频技巧汇总(老鸟必备)
| 需求 | 实现方式 |
|---|---|
| 分页 | 自己写(PagedDataSource + Repeater)或用第三方控件 |
| 选中行高亮 | 在 ItemDataBound 事件里加 css 类 |
| 嵌套 Repeater(主从表) | 在 ItemTemplate 里再放一个 Repeater |
| 双向绑定(编辑) | 用 ItemCommand 切换为 EditItemTemplate(或跳转页面) |
| 导出 Excel | 在 ItemDataBound 里拼接 HTML 表格,最后 Response.Write + ContentType |
| 绑定 XML/JSON | 先转成 List 或 DataTable 再绑定 |
经典事件使用场景
// 行创建时动态处理(最常用的事件)
protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
Student s = (Student)e.Item.DataItem;
if (s.Score < 60)
{
e.Item.BackColor = System.Drawing.Color.LightPink;
}
}
}
最终结论:2025 年还在用 Web Forms 的话
- 放弃 GridView(太重、丑、难定制)
- 放弃 DataList(半吊子)
- 放弃 ListView(虽然强大但模板太复杂)
- 全部改用 Repeater + 手写 HTML/CSS = 性能最高、样式最自由、维护最容易!
需要我给你以下任意一个完整模板,直接说:
- Repeater + 分页 + 搜索 + 导出 Excel
- Repeater 嵌套(订单 + 订单明细)
- Repeater 实现无限级菜单/树
- Repeater + Bootstrap 5 美化表格
- Repeater + Ajax 局部刷新(UpdatePanel 或纯 jQuery)
随时甩需求,我直接甩完整可运行代码!