Utilizzo di Rasoio in JavaScript

È ansible o esiste una soluzione alternativa per utilizzare la syntax del razor in JavaScript che è in una vista ( cshtml )?

Sto cercando di aggiungere marcatori a una mappa di Google … Ad esempio, ho provato questo, ma sto ricevendo un sacco di errori di compilazione:

  // Some JavaScript code here to display map, etc. // Now add markers @foreach (var item in Model) { var markerlatLng = new google.maps.LatLng(@(Model.Latitude), @(Model.Longitude)); var title = '@(Model.Title)'; var description = '@(Model.Description)'; var contentString = '

' + title + '

' + '

' + description + '

' var infowindow = new google.maps.InfoWindow({ content: contentString }); var marker = new google.maps.Marker({ position: latLng, title: title, map: map, draggable: false }); google.maps.event.addListener(marker, 'click', function () { infowindow.open(map, marker); }); }

Usa lo pseudo-elemento , come descritto qui , per forzare il compilatore Razor a tornare in modalità contenuto:

  

Aggiornare:

Scott Guthrie ha pubblicato recentemente su @: syntax in Razor, che è leggermente meno goffo del tag se hai solo una o due righe di codice JavaScript da aggiungere. Il seguente approccio sarebbe probabilmente preferibile, perché riduce le dimensioni dell’HTML generato. (Si potrebbe anche spostare la funzione addMarker in un file JavaScript statico memorizzato nella cache per ridurre ulteriormente le dimensioni):

  

Aggiornato il codice sopra per rendere la chiamata ad addMarker più corretta.

Per chiarire, il comando @: forza il Rasoio in modalità testo, anche se la chiamata ad addMarker assomiglia molto al codice C #. Razor quindi preleva la syntax @item.Property per dire che dovrebbe emettere direttamente il contenuto di tali proprietà.

Aggiornamento 2

Vale la pena notare che il codice View non è un buon posto dove inserire il codice JavaScript. Il codice JavaScript deve essere inserito in un file .js statico e quindi dovrebbe ottenere i dati necessari da una chiamata Ajax o dalla scansione degli attributi dei data- dall’HTML. Oltre a rendere ansible memorizzare nella cache il codice JavaScript, questo evita anche problemi con la codifica, dal momento che Razor è progettato per la codifica per HTML, ma non per JavaScript.

Visualizza codice

 @foreach(var item in Model) { 
}

Codice JavaScript

 $('[data-marker]').each(function() { var markerData = $(this).data('marker'); addMarker(markerData.Latitude, markerData.Longitude, markerData.Description, markerData.Title); }); 

Ho appena scritto questa funzione di supporto. Inseriscilo in App_Code/JS.cshtml :

 @using System.Web.Script.Serialization @helper Encode(object obj) { @(new HtmlString(new JavaScriptSerializer().Serialize(obj))); } 

Quindi nel tuo esempio, puoi fare qualcosa del genere:

 var title = @JS.Encode(Model.Title); 

Notate come non metto le virgolette attorno ad esso. Se il titolo contiene già citazioni, non esploderà. Sembra gestire anche dizionari e oggetti anonimi!

Stai cercando di bloccare un piolo quadrato in un buco rotondo.

Il razor era inteso come un linguaggio modello generatore di HTML. Si potrebbe benissimo ottenere generando codice JavaScript, ma non è stato progettato per questo.

Ad esempio: cosa succede se Model.Title contiene un apostrofo? In questo modo si interromperà il codice JavaScript e Razor non lo sfuggirà correttamente per impostazione predefinita.

Probabilmente sarebbe più appropriato usare un generatore di stringhe in una funzione di supporto. Probabilmente ci saranno meno conseguenze non intenzionali di questo approccio.

Quali errori specifici stai vedendo?

Qualcosa di simile potrebbe funzionare meglio:

  

Si noti che è necessario il tag magico dopo foreach per indicare che Razor deve passare in modalità markup.

Funzionerà bene, purché sia ​​in una pagina CSHTML e non in un file JavaScript esterno.

Il motore del modello Razor non si preoccupa di ciò che sta emettendo e non distingue tra o altri tag.

Tuttavia, è necessario codificare le stringhe per evitare attacchi XSS .

Preferisco “” come un “testo>”

  

Una cosa da aggiungere – ho trovato che la syntax di Razor hilighter (e probabilmente il compilatore) interpretano la posizione della parentesi di apertura in modo diverso:

  

Un esempio semplice e corretto:

  

Questo crea uno script nella tua pagina nella posizione in cui inserisci il codice sopra il quale assomiglia al seguente:

  

Ora hai una variabile JavaScript globale denominata razorUserName che puoi accedere e utilizzare sul client. Il motore Razor ha ovviamente estratto il valore da @User.Identity.Name (variabile lato server) e lo ha inserito nel codice che scrive nel tag script.

La seguente soluzione mi sembra più accurata rispetto alla combinazione di JavaScript con Razor. Controlla questo: https://github.com/brooklynDev/NGon

Puoi aggiungere quasi tutti i dati complessi a ViewBag.Ngon e accedervi in JavaScript

Nel controller:

 public class HomeController : Controller { public ActionResult Index() { var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 }; ViewBag.NGon.Person = person; return View(); } } 

In JavaScript:

  

Permette qualsiasi semplice vecchio object CLR (POCOs) che può essere serializzato usando il JavascriptSerializer predefinito.

C’è anche un’opzione in più rispetto a @: e .

Usando il blocco stesso.

Quando hai bisogno di fare grossi pezzi di JavaScript a seconda del codice Razor, puoi farlo in questo modo:

 @if(Utils.FeatureEnabled("Feature")) {  }  

I pro di questo modo sono che non mescola troppo JavaScript e Razor, perché mescolarli molto causerà problemi di leggibilità alla fine. Anche i grandi blocchi di testo non sono molto leggibili.

Nessuna delle soluzioni precedenti funziona correttamente … Ho provato tutti i modi, ma non mi ha dato il risultato previsto … Alla fine ho scoperto che ci sono alcuni errori nel codice … E il codice completo è dato sotto.

  

Ho finalmente trovato la soluzione (* .vbhtml):

 function razorsyntax() { /* Double */ @(MvcHtmlString.Create("var szam =" & mydoublevariable & ";")) alert(szam); /* String */ var str = '@stringvariable'; alert(str); }