Why does Razor not like this?

Question

Ive got a mega annoying problem I have a view with:

@{

        if(ViewBag.Section == "Home")
        {
           <div id="headerfrontPage">   
        }
        else
        {
            <div id="header">   
        }


     }

And I get a compilation error:

The code 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.

How do I conditionally write a div? Its for a hack bascially...

Solution 1

I suspect it is because your divs are not closed, so razor assumes that the closing brace is actually part of the div content.

You might try outputting the entire div content within your code there, including the closing tag, or output the div tag with a Response.Write, or something similar, so there is no confusing markup.

EDIT: also, maybe enclosing your div tag in a

<text></text>

might be worth a try.

Solution 2

You can use the same construct when you wrap your div's inside element like:

@if (ViewBag.Section == "Home")
{
    <text><div id="headerfrontPage"></text>
}
else
{
    <text><div id="header"></text>
}

Or you use razor syntax @: like

@if (ViewBag.Section == "Home")
{
    @:<div id="headerfrontPage">
}
else
{
    @:<div id="header">
}

But for your current situation I would prefer Ron Sijm's solution:

@{
var divName = ViewBag.Section == "Home" ? "headerfrontPage" : "header";
}

<div id="@divName"> 

Solution 3

You could try this:

@{
string divName;

    if(ViewBag.Section == "Home")
    {
       divName = "headerfrontPage";
    }
    else
    {
        divName = "header";
    }
}

<div id="@divName"> 

I'm not sure if that will help, it a long shot. But at least imo that looks better...

Solution 4

Try this:

@if (ViewBag.Section == "Home")
{
    <text> <div id="headerfrontPage"> </text>
}
else
{
    <text> <div id="header"> </text>
}

Solution 5

The simplest way to write this would be:

<div id="@(ViewBag.Section == "Home" ? "headerFrontPage" : "header")">

Or, if you prefer, you can use a local variable:

@{ var headerID = ViewBag.Section == "Home" ? "headerFrontPage" : "header"; }

<div id="@headerID">

Regarding the more general case of unclosed tags in Razor code blocks, you can explicitly mark the opening tag as content:

@if (ViewBag.Section == "Home")
{
    @:<div id="headerFrontPage">
}
else
{
    @:<div id="header">
}

View more solutions

Comments

[Exitos]

still get the same problem :-(

[Andrew Barber]

Exitos is using the surrounding code block correctly, though unnecessarily. This answer simply removes that block, and wouldn't solve the problem.

[Andrew Barber]

+1 because I like that way of choosing attribute values, instead of the way being used.

[Andrew Barber]

The first syntax is my preferred way, definitely. I think that's a relatively new Razor addition (maybe it wasn't available in the Razor version that came with MVC3?)

[Jordan Gray]

@AndrewBarber That's possible! I think the expression syntax has been around for a while—[Scott Gu mentioned it in 2010][weblogs.asp.net/scottgu/archive/2010/07/02/… and I recall using it last year—but just in case, the ternary syntax should also work with Html.Raw. :)

[Giovanni B]

Middle section worked wonderfully for me. Super easy, wish i had figured this one out sooner...