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
source

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

0

Vous pouvez cette structure dans le fichier Layout.cshtml

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

— mofidul
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