Razor @if inside <script> is rejected by VS11

Question

Is the following markup incorrect, or is it a bug in the Razor engine in MVC4? Either way, what's the best workaround?

The entire content of View1.cshtml is shown. It compiles fine, but the Intellisense error highlighting is annoying. (Included as an image so you can see how the syntax is rejected by VS11.)

Hote that the @: syntax (instead of <text></text>) isn't accepted either.

Answer 1

It's a little tricky to mix JavaScript with Razor. Personally, I find it easier to always separate these two guys by using either Razor @function or Razor custom @helper.

Here's a simple example:

<script type="text/javascript">
    function btn_clicked() {
        @generateMyJavaScript()
    }
</script>

<a href="javascript:void(0)" onclick='btn_clicked()'>Click on me</a>

@functions {
    private MvcHtmlString generateMyJavaScript()
    {
        string jsBuilder = string.Empty;
        if (true)
            jsBuilder = "alert('Hey!');";
        return MvcHtmlString.Create(jsBuilder);
    }
}

Answer 2

I noticed strange behavior of the syntax highlighter too. This is not really an answer but:

• I try staying away from mixing model data into javascript. Although powerfull it is a bit spaghetti-like.
• Also I try to have as little as possible tags in the html. I use js includes and jQuery $(document).ready(function () ... functions inside those.
• There you can extract the JSON data from the data attributes and base javascript decisions on those.

(Wanted to write this as a comment but didn't find the way to do that, sorry for the debump)