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

196

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?

Je pense ici que, dans _Layout.cshtml, vous avez des <head>balises avec lesquelles travailler, mais pas dans l'une de vos vues sans mise en page. Où vont les <link>balises?

css asp.net-mvc razor MrBoJangles
la source

Réponses:

340

Pour les CSS qui sont réutilisés sur l'ensemble du site, je les définis dans la <head>section 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 spécifiques à une vue, je définis la Stylessection 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 requise sur une vue qui utilise cette page maître, et le moteur de vue ignorera parfaitement le fait qu'aucune section "Styles" n'est définie à votre avis. Si vrai, la vue ne sera pas rendue et une erreur sera renvoyée à moins que la section "Styles" n'ait été définie.

Darin Dimitrov
la source
4
Vous savez, après réflexion, ce n'est pas si mal. Je pense que c'est tout simplement nouveau et différent.
MrBoJangles
@section Styles -> dit impossible de résoudre les styles de section, qu'est-ce que cela signifie?
Revious
2
@Sam, cela signifie qu'aucune section de ce type n'est définie dans votre mise en page.
Darin Dimitrov
@DarinDimitrov Existe-t-il un moyen de rendre à la position exacte plutôt qu'à la fin de l'en-tête. Je souhaite conserver un ordre spécifique pour les priorités css.
Marc
@Marc Il est rendu sur un endroit, où vous appelez RenderSection(étonnamment :), pas à la fin de l'en-tête.
David Ferenczy Rogožan
22

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

@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>

Ce qui fonctionne! Mais je ne peux pas m'empêcher de penser qu'il existe un meilleur moyen. MISE À JOUR: Ajout de "false" dans l' @RenderSectioninstruction pour que votre vue ne se dissipe pas lorsque vous négligez d'ajouter un @sectionappelé head.

MrBoJangles
la source
Il n'y a pas de meilleur moyen, même si je nommerais la section "Head".
SLaks
Vous avez parfaitement raison. L'appeler "pageStyle" suggère que ce n'est que dans ce but.
MrBoJangles
1
Si vous le faites comme ça, vous auriez besoin d'ajouter "MyStyles" dans toutes les vues, j'irais avec la réponse de Darins.
Filip Ekberg
Droit-o. C'est pourquoi j'ai ajouté le faux argument à @RenderSection(). Bonne prise.
MrBoJangles
12

En utilisant

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

ou 

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

pourrait fonctionner pour vous.

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

Nishanth Shaan
la source
4
Veuillez ne pas publier de liens pour dupliquer les réponses . Au lieu de cela, envisagez d'autres actions qui pourraient aider les futurs utilisateurs à trouver la réponse dont ils ont besoin, comme décrit dans l'article lié.
Mogsdad
3

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

Scott Gu a une excellente explication ici

BentOnCoding
la source
1
Infiniment reconnaissant. Cependant, ma question est la suivante: comment définir une référence à une vue unique et non au «maître».
MrBoJangles
1

Je préfère utiliser l'assistant html razor de la DLL de dépendance client

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

Vous pouvez cette structure dans le fichier Layout.cshtml

<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />
mofidul
la source
1
Comment cela me permet-il d'appliquer de manière sélective une feuille de style par vue?
MrBoJangles
Vous pouvez également ajouter une classe ou un identifiant à chaque section, et à l'intérieur de l'en-tête, vous pouvez avoir un style comme celui mentionné par mofidul. Ce que je fais, c'est que je travaille avec sass, donc chaque vue a un conteneur de classe distinct. De cette façon, j'ai créé des pages sass pour chaque section, qui au final sont plus structurées et organisées.
Leo
quelle est la signification de rel = "styleheet"?
Sven Krauter le