ASP.NET 垂直包装由中继器生成的列表答案

【问题标题】：ASP.NET Vertically wrapping a list generated by a repeaterASP.NET 垂直包装由中继器生成的列表
【发布时间】：2015-02-05 01:16:09
【问题描述】：

我的转发器生成了一个需要按特定顺序出现的链接列表。这意味着我需要让我的列表看起来像这样

-Item1 -Item4
-Item2 -Item5
-Item3

我找到的每个解决方案都涉及了解列表中的内容以及设置列表应该中断的类。我的问题是它可能是 1 到 18 个项目。

所以我的问题是，有没有一种好的、简单的方法来垂直包装使用 ASP.NET 中继器控件动态生成的列表？

【问题讨论】：

这个问题的答案似乎可能涉及 HTML 和 CSS。您可能需要考虑添加这些标签。

标签： asp.net css list xhtml repeater

【解决方案1】：

这是一个想法。这假定在换行之前要垂直显示的项目数是一个固定数字，或者至少是一个可由服务器确定的数字（请参阅 VerticalWrapLimit 常量）。 IE。与用户浏览器的高度无关。

<script runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        rptVerticalWrap.DataSource = new[] {
            new { ID = 1, Name = "ABC" },
            new { ID = 2, Name = "BCD" },
            new { ID = 3, Name = "CDE" },
            new { ID = 4, Name = "DEF" },
            new { ID = 5, Name = "EFG" },
            new { ID = 6, Name = "FGH" },
            new { ID = 7, Name = "GHI" },
            new { ID = 8, Name = "HIJ" },
        };
        rptVerticalWrap.DataBind(); 
    }

    int count;
    const int VerticalWrapLimit = 5;
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>

    <% count = 0; %>
    <div style="float:left;">
            <asp:Repeater ID="rptVerticalWrap" runat="server">
                <ItemTemplate>
                    <%
                        if (count % VerticalWrapLimit == 0 && count > 0)
                        {
                            %></div><div style="float:left;"><%                     
                        }
                        count++;
                    %>
                    <div>
                        <asp:Label runat="server" Text="ID: " /><asp:TextBox runat="server" Text='<%# Eval("ID") %>' />
                        <asp:Label runat="server" Text="Name: " /><asp:TextBox runat="server" Text='<%# Eval("Name") %>' />
                    </div>
                </ItemTemplate>
            </asp:Repeater>
    </div>
    </div>
    </form>
</body>
</html>

对于这类问题，我认为您需要做的是首先确定您想要生成的 HTML 的样子，然后编写 ASP 代码来生成它。

在这种情况下，我将每个垂直列的数据包装在 style="float:left;" 中。我使用了一个类范围的“count”变量来确定何时需要关闭当前的 div 并开始一个新的。 count 变量必须是类级别的变量，因为 Repeater 的 ItemTemplate 的内容与页面的其余部分具有不同的范围。

【讨论】：

今晚我会尝试实现这一点，如果我有运气，我会将此标记为答案。谢谢。
这适用于您描述的情况 - 但我最终以固定宽度水平包装列表项，因此它们看起来在两列中。很难确定列表有多大，因为每次都不是固定数量的项目。

【解决方案2】：

我已经通过使用带有样式的div标签成功实现了，如下代码所示：

<asp:Repeater ID="rptAnswers" runat="server">
	<ItemTemplate>
		<div style="width:100%;display:table-row;">
			<div style="display: table-cell; padding: 5px; margin-left: 25px">
				<asp:Label ID="lblOrdPos" runat="server" ClientIDMode="Predictable" Text='<%# Eval("ansLetter")%>'></asp:Label>)
			</div>
			<div style="display: table-cell; padding: 5px;" class="ansCtrl">
				<asp:RadioButton ID="gvrbAns" ClientIDMode="Predictable" CssClass="gvrbAnswers" GroupName="gvrbAnswers" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
				<asp:CheckBox ID="gvchkAns" ClientIDMode="Predictable" CssClass="gvchkAnswer" runat="server" Checked='<%# Eval("ansVal") = 1 %>' />
				<asp:RadioButtonList ID="rblAnswer" ClientIDMode="Predictable" CssClass="ansTrueFalse" runat="server">
					<asp:ListItem Value="1" Text="True"></asp:ListItem>
					<asp:ListItem Value="0" Text="False"></asp:ListItem>
				</asp:RadioButtonList>
			</div>
			<div style="display: table-cell; padding: 5px;">
				<asp:Label runat="server" ID="lblAnswerTxt" ClientIDMode="Predictable" Text='<%# Eval("txt") %>'></asp:Label>
			</div>
		</div>
		
	</ItemTemplate>
</asp:Repeater>

【讨论】：