Comment référencer un fichier. css sur une vue razor?
Je sais comment régler .fichiers css sur le _Layout.fichier cshtml, mais qu'en est-il de l'application d'une feuille de style sur une base par vue?
Ma pensée ici est que, dans _Layout.cshtml, vous avez des balises <head> avec lesquelles travailler, mais pas dans l'une de vos vues non-mise en page. Où vont les balises <link>?
5 réponses
Pour les CSS qui sont réutilisés parmi 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 spécifiques à la vue, 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 requise sur une vue qui utilise cette page maître, et le moteur de vue ignorera parfaitement le fait qu'il n'y a pas de section "Styles" définie dans votre vue. Si la valeur est true, l' la vue ne sera pas affichée et une erreur sera générée à moins que la section "Styles" n'ait été définie.
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 _Layout.fichier cshtml:
<head>
<title>@ViewBag.Title</title>
@RenderSection("styles", false);
</head>
Qui fonctionne! Mais je ne peux pas m'empêcher de penser qu'il y a un meilleur moyen. Mise à jour: Ajout de "false" dans l'instruction @RenderSection afin que votre vue ne se splode pas lorsque vous négligez d'ajouter un @section appelé head.
En utilisant
@Scripts.Render("~/scripts/myScript.js")
Ou
@Styles.Render("~/styles/myStylesheet.css")
Pourrait travailler pour vous.
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.
Vous pouvez Cette structure dans Layout.fichier cshtml
<link href="~/YourCssFolder/YourCssStyle.css" rel="stylesheet" type="text/css" />