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

Answer 1

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

Answer 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"> 

Answer 3

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.

Answer 4

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">
}

Answer 5

Try this:

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