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?

kristian · Accepted Answer · 2011-01-17 04:47:02Z

3

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>

answered Jan 17, 2011 at 4:47

kristian

23.1k8 gold badges53 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nivlam Over a year ago

This type of nesting is used on a large number of pages throughout our website. They all use the same styles/classes, but the model is slightly different on each page. I'm trying to avoid copy/pasting all this HTML and changing the column headers, etc....

hunter · Accepted Answer · 2011-01-17 04:52:34Z

3

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>

answered Jan 17, 2011 at 4:52

hunter

63.7k19 gold badges115 silver badges115 bronze badges

2 Comments

nivlam Over a year ago

I may have used a bad example. The Person and Child classes do not necessarily have the same properties. They may be completely different. This type of nesting is used on a large number of pages throughout our website. They all use the same styles/classes, but the model is slightly different on each page.

hunter Over a year ago

still, not a bad pattern... create a row DisplayTemplate for each type of thing you might need and you can easily wire it up

Ajay Rathi · Accepted Answer · 2011-01-17 07:22:59Z

0

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

answered Jan 17, 2011 at 7:22

Ajay Rathi

244 bronze badges

Comments

jgauffin · Accepted Answer · 2011-01-17 07:37:16Z

0

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

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

answered Jan 17, 2011 at 7:37

jgauffin

101k45 gold badges245 silver badges378 bronze badges

Collectives™ on Stack Overflow

ASP.NET MVC grid/table

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related