How to include partial (unbalanced) html in a Razor Mediator if statement?

Question

When saving a Razor Mediator Template it fails anytime that I have an if statement with unbalanced html tags in side of it.

    @if (Fields.subtitle != null)
    {
      <div class="subtitleColor">
    }
    else 
    {
      <div class="no-color">
    }
    ...

I've read through the razor mediator documentation and it appears to be preferred to use the ternary operator:

<div class="@(Fields.subtitle != null ? "subtitle-color" : "no-color")">

However I can think of some situations where we might want to add html blocks inside of this (and they could get quite long/complex). The solutions I have found look like this:

@(Fields.releaseMediaTitle == null ? "<div class=\"subtitleColor\"><a href=\"http://www.example.com\">" : "<div class=\"no-color\">")

or this:

@(Fields.releaseMediaTitle == null ? 
  "<div class=\"col-sm-12\"><a href=\"http://www.example.com\">" 
  : 
  "<div class=\"col-sm-8\">"
  )

However, this it a bit tough to read (especially if it grows to be much larger) and really I'm just making a if/else statement disguised as a ternary statement. It would be nice to simply code this as an if/else statement instead. The obvious solution is to make two large if/else blocks which contain all of the repeated code, but this solution suffers from a lot of duplication. Is there a better way to accomplish this?

Answer 1

Many ways to do this, but two that haven't been listed:

@{
    var colorClass= Fields.subtitle != null ? "subtitleColor" : "no-color";
}
<div class="@colorClass">

That has the advantage of using a variable you set in the template itself, and you can of course group them near the top if there is more than one.

Also, which is the syntax I think you were looking for is:

@if (Fields.subtitle != null)
{
  @:<div class="subtitleColor">
}
else 
{
  @:<div class="no-color">
}

That one also renders as plain text, consequently you will need to end the "fake div" with

@:</div>

Answer 2

According to this helpful post by Dominic Cronin You can use "text" tags in order to do this. So the final if statement looks like this:

@if (Fields.releaseMediaTitle == null) { 
  <text>
    <div class="col-sm-12">
      <a href="http://www.example.org">
    </text> 
} 
else 
{ 
  <text>
    <div class="col-sm-8">
  </text>
}

Answer 3

Adding to the @Damian's answer, if you don't want to write the mark up multiple times, one option could be to place the it(html generation logic) inside a function like below:

@functions {
    public string MyRenderFunction() {

            return "<h2>My HTML</h2>";
        }
    }
}

and use it by calling it in your razor code like @MyRenderFunction()

Answer 4

I'm assuming you are just trying to avoid writing out the markup after the first tag twice? If so, another possible solution would be to use multiple Razor Mediator Templates and "chain" them together in your page/component template. So you could do something like this:

@if (Fields.releaseMediaTitle == null) { 
    <div class="col-sm-12">
      <a href="http://www.example.org"></a>
      @Package.Output
    </div> 
}  
else  
{ 
    <div class="col-sm-8">
      @Package.Output
    </div> 
}

Where @Package.Output is set in a preceding Razor Mediator template within the same component/page template. See here for more details:

http://www.tridiondeveloper.com/reusing-template-designs