web-dev-qa-db-de.com

Wie verweise ich auf eine .css-Datei in einer Rasiereransicht?

Ich weiß, wie man .css-Dateien für die _Layout.cshtml-Datei einstellt, aber wie sieht es mit der Anwendung eines Stylesheets pro View aus?

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

164
MrBoJangles

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

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

und wenn ich bestimmte Ansichtsstile brauche, definiere ich den Abschnitt Styles 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 das View-Modul die Tatsache ignoriert, dass kein Abschnitt "Styles" definiert ist aus deiner Sicht. Bei true wird die Ansicht nicht gerendert und es wird ein Fehler ausgegeben, es sei denn, der Abschnitt "Stile" wurde definiert.

288
Darin Dimitrov

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

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

Und einen entsprechenden Block in der Datei _Layout.cshtml:

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

Was funktioniert Aber ich kann nicht anders als zu denken, dass es einen besseren Weg gibt. UPDATE: In der @RenderSection-Anweisung wurde "false" hinzugefügt, damit Ihre Ansicht nicht zerbricht, wenn Sie es unterlassen, einen @section mit dem Namen head hinzuzufügen.

17
MrBoJangles

Verwenden

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

oder 

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

könnte für dich arbeiten.

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

10
Nishanth Shaan

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

Scott Gu hat hier eine ausgezeichnete Erklärung

3
BentOnCoding

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

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

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

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