Jak odwołać się do pliku .css w widoku maszynki do golenia?

196

Wiem, jak ustawić pliki .css w pliku _Layout.cshtml, ale co z zastosowaniem arkusza stylów dla poszczególnych wyświetleń?

Myślę tutaj o tym, że w _Layout.cshtml masz <head>tagi do pracy, ale nie w jednym z widoków nie- układowych . Gdzie <link>idą tagi?

css asp.net-mvc razor MrBoJangles
źródło

Odpowiedzi:

340

W przypadku CSS, które są ponownie wykorzystywane w całej witrynie, definiuję je w <head>sekcji _Layout:

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

a jeśli potrzebuję stylów specyficznych dla widoku, definiuję Stylessekcję w każdym widoku:

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

Edycja: Warto wiedzieć, że drugi parametr w @RenderSection, false, oznacza, że ​​sekcja nie jest wymagana w widoku korzystającym z tej strony wzorcowej, a silnik widoku błogie zignoruje fakt, że nie zdefiniowano sekcji „Style” twoim zdaniem. Jeśli true, widok nie będzie renderowany, a błąd zostanie zgłoszony, chyba że zdefiniowano sekcję „Style”.

Darin Dimitrov
źródło
4
Wiesz, po namyśle, nie jest tak źle. Myślę, że to po prostu nowe i inne.
MrBoJangles
@ Style sekcji -> mówi, że nie można rozwiązać stylów sekcji, co to znaczy?
Revious
2
@Sam, oznacza to, że nie ma takiej sekcji zdefiniowanej w twoim układzie.
Darin Dimitrov
@DarinDimitrov Czy istnieje sposób renderowania w dokładnej pozycji zamiast na końcu nagłówka. Chciałbym zachować określoną kolejność priorytetów css.
Marc
@Marc Jest renderowany w miejscu, do którego dzwonisz RenderSection(zaskakująco :), a nie na końcu nagłówka.
David Ferenczy Rogožan
22

Próbowałem dodać taki blok:

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

I odpowiedni blok w pliku _Layout.cshtml:

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

Które działa! Ale nic nie mogę poradzić, ale myślę, że jest lepszy sposób. AKTUALIZACJA: Dodano „fałsz” w @RenderSectioninstrukcji, aby twój widok nie „rozpadł się, gdy zaniedbałeś dodanie @sectionwywołanego head.

MrBoJangles
źródło
Nie ma lepszego sposobu, chociaż nazwałbym tę sekcję "Head".
SLaks
Masz rację. Nazwanie go „pageStyle” sugeruje, że jest to tylko w tym celu.
MrBoJangles
1
Jeśli zrobisz to w ten sposób, musisz dodać „MyStyles” do wszystkich widoków, wybrałbym odpowiedź Darinsa.
Filip Ekberg
Racja. Dlatego dodałem fałszywy argument @RenderSection(). Dobry chwyt
MrBoJangles
12

Za pomocą

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

lub 

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

może pracować dla ciebie.

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

Nishanth Shaan
źródło
4
Nie publikuj linków do duplikatów odpowiedzi . Zamiast tego rozważ inne działania, które mogą pomóc przyszłym użytkownikom znaleźć potrzebną odpowiedź, zgodnie z opisem w łączonym poście.
Mogsdad
3

układ działa tak samo jak strona wzorcowa. dowolne odwołanie css, które ma układ, wszystkie strony podrzędne będą miały.

Scott Gu ma tutaj doskonałe wyjaśnienie

BentOnCoding
źródło
1
Bardzo zobowiązany. Moje pytanie brzmi jednak: jak ustawić odniesienie do pojedynczego widoku, a nie „głównego”.
MrBoJangles
1

Wolę używać pomocnika html razor z biblioteki DLL Dependency

Html.RequireCss("yourfile", 9999); // 9999 is loading priority
John Blair
źródło
0

Możesz tę strukturę w pliku Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
mofidul
źródło
1
W jaki sposób pozwala mi to selektywnie zastosować arkusz stylów do widoku?
MrBoJangles,
Możesz również dodać klasę lub identyfikator do każdej sekcji, a wewnątrz nagłówka możesz mieć style takie jak wspomniane przez mofidul. Pracuję z sass, więc każdy widok ma osobny kontener klasy. W ten sposób stworzyłem strony sass dla każdej sekcji, która ostatecznie jest bardziej uporządkowana i zorganizowana.
Leo
jakie jest znaczenie rel = "stylesheet"?
Sven Krauter