如何使 ASP.NET ListView 水平重复分组项目？答案

【问题标题】：How do I make an ASP.NET ListView repeat grouped items horizontally?如何使 ASP.NET ListView 水平重复分组项目？
【发布时间】：2011-08-12 10:49:16
【问题描述】：

我有一个 ASP ListView 显示一些 GroupItemCount 设置为 3 的项目：

A  D  G
B  E  H
C  F  I

即它将它们垂直分组在列中。如何让它显示，以便它水平分组？

A  B  C
D  E  F
G  H  I

这是我的 ListView 代码：

<asp:ListView ID="ImagesListView" GroupItemCount="4" runat="server" DataSourceID="EntityDataSource1" GroupPlaceholderID="GroupsGoHere" ItemPlaceholderID="ItemsGoHere" Orientation="Horizontal">
    <LayoutTemplate>
        <div runat="server" id="Main" class="ImagePageMainLayout">
            <div id="ItemsDataPager" runat="server" class="ImagePageHeader">
                <asp:DataPager ID="ImagesDataPager" runat="server" PageSize="16" PagedControlID="ImagesListView">
                    <Fields>
                        <asp:NextPreviousPagerField ButtonType="Link" ShowFirstPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
                        <asp:NumericPagerField />
                        <asp:NextPreviousPagerField ButtonType="Link" ShowLastPageButton="True" ShowNextPageButton="False" ShowPreviousPageButton="False" />
                    </Fields>
                </asp:DataPager>
            </div>
            <div runat="server" id="GroupsGoHere">
            </div>
        </div>
    </LayoutTemplate>
    <GroupTemplate>
        <div runat="server" id="Images" class="ImagePageGroup">
            <div runat="server" id="ItemsGoHere">
            </div>
        </div>
    </GroupTemplate>
    <ItemTemplate>
        <div id="Item" align="center" runat="server" class="ImagePageItem">
        </div>
    </ItemTemplate>
    <ItemSeparatorTemplate>
        <br />
    </ItemSeparatorTemplate>
</asp:ListView>

【问题讨论】：

标签： .net asp.net css listview html

【解决方案1】：

这是由您在模板中使用<DIV> 的方式引起的。

按照您的操作方式，每组 3 个放入 <DIV> 中，并且由于您在 <ItemSeparatorTemplate> 中的 <br />，每个项目都位于该 div 中的另一个下方。
然后下一组 3 排在最后一组 3 旁边。

您应该尝试的解决方案是删除<ItemSeparatorTemplate> ~~并修改您的<GroupTemplate> 以在每个组后添加<br />：~~

<GroupTemplate>
        <div runat="server" id="Images" class="ImagePageGroup">
            <div runat="server" id="ItemsGoHere">
            </div>
        </div>
        <br />
</GroupTemplate>

还要注意，在microsoft's exemple 中，他们使用<table> 来格式化列表视图。

更新：
我测试了您的代码，您的问题是 CSS 问题。通过将width:250px; 放入ImagePageGroup 类和width:50px; float: left; 放入ImagePageItem 类，我得到了很好的结果，但我不知道你的CSS。有了这些风格，你根本不需要<br />，这就是我把它条纹化的原因。

您可能希望在纯 HTML 中测试您的 div 布局。当然，最简单的解决方案是切换到表格布局。 使用表格显示表格数据时，表格并不邪恶，但这是另一回事。

【讨论】：

@Simon 我进行了编辑，因为<br /> 超出了图像 div。
感谢您的回复。这个标记有点奇怪，每一列从前一列向下移动一行，效果类似于阶梯式。删除
解决了这个问题，但项目仍然垂直分组。
@Simon 你的问题是 CSS 问题，我编辑了答案来解释它。
你说得对，但我不知道如何让它为我正常工作。无论我做什么，它都会垂直显示。我已将其更新为使用表格（GroupTemplate 中的标记和 ItemTemplate 中的标记），它工作正常。非常感谢您的帮助。
@Simon 欢迎您。如果您无法接受 Table 解决方案，您可以将 CSS 与生成的 HTML 一起发布在另一个问题中，以便 CSS 专家能够对其进行调试。