Razor Missing Matching Closing Tag

Question

I have some issues with a rather complex Table and Razor Tags.

I took the Most "@" out. (e.x. in front of the if etc.).

I played around for around 30 min and i can't seem to find the way to do it. I will always get error that / or similiar does not have any closing Tag. I played around with @: etc. but just can't get it.

If someone could help me out, and if someone could give a decent explanation of the @: tag, i'd highly appreciate that.

<div>
    if (Model.dsInfoUser.Tables[0].Rows.Count != 0)
    {
        <table>
            for (int i = 0; i < Model.dsInfoUser.Tables[0].Rows.Count; i++)
            {
                if (i % 2 == 1)
                {
                    <tr class="tableEven">
                }
                else
                {
                    <tr class="tableOdd">
                }
                    @*Picture*@
                    if (i == 0)
                    {
                        <td rowspan="@Model.dsInfoUser.Tables[0].Rows.Count" class="tblPicture"><img src="@Model.dsInfoUser.Tables[0].Rows[i][1]" /></td>
                    }
                    <td>
                        @Model.dsInfoUser.Tables[0].Rows[i][0].ToString()
                    </td> 
                    <td>
                        @Model.dsInfoUser.Tables[0].Rows[i][1].ToString()
                    </td> 
                </tr> 
                if (i == 5)
                {
                    <tr>
                        <td>
                            <text>Member Of:</text>
                        </td>
                            <td>
                                <table>
                                    for (int j = 0; j < Model.dsInfoUser.Tables[1].Rows.Count; j++)
                                    {
                                    if (j % 2 == 1)
                                    {
                                        <tr class="tableEven">
                                    }
                                    else
                                    {
                                        <tr class="tableOdd">
                                    }
                                        <td rowspan="3">
                                            <div style="width: 400px; overflow-y: scroll">

                                            </div>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                    </tr>
                }
        </table>
    }
</div>

For anyone who would like to know, here is the fixed version:

<div>
    @if (Model.dsInfoUser.Tables[0].Rows.Count != 0)
    {
        <table>
            @for (int i = 0; i < Model.dsInfoUser.Tables[0].Rows.Count; i++)
            {
                <tr class="@(i % 2 == 1 ? "tableEven" : "tableOdd")">
                    @if (i == 0)
                    {
                        <td rowspan="@Model.dsInfoUser.Tables[0].Rows.Count" class="tblPicture"><img src="@Model.dsInfoUser.Tables[0].Rows[i][1]" /></td>
                    }
                    <td>
                        @Model.dsInfoUser.Tables[0].Rows[i][0].ToString()
                    </td> 
                    <td>
                        @Model.dsInfoUser.Tables[0].Rows[i][1].ToString()
                    </td> 
                </tr> 
                    if (i == 5)
                    {
                    <tr>
                        <td>
                            <text>Member Of:</text>
                        </td>
                            <td>
                                <table>
                                    @for (int j = 0; j < Model.dsInfoUser.Tables[1].Rows.Count; j++)
                                    {
                                        <tr class="@(i % 2 == 1 ? "tableEven" : "tableOdd")">
                                            <td rowspan="3">
                                                <div style="width: 400px; overflow-y: scroll">
                                                </div>
                                            </td>
                                        </tr>
                                    }
                                </table>
                            </td>
                    </tr>
                    }
            }
        </table>
    }
</div>

Answer 1

You can't do it that way. Razor expects to be properly hierarchical. In particular, this is illegal:

if(condition)
{
    <foo>
}
else
{
    <foo>
}
</foo>

Even though we both know that would be a well-formed <foo></foo>, razor doesn't see it that way. It sees 2 unclosed <foo>, and a completely unrelated </foo> from nowhere.

In your case, the way to do this is:

<tr class="@(i % 2 == 1 ? "tableEven" : "tableOdd")">
   <td>...</td>
</tr>