Бритва в CSS / Less?

Question

У меня есть представление, где я создаю контейнер и заполняю его некоторыми вещами. имя контейнера передается в представление, поэтому мой контроллер выглядит примерно так:

public ActionResult Index(string Container = "Products")
{
    ViewBag.Container = Container;
    return PartialView();
}

, который я затем вызываю из другого представления, например:

@Html.Action("Index", "Product", new { Container = "LatestProducts" })

представление включает в себя свои CSS и Javascript на той же странице, например:

<div id="@ViewBag.Container">
  <div class="New"></div>
  <ul></ul>
</div>

<style>
#@ViewBag.Container {
  ...
}
</style>
<script>
    function AddProduct(container, o) {
        var ul = $(container).find('ul');
        ul.append(o.whatever);
    }
    $(function() {
        @foreach (var item in Model) {
           @: AddProduct('#@ViewBag.Container', { whatever: item.whatever });
        }
    });
</script>

Моя проблема в том, что теперь я вырываю весь Javascript / Css со страницы, чтобы поместить его в свои собственные файлы, и я не знаю, как заставить Razor написать необходимые имена контейнеров ...

мысли кого-нибудь?

Answer 1

Я не совсем понимаю смысл вашего javascript. Все, что делает этот javascript, это то, что он подписывается на событие готовности DOM, находит div с указанным идентификатором, затем ul внутри него, а затем перебирает модель и добавляет к ней некоторое свойство. Почему вы не создаете разметку прямо на сервере? Будет намного проще:

@model IEnumerable<MyViewModel>
<div id="@ViewBag.Container">
    <div class="New"></div>
    <ul>
        @Html.DisplayForModel()
    </ul>
</div>

и в соответствующем шаблоне отображения (~/Views/Shared/DisplayTemplates/MyViewModel.cshtml):

@model MyViewModel
@Html.DisplayFor(x => x.Whatever)

Что касается CSS, вы можете включить все возможные стили в отдельный файл CSS, который будет обслуживаться и кэшироваться только один раз в клиентских браузерах. Поэтому, даже если он будет больше, он будет быстрее, чем при использовании динамических правил.

Answer 2

эта статья Динамические таблицы стилей с использованием Razor предлагают отличное решение проблемы. это оставляет меня с вопросом о том, как поддержать Меньше, но этот ответ может прийти

Answer 3

Использование RazorJS .