Razor Syntax and Javascript

As a test I’m converting a proof-of-concept app we’ve written from Web Forms to Razor, simply so we can evaluate it.

I’ve run into one problem so far that’s making my head hurt..generating client-side Javascript…

Web-Forms

<script type="text/javascript">
    var jqGridIdList = "<%: Url.Action ("getidlist", "office", new { area = "reports" }) %>";

    var availableIds = [];
    <% for (var i = 0; i < Model.Data.Count (); i++) { %>
    availableIds.push({ value : "<%: Model.Data.ElementAt (i).Text %>", label : "<%: Model.Data.ElementAt (i).Text %>" });
    <% } %>
</script>

Razor Syntax

<script type="text/javascript">
    var jqGridIdList = "@Url.Action("getidlist", "office", new { area = "reports" })";

    var availableIds = [];
    @for(var i = 0; i < Model.Data.Count (); i++) {
    availableIds.push({ value : "@Model.Data.ElementAt(i).Text", label : "@Model.Data.ElementAt(i).Text" });
    }
</script>

The compiler gives me the following error on the ‘availableIds.push’ line:

Compiler Error Message: CS1525: Invalid expression term ‘{‘

It’s obviously trying to compile it as C#…but how do I stop it?

Thanks,
Kieron

Razor syntax in Javascript

I have an easy question about Razor syntax in JavaScript. @{ int badgeCount = ViewBag.badgeCount; } <script type=text/javascript> for (var i = 0; i < @badgeCount; i++) { TrackWonBadge(‘@Cur

razor syntax within Javascript

I am attempting to extract data from a Json object in .NET MVC 4. Here is a code snippet of my razor view: var data = (function($) { var dataModel = @(new HtmlString(new System.Web.Script.Serializati

Is it possible to use razor syntax in Javascript files?

I’d like to use razor syntax inside my Javascript files. Is this possible without including the javascript inline into the page?

Razor Syntax Equivalent

The below line appears in one of my javascript files, what would be the syntax for it in Razor. var initialData = <%= new JavaScriptSerializer().Serialize(Model) %>;

razor syntax within quoted javascript

How do I escape my javascript so I can perform the following? This is an example: It’s not outputting ‘Month1’, ‘Month2’ etc. and instead it is actually outputting ‘[email protected]’. @for (int i = 0; i <

Razor+javascript syntax errors encountering “,”

My attempt to generate javascript with razor: <script> var slides = [ @foreach (var news in Model.News) { @:data.push( { fileID: @(news.FileID), preamble: @(news.Preamble), img: /Admin/News/N

Razor syntax in JavaScript code block

I want to know if it is a good practice to use razor in JavaScript code. For example: <script type=text/javascript> var variable = @some.Id </script> Or it’s better to create hidden val

Razor syntax PHP equivalent

Is there an equivalent to the new ASP.NET razor syntax in PHP?

razor/javascript and trailing semicolon

Using Visual Studio 2012, on a Razor view page, in the javascript section, I am getting what I think is a battle between Razor syntax vs JavaScript syntax. In particular, the trailing semicolon in the

razor/javascript and trailing semicolon

Using Visual Studio 2012, on a Razor view page, in the javascript section, I am getting what I think is a battle between Razor syntax vs JavaScript syntax. In particular, the trailing semicolon in the

Answers

You need to wrap it in the pseudo element <text>. This will switch the parser back to html mode and it will then parse the javascript as part of the html and not c#. The reason it happens is the @for() is a c# block and anything treated within is also considered c# until it’s escaped by an html tag. Since you probably don’t want an html tag razor provides the <text> tag to switch modes.

If you notice the difference in your asp.net webforms you end the <% for line with a %> which takes it out of c# mode. If you download the razor highlighter extension for visual studio 2010 it will help you see when code is treated as code and html is treated as html.

<script type="text/javascript">
    var jqGridIdList = "@Url.Action("getidlist", "office", new { area = "reports" })";

    var availableIds = [];
    @for(var i = 0; i < Model.Data.Count (); i++) {
        <text>availableIds.push({ value : "@Model.Data.ElementAt(i).Text", label : "@Model.Data.ElementAt(i).Text" });</text>
    }
</script>

Update for latest version

You can now use the @: syntax for even more readability

<script type="text/javascript">
    var jqGridIdList = "@Url.Action("getidlist", "office", new { area = "reports" })";

    var availableIds = [];
    @for(var i = 0; i < Model.Data.Count (); i++) {
        @:availableIds.push({ value : "@Model.Data.ElementAt(i).Text", label : "@Model.Data.ElementAt(i).Text" });
    }
</script>