Unexpected "foreach" keyword after "@" character

Question

I have a partial view done in razor. When I run it I get the following error - it seems like Razor gets stuck into thinking I'm writing code everywhere.

Unexpected "foreach" keyword after "@" character. Once inside code, you do not need to prefix constructs like "foreach" with "@"

Here is my view:

@model IEnumerable<SomeModel>

<div>
@using(Html.BeginForm("Update", "UserManagement", FormMethod.Post)) {

    @Html.Hidden("UserId", ViewBag.UserId)

@foreach(var link in Model) {
    if(link.Linked) {
         <input type="checkbox" name="userLinks" value="@link.Id" checked="checked" />@link.Description<br />
    } else {
         <input type="checkbox" name="userLinks" value="@link.Id" />@link.Description<br />         
    }
}

}
</div>

Answer 1

Inside your using block, Razor is expecting C# source, not HTML.

Therefore, you should write foreach without an @.

Inside an HTML tag, Razor expects markup, so you would use @.

For example:

<div>
    <!-- Markup goes here -->
    @if (x) {
        //Code goes here
        if (y) {
            //More code goes here
            <div>
                <!-- Markup goes here -->
                @if (z) { }
            </div>
        }
    }
</div>

You only need an @ if you want to put code where it's expecting markup, or if you want to write output anywhere.

To put non-tag-like markup where it's expecting code, use @: or <text>.

Answer 2

I just want to add to SLaks answer that markup does not actually disturb the code section only within the markup, and as soon as the closing tag is reached it is reverting back to the markup section.

And similar is once within the markup, you need to use the @ symbol even after code.

Say for example you have the following:

@if(true) {
      <span>
            Markup section here, you need to include the @symbol
            @if(1 = 1)
            {
            }
            @if(2 = 2) @* The @ symbol here is required *@
            {
            }                
      </span>
      @: Code section back here, to output you need the "@:" symbol to display markup, although it is after the markup 
      if(false) @* Here the @ symbol isn't required *@
      {   
            some_statment; @* This will not be sent to the browser *@
            @display_someStament @* If we want to send it to the browser, 
                   then we need the @ symbol even in the code section *@
      }
}

Answer 3

My situation is the opposite of the above, but the logic is the same.

I'm using an iterator on the example razor page and I get the above error if my page starts directly with if and foreach syntax, like below

@if (Model != null)
{
        @foreach (var place in @Model.ToList())
        {
            <div class="swiper-slide">
                <figure class="popular-visits-card">
                    <img src="@place.ImgUrl" alt="">
                    <figcaption class="content">
                        <p class="title">
                            @place.Name
                        </p>
                        <p class="subtitle">
                            @place.Description
                        </p>
                    </figcaption>
                </figure>
            </div>

        }
}

Unexpected "foreach" keyword after "@" character. Once inside code, you do not need to prefix constructs like "foreach" with "@".

if I use an html tag after the if statement, I don't get this error anymore

@model List<Pupularity>
@{
    Layout = null;
}

@if (Model != null)
{
    <div>
        @foreach (var place in @Model.ToList())
        {
            <div class="swiper-slide">
                <figure class="popular-visits-card">
                    <img src="@place.ImgUrl" alt="">
                    <figcaption class="content">
                        <p class="title">
                            @place.Name
                        </p>
                        <p class="subtitle">
                            @place.Description
                        </p>
                    </figcaption>
                </figure>
            </div>

        }
</div>
}