2011-10-02 20 views
13

¿Es posible acceder a una propiedad de modelo en un archivo Javascript externo?¿Acceder a una propiedad de modelo en un archivo javascript?

p. Ej. En el archivo "somescript.js"

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

En mi opinión

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

Esto no parece funcionar, sin embargo si pongo el código JavaScript directamente en la vista dentro etiquetas script entonces no funciona? Esto significa tener que poner el código en la página todo el tiempo en lugar de cargar el archivo de script externo como esto:

@model MyModel; 

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

¿Hay alguna forma de evitar esto?

+0

Si se pudiera generar el archivo externo de JS entonces su navegador podría almacenar en caché los datos de vista del modelo generadas dinámicamente. Probablemente no es lo que quieres? – BritishDeveloper

+1

Hace poco escribí sobre cómo puedes [generar archivos JavaScript externos usando vistas parciales de Razor] [blogpost]. La publicación del blog muestra cómo usar un filtro de acción personalizado para analizar el código Razor dentro de un archivo JavaScript externo. ** tl; dr: ** Sí, es posible usando una solución alternativa simple pero inteligente. [blogpost]: http://blog.mariusschulz.com/generating-external-javascript-files-using-partial-razor-views –

+0

http://stackoverflow.com/a/41312348/2592042 He explicado en detalle aquí. –

Respuesta

9

No hay forma de implementar el código MVC/Razor en los archivos JS.

Debe establecer datos variables en su HTML (en los archivos .cshtml), y esto está conceptualmente bien y no viola la separación de preocupaciones (HTML generado por el servidor vs. código de script del cliente) porque si lo piensa, estos valores variables son una preocupación del servidor.

Tome un vistazo a esta solución (parcial pero agradable): Using Inline C# inside Javascript File in MVC Framework

+1

Esa es una gran solución. Puedo mantener todo el javascript "estático" en un archivo, y luego poner la parte "vars" en la vista parcial y simplemente cargar eso. Agradable :) – BlueChippy

2

Lo que podría hacer es pasar las etiquetas de afeitar en una variable.

En afeitar Archivo>

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

en el archivo JS>

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

Siempre se puede tratar RazorJs. Es más o menos resuelve no ser capaz de utilizar un modelo en sus archivos js RazorJs

1

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

Sólo tiene que añadir el siguiente código a la acción del controlador:

this.AddJavaScriptVariable("Currency", Currency); 

Ahora puede acceder a la variable "Moneda" en JavaScript.

Si esta variable debe estar disponible en el sitio del agujero, colóquela en un filtro. Un ejemplo de cómo usar JavaScriptModel de un filtro se puede encontrar en la documentación.

9

Abordé este problema usando atributos de datos, junto con jQuery. Lo convierte en un código muy legible, y sin la necesidad de vistas parciales o ejecutar JavaScript estático a través de un ViewEngine. El archivo JavaScript es completamente estático y se almacenará en caché 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 (opcional, pero buena costumbre):

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

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