MVC3 - 模型到HTML表

Question

我有一个OfferingCategoriesViewModel，其中包含OfferingCategoryModel的列表。

如何在视图中显示每个OfferingCategoryModel，使其看起来如下所示

注意：理想情况下，我希望每行显示的模型数量包含在OfferingCategoriesViewModel中。

我目前有这个：

<table>
    @foreach (var item in Model)
    {
        <tr>
            @foreach (Spice.TimeBank.Models.Category.OfferingCategoryModel category in Model.ListOfCategories)
            {
                <td>@category.Descripton</td>
            }
            -->
            @for (int i = item.Count(); i < 5; i++)
            {
                <td></td>
            }
        </tr>
    }
</table>

Answer 1

我知道您正在描述使用表格进行布局，但实际上我建议使用css <div>来布局float: left;块，以根据用户获得自行布局屏幕分辨率和窗口大小。

这样你就可以避免担心要显示多少列，并且html和样式变得更清晰。

事实上，如果你这样设计，你可以创建一个MVC DisplayTemplate渲染该模型的每个div，让MVC担心迭代你的项目。

编辑： Here您可以找到有关如何使用float的更多信息： 第4个教程可能特别有意义，因为它显示了几乎与您的布局相同的布局示例。

另外here's使用浮动元素的另一个非常好的信息来源，也有可视化示例。