ASP.NET Web Forms – Repeater 控件

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)

随时甩需求,我直接甩完整可运行代码!

文章已创建 2965

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

相关文章

开始在上面输入您的搜索词,然后按回车进行搜索。按ESC取消。

返回顶部