Змішайте Razor та Javascript-код


171

Я досить плутаюся з тим, як змішувати бритву та 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 у цьому вікні перегляду? Як це виглядає і як ви хочете, щоб це відрізнялося?
sukru

З'являється помилка, Conditional Compilation тому я не бачу HTML - тому я вважаю, що це є частиною цього коду C #.
Кайл Брандт

1
Схоже, помилка JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Що таке точне повідомлення про помилку, і де його взяти?
sukru

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

Відповіді:


332

Використання <text>:

<script type="text/javascript">

   var data = [];

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

27
Розгортання відмінно працює в блоках Javascript, коли виконується, але я ненавиджу, як підсвічування синтаксису заплутується всілякими. Він виділяє весь код Razor як недійсний синтаксис, оскільки він застряг у режимі Javascript, я вважаю.
Шев

2
а як бути, якщо цей код знаходиться в комплекті ?? чи можу я написати код у файлі javascript ??
ncubica

2
Працює ідеально, поки ви не хочете перевірити, чи одна змінна менша, ніж інша, і бритва не відповідає психології!
cbp

1
@ncubica, якщо ви хочете бритву в комплекті, ніж щось не так у вашій концепції. Razor призначений для перегляду, а не JavaScript.
100р

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

81

Усередині блоку коду (наприклад, @foreach), необхідно відзначити розмітку (або, в даному випадку, JavaScript) з @:або <text>тег .

Усередині контекстів розмітки потрібно оточити код кодовими блоками ( @{ ... }або @if, ...)


Чому ви кажете "позначити розмітку", це не буде проблемою, якби вміст насправді був розміткою.
Макс Торо

1
@Max: Хоча це не схоже на розмітку, це розмітка. (На відміну від коду на стороні сервера)
SLaks

@:це те, що я шукав, чудово!
Муфлікс

53

ви також можете просто використовувати

<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));

Це чудово, але також є законні випадки, коли нам потрібно змішуватись. Але це рішення, яке я використав, оскільки воно ідеально підходить.
frostymarvelous

3
Зверніть увагу , що це є змішанням мов. У вас є твердження, що наполовину JavaScript ("var data =") і наполовину Razor / C # ("@ Json.Encode (Model)"). Це просто менш інвазивне змішування, але це не менш змішування, ніж мати Razor / C # "foreach", тіло якого випромінює створений JavaScript. :-)
Джонатан Гілберт

3
Він повертається, Uncaught SyntaxError: Unexpected token &тому що модель стає приблизно подібною[{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

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

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>

0

ви можете використовувати <text>тег для обох кодів cshtml за допомогою JavaScript


Тег "<text>" відсутній у вищевказаній відповіді
Сурендра Кумар Лаггісетті

використовуйте зворотній зв'язок або ctrl + k після вибору коду для його форматування
Suraj Rao

-1

Загорніть код Razor у @ {}, коли всередині сценарію JS, і будьте в курсі використання просто @ Іноді він не працює:

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

Це призведе до отримання

function hideSurveyReminder() {
       False = true;
    }

в браузері = (

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.