.net Razor parser error

Question

So I have the following Razor code:

@foreach(var subMenuHead in Model)
{
    if(subMenuHead.SubItem.Count() > 0)
    {
        <text>
          <!--'@subMenuHead.ItemName' dropdown menu-->
        <div id="@subMenuHead.ItemName.ToLower()_dropdown" class="dropdown smallscreen_hide dropdown_menu">
        <ul class="dropdown">
        </text>
        foreach(var subMenuItem in subMenuHead.SubItem)
        {
            <text>
            <li class="dropdown">
                <a href="@subMenuItem.SubItemLink" class="dropdown">
                    @subMenuItem.SubItemName
                </a>
            </li>
            </text>
        }
        </ul>
        </div>
    }
}

being rendered as a partial in the following section of the home page:

@model IEnumerable<LangSite_151209.Models.MenuItem>

@{
    ViewBag.Title = "Test";
}

<h2>Test</h2>



@Html.Partial("../Shared/_Menu", Model)

Which itself is rendered in the following section of the layout page:

    <!-- The logo and constant contact data will be displayed in here. Also the regular text of other pages -->

    @RenderBody()

    <!-------------------------------------------------------------------------------------------------------->

When I run the code, I get a parser error:

Parser Error

Description: An error occurred during the parsing of a resource required to service this request. Please review the following specific parse error details and modify your source file appropriately. 

Parser Error Message: Encountered end tag "div" with no matching start tag.  Are your start/end tags properly balanced?


Source Error: 

Line 78:                 }
Line 79:                 </ul>
Line 80:                 </div>
Line 81:             }
Line 82:         }

When I run the code with the closing ul and div lines commented out, however, I can see the opening tags but not the closing tags, as follows:

        <div id="about_dropdown" class="dropdown smallscreen_hide dropdown_menu">
        <ul class="dropdown">
            <li class="dropdown">
                <a href="/Home/About" class="dropdown">
                    About us
                </a>
            </li>
            <li class="dropdown">
                <a href="/Home/Testimonials" class="dropdown">
                    Testimonials
                </a>
            </li>
          <!--'Apply' dropdown menu-->
        <div id="apply_dropdown" class="dropdown smallscreen_hide dropdown_menu">
        <ul class="dropdown">
            <li class="dropdown">
                <a href="/Home/About" class="dropdown">
                    About us
                </a>
            </li>
            <li class="dropdown">
                <a href="/Home/Testimonials" class="dropdown">
                    Testimonials
                </a>
            </li>
    <!-------------------------------------------------------------------------------------------------------->

Where the commented line of dashes below is the section after the @RenderBody() statement in the _Layout page.

Clearly the opening div and ul tags are there, so why am I getting the parser error when I put in the closing tags?

Answer 1

Based on your code, it doesn't look like you actually should need the <text> tags (as your transitions between code and HTML seem straight-forward enough for Razor to pick up on).

You might try removing the <text> tags as they can often cause some hiccups if they aren't necessary. You should be able to use the following without issue :

@foreach (var subMenuHead in Model)
{
    if (subMenuHead.SubItem.Count() > 0)
    {
        <!--'@subMenuHead.ItemName' dropdown menu-->
        <div id="@subMenuHead.ItemName.ToLower()_dropdown" class="dropdown smallscreen_hide dropdown_menu">
            <ul class="dropdown">
                @foreach (var subMenuItem in subMenuHead.SubItem)
                {
                    <li class="dropdown">
                        <a href="@subMenuItem.SubItemLink" class="dropdown">
                            @subMenuItem.SubItemName
                        </a>
                    </li>
                }
            </ul>
        </div>
    }
}