C# if statement within Javascript, Razor/MVC3

Question

Ok, so I'm trying to use an "if" statement within my javascript. Depending on a boolean in my model, a function should return some html or an empty string. This is basically what I want to do:

function getSomeHtml() {
var myHtml = '';
@if(Model.UseSomeNiceHtml)
{
<text> 
myHtml += '<div> <p class="label">Whatever</p></div>'; 
</text>
}
return myHtml;
}

Similar code works really well when using a foreach loop (basically replacing if with foreach in the example above). With the if statement I get the error "Encountered end tag "text" with no matching start tag. Are your start/end tags properly balanced?" . When I remove the <text> tags I get the error "Too many characters in character literal" .

Could anyone point me in the right direction?

Thank you! :)

Answer 1

Ok, here's something that works for me. Tested just now.

function getSomeHtml() {
    var myHtml = '';
    @{
        if (Model.UseSomeNiceHtml)
        {
            <text> 
            myHtml += '<div> <p class="label">Whatever</p></div>'; 
            </text>
        }
    }
    return myHtml;
}

I added an extra set of {} .

Answer 2

Ok, first: thanks for your input, it got me thinking. Eventually I found the solution and the problem was an unescaped "/" in a closing html tag. With those tags unescaped, my tags freaked out. Anyway, I figured I'd share with you what my finished code looks like. I guess it can serve as an example of how to use both C# loops and if-statements in a javascript function.

function getSubActivitiesHtml(participantId) {
var html = "";
@{
if(Model.UseSubActivities)
{
<text>
html += "<div class=\"textinput req\"><div class=\"checkbox req\">";
</text>

foreach (var subActivity in Model.SubActivities)
{
<text> 
html += "<p><input id=\"activity_" + participantId + "_@(subActivity.Id)\" name=\"Participants[" + participantId + "].SelectedSubActivities\" value=\"@(subActivity.Id)\" type=\"checkbox\" />";
html += "<label for=\"activity_" + participantId + "_@(subActivity.Id)\">@(subActivity.Name)</label></p>";
</text>
}

<text>
html += "<\/div><p class=\"label\">Delaktiviteter</p><\/div>";
</text>  
}
}

return html;
}

Notice how the closing html tags are escaped...

Answer 3

try to remove the <text> tags or put them inside the myHtml += ''; statement

Answer 4

This works too.

function getSomeHtml() {
    var myHtml = '';
    if('@Model.UseSomeNiceHtml' === '@true')
    {
         myHtml += '<div> <p class="label">Whatever</p></div>'; 
    }
    return myHtml;
}

Answer 5

function  @(treeviewConfig.AddNewTreeviewNode)(treeNode) {
        @if (!string.IsNullOrEmpty(NodeIDKey) && !string.IsNullOrEmpty(treeviewConfig.ParentIdExpr)) {
            <text>
                treeNode['@(treeviewConfig.ParentIdExpr)'] = treeNode['@(NodeIDKey)'];
                treeNode['@(NodeIDKey)'] = 0;
        </text>
        }
        @if ( !string.IsNullOrEmpty(treeviewConfig.DisplayExpr)) {
               <text>
            treeNode['@(treeviewConfig.DisplayExpr)'] =  'nue';
         </text>
        }

        @if ( !string.IsNullOrEmpty(treeviewConfig.EditTreeviewNode)) {
             <text>
             treeNode['@(treeviewConfig.EditTreeviewNode)'] = 'nue';
         </text>

        }

        PopulateTreeViewNodeInputs(treeNode);
       @(treeviewConfig.ShowTreeEditPopup)();
    }

This worked for me quite well

Answer 6

Try this:

  function getSomeHtml() {
    @{
      var myHtml = "";
      if(Model.UseSomeNiceHtml)
      {
        myHtml += "<div> <p class='label'>Whatever</p></div>";
      }
    }
    return "@myHtml";
  }