Wie verweise ich auf eine CSS-Datei in einer Rasiereransicht?

195

Ich weiß, wie CSS-Dateien in der Datei _Layout.cshtml festgelegt werden, aber wie sieht es mit der Anwendung eines Stylesheets pro Ansicht aus?

Ich denke hier, dass Sie in _Layout.cshtml <head>Tags haben, mit denen Sie arbeiten können, aber nicht in einer Ihrer Nicht-Layout-Ansichten. Wohin gehen die <link>Tags?

css asp.net-mvc razor MrBoJangles
quelle

Antworten:

338

Für CSS, die auf der gesamten Site wiederverwendet werden, definiere ich sie im <head>Abschnitt _Layout:

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

und wenn ich einige ansichtsspezifische Stile benötige, definiere ich den StylesAbschnitt in jeder Ansicht:

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

Bearbeiten: Es ist nützlich zu wissen, dass der zweite Parameter in @RenderSection, false, bedeutet, dass der Abschnitt in einer Ansicht, die diese Masterseite verwendet, nicht erforderlich ist und die Ansichts-Engine die Tatsache, dass kein Abschnitt "Stile" definiert ist, selig ignoriert aus Ihrer Sicht. Wenn true, wird die Ansicht nicht gerendert und es wird ein Fehler ausgegeben, es sei denn, der Abschnitt "Stile" wurde definiert.

Darin Dimitrov
quelle
4
Weißt du, beim zweiten Gedanken ist das nicht so schlimm. Ich denke, es ist einfach neu und anders.
MrBoJangles
@section Styles -> sagt, dass Section Styles nicht aufgelöst werden können. Was bedeutet das?
Revious
2
@Sam bedeutet, dass in Ihrem Layout kein solcher Abschnitt definiert ist.
Darin Dimitrov
@DarinDimitrov Gibt es eine Möglichkeit, an der exakten Position anstatt am Ende des Headers zu rendern? Ich möchte eine bestimmte Reihenfolge für die CSS-Prioritäten beibehalten.
Marc
@Marc Es wird an einer Stelle gerendert, an der Sie RenderSection(überraschenderweise :) anrufen , nicht am Ende des Headers.
David Ferenczy Rogožan
22

Ich habe versucht, einen Block wie folgt hinzuzufügen:

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

Und ein entsprechender Block in der Datei _Layout.cshtml:

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

Welches funktioniert! Aber ich kann nicht anders, als zu glauben, dass es einen besseren Weg gibt. UPDATE: In der @RenderSectionAnweisung wurde "false" hinzugefügt, damit Ihre Ansicht nicht splittert, wenn Sie es versäumen, einen @sectionAufruf hinzuzufügen head.

MrBoJangles
quelle
Es gibt keinen besseren Weg, obwohl ich den Abschnitt nennen würde "Head".
SLaks
Du bist genau richtig. Wenn Sie es "pageStyle" nennen, ist dies nur für diesen Zweck vorgesehen.
MrBoJangles
1
Wenn Sie es so machen, müssten Sie "MyStyles" in allen Ansichten hinzufügen, ich würde mit Darins Antwort gehen.
Filip Ekberg
Richtig-o. Deshalb habe ich das falsche Argument hinzugefügt @RenderSection(). Guter Fang.
MrBoJangles
12

Verwenden von

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

oder 

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

könnte für dich arbeiten.

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

Nishanth Shaan
quelle
4
Bitte posten Sie keine Links, um Antworten zu duplizieren . Ziehen Sie stattdessen andere Aktionen in Betracht, die zukünftigen Benutzern helfen könnten, die Antwort zu finden, die sie benötigen, wie im verlinkten Beitrag beschrieben.
Mogsdad
3

Das Layout funktioniert genauso wie eine Masterseite. Jede CSS-Referenz, die das Layout hat, alle untergeordneten Seiten.

Scott Gu hat hier eine ausgezeichnete Erklärung

BentOnCoding
quelle
1
Herzlichen Dank. Meine Frage ist jedoch, wie ich einen Verweis auf eine einzelne Ansicht und nicht auf den "Master" setze.
MrBoJangles
1

Ich bevorzuge die Verwendung des Razor-HTML-Hilfsprogramms aus der Client Dependency-DLL

Html.RequireCss("yourfile", 9999); // 9999 is loading priority
John Blair
quelle
0

Sie können diese Struktur in der Datei Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
mofidul
quelle
1
Wie kann ich so ein Stylesheet pro Ansicht selektiv anwenden?
MrBoJangles
Sie können jedem Abschnitt auch eine Klasse oder ID hinzufügen und in der Kopfzeile einen Stil wie den von mofidul erwähnten haben. Ich arbeite mit sass, sodass jede Ansicht einen eigenen Klassencontainer hat. Auf diese Weise habe ich für jeden Abschnitt Sass-Seiten erstellt, die am Ende strukturierter und organisierter sind.
Leo
Was bedeutet rel = "Stylesheet"?
Sven Krauter