How to list DB data like this in MVC4?

Question

It's easy to list data in rows.

controller:

return View(XXX.ToList());

View:

@model IEnumerable<MVCPROJECT.Models.TABLE1>

@foreach (var item in Model)
        {
            <table style="width: 100%">
            ........
            .....
            </table>
        }

But how can I list data like this in a viewpage in MVC4?

enter image description here

you can use [Kendo UI](http://demos.kendoui.com/web/grid/index.html) — Arian Sharifian, May 14 '13 at 16:03
its known as Pivoting .. Refer to these questions http://stackoverflow.com/questions/13147059/convert-list-to-a-pivot-list and http://stackoverflow.com/questions/963491/pivot-data-using-linq .. — Amitd, May 14 '13 at 16:06

Mathew Thompson · Accepted Answer · 2013-05-15T08:17:02.200

0

Without changing your data structure, you could simply do the following (assuming your Model doesn't have a lot of items in it):

EDIT: As requested in comments, I've added it so each header row only contains 5 items:

<table>
    <tr>
        @for (int i = 0; i < Model.Count(); i++)
        {
            <th>@item.Id</th>
            @if ((i + 1) % 5 == 0)
            {
                @:</tr><tr>
            }
        }
    </tr>
    @foreach(var item in Model)
    {
        <tr>
            <td>@* some data on item *@</td>
        </tr>     
    }
</table>

edited May 15 '13 at 08:17

answered May 14 '13 at 19:39

Mathew Thompson

55,877
15
127
148

thank you. but how to set 5-columns a row? the 6th item.id must display on the second row. – user951581 May 14 '13 at 23:40
@user951581 Check my updated edit. I've added a 5 column row. – Mathew Thompson May 15 '13 at 08:17

How to list DB data like this in MVC4?

1 Answers1