Mieszaj kod Razor i JavaScript


171

Jestem dość zdezorientowany, jak mieszać brzytwę i js. To jest obecna funkcja, z którą utknąłem:

<script type="text/javascript">

        var data = [];

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

Gdybym mógł zadeklarować kod C # z, <c#></c#>a wszystko inne było kodem JS - to byłby to, czego szukam:

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

Jaka jest najlepsza metoda, aby to osiągnąć?


2
Najwyraźniej podświetlanie składni jest ładne i mylone z moimi <c#>tagami :-P
Kyle Brandt

1
Czy sprawdziłeś wyjście HTML tego widoku? Jak to wygląda i jak chcesz, żeby się różniło?
sukru

Wyświetla błąd o Conditional Compilation tym, że nie widzę kodu HTML - więc wydaje mi się, że częścią tego jest kod C #.
Kyle Brandt,

1
Wygląda na błąd JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Jaki jest dokładny komunikat o błędzie i gdzie go otrzymujesz?
sukru,

2
Myślę, że jest to przypadek, w którym próba tak ścisłego mieszania JS i C # byłaby trudna do odczytania / utrzymania. Cieszę się, że kompilator zabronił ci korzystania z tego kodu. :)
Jim Bolla,

Odpowiedzi:


332

Zastosowanie <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 działa dobrze w blokach Javascript po uruchomieniu, ale nienawidzę tego, jak podświetlanie składni jest niejasne. Podkreśla cały kod Razor jako nieprawidłową składnię, ponieważ uważam, że utknął w trybie JavaScript.
Chev

2
a co jeśli ten kod jest w pakiecie? czy mogę napisać kod w pliku javascript?
ncubica

2
Działa idealnie, dopóki nie zechcesz sprawdzić, czy jedna zmienna jest mniejsza od drugiej, a brzytwa szaleje!
cbp

1
@ncubica, jeśli chcesz mieć brzytwę w pakiecie, to coś jest nie tak w twojej koncepcji. Razor służy do widoków, a nie JavaScript.
100r

1
@ncubica Ten post jest stary, ale rozwiązanie na Twoje pytanie brzmi: Napisz funkcję w pliku JS, wyrenderuj ją Scripts.Render, a następnie wywołaj funkcję w <script>tagu. Niezupełnie wdzięczne, ale działa w większości (czytaj: prostych) przypadkach użycia.
Sinjai

81

Wewnątrz bloku kodu (na przykład @foreach), trzeba zaznaczyć znaczników (lub w tym przypadku, JavaScript) z @:lub <text>znacznik .

W kontekstach znaczników musisz otoczyć kod blokami kodu ( @{ ... }lub @if, ...)


Dlaczego mówisz „oznacz znaczniki”, nie byłoby to problemem, gdyby treść była w rzeczywistości znacznikami.
Max Toro,

1
@Max: Mimo że nie wygląda na znacznik, jest to znacznik. (W przeciwieństwie do kodu po stronie serwera)
SLaks

@:jest tym, czego szukałem, świetnie!
Muflix

53

możesz też po prostu użyć

<script type="text/javascript">

   var data = [];

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

uwaga @:


12

Nigdy, przenigdy nie mieszaj więcej języków.

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

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

W razie problemu możesz również spróbować

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

To świetnie, ale są też uzasadnione przypadki, w których musimy się mieszać. Ale to jest rozwiązanie, które zastosowałem, ponieważ pasowało idealnie.
mroźno cudowny

3
Zauważ, że jest to mieszanie języków. Masz instrukcję, która jest w połowie JavaScript ("var data =") i w połowie Razor / C # ("@ Json.Encode (Model)"). Jest to po prostu mniej inwazyjne mieszanie, ale nie mniej niż mieszanie Razor / C # „foreach”, którego treść emituje wygenerowany JavaScript. :-)
Jonathan Gilbert

3
Powraca, Uncaught SyntaxError: Unexpected token &ponieważ model staje się [{&quot;Id&quot;:1,&quot;Name&quot;:&quot;Name}]
Weihui Guo

1

Niekonwencjonalną metodą oddzielenia javascript od widoku, ale nadal używania w nim brzytwy, jest utworzenie Scripts.cshtmlpliku i umieszczenie w nim mieszanego javascript / brzytwa.

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

Umieść swój kod Razor w @ {} wewnątrz skryptu JS i pamiętaj, że używasz tylko @ Czasami to nie działa:

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

To wyprodukuje

function hideSurveyReminder() {
       False = true;
    }

w przeglądarce = (

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.