Razor Partial View throwing Error unexpected <

Question

I have a razor Template which calls a partial view which in turns call another partial view.

Template -> Introduction Row (partial View) -> (partial views that are in that row) Slider Partial, Box 1 - 4 partials.

When I run the code I get an unhelpful error marked in the code below: INTRODUCTION ROW

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage
<div class="wrapper row3">
    <div id="container">
        <!-- ################################################################################################ -->
        <div id="homepage" class="clear">
            <div class="one_third first">
                <section class="main_slider">
                    @Html.Partial("IntroSlider")
                </section>


            </div>


            <div class="two_third">
                <div id="intro">
                    <ul class="nospace center clear">
                        <li class="one_quarter first">
                  <!-- THE EXCEPTION IS THROWN ON THE NEXT LINE -->
                            @Html.Partial("IntroBoxOne")
                        </li>
                        <li class="one_quarter">
                            @Html.Partial("IntroBoxTwo")
                        </li>
                        <li class="one_quarter">
                            @Html.Partial("IntroBoxThree")
                        </li>
                        <li class="one_quarter">
                            @Html.Partial("IntroBoxFour")
                        </li>
                    </ul>
                </div>

            </div>
        </div>
        <!-- ################################################################################################ -->
        <div class="clear"></div>
    </div>
</div>

I am assuming the error is in the IntroBoxOne partial which follows: IntroBoxOne

@inherits Umbraco.Web.Mvc.UmbracoTemplatePage


<!--TODO: If no box'N'Content should we show the box at all? And if Not what size do we change any shown box to? -->
<article class="boxholder rnd8">

    <!-- Only show the top Image if one has been selected -->
    @{
        if (!string.IsNullOrEmpty(@Umbraco.Field("topImageBoxOne").ToString()))
        {
            dynamic dynamicMediaItem = Umbraco.Media(Umbraco.Field("topImageBoxOne").ToString());
            <div class="push30"><img><img style="max-width:30px;max-height:30px;" src="@dynamicMediaItem.Url" alt="@Umbraco.Field("boxOneAltText")"></div>
        }
    }


    <!-- Only show the Image if one is selected -->

    @if (!string.IsNullOrEmpty(Umbraco.Field("boxOneIcon").ToString()))
    {
        dynamic dynamicMediaItem = Umbraco.Media(Umbraco.Field("boxOneIcon").ToString());
        <span class="push30"><img style="max-width:30px;max-height:30px;" src="@dynamicMediaItem.Url" alt="@Umbraco.Field("boxOneAltText")">@Umbraco.Field("boxOneTitle")</span>
    }

    <!-- Else only show the Title -->
    else
    {

    <span class="push30">@Umbraco.Field("boxOneTitle")</span>
    }


    <!-- Show the body content -->
    <p>@Umbraco.Field("boxOneContent")</p>

    <!-- Only show the button if has text. -->
    @{if (!string.IsNullOrEmpty(Umbraco.Field("boxOneIcon").ToString()))
    <footer><a href="#" class="button small gradient green rnd5">@Umbraco.Field("boxOneButtonText")</a></footer>
    }

</article>

Knowing me and knowing I haven't done this kind of coding in ages the error is probably in the @If else block but I have tried numerous things to sort it; all to no avail.

UPDATE ONE:

The error is definitely in this part of the code:

@if (!string.IsNullOrEmpty(Umbraco.Field("boxOneIcon").ToString()))
    {
        dynamic dynamicMediaItem = Umbraco.Media(Umbraco.Field("boxOneIcon").ToString());
        <span class="push30"><img style="max-width:30px;max-height:30px;" src="@dynamicMediaItem.Url" alt="@Umbraco.Field("boxOneAltText")">@Umbraco.Field("boxOneTitle")</span>
    }

    <!-- Else only show the Title -->
    else
    {

    <span class="push30">@Umbraco.Field("boxOneTitle")</span>
    }

UPDATE TWO:

The Above IF ELSE statement throws an error but a double if statement like this succeeds:

@{
        if (!string.IsNullOrEmpty(Umbraco.Field("boxOneIcon").ToString()))
        {
            dynamic dynamicMediaItem = Umbraco.Media(Umbraco.Field("boxOneIcon").ToString());
            <span class="push30"><img style="max-width:30px;max-height:30px;" src="@dynamicMediaItem.Url" alt="@Umbraco.Field("boxOneAltText")">@Umbraco.Field("boxOneTitle")</span>
        }

    <!-- Else only show the Title -->
    }

    @{
        if (string.IsNullOrEmpty(Umbraco.Field("boxOneIcon").ToString()))
        {
            <span class="push30">   @Umbraco.Field("boxOneTitle") </span>
        }

    <!-- Else only show the Title -->
    }

Clearly it is the syntax of the ELSE statement within the IF ELSE block that is wrong - but I have not found the solution other than two If statements.

Anyone spot the not so deliberate mistake?

Answer 1

I'm pretty sure the culprit here is the fact that your code reads:

@if (...) { ... }
<!-- Else only show the Title -->
else { ... }

and between @if and else blocks you should use C# comment syntax and not XML comment syntax. So this should fix the problem:

@if (...) { ... }
// Else only show the Title
else { ... }