web-dev-qa-db-fra.com

Comment référencer un fichier .css sur une vue rasoir?

Je sais comment définir des fichiers .css sur le fichier _Layout.cshtml, mais qu'en est-il de l'application d'une feuille de style par vue?

Mon idée est que, dans _Layout.cshtml, vous avez des balises <head> avec lesquelles vous pouvez travailler, mais pas dans l’une de vos vues autres que celle du modèle. Où vont les tags <link>?

cssasp.net-mvcrazor
164
MrBoJangles

Pour les CSS réutilisés sur l’ensemble du site, je les définis dans la section <head> du _Layout:

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

et si j'ai besoin de styles de vue spécifiques, je définis la section Styles dans chaque vue:

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

Edit: il est utile de savoir que le deuxième paramètre de @RenderSection, false, signifie que la section n'est pas obligatoire sur une vue qui utilise cette page maître et que le moteur de la vue ignorera à merveille le fait qu'aucune section "Styles" n'est définie. à votre avis. Si la valeur est true, la vue ne sera pas rendue et une erreur sera renvoyée à moins que la section "Styles" ait été définie.

288
Darin Dimitrov

J'ai essayé d'ajouter un bloc comme suit:

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

Et un bloc correspondant dans le fichier _Layout.cshtml:

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

Qui fonctionne! Mais je ne peux pas m'empêcher de penser qu'il existe un meilleur moyen. UPDATE: Ajout de "false" dans l'instruction @RenderSection pour que votre vue ne se "splode pas" lorsque vous oubliez d'ajouter un @section appelé head.

17
MrBoJangles

En utilisant

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

ou 

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

pourrait travailler pour vous.

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

10
Nishanth Shaan

la mise en page fonctionne de la même manière qu'une page maître. quelle que soit la référence css de cette mise en page, toutes les pages enfants en auront. 

Scott Gu a une excellente explication ici

3
BentOnCoding

Je préfère utiliser l'aide de rasoir html de Client Dependency dll

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

Vous pouvez cette structure dans le fichier Layout.cshtml

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