Смешайте Razor и Javascript код


172

Я довольно смущен тем, как смешивать бритву и JS. Это текущая функция, с которой я застрял:

<script type="text/javascript">

        var data = [];

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

Если бы я мог объявить код на c #, <c#></c#>а все остальное было кодом JS - это было бы то, что я хочу после:

<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#>

Каков наилучший метод для достижения этой цели?


2
Видимо, подсветка синтаксиса хороша и перепутана с моими <c#>тегами :-P
Кайл Брандт

1
Вы проверяли вывод HTML этого представления? Как это выглядит, и как вы хотите, чтобы это отличалось?
Сукру

Выдает ошибку, Conditional Compilation так что я не вижу HTML - поэтому я считаю, что это часть кода C #.
Кайл Брандт

1
Это похоже на ошибку JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Что такое точное сообщение об ошибке и где его взять?
Сукру

2
Я думаю, что это тот случай, когда пытаться смешать JS и C # так тесно, было бы трудно читать / поддерживать. Я рад, что компилятор запретил вам этот код. :)
Джим Болла

Ответы:


333

Используйте <text>:

<script type="text/javascript">

   var data = [];

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

27
Razor отлично работает в блоках Javascript при выполнении, но я ненавижу то, что подсветка синтаксиса запутывает все виды. Он выдвигает на первый план весь код Razor как недействительный синтаксис, потому что он застрял в режиме Javascript, я считаю.
Chev

2
а что если этот код находится в связке ?? я могу написать код внутри файла JavaScript?
ncubica

2
Работает отлично, пока вы не захотите проверить, меньше ли одна переменная, чем другая, и бритва сходит с ума!
14:30

1
@ncubica, если вы хотите бритву в комплекте, чем-то не так в вашей концепции. Бритва для взглядов, а не javascript.
100

1
@ncubica Это сообщение старое, но решение вашего вопроса таково: написать функцию в файле JS, отобразить ее с помощью Scripts.Render, затем вызвать функцию в <script>теге. Не совсем изящный, но он работает для большинства (читай: простых) вариантов использования.
Синджай,

81

Внутри блока кода (например, @foreach) вы должны пометить разметку (или, в данном случае, Javascript) с помощью @:или <text>тега .

Внутри контекстов разметки вам необходимо окружить код кодовыми блоками ( @{ ... }или @if, ...)


Почему вы говорите «пометить разметку», это не было бы проблемой, если бы контент был, по сути, разметкой.
Макс Торо

1
@Max: Даже если это не похоже на разметку, это разметка. (В отличие от серверного кода)
SLaks

@:это то, что я искал, отлично!
Muflix

54

Вы также можете просто использовать

<script type="text/javascript">

   var data = [];

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

примечание @:


12

Никогда не смешивайте больше языков.

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

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

В случае проблем вы также можете попробовать

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

Это здорово, но также есть законные случаи, когда нам нужно смешивать. Но это решение, которое я использовал, так как оно идеально подходит.
морозный

3
Обратите внимание , что это является смешением языков. У вас есть оператор наполовину JavaScript ("var data =") и half-Razor / C # ("@ Json.Encode (Model)"). Это просто менее инвазивное микширование, но это не менее микширование, чем использование Rachor / C # «foreach», тело которого генерирует сгенерированный JavaScript. :-)
Джонатан Гилберт

3
Это возвращается, Uncaught SyntaxError: Unexpected token &потому что модель становится чем-то вроде этого[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

Нетрадиционный метод отделения javascript от представления, но использование в нем бритвы - создание Scripts.cshtml файл и поместить туда свой смешанный javascript / razor.

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>


-1

Оберните свой код Razor в @ {}, когда находитесь внутри JS-скрипта, и помните, что просто используйте @ Иногда это не работает:

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

Это будет производить

function hideSurveyReminder() {
       False = true;
    }

в браузере = (

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.