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

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