MVC3-模型到HTML表

Question

I have an OfferingCategoriesViewModel which contains a list of OfferingCategoryModel's.

How I can display each OfferingCategoryModel in my view so it looks like below

Note: Ideally I want the number of models to display per row to be included in the OfferingCategoriesViewModel.

I currently have this:

<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

I know you are describing the use of tables for that layout, but I would actually recommend going for <div> blocks with a layout using css float: left; , to get an self-arranging layout depending on user screen resolution and window size.

That way you avoid having to worry about how many columns to display, and the html and styles becomes cleaner.

In fact, if you design it that way, you can just create a single MVC DisplayTemplate rendering each div for that model, and have MVC worry about iterating through your items.

EDIT: Here you can find more info on how to use float : The 4th tutorial might be of special interest, since it shows an example of a layout nearly identical to yours.

Also here's another very good source of good info using floating elements, with visual examples as well.