asp.net - ASP.NET DataList - 在重复水平和使用流布局时定义“列/行”

Question

这是我的数据列表：

<asp:DataList id="DataList" Visible="false" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" runat="server">
        [Contents Removed]
</asp:DataList>

这会生成将每个项目包装在跨度中的标记。从那里，我想将这些跨度中的每一个分成三列的行。理想情况下，我想要这样的东西：

<div>
 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
</div>
<div>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
</div>
[etc]

我能做到的最接近的是将RepeatColumns设置为“3”，然后<br>在DataList中的每三个项目之后插入一个。

 <span>Item 1</span>
 <span>Item 2</span>
 <span>Item 3</span>
<br>
 <span>Item 4</span>
 <span>Item 5</span>
 <span>Item 6</span>
<br>

这让我有点接近，但真的没有办法 - 我仍然无法按照我想要的方式控制布局。

任何人都可以建议一种方法来改善它吗？如果我可以实现上面的例子——那将是完美的，但是我也会接受一个不太优雅的解决方案——只要它比<br>（例如插入 a<span class="clear"></span>而不是<br>）更灵活。

Answer 1

如果您出于某种原因确实需要使用数据列表而不是将其实现为中继器，则可以尝试执行以下操作：

<asp:DataList ID="dataList" runat="server" RepeatDirection="Horizontal" Width="100%" HorizontalAlign="Justify" RepeatLayout="Flow" OnItemDataBound="dataList_ItemDataBound">
    <HeaderTemplate>
        <div>
    </HeaderTemplate>
    <SeparatorTemplate>
        </div><div>
    </SeparatorTemplate>
    <ItemTemplate>
        <%# Container.DataItem %></ItemTemplate>
    <FooterTemplate>
        </div></FooterTemplate>
</asp:DataList>

---

protected void dataList_ItemDataBound(object sender, DataListItemEventArgs e) {
    if (e.Item.ItemType == ListItemType.Separator) {
        if ((e.Item.ItemIndex + 1) % 3 != 0) {
            e.Item.Controls.Clear();
        }
    }
}

Answer 2

我可能会感到困惑，但为什么不直接使用中继器和自定义项目模板呢？

Answer 3

您可以使用 CSS 实现所需的布局，而无需更改原始生成的标记。由于 span 标签默认显示为内联，切换到 inline-block 并在这些 span 上指定 33% 的宽度应该可以解决问题。

或者更具体地说，将 DataList 控件的 CssClass 属性设置为诸如“threecolumns”之类的值。

定义以下 css 样式：

<style type="text/css">
.threecolumns span 
{
    display: inline-block;
    width: 33%;
}
</style>

VS2008 可能会告诉您 inline-block 不是 display 属性的有效设置。我不会太担心，因为几乎每个浏览器都支持它。

Answer 4

添加这个 RepeatColumns="100000"