107

With RazorViewEngine, I can do this:

if (somecondition) {
     <div> some stuff </div>
}

but I can't seem to do this (Razor gets confused):

if (somecondition) {
    <div>
}

if (someothercondition) {
    </div>
}

I have a situation in which I need to put my opening and closing html tags in different code blocks - how can I do this in Razor?

4 Answers 4

174

Try like this:

if (somecondition) {
    @:<div>
}
6
  • 1
    or <text><div></text> - haacked.com/archive/2011/01/06/… Jan 28, 2011 at 2:59
  • 20
    <text><div></text> works, but <text></div></text> does not.
    – friggle
    Jul 8, 2013 at 19:59
  • 1
    @Stuntman you need to do this for both the opening and the closing tags to make it work. Jun 6, 2016 at 14:05
  • and how to deal with multiline text? Nov 16, 2016 at 13:05
  • I could not do this inline. if(condition){@:tag}. I had to format it like above.
    – Mike
    Oct 27, 2017 at 20:31
63

To explain Darin's answer, i.e prefixing the HTML like this:

@:<html>

@: in Razor means 'render something as plain text'

or you can use this, which outputs the HTML as you orginally wrote it (this can also be used to avoid the automatic HTML encoding that Razor does if you're trying to output HTML):

@Html.Raw("<html>")

(Html.Raw reference from MS - http://msdn.microsoft.com/en-us/library/gg568896(v=vs.111).aspx)

4
  • 3
    solutions are great, but explanations are invaluable. thanks!
    – jay
    Feb 24, 2016 at 20:53
  • 2
    I prefer the @Html.Raw("<html>") solution, because the first one was split on multiline when using auto formatting (ctrl+K ctrl+D) Feb 8, 2017 at 8:52
  • @MatteoSganzetta True unless what you are outputting has Razor variables sprinkled into it, for example: @:<a href="@link" class="@classNames">@text</a>
    – qJake
    May 22, 2018 at 20:21
  • Be carefule using @Html.Raw() - see related SO post May 23, 2018 at 0:08
4

You can create a custom MVC Helper method. For with you create a public static class MyRenderHelpers in namespace System.Web.Mvc.Html and write a method Html.

namespace System.Web.Mvc.Html
{
    public static class MyRenderHelpers
    {
        public static MvcHtmlString Html(this HtmlHelper helper, string html, bool condition)
        {
            if (condition)
                return MvcHtmlString.Create(html);
            else
                return MvcHtmlString.Empty;
        }
    }
}

Now you can use this extension method in your razor view:

@Html.Html("<div>", somecondition)
3

The fact that you have to do this usually indicates that your view code is not factored correctly. The nature of HTML is to have balanced or self-enclosed tags (at least in HTML 4, HTML 5 seems to be leaning away from it) and Razor depends on that assumption. If your going to conditionally ouptut a <div> then you will also somewhere later output </div>. Just put the whoel pair in your if statement:

@if(something) {
    <div>
        Other stuff
    </div>
}

Otherwise you end up with weird code like here.

13
  • 7
    My situation is that I want to
    – sydneyos
    Jan 27, 2011 at 0:10
  • Right, my point is that in 99% cases you probably shouldn't. But you might fit into that 1% in which case there's @: or <text></text>
    – marcind
    Jan 27, 2011 at 0:47
  • 7
    he probably has a closing block later : if (somecondition) { @:</div> } Jan 28, 2011 at 2:58
  • 1
    @michielvoo Why is it bad to use this method to have a conditional div wrapper for example? Also in HTML5 you do not close <link> tags. Jun 20, 2013 at 9:44
  • 1
    Surely there are circumstances where what is desired is legitimate. You might want to bold certain stuff conditionally - where the "stuff" is included either way, but the start and end bold tags are conditional. As long as it's the same condition, that should be fine, surely
    – richjhart
    Apr 7, 2020 at 17:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.