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


196

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

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

Ответы:


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.


Нет лучшего способа, хотя я бы назвал этот раздел "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, которая есть у макета, будет у всех дочерних страниц.

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


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

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

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

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