2011-10-02 17 views
13

È possibile accedere a una proprietà Model in un file Javascript esterno?Accedi a una proprietà Model in un file javascript?

ad es. Nel file "somescript.js"

var currency = '@Model.Currency'; 
alert(currency); 

Il mio punto di vista

<script src="../../Scripts/somescript.js" type="text/javascript"> 

Questo non sembra funzionare, se ho messo il javascript direttamente nella vista all'interno tag script allora funziona? Questo significa dover mettere il codice nella pagina per tutto il tempo invece di caricare il file di script esterno come questo:

@model MyModel; 

<script lang=, type=> 
var currency = '@Model.Currency'; 
alert(currency); 
</script> 

C'è un modo per aggirare questo?

+0

Se si potrebbe generare il file js esterni allora la loro browser dovrebbe memorizzare nella cache i dati vista del modello generati in modo dinamico. Probabilmente non è quello che vuoi? – BritishDeveloper

+1

Recentemente ho bloggato su come è possibile [generare file JavaScript esterni usando le visualizzazioni di un rasoio parziale] [blogpost]. Il post del blog mostra come utilizzare un filtro azioni personalizzato per analizzare il codice Razor all'interno di un file JavaScript esterno. ** tl; dr: ** Sì, è possibile utilizzare una soluzione semplice ma intelligente. [blogpost]: http://blog.mariusschulz.com/generating-external-javascript-files-using-partial-razor-views –

+0

http://stackoverflow.com/a/41312348/2592042 Ho spiegato in dettaglio qui. –

risposta

9

Non esiste alcun modo per implementare il codice MVC/Razor nei file JS.

È necessario impostare i dati variabili nel codice HTML (nei file .cshtml) e ciò è concettualmente OK e non viola la separazione dei problemi (HTML generato dal server rispetto al codice di script del client) perché se ci pensate, questi valori variabili sono una preoccupazione del server.

Date un'occhiata a questa soluzione (parziale ma piacevole): Using Inline C# inside Javascript File in MVC Framework

+1

Questa è un'ottima soluzione. Posso mantenere tutto il javascript "statico" in un file, quindi inserire la parte "vars" nella vista parziale e caricarla. Bello :) – BlueChippy

2

Che cosa si potrebbe fare è passare i tag rasoio come una variabile.

In rasoio File>

var currency = '@Model.Currency'; 
doAlert(currency); 

nel file di JS>

function doAlert(curr){ 
    alert(curr); 
} 
0

Si può sempre provare RazorJs. E 'praticamente risolve non essere in grado di utilizzare un modello nei file js RazorJs

1

Prova JavaScriptModel (http://jsm.codeplex.com):

Basta aggiungere il seguente codice alla tua azione di controllo:

this.AddJavaScriptVariable("Currency", Currency); 

ora è possibile accedere alla variabile "Valuta" in JavaScript.

Se questa variabile deve essere disponibile sul sito del foro, inserirla in un filtro. Un esempio di come utilizzare JavaScriptModel da un filtro può essere trovato nella documentazione.

9

Ho risolto questo problema utilizzando gli attributi dei dati, insieme a jQuery. Rende il codice molto leggibile e senza la necessità di viste parziali o di javascript statici attraverso un ViewEngine. Il file JavaScript è interamente statico e verrà memorizzato nella cache normalmente.

Index.cshtml:

@model Namespace.ViewModels.HomeIndexViewModel 
<h2> 
    Index 
</h2> 

@section scripts 
{ 
    <script id="Index.js" src="~/Path/To/Index.js" 
     data-action-url="@Url.Action("GridData")" 
     data-relative-url="@Url.Content("~/Content/Images/background.png")" 
     data-sort-by="@Model.SortBy 
     data-sort-order="@Model.SortOrder 
     data-page="@ViewData["Page"]" 
     data-rows="@ViewData["Rows"]"></script> 
} 

Index.js:

jQuery(document).ready(function ($) { 
    // import all the variables from the model 
    var $vars = $('#Index\\.js').data(); 

    alert($vars.page); 
    alert($vars.actionUrl); // Note: hyphenated names become camelCased 
}); 

_Layout.cshtml (facoltativo, ma buona abitudine):

<body> 
    <!-- html content here. scripts go to bottom of body --> 

    @Scripts.Render("~/bundles/js") 
    @RenderSection("scripts", required: false) 
</body> 
Problemi correlati