Как ссылаться на файл .css в бритве?

196

Я знаю, как установить файлы .css в файле _Layout.cshtml, но как насчет применения таблицы стилей для каждого просмотра?

Я думаю, что в _Layout.cshtml у вас есть <head>теги для работы, но не в одном из представлений без макета. Куда <link>идут метки?

css asp.net-mvc razor

— MrBoJangles
источник

340

Для CSS, которые повторно используются на всем сайте, я определяю их в <head>разделе _Layout:

<head>
    <link href="@Url.Content("~/Styles/main.css")" rel="stylesheet" type="text/css" />
    @RenderSection("Styles", false)
</head>

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

@section Styles {
    <link href="@Url.Content("~/Styles/view_specific_style.css")" rel="stylesheet" type="text/css" />
}

Редактировать: полезно знать, что второй параметр в @RenderSection, false, означает, что раздел не требуется в представлении, использующем эту главную страницу, и механизм представления будет блаженно игнорировать тот факт, что не определен раздел «Стили» по вашему мнению. Если true, представление не будет отображаться, и будет выдана ошибка, если не был определен раздел «Стили».

— Дарин димитров
источник

4

Знаете, если подумать, это не так уж и плохо. Я думаю, что это просто новое и другое.

— MrBoJangles

@section Styles -> говорит, что не может разрешить стили раздела, что это значит?

— Ревив

2

@Sam, это означает, что в вашем макете такой раздел не определен.

— Дарин Димитров

@DarinDimitrov Есть ли способ визуализации в точной позиции, а не в конце заголовка. Я хотел бы сохранить определенный порядок для приоритетов CSS.

— Марк,

@Marc Рендерится в месте, куда вы звоните RenderSection(удивительно :), а не в конце заголовка.

— Давид Ференци Рогожан,

22

Я попытался добавить блок так:

@section styles{
    <link rel="Stylesheet" href="@Href("~/Content/MyStyles.css")" />
}

И соответствующий блок в файле _Layout.cshtml:

<head>
<title>@ViewBag.Title</title>
@RenderSection("styles", false);
</head>

Который работает! Но я не могу не думать, что есть лучший способ. ОБНОВЛЕНИЕ: добавлено «ложь» в @RenderSectionутверждении, чтобы ваше представление не всплывало, когда вы не добавляете @sectionвызываемого head.

— MrBoJangles
источник

Нет лучшего способа, хотя я бы назвал этот раздел "Head".

— Утром

Ты совершенно прав. Называя его "pageStyle", можно предположить, что это только для этой цели.

— MrBoJangles

1

Если вы сделаете это так, вам нужно будет добавить «MyStyles» во все представления, я бы ответил с ответом Дарина.

— Филипп Экберг

Право-о. Вот почему я добавил ложный аргумент @RenderSection(). Хороший улов.

— MrBoJangles

12

С помощью

@Scripts.Render("~/scripts/myScript.js")

или

@Styles.Render("~/styles/myStylesheet.css")

может работать на вас.

https://stackoverflow.com/a/36157950/2924015

— Нишант Шаан
источник

4

Пожалуйста, не размещайте ссылки на дубликаты ответов . Вместо этого рассмотрите другие действия, которые могут помочь будущим пользователям найти нужный ответ, как описано в связанном посте.

— Могсдад

3

макет работает так же, как мастер-страница. любая ссылка CSS, которая есть у макета, будет у всех дочерних страниц.

Скотт Гу имеет отличное объяснение здесь

— BentOnCoding
источник

1

Весьма признателен. Тем не менее, мой вопрос, как мне установить ссылку на один вид, а не «мастер».

— MrBoJangles

1

Я предпочитаю использовать бритвенный помощник HTML из Client Dependency dll

Html.RequireCss("yourfile", 9999); // 9999 is loading priority

— Джон Блэр
источник

0

Вы можете эту структуру в файле Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />

— mofidul
источник

1

Как это позволяет мне выборочно применять таблицу стилей для каждого просмотра?

— MrBoJangles

Вы также можете добавить класс или идентификатор для каждого раздела, и внутри заголовка вы можете иметь стили, подобные упомянутому mofidul. Я работаю с sass, поэтому у каждого представления есть отдельный контейнер классов. Таким образом, я создал sass-страницы для каждого раздела, который в итоге более структурирован и организован.

— Лев

что означает rel = "stylesheet"?

— Свен Краутер