Separazione di JavaScript nelle viste del rasoio cshtml

Question

Sono nuovo ad ASP.NET/MVC3 e sto cercando di capire come separare il mio JavaScript (che contiene C#) dal resto dell'HTML.

Se li metto in file .JS e li inserisco con un tag script, l'aspetto di C# smette di funzionare. Qual è il modo migliore per separare il codice JavaScript che contiene anche il codice C# nel rasoio MVC 3?

Grazie.

Answer 1

Se qualcosa smette di funzionare mentre si fa riferimento a un file js esterno, forse stai facendo qualcosa di sbagliato. Forniscici un codice di esempio su come fai riferimento al file esterno. L'altro modo è di posizionare il codice JavaScript tra i tag di script da qualche parte nel file. Se si trova in _Layout.cshtml, è possibile inserirlo nel tag head e in un altro file cshtml, posizionarlo in cima tra i tag di script.

Answer 2

Il codice Javascript deve non contenere codice generato dinamicamente. Se è necessario caricare alcune impostazioni di configurazione, è necessario utilizzare un singolo tag script inline che definisca le variabili. Altre opzioni vengono caricate in un file di configurazione di JSON che viene generato dinamicamente o basandolo sul contenuto della dom a seconda delle specifiche informazioni dinamiche di cui hai bisogno. (Ajax è il modo più comune che potrei dire, anche se ciò dipenderebbe davvero dalla tua situazione). Ad ogni modo, l'idea è che i file javascript e css sono sempre statico.

Answer 3

Per molte ragioni, è meglio mettere la maggior parte, se non tutti i JS in file JS separati (in modo da poter usufruire di riutilizzo, minimizzazione, ottimizzazioni del browser, le reti di distribuzione di contenuti, ecc)

Per leggere il risultato del codice di rasoio sul lato server nei file JS utilizzare uno dei seguenti metodi:

1) inserire il codice rasoio in una variabile javascript nella vista (codice non testato)

<script type="text/javascript"> 
    if(!MyGlobalVariables){ 
    MyGlobalVariables = {}; 
    } 
    MyGlobalVariables.IndexUrl = "@Url.Action("Index")"; 
</script> 

2) Utilizzare un attributo personalizzato (preferibilmente prefisso con dati- come suggerito in HTML 5 spec). Vedi la discussione correlati qui: Can I add custom attribute to HTML tag?

<div data-index-url="@Url.Action("Index")"></div> 

Poi, l'uso $ (this) .attr ("data-index-url") in jQuery per accedere alla marcatura rasoio reso.

3) Inserisci il C# nei campi di input nascosti sulla tua vista e leggi l'input nascosto nel tuo file JS.

<input id="indexUrl" type="hidden" value="@Url.Action("Index")" /> 

Per leggere questo in jQuery, è necessario utilizzare $ ("# indexUrl"). Val()

Answer 4

Come altri hanno detto la scrittura C# per i tuoi file .js probabilmente non è il migliore idea per vari motivi come il caching di variabili dinamiche. Ma a volte tutti dobbiamo fare cose che non dovremmo. E se questo è il caso, c'è un pacchetto NuGet che ti permette di scrivere la sintassi del rasoio all'interno di a.js presentare la sua disponibile qui http://nuget.org/packages/RazorJS

Answer 5

Invece, fare qualcosa di simile nella tua pagina di visualizzazione:

var options = { 
    parameter1 : '@(SomeC#Value)', 
    parameter2 : '@(SomeC#Value)', 
    parameter3 : '@(SomeC#Value)', 
} 

quindi chiamare qualcosa come:

myJavascriptObject.init(options); 

e hanno utilizzare il Javascript del passato-in opzioni per controllare il flusso, ecc.

Answer 6

Convertiamo i nostri oggetti C# in Json con un'estensione su oggetto e JavaScriptSerializer:

public static string ToJson(this object item) 
    { 
     return new JavaScriptSerializer().Serialize(item); 
    } 

Poi mandiamo impostarlo su una variabile (o nel nostro caso passarlo al costruttore del controller JavaScript)