Question about nested code block declarations in R

Question

I've recently upgraded a project from MVC 1 to MVC 3 and now I'm trying out Razor.

In one View, I have a foreach code block, but the nested if statement does not seem to want the @ in front of it.

My original code was:

@foreach(var r in Model.Results) 
{
    string css = r.Result.Count() > 0 ? "fail" : "pass";

    <p class="@css"><strong>@r.Description</strong></p>

    @if(r.Result.Count() > 0) 
    {
        <p>Count: @r.Result.Count()</p>
        <table>
            <thead>
                <tr>
                    <th>ID</th><th>Title</th><th>Description</th>
                </tr>
            </thead>
            <tbody>
            @foreach(var e in r.Result) {
                <tr><td>@e.Id</td><td>@e.Title</td><td>@e.Description</td></tr>
            }
            </tbody>
        </table>
    }
}

I'll get a runtime error with @if that says: Unexpected "if" keyword after "@" character. Once inside code, you do not need to prefix constructs like "if" with "@".

If I remove the @ the code runs fine. I expected to need the @ because of the HTML immediately preceding it. What confuses me more is that I do need the @ before the nested foreach. What are the rules in play here?

Answer 1

The nested foreach is inside of HTML (which happens to be inside of other code).

To go from markup to code, you need an @.
It's only unnecessary when directly nesting code blocks.

Answer 2

Within any parentheses in razor it expects a matching start and end end tag. Thats how the parser works.

So far example the following is valid:

@for (var i = 0; i < 10; i++) { 
<p>
    @i.ToString()
</p>
}

And this is not:

@for (var i = 0; i < 10; i++) { 
<p>
   @i.ToString()
</p>
@if (i == 2) { 
 <p>2</p>
}
}

To get around this you can place it within a <text> block like:

@for (var i = 0; i < 10; i++) { 
<text>
<p>
   @i.ToString()
</p>
@if (i == 2) { 
 <p>2</p>
}
</text>
}

So in your case it would become:

@foreach(var r in Model.Results) 
{
  @string css = r.Result.Count() > 0 ? "fail" : "pass";
<text>

  <p class="@css"><strong>@r.Description</strong></p>

  @if(r.Result.Count() > 0) 
  {
    <p>Count: @r.Result.Count()</p>
    <table>
        <thead>
            <tr>
                <th>ID</th><th>Title</th><th>Description</th>
            </tr>
        </thead>
        <tbody>
        @foreach(var e in r.Result) {
            <tr><td>@e.Id</td><td>@e.Title</td><td>@e.Description</td></tr>
        }
        </tbody>
    </table>
  }
</text>
}