Styles.Render в MVC4


381

В .NET MVC4проекте как @Styles.Renderработает?

Я имею в виду, в @Styles.Render("~/Content/css")каком файле это вызывает?

У меня нет файла или папки с именем «css» внутри моей Contentпапки.


Ответы:


453

Он вызывает файлы, включенные в этот конкретный пакет, который объявлен внутри BundleConfigкласса в App_Startпапке.

В этом конкретном случае вызов @Styles.Render("~/Content/css")вызывает "~ / Content / site.css".

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

22
Следует знать, что он не добавит файл .css, который уже свернут в пакет. Пример: он не работает с bootstrap.min.js, только с bootstrap.js. Я надеюсь, что это может помочь другим.
Codea

5
Это говорит о стилях, а не сценариях. Если вы хотите использовать bootstrap.min.js, просто создайте пакет наподобие этого: bundles.Add (new ScriptBundle ("~ / bundles / bootstrap"). Include ("~ / Scripts / bootstrap.min.js"));
Xcalibur37

1
@codea Я не уверен , что ваш посаженный, но по умолчанию пакетирование будет принимать *.min.*более *.*файлы.
skmasq

@skmasq, во время написания этих строк я использовал VS2013. Все могло измениться до сих пор. Спасибо, что упомянули об этом :)
Codea

Я не понимаю .... зачем же создавать все пакеты и добавлять эти пути к этим сумасшедшим классам в MVC, когда вы можете просто добавить CSS <link> в файл на своей веб-странице? Если вы добавите все свои CSS-ссылки в таблицы стилей, например, в файл макета или в частичное представление, вы также сможете управлять ими в одном простом месте. Это также плохой дизайн для жесткого кода. Подобные пути стилей, так как вы больше не можете создавать скины CSS, что было главной целью системы CSS, когда она создавалась 20 лет назад.
Стокли

34

Следите за чувствительностью к регистру. Если у вас есть файл

/Content/bootstrap.css

и вы перенаправляете в свой Bundle.config на

.INCLUDE ( "~ / Content / Bootstrap.css")

это не будет загружать CSS.


Также: второе включение пишется по-другому.
Дэн Эспарза

1
есть ли поддержка sass / less-файлов?
Мантикор

12

Немного опоздал на вечеринку. Но, похоже , никто не обмолвился
пакетирование & минификация из StyleBundle, так что ..

@Styles.Render("~/Content/css") 

звонки в Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);            

который в свою очередь вызывает

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
}

RegisterBundles()эффективно объединяет и минимизирует bootstrap.css & Site.css
в один файл,

<link href="/Content/css?v=omEnf6XKhDfHpwdllcEwzSIFQajQQLOQweh_aX9VVWY1" rel="stylesheet">

Но ..

<system.web>
  <compilation debug="false" targetFramework="4.6.1" />
</system.web>

только когда debug установлено falseв Web.config.
В противном случае bootstrap.css& Site.cssбудет обслуживаться индивидуально.
Не в комплекте и не минимизировано:

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">


0

Как определено в App_start.BundleConfig, это просто вызов

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Ничего не происходит, даже если вы удалите этот раздел.


0

Polo Я бы не использовал Bundles в MVC по нескольким причинам. Это не работает в вашем случае, потому что вы должны настроить пользовательский класс BundleConfig в вашей папке Apps_Start. Это не имеет смысла, когда вы можете просто добавить стиль в заголовок вашего HTML, например так:

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap.theme.css" />

Вы также можете добавить их в класс Layout.cshtml или частичный класс, который вызывается из всех ваших представлений и помещается на каждую страницу. Если ваши стили меняются, вы можете легко изменить имя и путь без перекомпиляции.

Добавление жестко закодированных ссылок на CSS в класс нарушает целиком отделение интерфейса и дизайна от модели приложения. Вам также не нужны жестко запрограммированные пути таблиц стилей, управляемые в c #, потому что вы больше не можете создавать «скины» или отдельные модели стилей, например, для различных устройств, тем и т. Д., Например:

<link rel="stylesheet" href="~/UI/Skins/skin1/base.css" />
<link rel="stylesheet" href="~/UI/Skins/skin2/base.css" />

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

Основная цель CSS 15 лет назад состояла в том, чтобы разработать «скины» для сайтов, управляемые как пользователем, так и приложением, для того, чтобы вы могли отключить внешний вид и ощущение пользовательского интерфейса от приложения и переназначить контент независимо от структуры данных. .... например, версия для печати, мобильная, аудио версия, сырой XML и т. д.

Вернувшись теперь к этой «старомодной», жестко запрограммированной системе путей, использующей классы C #, жесткие стили, такие как Bootstrap, и объединяя темы сайтов с кодом приложения, мы снова вернулись к тому, как создавались сайты в 1998 году.


1
Так что же minificationтогда? : s / :(
Скотт Фрэйли

Да. Почему разработчики в 2019 году минимизируют css и javascript, а затем создают API, такие как Angular и другие, которые отправляют мегабайты ненужного ECMAScript (Javascript) клиентам? Раньше мы отправляли меньше кода или сжатого кода клиентам с ограниченной пропускной способностью, чтобы они могли получить код, когда они были ограничены пропускной способностью .... то есть модемами со скоростью передачи 14 Кбод. У нас есть 5G, так что сжатие кода, такое как сжатие gif или минимизация, не требуется. Тем не менее, в результате мы пошли назад, отправляя огромные куски скриптов клиентам. Так зачем что-то минимизировать?
Стокли

1
Потому что мы должны посылать по проводам как можно меньше? Я конечно стараюсь свести вещи к минимуму.
Скотт Фрэли

0

Я сделал все, что нужно, чтобы добавить связывание в сеть MVC 3 (я новичок в существующем решении). Styles.Renderне работал для меня Я наконец обнаружил, что просто пропустил двоеточие. На главной странице: <%: Styles.Render("~/Content/Css") %> я все еще не понимаю, почему (на той же странице) <% Html.RenderPartial("LogOnUserControl"); %>работает без двоеточия.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.