如何将ASP.NET DataList控件输出自定义为指定格式适配Filtrify插件

要让DataList生成符合Filtrify插件要求的<ul><li>结构，同时保留你需要的多列布局，我们可以通过调整DataList的布局模式+CSS来实现，具体步骤如下：

1. 修改DataList的布局与模板 #

首先，把DataList的RepeatLayout从Table改成Flow（这样就不会生成table/tr/td这些多余的结构），然后直接在ItemTemplate里写<li>标签并添加data-genre属性，同时在外层包裹<ul id="container">：

<ul id="container">
    <asp:DataList ID="dlSports" runat="server" RepeatLayout="Flow" CellSpacing="5">
        <ItemTemplate>
            <!-- 注意：原代码里的<image>是错误标签，应该用<img> -->
            <li data-genre='<%# Eval("Genre").ToString().ToLower() %>'>
                <img src='<%# Eval("ImageUrl") %>' alt='<%# Eval("SportName") %>' />
                <span><%# Eval("SportName") %></span>
            </li>
        </ItemTemplate>
    </asp:DataList>
</ul>

关于data-genre的绑定说明： #

• 如果你的数据源里有单独的Genre字段（比如对应"cricket"、"boxing"），直接用Eval("Genre").ToString().ToLower()就能生成示例里的小写属性值。
• 如果没有单独的Genre字段，也可以从SportName中提取，比如取第一个单词并转小写：

  data-genre='<%# Eval("SportName").ToString().Split(' ')[0].ToLower() %>'
  

2. 用CSS实现多列布局（替代原来的RepeatColumns） #

原来的RepeatColumns="6"是通过table实现的，现在我们用CSS Grid来实现同样的6列效果，代码更灵活也更符合现代前端规范：

#container {
    list-style: none; /* 去掉默认的列表圆点 */
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 平均分6列 */
    gap: 5px; /* 对应原来的CellSpacing，控制列/行之间的间距 */
}

#container li {
    text-align: center; /* 保持内容居中，和原来的text-center效果一致 */
    /* 可以根据需求添加更多样式，比如宽高、边框等 */
}

最终生成的HTML效果 #

调整后，DataList会输出完全符合你需求的结构：

<ul id="container">
    <li data-genre="cricket">
        <img src="cricket-img.jpg" alt="Cricket Sport" />
        <span>Cricket Sport</span>
    </li>
    <li data-genre="boxing">
        <img src="boxing-img.jpg" alt="Boxing Sport" />
        <span>Boxing Sport</span>
    </li>
    <!-- 其他项... -->
</ul>

这样既满足了Filtrify插件的结构要求，又保留了你需要的多列布局效果。

内容的提问来源于stack exchange，提问作者Alex