MVC View from a Nested List

Question

0.00/5 (No votes)

See more:

C#

public class ClassRoom
{
    public string TeacherName { get; set; }
    public List<Student> StudentNames { get; set; }
}

I want to display the below mentioned ViewModel dynamic data to my MVC view (html table) in such a way that (only pseudo view)

Expected output:

Teacher1 Teacher2 Teacher3
----------------------------------------
Student1 Student5 Student9
Student2 Student6 Student10
Student3 Student7 Student11
Student4 Student8 Student12

For that purpose I have created the view as below,

HTML

@model IEnumerable<ClassRoom>
@{
    ViewBag.Title = "My ClassRoom";
}

<h2>My My ClassRoom</h2>

<table class="table">
    <tr>
        @foreach (var item in Model)
        {
            <th>
                @Html.DisplayFor(modelItem => item.TeacherName)
            </th>
            foreach (var name in item.StudentNames)
            {
            <td>
                @Html.DisplayFor(modelItem => name.FirstName)
            </td>
            }
        }
    </tr>
</table>

But the output looks different from my expected result,

Actual Output:

Teacher1
--------
Student1
Student2
Student3
Student4

Teacher2
--------
Student5
Student6
Student7
Student8

Teacher3
--------
Student9
Student10
Student11
Student12

Please help me to achieve my expected output

Note: The class room list is dynamic list from database table

Posted 20-Mar-15 2:47am

Anoob Aliyar

Updated 20-Mar-15 23:27pm

Mario Z

v2

Add a Solution

2 solutions

Solution 2

Hi, I believe manchanx explained nicely what problem you are facing and how to solve it, but nevertheless I will just add another suggestion that you can use.
You can create a main table (like a sort of a container), that would have a single row and in each of that row's cells you would have a nested table, so something like this:

HTML

@model IEnumerable<ClassRoom>
@{
    ViewBag.Title = "My ClassRoom";
}
 
<h2>My My ClassRoom</h2>
<table>
    <tr>
    @foreach (var item in Model)
    {
        <td>
            <table class="table">
                <tr>
                    <th>
                        @Html.DisplayFor(modelItem => item.TeacherName)
                    </th>
                </tr>
                @foreach (var name in item.StudentNames)
                {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => name.FirstName)
                    </td>
                </tr>
                }
            </table>
        </td>
    }
    </tr>
</table>

Posted 20-Mar-15 23:29pm

Mario Z

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

manchanx · Accepted Answer · 2015-03-20T06:08:00

You loop through the items in the Model which are the students of one teacher, respectively. And in that loop you loop through the students. So It can only result in a list with one row.

To achieve your tabular presentation you have to output the first student of the first student-list, then the first student of the second student list, etc. Then in the next row, the second student of the first student list, then the second student of the second student list, etc.

One way to achieve that would be to create a list of student lists and then instead of using two foreach-loops (with the outer one iterating the student-lists and the inner one the students of one list) to use two for-loops with the outer one iterating the rows and the inner one iterating the student-lists.
If it's possible that student-lists have different amounts of students, you would have to check if the current index of the outer for-loop is valid for the current student-list (which wasn't neccessary before because of the foreach-loops).