Javascript, CSS dinamicamente generato in ASP.NET MVC

Question

ASP.NET consente di generare HTML in modo dinamico utilizzando tag del server (rasoio o ASPX). Ma c'è un buon modo per generare contenuti * .js o * .css allo stesso modo, a parte l'uso di CSS/Javascript incorporati (incorporati). Oggigiorno con tecnologie come Ajax sempre più logiche si spostano dal lato server al lato client in Javascript. Sarebbe fantastico avere questa opportunità di generare JS in modo dinamico utilizzando tutta la flessibilità che ASP.NET offre per la generazione di HTML.

Ad esempio, il mio Javascript contiene Knockout dichiarazione vista del modello con i dati iniziali caricati dai server durante il rendering JavaScript, e alcuni ulteriori JS-funzioni, in modo a mio Html invece di script incorporati voglio avere riferimenti script come che:

<script src="~/Scripts/ContactViewModel.js?contactId=@Model.ContactId"></script> 

Un altro esempio, in cui lo sviluppatore potrebbe aver bisogno che sta usando CSS user-profilo in base. informazioni sul profilo utente contiene informazioni di stile (font, i colori, non solo a tema), che devono essere rispettate durante la generazione CSS, in modo a mio avviso avrò qualcosa di simile:

<link href="~/Styles/CurrentUserOverrides.css" rel="stylesheet" /> 

CurrentUserOverrides.css verrà generato dinamicamente in base sui dati del profilo dell'utente autenticato.

Come fare ciò utilizzando ASP.NET MVC? Voglio trovare una soluzione che mi consenta di farlo con la stessa facilità con cui creo HTML dinamico utilizzando ASP.NET, con intelligenza propriamente funzionante e tutto ciò che VS offre per le visualizzazioni ASP.NET.

Answer 1

La soluzione migliore finora ho trovato per questo è il seguente:

Dynamic Javascript and CSS in ASP.NET MVC using Razor Views

basta creare viste: CurrentUserOverrides.css.cshtml, ContactViewModel.js.cshtml. Questa vista conterrà un singolo blocco HTML (o), quindi l'intelli-sense funziona bene. Quindi crei il controller che esegue il rendering della vista, taglia il tag radice e restituisce il contenuto con il tipo di contenuto appropriato.

Answer 2

C'è un linguaggio relativamente nuovo TypeScript che penso potrebbe essere quello che stai cercando con JavaScript, non per CSS però. Here è un post per ottenere quello che funziona in ASP.NET MVC4.

Answer 3

dinamica CSS in un file CSHTML

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> 

dinamica JS in un File CSHTML

Io uso i commenti JavaScript <!--// per commentare un nuova <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 loro 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 per 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 o miglioramenti di sintassi, per favore fatemelo sapere.