ASP.NET Repeater 控件（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
• 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言

在 ASP.NET 开发中，数据展示是一个核心需求。无论是显示用户列表、商品信息还是动态内容，开发者都需要一种灵活且高效的控件来渲染数据。ASP.NET Repeater 控件正是一款专为数据绑定和自定义渲染设计的轻量级工具。它像一把“瑞士军刀”，虽然功能上看似简单，但通过巧妙的模板设计和事件处理，可以实现高度复杂的用户界面。

本文将从零开始，循序渐进地讲解 Repeater 控件的基础用法、数据绑定逻辑、模板设计技巧，以及如何通过实际案例掌握其核心功能。无论你是刚接触 ASP.NET 的新手，还是希望优化现有代码的中级开发者，都能从中获得实用的知识。

一、ASP.NET Repeater 控件的基础概念

1.1 什么是 Repeater 控件？

Repeater 是 ASP.NET 中用于数据绑定的无状态控件。它本身没有预设的 HTML 结构（如表格或列表），而是通过开发者自定义的模板来渲染数据项。这种设计赋予了它极高的灵活性，但也要求开发者明确控制每个数据项的展示逻辑。

形象比喻：
可以把 Repeater 想象成一个“数据组装流水线”。你提供数据源（如数据库查询结果），并通过模板定义每一步的加工规则（如如何显示名称、图片或按钮），最终 Repeater 会将这些规则应用到每条数据上，生成最终的 HTML 输出。

1.2 Repeater 的核心特点

• 轻量级：不自带 HTML 结构，仅负责数据循环渲染。
• 高度可定制：通过 <ItemTemplate>、<HeaderTemplate> 等模板自由设计 UI。
• 无 ViewState：默认不存储状态，性能优于 GridView 等复杂控件。
• 事件驱动：支持 ItemCommand 等事件，实现动态交互。

二、第一个 Repeater 示例：显示用户列表

2.1 准备数据

假设我们有一个用户列表，需要展示用户的姓名、邮箱和注册时间。首先在代码后端（如 C#）准备数据源：

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        List<User> users = new List<User>
        {
            new User { Id = 1, Name = "Alice", Email = "alice@example.com", RegisterDate = DateTime.Now.AddMonths(-2) },
            new User { Id = 2, Name = "Bob", Email = "bob@example.com", RegisterDate = DateTime.Now.AddMonths(-1) }
        };
        repeaterUsers.DataSource = users;
        repeaterUsers.DataBind();
    }
}

2.2 定义模板

在 ASPX 页面中，通过 <asp:Repeater> 标签和 <ItemTemplate> 定义每项的 HTML 结构：

<asp:Repeater ID="repeaterUsers" runat="server">
    <ItemTemplate>
        <div class="user-item">
            <h3><%# Eval("Name") %></h3>
            <p>Email: <%# Eval("Email") %></p>
            <p>注册时间: <%# Eval("RegisterDate", "{0:yyyy-MM-dd}") %></p>
        </div>
    </ItemTemplate>
</asp:Repeater>

关键点解释：

• <%# Eval("Property") %>：通过 Eval 方法绑定数据项的属性值。
• 使用 Eval 的第二个参数（如 {0:yyyy-MM-dd}）可格式化日期等数据类型。

2.3 运行效果

页面加载后，Repeater 会循环遍历数据源中的每个用户对象，并为每个对象生成一个 <div class="user-item"> 块。最终输出的 HTML 可能如下：

<div class="user-item">
    <h3>Alice</h3>
    <p>Email: alice@example.com</p>
    <p>注册时间: 2023-10-01</p>
</div>
<div class="user-item">
    <h3>Bob</h3>
    <p>Email: bob@example.com</p>
    <p>注册时间: 2023-11-01</p>
</div>

三、Repeater 的高级功能：模板与事件

3.1 模板的多样化设计

Repeater 支持多种内置模板，用于区分数据的不同部分：

示例：使用 <AlternatingItemTemplate>

<asp:Repeater ID="repeaterUsers" runat="server">
    <ItemTemplate>
        <div class="user-item normal-row">
            <!-- 普通行样式 -->
        </div>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <div class="user-item alternate-row">
            <!-- 隔行样式 -->
        </div>
    </AlternatingItemTemplate>
</asp:Repeater>

3.2 事件驱动交互：ItemCommand 的应用

Repeater 支持通过 ItemCommand 事件捕获用户操作。例如，为每个用户项添加“删除”按钮，并在点击时执行删除逻辑：

ASPX 页面：

<ItemTemplate>
    <div class="user-item">
        <h3><%# Eval("Name") %></h3>
        <asp:Button ID="btnDelete" runat="server" Text="删除" 
                   CommandName="Delete" CommandArgument='<%# Eval("Id") %>' />
    </div>
</ItemTemplate>

后端代码：

protected void repeaterUsers_ItemCommand(object source, RepeaterCommandEventArgs e)
{
    if (e.CommandName == "Delete")
    {
        int userId = Convert.ToInt32(e.CommandArgument);
        // 执行删除逻辑，如从数据库中移除用户
        // 重新绑定数据源
        BindData();
    }
}

四、Repeater 的性能优化与最佳实践

4.1 减少重复查询：缓存数据源

在 Page_Load 中，若数据源来自数据库，建议缓存查询结果以避免多次访问数据库：

private List<User> Users
{
    get
    {
        if (Session["Users"] == null)
        {
            Session["Users"] = GetUserListFromDatabase();
        }
        return (List<User>)Session["Users"];
    }
}

4.2 使用强类型数据绑定

通过 ItemType 属性指定数据项类型，避免使用 Eval 的弱类型绑定：

<asp:Repeater ID="repeaterUsers" runat="server" ItemType="MyApp.Models.User">
    <ItemTemplate>
        <h3><%# Item.Name %></h3>
        <p>Email: <%# Item.Email %></p>
    </ItemTemplate>
</asp:Repeater>

4.3 避免在循环中绑定子控件

Repeater 的 ItemDataBound 事件可用于动态修改项内容，但应避免在此处执行高开销操作（如数据库查询）：

protected void repeaterUsers_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // 示例：根据用户状态添加样式
        User user = (User)e.Item.DataItem;
        if (user.IsActive)
        {
            e.Item.CssClass += " active-user";
        }
    }
}

五、Repeater 与其他控件的对比

5.1 Repeater vs GridView

5.2 选择 Repeater 的场景

• 需要完全控制 HTML 结构（如响应式设计或复杂布局）。
• 数据量较大且需优化性能。
• 需要与 JavaScript 框架（如 React 或 Vue）结合使用。

结论

ASP.NET Repeater 控件凭借其灵活性和轻量级设计，在数据展示场景中占据重要地位。通过掌握其核心模板、事件处理和性能优化技巧，开发者可以高效地构建出既美观又高效的动态界面。无论是显示简单的列表还是复杂的交互组件，Repeater 都能成为你的得力工具。

希望本文能为你提供清晰的入门指南，并激发你进一步探索 ASP.NET 控件生态系统的兴趣。记住，实践是掌握技术的最佳途径——现在就尝试用 Repeater 实现你的第一个动态数据展示页面吧！