2011-11-15 16 views
13

Amigos,Genere un archivo javascript sobre la marcha en asp.net mvc

Estoy tratando de usar DyGraph en mi aplicación. Por favor, mira el código de abajo -

<head> 
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9"> 
    <title>crosshairs</title> 

    <script type="text/javascript" src="dygraph-combined.js"></script> 

    <script type="text/javascript" src="data.js"></script> 
    </head> 

El código utiliza data.js archivo que contiene la función para obtener algunos datos estáticos. Quiero que se genere data.js usando un método de controlador para que genere datos usando la base de datos.

¿Alguien me puede ayudar a resolver este problema.

Gracias por compartir su valioso tiempo.

+0

Aquí es pregunta similar con una solución más elegante: http://stackoverflow.com/questions/16092473/dynamically-generated-javascript-css-in-asp-net-mvc –

Respuesta

32

Se podría definir una acción del controlador:

public ActionResult Data() 
{ 
    // Obviously this will be dynamically generated 
    var data = "alert('Hello World');"; 
    return JavaScript(data); 
} 

y luego:

<script type="text/javascript" src="<%= Url.Action("Data", "SomeController") %>"></script> 

Si tiene alguna escritura compleja que no desea generar en el controlador se podía seguir la norma Patrón MVC mediante la definición de un modelo de vista:

public class MyViewModel 
{ 
    ... put required properties 
} 

acción de un controlador que popul comió esta vista de modelo y pasarlo a la vista:

public ActionResult Data() 
{ 
    MyViewModel model = ... 
    Response.ContentType = "application/javascript"; 
    return PartialView(model); 
} 

y, finalmente, una vista que en este caso será la representación javascript del modelo de vista (~/Views/SomeController/Data.ascx):

<%@ Control 
    Language="C#" 
    Inherits="System.Web.Mvc.ViewUserControl<MyViewModel>" %> 
alert(<%= new JavaScriptSerializer().Serialize(Model.Name) %>); 
+0

Gracias Darin por su respuesta rápida y detallada explicación. +1 por eso. – IrfanRaza

+0

Los archivos Javascript generados de esta manera no se comprimen. Apuesto a que tiene algo que hacer la solicitud que no termina en .js y iis. –

0

divulgación completa

  • Esta respuesta es copiar/pegar de otra pregunta:
  • Esta respuesta es similar a otras respuestas aquí.
    • Esta respuesta utiliza cshtml páginas en lugar de controles ascx.
    • Esta respuesta ofrece una solución de solo lectura en lugar de una solución de solo controlador.
    • No creo que mi respuesta sea "mejor", pero creo que podría ser más fácil para algunos.

dinámico CSS en un archivo CSHTML

utilizar CSS comenta /* */ a comentar una nueva <style> etiqueta y luego return; antes de la etiqueta de estilo de cierre:

/*<style type="text/css">/* */ 

    CSS GOES HERE 

@{return;}</style> 

JS dinámico en un archivo CSHTML

que el uso de JavaScript comenta // a comentar una nueva etiqueta <script> y luego return; antes de la etiqueta de script de cierre:

//<script type="text/javascript"> 

    JAVASCRIPT GOES HERE 

@{return;}</script> 

MyDynamicCss.cshtml

@{ 
var fieldList = new List<string>(); 
fieldList.Add("field1"); 
fieldList.Add("field2"); 

} 

/*<style type="text/css">/* */ 

@foreach (var field in fieldList) {<text> 

input[name="@field"] 
, select[name="@field"] 
{ 
    background-color: #bbb; 
    color: #6f6f6f; 
} 

</text>} 

@{return;}</style> 

MyDynamicJavsScript.cshtml

@{ 
var fieldList = new List<string>(); 
fieldList.Add("field1"); 
fieldList.Add("field2"); 
fieldArray = string.Join(",", fieldList); 

} 

//<script type="text/javascript"> 

$(document).ready(function() { 
    var fieldList = "@Html.Raw(fieldArray)"; 
    var fieldArray = fieldList.split(','); 
    var arrayLength = fieldArray.length; 
    var selector = ''; 
    for (var i = 0; i < arrayLength; i++) { 
     var field = fieldArray[i]; 
     selector += (selector == '' ? '' : ',') 
        + 'input[name="' + field + '"]' 
        + ',select[name="' + field + '"]';    
    } 
    $(selector).attr('disabled', 'disabled'); 
    $(selector).addClass('disabled'); 
}); 
@{return;}</script> 

ningún controlador necesario (utilizando Vistas/Compartido)

puse mis dos guiones dinámicos en Views/Shared/ y que fácilmente puede incrustar en cualquier página existente (o en _Layout.cshtml) usando el siguiente código:

<style type="text/css">@Html.Partial("MyDynamicCss")</style> 
<script type="text/javascript">@Html.Partial("MyDynamicJavaScript")</script> 

el uso de un controlador (opcional)

Si lo prefiere, puede crear un controlador por ejemplo,

<link rel="stylesheet" type="text/css" href="@Url.Action("MyDynamicCss", "MyDynamicCode")"> 
<script type="text/javascript" src="@Url.Action("MyDynamicJavaScript", "MyDynamicCode")"></script> 

Esto es lo que el controlador podría parecerse

MyDynamicCodeController.cs (opcional)

[HttpGet] 
public ActionResult MyDynamicCss() 
{ 
    Response.ContentType = "text/css"; 
    return View(); 
} 

[HttpGet] 
public ActionResult MyDynamicJavaScript() 
{ 
    Response.ContentType = "application/javascript"; 
    return View(); 
} 

Notas

  • La versión del controlador no se analiza. Simplemente tecleé eso de la parte superior de mi cabeza.
  • Después de volver a leer mi respuesta, se me ocurre que podría ser igual de fácil comentar las etiquetas de cierre en lugar de utilizar cshtml @{return;}, pero no lo he intentado. Me imagino que es una cuestión de preferencia.
  • En cuanto a mi respuesta completa, si encuentra errores de sintaxis o mejoras, por favor hágamelo saber.
Cuestiones relacionadas