Parsing error in Umbraco 7 partial view : missing closing brace despite all brace pairs being present

Question

I'm currently working on trying to get to grips with Umbraco and the use of Razor however i'm finding the inline nature of the Razor code particularly difficult. For some reason, when I compile my partial view below (which outputs a Bootstrap carousel to the screen on the page in which it is called) i'm getting the following compilation error:

Line 3:  @if (Model.Content.HasValue("bannerImages")){  
Parser Error Message: The if block is missing a closing "}" character.  Make sure you have a matching "}" character for all the "{" characters within this block, and that none of the "}" characters are being interpreted as markup.

However I've checked all of my tags in Notepad++ (as this is better at identifying matching tags that Visual Studio) and all of the braces in my document tie up so this leads me to believe that I may be implementing some of the inline Razor code blocks incorrectly. Any ideas?

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
@if (Model.Content.HasValue("bannerImages")){   
    var bannerImagesList = Model.Content.GetPropertyValue<string>("bannerImages").Split(new string[]{","}, StringSplitOptions.RemoveEmptyEntries).Select(int.Parse);
    var bannerImagesCollection = Umbraco.TypedMedia(bannerImagesList).Where(x => x != null);
    var imageCount = 0;

    <div id="carousel" class="carousel slide" data-ride="carousel">
      <!-- Indicators -->
      <ol class="carousel-indicators">
        <li data-target="#carousel" data-slide-to="0" class="active"></li>
        <li data-target="#carousel" data-slide-to="1"></li>
        <li data-target="#carousel" data-slide-to="2"></li>
        <li data-target="#carousel" data-slide-to="3"></li>
      </ol>

      <!-- Wrapper for slides -->
      <div class="carousel-inner">
        @foreach (var bannerImage in bannerImagesCollection){
            if (@imageCount < 1){
                <div class="item active">
            }else{
                <div class="item">
            }
                    <img src="@bannerImage.Url" alt="@bannerImage.Id" />
                </div>
        }
      </div>
    </div>  
}

Answer 1

Your problem is in the foreach section of the code. Your div needs to be enclosed inside if and else statements.

So replace your foreach:

@foreach (var bannerImage in bannerImagesCollection)
{
    if (@imageCount < 1){
        <div class="item active">
    }else{
        <div class="item">
    }
        <img src="@bannerImage.Url" alt="@bannerImage.Id" />
        </div>
    }
}

With this one and it will work:

@foreach (var bannerImage in bannerImagesCollection)
{
    var cssClass = imageCount < 1 ? "item active" : "item";

    <div class="@cssClass">
        <img src="@bannerImage.Url" alt="@bannerImage.Id" />
    </div>
}

Edit (using if else)

@foreach (var bannerImage in bannerImagesCollection)
{
    if (imageCount < 1)
    {
        <div class="item active">
            <img src="@bannerImage.Url" alt="@bannerImage.Id" />
        </div>
    }
    else
    {
        <div class="item">
            <img src="@bannerImage.Url" alt="@bannerImage.Id" />
        </div>
    }
}