Mix Razor and Javascript code

Question

I'm pretty confused with how to mix razor and js. This is the current function I am stuck with:

<script type="text/javascript">

        var data = [];

        @foreach (var r in Model.rows)
        {
                data.push([ @r.UnixTime * 1000, @r.Value ]);
        }

If I could declare c# code with <c#></c#> and everything else was JS code -- this would be what I am after:

<script type="text/javascript">

        var data = [];

        <c#>@foreach (var r in Model.rows) {</c#>
                data.push([ <c#>@r.UnixTime</c#> * 1000, <c#>@r.Value</c#> ]);
        <c#>}</c#>

What is the best method to achieve this?

Apparently the syntax highlighting is nice and confused with my <c#> tags as well :-P — Kyle Brandt
– Kyle Brandt, Commented Apr 10, 2011 at 21:47
Did you check the HTML output of this view? How does it look, and how you you want it to differ? — sukru
– sukru, Commented Apr 10, 2011 at 21:49
It seems like a JavaScript error: webdeveloper.com/forum/showthread.php?t=99780 . What is the exact error message, and where do you get it? — sukru
– sukru, Commented Apr 10, 2011 at 21:54
I think this is a case where trying to mix JS and C# so closely would be a pain to read/maintain. I'm glad the compiler disallowed you from this code. :) — Jim Bolla
– Jim Bolla, Commented Apr 10, 2011 at 21:56
Dont do this at all. Export data to JS variable array or what and then use clean javascript. — Mertuarez
– Mertuarez, Commented Apr 29, 2016 at 13:34

Max Toro · Accepted Answer · 2011-04-10 21:54:20Z

381

Use <text>:

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
      <text>
            data.push([ @r.UnixTime * 1000, @r.Value ]);
      </text>
   }
</script>

answered Apr 10, 2011 at 21:54

Max Toro

28.7k11 gold badges81 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

ChevCast Over a year ago

Razor works fine in Javascript blocks when executed but I hate how the syntax highlighting gets all sorts of confused. It highlights all the Razor code as invalid Syntax because it's stuck in Javascript mode I believe.

ncubica Over a year ago

what about if this code is in a bundle?? can I write code inside of a javascript file??

cbp Over a year ago

Works perfectly until you want to check if one variable is less than another and razor goes psycho!

100r Over a year ago

@ncubica if you want razor in bundle, than somethings wrong in your concept. Razor is for views, not javascript.

Sinjai Over a year ago

@ncubica This post is old, but the solution to your question is: Write a function in a JS file, render it with Scripts.Render, then call the function in a <script> tag. Not exactly graceful, but it works for most (read: simple) use cases.

|

SLaks · Accepted Answer · 2011-04-10 21:54:04Z

96

Inside a code block (eg, @foreach), you need to mark the markup (or, in this case, Javascript) with @: or the <text> tag.

Inside the markup contexts, you need to surround code with code blocks (@{ ... } or @if, ...)

answered Apr 10, 2011 at 21:54

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

2 Comments

Max Toro Over a year ago

Why do you say "mark the markup", this wouldn't be an issue if the content was, in fact, markup.

SLaks Over a year ago

@Max: Even though it doesn't look like markup, it is markup. (As opposed to server-side code)

Medet Tleukabiluly · Accepted Answer · 2014-05-23 09:48:35Z

62

you also can simply use

<script type="text/javascript">

   var data = [];

   @foreach (var r in Model.rows)
   {
       @:data.push([ @r.UnixTime * 1000, @r.Value ]);
   }
</script>

note @:

answered May 23, 2014 at 9:48

Medet Tleukabiluly

12k3 gold badges38 silver badges78 bronze badges

Comments

Mertuarez · Accepted Answer · 2020-03-17 18:02:39Z

12

Never ever mix more languages.

<script type="text/javascript">
    var data = @Json.Encode(Model); // !!!! export data !!!!

    for(var prop in data){
      console.log( prop + " "+ data[prop]);
    }

In case of problem you can also try

@Html.Raw(Json.Encode(Model));

edited Mar 17, 2020 at 18:02

answered Apr 29, 2016 at 13:49

Mertuarez

9447 silver badges26 bronze badges

4 Comments

frostymarvelous Over a year ago

This is great, but also, there are legitimate instances where we need to mix. But this is the solution I used since it fit perfectly.

Jonathan Gilbert Over a year ago

Note that this is mixing languages. You have a statement that is half-JavaScript ("var data = ") and half-Razor/C# ("@Json.Encode(Model)"). It's just a less invasive mixing, but it is no less mixing than having a Razor/C# "foreach" whose body emits generated JavaScript. :-)

Weihui Guo Over a year ago

It returns Uncaught SyntaxError: Unexpected token & because the model becomes something like this [{"Id":1,"Name":"Name}]

Mike Finch Over a year ago

This is the best and simplest solution. Definitely need to feed the encoded JSON through Html.Raw() to get rid of the " entities.

Dharman · Accepted Answer · 2021-11-10 11:40:01Z

2

This is my way to hack Razor and use Javascript without freaking out Intellisense.

Obviously you should use <text> but with an "expedient": double braces before.

This is what happens if a single brace is used:

This is what happen if a couple of braces are used:

Now constants and variable have been recognized. It's better, but not good! There is still the "less than" symbol that confuses intellisense making it think that following is the name of a tag. The "less than" sign is signaled as error and from here there are parsing errors as "console.log" shows. You need to add something that quiets intellisense and doesn't get returned in the final JS code at compile time.

Solution: use this comment after "less than": /*>*/

This is the result

It's quite strange to see, but it works as it should.

edited Nov 10, 2021 at 11:40

Dharman♦

33.9k27 gold badges106 silver badges157 bronze badges

answered Nov 10, 2021 at 11:34

tedebus

1,06015 silver badges23 bronze badges

Comments

Joel Wiklund · Accepted Answer · 2020-01-21 07:19:38Z

1

A non conventional method to separate javascript from the view, but still use razor in it is to make a Scripts.cshtml file and place your mixed javascript/razor there.

Index.cshtml

<div id="Result">
</div>

<button id="btnLoad">Click me</button>

@section scripts
{
    @Html.Partial("Scripts")
}

Scripts.cshtml

<script type="text/javascript">
    var url = "@Url.Action("Index", "Home")";

    $(document).ready(function() {
        $("#btnLoad").click(function() {
            $.ajax({
                type: "POST",
                url: url ,
                data: {someParameter: "some value"},
                contentType: "application/json; charset=utf-8",
                dataType: "json",

                success: function(msg) {
                    $("#Result").text(msg.d);
                }
            });
        });
    });
</script>

answered Jan 21, 2020 at 7:19

Joel Wiklund

1,9152 gold badges21 silver badges27 bronze badges

1 Comment

gilberto Over a year ago

if i need this aproach : var action = "Index"; var url = "@Url.Action(action, "Home")";

Suraj Rao · Accepted Answer · 2018-11-26 11:22:56Z

0

you can use the <text> tag for both cshtml code with javascript

edited Nov 26, 2018 at 11:22

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

answered Nov 26, 2018 at 11:21

Code With Suri

93 bronze badges

2 Comments

Code With Suri Over a year ago

"<text>" tag is missing the above answer

Suraj Rao Over a year ago

use backticks or ctrl + k after selecting code to format it

LOST · Accepted Answer · 2024-07-16 06:27:35Z

0

Don't do this. The current top accepted answer has a security vulnerability if the content of @r.Value would happen to have JavaScript code formatted in a way that would stop JavaScript expression.

You have to transmit data some other way. For example, you can create invisible DOM nodes and set data-* attributes on them.

answered Jul 16, 2024 at 6:27

LOST

3,3723 gold badges33 silver badges55 bronze badges

Comments

Shervin Ivari · Accepted Answer · 2024-12-07 13:08:57Z

0

If you are working with lists or objects, @Html.Raw is not available in .Net 9. In the Blazor SSR, you can use JsonSerializer and then parse your values using Json.Parse.

const times = JSON.parse("@(JsonSerializer.Serialize(MyList.Select(c => c.Time)))");

answered Dec 7, 2024 at 13:08

Shervin Ivari

3,0915 gold badges30 silver badges43 bronze badges

Comments

spine4iller · Accepted Answer · 2015-11-10 02:34:17Z

-3

Wrap your Razor code in @{ } when inside JS script and be aware of using just @ Sometimes it doesn't work:

function hideSurveyReminder() {
       @Session["_isSurveyPassed"] = true;
    }

This will produce

function hideSurveyReminder() {
       False = true;
    }

in browser =(

answered Nov 10, 2015 at 2:34

spine4iller

102 bronze badges

Collectives™ on Stack Overflow

Mix Razor and Javascript code

10 Answers 10

7 Comments

2 Comments

Comments

4 Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

7 Comments

2 Comments

Comments

4 Comments

Comments

1 Comment

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related