Динамически созданный Javascript, CSS в ASP.NET MVC

ASP.NET позволяет динамически генерировать HTML-код с использованием тегов сервера (бритва или ASPX). Но есть ли хороший способ генерировать *.js или *.css-контент таким же образом, кроме использования встроенного (встроенного) CSS/Javascript. В настоящее время с такими технологиями, как Ajax, все больше логики перемещается с серверной стороны на клиентскую сторону в Javascript. Было бы здорово иметь такую ​​возможность генерировать JS динамически, используя всю гибкость, которую ASP.NET обеспечивает для генерации HTML.

Например, мой Javascript содержит объявление модели Knockout view с исходными данными, загруженными с сервера во время рендеринга Javascript, и некоторые дополнительные js-функции, поэтому в моем Html вместо встроенных скриптов я хочу иметь script ссылки вроде этого:

<script src="~/Scripts/[email protected]"></script>

Еще один пример, где разработчику может понадобиться, это использование CSS на основе пользовательского профиля. Информация о профиле пользователя содержит информацию о стиле (шрифты, цвета, а не только тему), которые должны соблюдаться во время генерации CSS, поэтому на мой взгляд у меня будет что-то вроде:

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

CurrentUserOverrides.css будет генерироваться динамически на основе данных профиля аутентифицированного пользователя.

Как это сделать с помощью ASP.NET MVC? Я хочу найти решение, которое позволит мне сделать это так же просто, как создавать динамический HTML с помощью ASP.NET, с должным образом работающим intellisence и всем остальным, что VS предлагает для представлений ASP.NET.

Ответы

Ответ 1

Лучшее решение, которое я нашел для этого, заключается в следующем:

Динамический JavaScript и CSS в ASP.NET MVC с использованием Razor Views

Вы просто создаете представления: CurrentUserOverrides.css.cshtml, ContactViewModel.js.cshtml. Эти представления будут содержать один блок HTML (<script> или <style>), поэтому IntelliSense работает нормально. Затем вы создаете контроллер, который отображает это представление, обрезает корневой тег и возвращает контент с соответствующим типом контента.

Ответ 2

Динамический CSS в файле CSHTML

Я использую комментарии CSS /* */, чтобы прокомментировать новый тег <style>, а затем я return; перед тегом стиля закрытия:

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

    CSS GOES HERE

@{return;}</style>

Динамический JS в файле CSHTML

Я использую комментарии JavaScript <!--//, чтобы прокомментировать новый тег <script>, а затем я return; перед закрывающим тегом script:

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

Не требуется контроллер (с использованием представлений/разделов)

Я включил оба моих динамических сценария в Views/Shared/, и я могу легко встраивать их в любую существующую страницу (или в _Layout.cshtml), используя следующий код:

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

Использование контроллера (необязательно)

Если вы предпочитаете, вы можете создать контроллер, например.

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

Здесь, что контроллер может выглядеть как

MyDynamicCodeController.cs(необязательно)

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

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

Примечания

  • Версия контроллера не проверена. Я просто набрал это с головы.
  • После повторного чтения моего ответа, мне кажется, что так же легко комментировать закрывающие теги, а не использовать cshtml @{return;}, но я его не пробовал. Я думаю, это вопрос предпочтения.
  • Относительно всего моего ответа, если вы обнаружите какие-либо синтаксические ошибки или улучшения, сообщите мне.

Ответ 3

Существует относительно новый язык TypeScript, который, я думаю, может быть тем, что вы ищете с помощью JavaScript, а не для CSS. Здесь - сообщение для получения этой работы в ASP.NET MVC4.