asp.net-mvc - ASP.NET MVC3 模板。试图将数据分成三列

Question

我认为这是一个非常简单的问题，但我是 ASP.NET MVC 的新手。

我从模型中检索数据，但我想将其分成等长的三列，或者尽可能接近等长。

这些 for 循环没有起到作用，所以我对如何在模板中最好地做到这一点有点迷茫。

谢谢。

编辑：我以更好的方式解决了它。它可以像这样在css中完成：

    <div class="topic_content">
        <div>
        <ul>
            @for (int i = 0; i < Model.Topics.Length; i++)
            {
                <li><a href="javascript:void(0)" class="company_topic" data-popularity="@Model.Topics[i].Popularity" data-topicId="@Model.Topics[i].Id">@Model.Topics[i].Name.ToLower()</a></li>
            }
        </ul>
        </div>

    </div>

然后在CSS中我设置：

.topic_content ul { width: 100%; }
.topic_content ul li { list-style: none; text-align: left; float:left; width:33%; }

Answer 1

If you want to do it in C#, here's how I would recommend doing it:

@{
    var topics = Model.Topics;
    var takeCount = Model.Topics.Count() / 3;
}
@for( i=0; i<3; i++ ) {
    <div class="topic_content">
        <div>
        <ul>
            @foreach( var topic in topics.Take( takeCount ) )
            {
                <li><a href="javascript:void(0)" class="company_topic" data-popularity="@topic.Popularity" data-topicId="@topic.Id">@topic.Name.ToLower()</a></li>
            }
            @{ topics = topics.Skip( takeCount ); }
        </ul>
        </div>

    </div>
}

Answer 2

这是一篇很好的 CSS 技术文章来完成它。

http://www.alistapart.com/articles/multicolumnlists/