repeater控件详细教程-建站教程-锦华智联科技

Repeater 控件详细教程

什么是 Repeater 控件？

Repeater 是 ASP.NET Web Forms 中一个功能强大且高度灵活的数据绑定控件，它的核心作用是：将数据源（如数据库、集合、列表等）中的数据显示在网页上。

（图片来源网络，侵删）

与其他数据控件（如 GridView、ListView）相比，Repeater 的最大特点是：它不提供任何内置的布局或样式，这意味着 Repeater 不会自动生成表格、分页、排序或编辑功能，它只是一个“模板引擎”，严格按照你定义的模板来重复渲染数据。

核心优势：

极高的灵活性：你可以完全控制 HTML 的输出结构，非常适合创建自定义列表、新闻摘要、产品展示卡片等。
轻量级：没有多余的 HTML 标签和 ViewState，性能相对较好。
完全控制：从最外层的 <table> 到最内层的 <span>，一切尽在掌握。

Repeater 的核心工作原理

Repeater 控件通过以下几个核心模板来定义其行为和外观，理解这些模板是掌握 Repeater 的关键。

模板	描述	示例场景
`<HeaderTemplate>`	定义在所有数据项之前渲染的 HTML 内容，通常用于列表的标题，如 `<table>` 的开始标签、`<ul>` 的开始标签等。	`<table><thead><tr><th>姓名</th><th>年龄</th></tr></thead><tbody>`
`<ItemTemplate>`	定义每一项数据的渲染模板，这是最常用的模板，数据源中的每一行都会根据此模板生成一个 HTML 块。	`<tr><td><%# Eval("Name") %></td><td><%# Eval("Age") %></td></tr>`
`<AlternatingItemTemplate>`	定义交替数据项的渲染模板，当需要隔行变色时，这个模板非常有用，如果未定义，则使用 `<ItemTemplate>`。	`<tr style="background-color: #f0f0f0;"><td><%# Eval("Name") %></td><td><%# Eval("Age") %></td></tr>`
`<SeparatorTemplate>`	定义在两个数据项之间渲染的 HTML 内容，列表项之间的水平线或逗号。	`<hr />` 或
`<FooterTemplate>`	定义在所有数据项之后渲染的 HTML 内容，通常用于列表的底部，如 `</tbody></table>` 的结束标签。	`</tbody></table>`
`<EmptyDataTemplate>`	（ASP.NET 3.5 及以上）当数据源为空时，显示此模板中的内容，非常有用，可以避免页面空白。	`<p>抱歉，没有找到任何数据。</p>`

第一个 Repeater 示例：绑定一个简单的列表

让我们通过一个最简单的例子来理解 Repeater 的工作流程。

（图片来源网络，侵删）

目标：显示一个人员姓名列表。

步骤 1：准备数据源

在后台代码（.cs 文件）中，创建一个数据源，这里我们用一个 List<string> 作为示例。

// Person.cs (一个简单的模型类)
public class Person
{
    public string Name { get; set; }
    public int Age { get; set; }
    public string City { get; set; }
}
// YourPage.aspx.cs
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        // 创建并填充数据源
        List<Person> peopleList = new List<Person>
        {
            new Person { Name = "张三", Age = 28, City = "北京" },
            new Person { Name = "李四", Age = 32, City = "上海" },
            new Person { Name = "王五", Age = 25, City = "广州" }
        };
        // 将数据源绑定到 Repeater 控件
        MyRepeater.DataSource = peopleList;
        MyRepeater.DataBind();
    }
}

步骤 2：在前台页面（.aspx）中定义 Repeater 和模板

