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?
This question is related to
c#
javascript
razor
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
, ...)
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 @:
you can use the <text>
tag for both cshtml code with javascript
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 =(
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));
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>
Source: Stackoverflow.com