Dynamicznie generowany skrypt JavaScript, CSS w ASP.NET MVC

Question

Program ASP.NET umożliwia dynamiczne generowanie kodu HTML za pomocą znaczników serwera (maszynki do golenia lub ASPX). Ale czy istnieje dobry sposób na generowanie treści * .js lub * .css w ten sam sposób, z wyjątkiem używania wbudowanego (osadzonego) kodu CSS/Javascript. W dzisiejszych czasach z technologiami takimi jak Ajax coraz więcej logiki przenosi się z serwera na stronę klienta w JavaScript. Byłoby wspaniale mieć możliwość dynamicznego generowania JS przy użyciu całej elastyczności, jaką ASP.NET zapewnia do generowania HTML.

Na przykład, mój Javascript zawiera Knockout deklarację widok modelu z wstępnych danych ładowanych z serwerem podczas Javascript utylizacyjnych oraz dodatkowymi JS-funkcji, więc w moim HTML zamiast osadzone skrypty chcę mieć referencje skryptów takich jak to:

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

Innym przykładem, gdzie deweloper może tego potrzebować, jest użycie CSS na podstawie profilu użytkownika. Informacje profilu użytkownika zawiera informacje o stylach (czcionki, kolory, nie tylko motyw), które muszą być przestrzegane podczas generowania CSS, więc moim zdaniem będzie mam coś takiego:

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

CurrentUserOverrides.css zostanie wygenerowany dynamicznie w oparciu na danych profilu uwierzytelnionego użytkownika.

Jak to zrobić, używając ASP.NET MVC? Chcę znaleźć rozwiązanie, które pozwoli mi to zrobić tak łatwo, jak tworzenie dynamicznego HTML przy użyciu ASP.NET, z poprawnie działającą intellisence i wszystkim innym co oferuje VS dla widoków ASP.NET.

Answer 1

Najlepszym rozwiązaniem tej pory znalazłem na to jest następująca:

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

Wystarczy utworzyć widoki: CurrentUserOverrides.css.cshtml, ContactViewModel.js.cshtml. Widoki będą zawierać pojedynczy blok HTML (lub), więc intelli-sense działa dobrze. Następnie tworzysz kontroler, który renderuje ten widok, przycina główny znacznik i zwraca zawartość z odpowiednim typem zawartości.

Answer 2

Istnieje stosunkowo nowy język TypeScript, który moim zdaniem może być tym, czego szukasz w JavaScript, ale nie w CSS. Here to post, aby uzyskać to działa w ASP.NET MVC4.

Answer 3

Dynamiczne CSS w CSHTML Plik

używam CSS komentuje /* */ wypowiedzieć się nowy <style> tag a potem return; przed znacznikiem stylu zamknięcia:

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

    CSS GOES HERE 

@{return;}</style> 

Dynamiczny JS w miłym Plik CSHTML

Używam komentarzy w JavaScript <!--// do komentowania Nowy <script> tag a potem return; przed tagu skrypt zamykający:

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

Nie Kontroler Wymagane (wykorzystujące Views/Shared)

kładę obie moje dynamicznych skryptów do Views/Shared/ i mogę łatwo osadzać je do dowolnej istniejącej strony (lub w _Layout.cshtml) przy użyciu następującego kodu:

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

pomocą kontrolera (opcjonalnie)

Jeśli wolisz, możesz utworzyć kontroler np

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

Oto co kontroler może wyglądać

MyDynamicCodeController.cs (opcjonalnie)

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

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

Uwagi

• Wersja kontroler nie jest testowany. Właśnie napisałem to z mojej głowy.
• Po ponownym zapoznaniu się z moją odpowiedzią, wydaje mi się, że może być równie łatwo skomentować znaczniki zamykające niż użyć cshtml @{return;}, ale nie próbowałem tego. Wyobrażam sobie, że to kwestia preferencji.
• Odnośnie całej mojej odpowiedzi, jeśli znajdziesz błędy lub poprawki składniowe, daj mi znać.