（图片来源网络，侵删）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="YourPage.aspx.cs" Inherits="YourApp.YourPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">Repeater 控件示例</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <!-- 1. 声明 Repeater 控件 -->
            <asp:Repeater ID="MyRepeater" runat="server">
                <!-- 2. 定义 Header 模板 -->
                <HeaderTemplate>
                    <h3>人员列表</h3>
                    <table border="1" style="width: 300px; border-collapse: collapse;">
                        <tr style="background-color: #a0a0a0; color: white;">
                            <th>姓名</th>
                            <th>年龄</th>
                            <th>城市</th>
                        </tr>
                        <tbody>
                </HeaderTemplate>
                <!-- 3. 定义 Item 模板 (这是核心) -->
                <!-- Eval("PropertyName") 用于显示数据 -->
                <ItemTemplate>
                    <tr>
                        <td><%# Eval("Name") %></td>
                        <td><%# Eval("Age") %></td>
                        <td><%# Eval("City") %></td>
                    </tr>
                </ItemTemplate>
                <!-- 4. 定义 AlternatingItem 模板 (隔行变色) -->
                <AlternatingItemTemplate>
                    <tr style="background-color: #f0f0f0;">
                        <td><%# Eval("Name") %></td>
                        <td><%# Eval("Age") %></td>
                        <td><%# Eval("City") %></td>
                    </tr>
                </AlternatingItemTemplate>
                <!-- 5. 定义 Separator 模板 (可选) -->
                <!-- <SeparatorTemplate>
                    <tr><td colspan="3" style="height: 2px; background-color: black;"></td></tr>
                </SeparatorTemplate> -->
                <!-- 6. 定义 Footer 模板 -->
                <FooterTemplate>
                        </tbody>
                    </table>
                </FooterTemplate>
                <!-- 7. 定义 EmptyData 模板 (当没有数据时显示) -->
                <EmptyDataTemplate>
                    <p style="color: red;">当前没有人员信息。</p>
                </EmptyDataTemplate>
            </asp:Repeater>
        </div>
    </form>
</body>
</html>

运行结果：浏览器会渲染出一个整洁的表格，表头是灰色，数据行和隔行数据有不同的背景色。

数据绑定表达式详解

在模板中,我们使用 <%# ... %> 语法来执行数据绑定，这是 Repeater 的灵魂。

Eval("PropertyName")
- 作用：单向数据绑定，用于显示数据。
- 工作原理：Eval 是一个静态方法，它会自动寻找当前数据项的 DataItem 对象，然后根据字符串 PropertyName 使用反射获取该属性的值，并将其转换为字符串显示在页面上。
- 语法：<%# Eval("PropertyName") %>
Bind("PropertyName")
- 作用：双向数据绑定，用于显示和更新数据，主要用于 GridView 的编辑模式，在 Repeater 中不常用，因为 Repeater 没有内置的编辑功能。
- 语法：<%# Bind("PropertyName") %>
Container.DataItem
- 作用：获取当前正在被绑定的数据项对象本身，这比 Eval 更强大，因为它允许你进行更复杂的操作，比如调用方法或执行逻辑。
- 使用场景：
  - 调用数据对象的方法：<%# Container.DataItem.ToString() %>
  - 在后台代码中获取数据：在 Repeater 的事件中，可以通过 e.Item.DataItem 访问。
  - 进行条件判断（见下文）。

高级技巧与常见场景

在模板中执行逻辑（条件判断、格式化）

你不能在 <%# ... %> 中写 if-else 或 for 循环，但可以通过以下方式实现：

使用 IIF (三元运算符)

<!-- 如果年龄大于30，显示“资深”，否则显示“初级” -->
<td><%# (Eval("Age") is int age && age > 30) ? "资深" : "初级" %></td>

在后台代码中创建辅助方法（推荐）

这是最清晰、最符合 MVC 思想的方式。

// 在 .cs 文件中添加一个静态或公共方法
public static string GetExperienceLevel(int age)
{
    if (age > 30)
    {
        return "资深";
    }
    else
    {
        return "初级";
    }
}

然后在 .aspx 页面中调用这个方法：

<%@ Import Namespace="YourApp" %> <!-- 确保引入了命名空间 -->
...
<td><%# YourPageClassName.GetExperienceLevel((int)Eval("Age")) %></td>

处理数据格式化

比如格式化日期、货币等。

