How to create html table in ASP.NET MVC5 using Razor View Engine

Question

I need to create a table which looks like:

     S1    S2    S3    S4    S5
C1  C1S1  C1S2  C1S3  C1S4  C1S5
C2  C2S1  C2S2  C2S3  C2S4  C2S5
C3  C3S1  C3S2  C3S3  C2S4  C3S5
C4  C4S1  C4S2  C4S3  C3S4  C4S5
C5  C5S1  C5S2  C5S3  C4S4  C5S5

but following code:

<table>

        @foreach (var client in this.Model.Clients)
        {
            <tr>
                <td >@client.Name</td>
                @foreach (var session in this.Model.Sessions)
                {
                    foreach (var data in this.Model.ClientSessions)
                    {
                        if (data.ClientId== client.ClientId&& data.SessionId == session.SessionId)
                        {
                            <td>@data.TotalClientSessions</td>
                         }
                    }
                }
            </tr>    
        }

    </table>

produce:

//here should be missing header 
C1  C1S1  C1S2  C1S3  C1S4  C1S5
C2  C2S1  C2S2  C2S3  C2S4  C2S5
C3  C3S1  C3S2  C3S3  C2S4  C3S5
C4  C4S1  C4S2  C4S3  C3S4  C4S5
C5  C5S1  C5S2  C5S3  C4S4  C5S5

I don't know how to smartly modify this code to get headers. I would add another foreach at the bottom to create header lines this way:

<tr>
    <th></th>
    @foreach (var session in this.Model.Sessions)
    {
    <th>@Session.Id</th>
    }
</tr>

but I believe, that there is other, more smarter solution to achieve that. Any help will be appreciated.

Your solution looks fine to me. What makes you unhappy about it? — Andrei
– Andrei, Commented Aug 2, 2018 at 15:07
this code, don't produce the headers. i mean first row (s1 s2 s3 s4 s5) I don't know how to achieve that, because no matter how I modify it, compiler still complain about syntax errors... — tylkonachwile
– tylkonachwile, Commented Aug 2, 2018 at 15:10
Wait, so the second snippet produces a syntax error? What is the error, on which line? — Andrei
– Andrei, Commented Aug 2, 2018 at 15:11
No, second snippet does not produce errors. But I would rather get rid of this additional snippet. Is possible to draw header names without second snippet? (I am looking for solution using only three nested loops in first snippet) — tylkonachwile
– tylkonachwile, Commented Aug 2, 2018 at 15:14

Andrei · Accepted Answer · 2018-08-02 15:21:41Z

1

Since HTML tables are rendered row-by-row, not column by column, you have to iterate over clients, and thus there is no way to produce a header row as a part of this loop. Without ugly hacks that is. Because you could potentially insert a dummy client in the list that would signify the header row, but that sounds really ugly and I would not recommend going this way.

You proposed solution with a separate foreach over sessions looks totally fine, optimal and readable to me. I would approach it the same exact way.

answered Aug 2, 2018 at 15:21

Andrei

56.8k10 gold badges92 silver badges114 bronze badges

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

Collectives™ on Stack Overflow

How to create html table in ASP.NET MVC5 using Razor View Engine

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related