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

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

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

Answer 2

如果你想在C＃中这样做，我建议你这样做：

@{
    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>
}