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

Gal*_*len 2 css asp.net xhtml repeater list

我的转发器生成了一个需要按特定顺序出现的链接列表.意思是我需要我的列表才能显示出来

-Item1 -Item4
-Item2 -Item5
-Item3
Run Code Online (Sandbox Code Playgroud)

我发现的每个解决方案都涉及知道什么会出现在您的列表中并设置列表应该中断的类.我的问题是它可能是1到18个项目.

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

Dr.*_*ice 5

这是一个想法.这假设在换行前垂直显示的项目数是固定数,或者至少是服务器可以确定的数量(请参阅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>
Run Code Online (Sandbox Code Playgroud)

对于这类问题,我认为你需要做的是首先找出你想要的结果HTML,然后编写ASP代码来生成它.

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