// .cs 文件
public static string FormatCurrency(decimal amount)
{
    return amount.ToString("C"); // C 代表货币格式
}

<!-- .aspx 文件 -->
<td><%# YourPageClassName.FormatCurrency((decimal)Eval("Salary")) %></td>

获取 Repeater 中控件的引用

你需要在后台代码中操作 Repeater 内部的控件（给 LinkButton 添加点击事件）。

场景：每一行都有一个“删除”按钮，点击后删除该行数据。

步骤：

在前台模板中为控件命名并添加事件：

<ItemTemplate>
    <tr>
        <td><%# Eval("Name") %></td>
        <td><asp:LinkButton ID="DeleteBtn" runat="server" Text="删除" OnClick="DeleteBtn_Click" CommandArgument='<%# Eval("Id") %>' /></td>
    </tr>
</ItemTemplate>

CommandArgument：非常重要！它用于传递当前行的唯一标识（如 Id），这样我们就能知道要删除哪条数据。

在后台代码中处理事件：

protected void DeleteBtn_Click(object sender, EventArgs e)
{
    // 1. 获取触发事件的控件
    LinkButton lb = (LinkButton)sender;
    // 2. 获取该控件所在的 Repeater 项
    RepeaterItem item = (RepeaterItem)lb.Parent; // Parent 是 <td>，再往上找
    // 或者更直接：
    // RepeaterItem item = (RepeaterItem)lb.NamingContainer;
    // 3. 从 CommandArgument 中获取 ID
    string personId = lb.CommandArgument;
    // 4. 执行删除逻辑 (这里只是示例)
    // DeletePersonFromDatabase(personId);
    // 5. 重新绑定数据以刷新页面
    MyRepeater.DataSource = GetUpdatedPersonList(); // 假设这是获取新列表的方法
    MyRepeater.DataBind();
}

分页功能

Repeater 没有内置分页，要实现分页，你需要手动完成：

UI：在 Repeater 下方添加一个 AspNetPager 控件或自己创建“上一页/下一页”按钮。
数据源：不要一次性绑定所有数据，使用 PagedDataSource 类或数据库的 OFFSET-FETCH (SQL Server) / LIMIT (MySQL) / ROWNUM (Oracle) 等分页查询，只获取当前页的数据。
事件：当用户点击页码按钮时，重新查询当前页的数据并重新绑定 Repeater。

这是一个稍微复杂的操作,通常建议使用 ListView 控件（它内置了分页模板）来实现复杂的分页列表，但如果对 HTML 输出有极致要求，手动为 Repeater 添加分页也是可行的。

与其他控件的比较

特性	`Repeater`	`GridView`	`DataList`	`ListView`
布局控制	完全自定义 (无内置布局)	表格布局	流动布局 (类似 `<table>`)	完全自定义 (类似 Repeater)
功能	无内置功能 (分页、编辑、排序)	内置所有功能	简单功能 (编辑、排序)	高级功能 (分页、编辑、排序、插入)
灵活性	最高	最低	中等	高
适用场景	自定义列表、卡片、新闻摘要、报表	快速开发数据表格	简单的表格或网格布局	功能丰富的自定义列表（如购物车、相册）
学习曲线	简单 (模板语法)	简单 (拖拽配置)	简单	中等 (功能较多)

Repeater 控件是 ASP.NET Web Forms 开发者的“瑞士军刀”，它虽然不提供“开箱即用”的高级功能，但给予了开发者前所未有的自由度。

何时使用 Repeater？

当你需要生成非表格的 HTML 结构时（如 <div> 卡片、<ul> 列表）。
当你对 HTML 输出的精确度有严格要求时。
当你希望页面上没有多余的标签时。
当你只需要简单的数据展示,不需要分页、编辑等功能时。

掌握 Repeater 的关键在于：理解其模板机制，并熟练运用 Eval 和 Container.DataItem 进行数据绑定，通过结合后台的辅助方法，你可以实现非常复杂和美观的数据展示效果。