Question

153

Razor Syntax and Javascript

rated 0 times [ 154] [ 1] / answers: 1 / hits: 53897 / 14 Years ago, thu, october 28, 2010, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

chazw

Add To Favorites

Follow

Total Points: 127

Total Questions: 129

Total Answers: 92

Location: Sao Tome and Principe

Member since Wed, Dec 21, 2022

1 Year ago

answered 14 Years ago stefanicarolinat · Accepted Answer

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>