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

时间:2013-05-08 08:54:26

标签: asp.net-mvc asp.net-mvc-4 razor nopcommerce

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

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

以下是目前使用的代码。

 <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 个答案:

答案 0 :(得分:1)

如果没有确切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++;
    }
}

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