Repeater是ASP.NET WebForm中常用的轻量级数据绑定控件，适合展示简单的列表类数据，但默认渲染时不会自动在相邻数据项之间添加分隔符，当需要实现每多行显示一个分隔符的需求时，需要结合控件的生命周期和模板语法来定制处理逻辑。
实现思路分析
要实现多行间隔显示分隔符，核心是通过判断当前数据项的索引值，确定是否需要渲染分隔符标签。Repeater的每个数据项都会触发ItemDataBound事件，我们可以在这个事件中获取当前项的索引，也可以在前台模板中使用Container.ItemIndex属性获取索引值，两种方式都可以实现需求。
方式一：前台模板条件判断
这种方式不需要编写后台事件代码，直接在前台的ItemTemplate中通过判断索引值来控制分隔符的显示，适合分隔符逻辑简单的场景。
首先看前台的Repeater定义代码：
<asp:Repeater ID="rptDemo" runat="server">
<HeaderTemplate>
<ul class="data-list">
</HeaderTemplate>
<ItemTemplate>
<li class="data-item">
<%# Eval("UserName") %>
</li>
<%-- 每2行显示一个分隔符，索引从0开始，所以索引为1、3、5等奇数时显示 --%>
<%# (Container.ItemIndex + 1) % 2 == 0 && Container.ItemIndex != 0 ? "<li class="divider"></li>" : "" %>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
对应的CSS样式定义如下，用来美化分隔符的显示效果：
.data-list {
list-style: none;
padding: 0;
margin: 0;
}
.data-item {
padding: 12px 16px;
border-bottom: 1px solid #f0f0f0;
}
.divider {
height: 10px;
background-color: #f5f5f5;
margin: 0;
padding: 0;
}
后台的数据绑定代码很简单，只需要给Repeater绑定数据源即可：
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
// 模拟数据源
var userList = new List<User>
{
new User { UserName = "张三" },
new User { UserName = "李四" },
new User { UserName = "王五" },
new User { UserName = "赵六" },
new User { UserName = "孙七" },
new User { UserName = "周八" }
};
rptDemo.DataSource = userList;
rptDemo.DataBind();
}
}
public class User
{
public string UserName { get; set; }
}
方式二：ItemDataBound事件处理
如果分隔符的逻辑比较复杂，比如需要根据数据内容判断是否显示分隔符，或者需要动态修改分隔符的样式，可以使用后台的ItemDataBound事件来处理。
首先前台的Repeater需要定义OnItemDataBound事件：
<asp:Repeater ID="rptDemo2" runat="server" OnItemDataBound="rptDemo2_ItemDataBound">
<HeaderTemplate>
<div class="data-container">
</HeaderTemplate>
<ItemTemplate>
<div class="data-item">
<%# Eval("UserName") %>
</div>
<asp:Literal ID="litDivider" runat="server" Visible="false"></asp:Literal>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
后台的事件处理代码：
protected void rptDemo2_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
// 获取当前项的索引
int itemIndex = e.Item.ItemIndex;
// 每3行显示一个分隔符，排除第一项
if ((itemIndex + 1) % 3 == 0 && itemIndex != 0)
{
Literal litDivider = e.Item.FindControl("litDivider") as Literal;
if (litDivider != null)
{
litDivider.Visible = true;
litDivider.Text = "<div class="divider"></div>";
}
}
}
}
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
var userList = new List<User>
{
new User { UserName = "张三" },
new User { UserName = "李四" },
new User { UserName = "王五" },
new User { UserName = "赵六" },
new User { UserName = "孙七" },
new User { UserName = "周八" }
};
rptDemo2.DataSource = userList;
rptDemo2.DataBind();
}
}
注意事项
- 索引从0开始，判断间隔行的时候要注意偏移量，避免第一项就显示分隔符。
- 如果使用前台模板拼接HTML字符串，要注意引号转义，避免语法错误。
- 分隔符的标签可以根据需求替换成
hr、div或者其他自定义标签，只需要调整对应的HTML和CSS即可。 - 如果Repeater有分页功能，需要在每次绑定数据时重新计算索引，避免分页后索引判断错误。