Question

我的转发器生成了一个需要以特定顺序出现的链接列表。意思是我需要我的列表显示如此

-Item1 -Item4
-Item2 -Item5
-Item3

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

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

Answer 1

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

<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代码来生成它。

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

Answer 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>

ASP.NET垂直包装由转发器生成的列表

2 个答案: