How can I render this data, into a Grid, in an ASP.NET MVC view?

Question

Hi folks,

I want to copy StackOverflow's TAG's page, where they have a list of Tags (or whatever) and display them into a few columns, with the first column being the first 10 records, the second column being record 11->20 .. etc.

and of course I have my data already paged.

I'm not sure what this type of view is called? is this a grid view? to me, grid views are like excel sheets ... with all the data in rows and the columns are for filtering/sorting.

Can anyone help?

Answer 1

If you check the HTML source of that page, you'll see that SO does it using a table. You can do that with some sort of grid helper, or just straight in the View if you wanted.

You can do that very simply in the view by just figuring out how many columns you want, and how many items you want in each row. Enumerate the whole result set, and every X items (X being the max-per-column value) create a new TD tag. Of course, then make sure each page of data does not exceed X * COLUMNS

But since you don't want to do it with tables, this answer probably won't help you.

Answer 2

You could use a GridView, but you could also get away with using a ListView, which allows for a little more control over your markup. You could, for example, do something like this:

        <asp:ListView>
            <LayoutTemplate>
                <table border="0" cellpadding="1">
                    <asp:ContentPlaceHolder ID="itemPlaceHolder" runat="server" />
                </table>
            </LayoutTemplate>
            <ItemTemplate>
                <tr>
                    <td>
                        <asp:Label runat="server" class="lbl_tag"><%#Eval("Tag") %></asp:Label>
                    </td>
                    <td>
                        <asp:Label runat="server" class="lbl_tag"><%#Eval("Tag") %></asp:Label>
                    </td>
                    <td>
                        <asp:Label runat="server" class="lbl_tag"><%#Eval("Tag") %></asp:Label>
                    </td>
                </tr>
            </ItemTemplate>
        </asp:ListView>

This would give you three columns of "tags". ListView also has some nice properties like the AlternatingItemTemplate. And if you don't want your ListView to render as a table, you can simply modify your template with your own markup. Of course, as I said, you could just as easily use a GridView for this type of thing.