Mescola Razor e codice Javascript

172

Sono piuttosto confuso su come mescolare rasoio e js. Questa è la funzione corrente con cui sono bloccato:

<script type="text/javascript">

        var data = [];

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

Se potessi dichiarare il codice c # con <c#></c#>e tutto il resto fosse il codice JS - questo sarebbe quello che sto cercando:

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

Qual è il metodo migliore per raggiungere questo obiettivo?

c# javascript razor

— Kyle Brandt
fonte

2

Apparentemente l'evidenziazione della sintassi è buona e confusa anche con i miei <c#>tag :-P

— Kyle Brandt

1

Hai controllato l'output HTML di questa vista? Come appare e come vuoi che differisca?

— domenica

Emette un errore, Conditional Compilation quindi non riesco a vedere l'HTML, quindi credo che sia parte del codice C #.

— Kyle Brandt,

1

Sembra un errore JavaScript: webdeveloper.com/forum/showthread.php?t=99780 . Qual è il messaggio di errore esatto e dove lo trovi?

— sukru,

2

Penso che questo sia un caso in cui provare a mescolare JS e C # così da vicino sarebbe un dolore da leggere / mantenere. Sono contento che il compilatore non ti abbia proibito questo codice. :)

— Jim Bolla,

333

Utilizzare <text>:

<script type="text/javascript">

   var data = [];

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

— Max Toro
fonte

27

Razor funziona bene nei blocchi Javascript quando viene eseguito, ma odio il modo in cui l'evidenziazione della sintassi viene confusa. Evidenzia tutto il codice Razor come sintassi non valida perché credo sia bloccato in modalità Javascript.

— Chev

2

che dire se questo codice è in un bundle ?? posso scrivere il codice all'interno di un file javascript ??

— ncubica,

2

Funziona perfettamente fino a quando non vuoi controllare se una variabile è inferiore a un'altra e il rasoio diventa psicopatico!

— cbp,

1

@ncubica se vuoi un rasoio in bundle, allora qualcosa di sbagliato nel tuo concetto. Il rasoio è per le visualizzazioni, non javascript.

— 100r

1

@ncubica Questo post è vecchio, ma la soluzione alla tua domanda è: scrivere una funzione in un file JS, renderizzarlo con Scripts.Render, quindi chiamare la funzione in un <script>tag. Non esattamente grazioso, ma funziona per la maggior parte dei casi d'uso (leggi: semplici).

— Sinjai,

81

All'interno di un blocco di codice (ad esempio, @foreach), è necessario contrassegnare il markup (o, in questo caso, Javascript) con @:o il <text>tag .

All'interno dei contesti di markup, devi circondare il codice con blocchi di codice ( @{ ... }o @if, ...)

— SLaks
fonte

Perché dici "contrassegna il markup", questo non sarebbe un problema se il contenuto fosse, in effetti, markup.

— Max Toro,

1

@Max: anche se non sembra markup, è markup. (Contrariamente al codice lato server)

— SLaks

@:è quello che stavo cercando, fantastico!

— Muflix,

54

puoi anche semplicemente usare

<script type="text/javascript">

   var data = [];

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

nota @:

— Medet Tleukabiluly
fonte

12

Non mescolare mai più lingue.

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

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

In caso di problemi puoi anche provare

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

— Mertuarez
fonte

Questo è fantastico, ma ci sono anche casi legittimi in cui dobbiamo mescolare. Ma questa è la soluzione che ho usato poiché si adattava perfettamente.

— frostymarvelous,

3

Nota che questo sta mescolando le lingue. Hai una dichiarazione che è metà JavaScript ("var data =") e metà Razor / C # ("@ Json.Encode (Model)"). È solo una miscelazione meno invasiva, ma non è meno miscelazione che avere un "foreach" Razor / C # il cui corpo emette JavaScript generato. :-)

— Jonathan Gilbert,

3

Ritorna Uncaught SyntaxError: Unexpected token &perché il modello diventa qualcosa del genere[{"Id":1,"Name":"Name}]

— Weihui Guo,

1

Un metodo non convenzionale per separare javascript dalla vista, ma usare comunque il rasoio è creare un Scripts.cshtml file e posizionare lì il tuo javascript / rasoio misto.

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>

— Joel Wiklund
fonte

0

puoi usare il <text>tag per entrambi i codici cshtml con javascript

— Surendra Kumar Laggisetty
fonte

Nella tag "<text>" manca la risposta di cui sopra

— Surendra Kumar Laggisetty,

usa i backtick o ctrl + k dopo aver selezionato il codice per formattarlo

— Suraj Rao,

-1

Avvolgi il tuo codice Razor in @ {} quando sei all'interno dello script JS e sii consapevole di usare solo @ A volte non funziona:

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

Questo produrrà

function hideSurveyReminder() {
       False = true;
    }

nel browser = (

— spine4iller
fonte