ASP.NET MVC grid/table

Question

public class Person
{
    public string First { get; set; }
    public string Last { get; set; }
    public int Age { get; set; }
    public IEnumerable<Child> Children { get; set; }
}

public class Child
{
    public string First { get; set; }
    public string Last { get; set; }
    public int Age { get; set; }
}

I'm searching for a way to render a table from my model, which is of type IEnumerable<Person> . I'm trying to generate the following table:

<table>
    <tr class="person">
        <td>First 1</td>
        <td>Last 1</td>
        <td>1</td>
    </tr>
    <tr class="child">
        <td>First 1</td>
        <td>Last 1</td>
        <td>1</td>
    </tr>
    <tr class="child">
        <td>First 2</td>
        <td>Last 2</td>
        <td>2</td>
    </tr>
    ...
    ...
</table>

Each person is a row and each of their children would be individual rows under the person row. This would repeat for each person in IEnumerable<Person> .

Are there any grids or components that generate a table like this? I found MvcContrib's grid component , but it doesn't appear to be able to generate these child rows. Is there a way to extend MvcContrib's grid to do this?

Answer 1

If all you need in your output is a table, would something as simple as a nested loop work for you?

<table>
<% foreach (Person person in Model)
   { %>

   <tr class="person">
    <td><%: person.First %></td>
    <td><%: person.Last %></td>
    <td><%: person.Age %></td>
   </tr>

   <% foreach (Child child in person.Children) { %>

   <tr class="child">
    <td><%: child.First %></td>
    <td><%: child.Last %></td>
    <td><%: child.Age %></td>
   </tr>

   <%} %>

<%} %>
</table>

Answer 2

I would make them both implement from IPerson and then create a DisplayTemplate that was strongly typed to IPerson then loop through and call it

public interface IPerson
{
    string First { get; set; }
    string Last { get; set; }
    int Age { get; set; }
}

---

<%@ Control Language="C#" Inherits="ViewUserControl<IPerson>" %>

<tr class="<%=Model.GetType().Name.ToLower() %>">
    <td><%: Model.First %></td>
    <td><%: Model.Last %></td>
    <td><%: Model.Age %></td>
</tr>

---

<table>
<% foreach (Person person in Model) { %>
    <%=Html.DisplayFor(m => person, "IPersonRow") %>
    <% foreach (Child child in person.Children) { %>
    <%=Html.DisplayFor(m => child, "IPersonRow") %>
    <% } %>
<% } %>
</table>

Answer 3

That good Question!! Can we do following

Parent child Parent 1 child 1, child2 Parent 2 child 3

If yes,

Create a user control that will print all Childs for a parent, use this control for rendering the child column.

Please let me know if you have any other Query.

Let's learn together

Answer 4

You can use jQuery plugins. The following is quite good:

• http://www.datatables.net
• http://www.trirand.com/blog/

Both are open source. There are a commercial version of jqGrid which gives you MVC helpers to easily create the tables.