2011-11-15 8 views
13

Amici,Genera il file javascript al volo in asp.net mvc

Sto cercando di utilizzare DyGraph nella mia applicazione. Si prega di guardare il codice qui sotto -

<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> 

Il codice utilizza il file data.js contenente la funzione per ottenere alcuni dati statici. Desidero che data.js sia generato utilizzando un metodo controller in modo che generi dati utilizzando il database.

Qualcuno può aiutarmi a risolvere questo problema.

Grazie per aver condiviso il vostro tempo prezioso.

+0

Ecco domanda simile con la soluzione più elegante: http://stackoverflow.com/questions/16092473/dynamically-generated-javascript-css-in-asp-net-mvc –

risposta

32

Si potrebbe definire un'azione di controllo:

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

e poi:

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

Se si dispone di alcuni script complesso che non si desidera generare nel controller che si potrebbe seguire lo standard Pattern MVC definendo un modello di visualizzazione:

public class MyViewModel 
{ 
    ... put required properties 
} 

un'azione controller che popolerebbe ate questo modello vista e passarlo alla vista:

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

ed infine una vista che in questo caso sarà la rappresentazione JavaScript del modello vista (~/Views/SomeController/Data.ascx):

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

Grazie Darin per la risposta rapida e dettagliata spiegazione. +1 per quello. – IrfanRaza

+0

I file Javascript generati in questo modo non sono compressi. Scommetto che ha qualcosa da fare con la richiesta che non termina con .js e iis. –

0

Figura Disclosure

  • Questa risposta è copia/incollato da un'altra domanda:
  • Questa risposta è simile ad altre risposte qui.
    • Questa risposta utilizza cshtml pagine anziché ascx controlli.
    • Questa risposta offre una soluzione di sola visualizzazione anziché una soluzione solo per il controller.
    • Non credo che la mia risposta sia "migliore", ma penso che per alcuni potrebbe essere più semplice.

dinamica CSS in un CSHTML file

Io uso CSS commenta /* */ per commentare un nuovo <style> tag e poi ho return; prima del tag di stile di chiusura:

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

    CSS GOES HERE 

@{return;}</style> 

JS dinamico in un file CSHTML

ho utilizzare i commenti JavaScript // per commentare un nuovo <script> tag e poi ho return; prima del tag script di chiusura:

//<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> 

alcun controller richiesto (che utilizzano Vista/Condiviso)

ho messo entrambi i miei script dinamici in Views/Shared/ e posso facilmente incorporare in qualsiasi pagina esistente (o in _Layout.cshtml) utilizzando il seguente codice:

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

Utilizzando un controller (opzionale)

Se si preferisce si può creare un controller ad esempio

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

Ecco cosa il controller potrebbe essere simile

MyDynamicCodeController.cs (opzionale)

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

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

Note

  • La versione del controller non è testato. L'ho appena scritto in cima alla mia testa.
  • Dopo aver riletto la mia risposta, mi viene in mente che potrebbe essere altrettanto semplice commentare i tag di chiusura piuttosto che usare il cshtml @{return;}, ma non l'ho provato. Immagino sia una questione di preferenza.
  • Per quanto riguarda la mia intera risposta, se trovi errori di sintassi o miglioramenti, per favore fatemelo sapere.