如何在ASP.net中的列中显示数据？

I have some data which should be displayed in 5 columns. The current code works well and the data is picked from the database and displayed correctly in the first 5 columns (each column has 7 data).

我有一些数据应该显示在5列中。当前代码运行良好，数据从数据库中选取并在前5列中正确显示（每列有7个数据）。

But after the fifth column the next column should start below the first column, instead it starts from the second column and goes on.

但是在第五列之后，下一列应该从第一列开始，而不是从第二列开始并继续。

Below is the code currently used.

以下是当前使用的代码。

 <li><a href="/c/@Model.CatList[0].Id/all/@Model.CatList[0].Name" class='white'>@Model.CatList[0].Name</a></li>

                      @for (int i = 1; i < Model.CatList.Count(); i++)
                      {
                            <li><a href="/c/@Model.CatList[i].Id/all/@Model.CatList[i].Name" class='white'>@Model.CatList[i].Name</a></li>


                          if (i % Model.FooterCount == 0)
                          {

                               @Html.Raw("</ul><ul>");
                                <li class='itemCaption f17o'>&nbsp;</li>
                          }

                      }

1 个解决方案

#1

Without more details of the exact html, you'll want to add a style="clear: left" on the first block for each row of your display. Something like:

如果没有确切html的更多细节，您将需要在显示器的每一行的第一个块上添加style =“clear：left”。就像是：

@{
    int cellCount = 1;
    int columns = 5;

    var items = Model.CatList.Take(Model.FooterCount);
}

@while(items.Count > 0)
{
    string style = "float:left;"
    if(cellCount % columns == 0)
    {
        style += "clear:left;"
    }

    <ul style='@style'>
        @if (cellCount != 1)
        {
            <li class='itemCaption f17o'>&nbsp;</li>
        }

        @foreach(item in items)
        {
            <li>
                <a href="/c/@item.Id/all/@item.Name" class='white'>@item.Name</a>
            </li>
        }
    </ul>

    @{
    items = Model.CatList.Skip(cellCount * Model.FooterCount).Take(Model.FooterCount);
    cellCount++;
    }
}

I didn't like the embedded raw html closing the ul tags, so I modified the code to avoid that. I think it also expresses the intent more clearly.

我不喜欢关闭ul标签的嵌入式原始html，所以我修改了代码以避免这种情况。我认为它也更清楚地表达了意图。

#1