web-dev-qa-db-fra.com

Styles.Render dans MVC4

Dans un projet .NET MVC4, comment fonctionne @Styles.Render?

Je veux dire, dans @Styles.Render("~/Content/css") quel fichier appelle-t-il?

Je n'ai pas de fichier ou de dossier appelé "css" dans mon dossier Content.

c#asp.net-mvcrazorasp.net-mvc-4
368
Ricardo Polo

Il appelle les fichiers inclus dans cet ensemble particulier qui est déclaré dans la classe BundleConfig du dossier App_Start.

Dans ce cas particulier, l'appel à @Styles.Render("~/Content/css") appelle "~/Content/site.css".

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
442
NunoCarmo

Attention à la sensibilité à la casse. Si vous avez un fichier 

/Content/bootstrap.css

et vous redirigez dans votre Bundle.config à 

.Include ("~/Content/Bootstrap.css")

il ne chargera pas le css.

33
linktoemi

Un peu tard pour la fête. Mais il semble que personne n’a mentionné
bundling & minification of StyleBundle, donc .. 

@Styles.Render("~/Content/css")

appelle en Application_Start():

BundleConfig.RegisterBundles(BundleTable.Bundles);

qui appelle à son tour

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new StyleBundle("~/Content/css").Include(
              "~/Content/bootstrap.css",
              "~/Content/Site.css"));
}

RegisterBundles() combine efficacement & minifiesbootstrap.css & Site.css
dans un seul fichier, 

<link href="/Content/css?v=omEnf6XKhDfHpwdllcEwzSIFQajQQLOQweh_aX9VVWY1" rel="stylesheet">

Mais..

<system.web>
  <compilation debug="false" targetFramework="4.6.1" />
</system.web>

uniquement lorsquedebug est défini sur false dans Web.config.
Sinon bootstrap.css & Site.css sera servi individuellement.
Pas groupé, ni minified:

<link href="/Content/bootstrap.css" rel="stylesheet">
<link href="/Content/Site.css" rel="stylesheet">
8
SAm

src="@url.content("~/Folderpath/*.css")" devrait rendre les styles

0
Ram

Comme défini dans App_start.BundleConfig, il suffit d'appeler 

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));

Rien ne se passe même si vous supprimez cette section.

0
Sathish Dadi

J'ai fait tout le nécessaire pour ajouter le bundling à un site Web MVC 3 (la solution existante est nouvelle pour moi). Styles.Render n'a pas fonctionné pour moi. J'ai finalement découvert qu'il me manquait simplement un colon. Dans une page maître: <%: Styles.Render("~/Content/Css") %> Je ne comprends toujours pas pourquoi (sur la même page) <% Html.RenderPartial("LogOnUserControl"); %> fonctionne sans les deux points.

0
dudeNumber4

Polo Je n'utiliserais pas Bundles dans MVC pour plusieurs raisons. Cela ne fonctionne pas dans votre cas car vous devez configurer une classe BundleConfig personnalisée dans votre dossier Apps_Start. Cela n'a aucun sens quand vous pouvez simplement ajouter un style dans la tête de votre code HTML comme ceci:

<link rel="stylesheet" href="~/Content/bootstrap.css" />
<link rel="stylesheet" href="~/Content/bootstrap.theme.css" />

Vous pouvez également les ajouter à une classe Layout.cshtml ou à une classe partielle appelée à partir de toutes vos vues et déposée dans chaque page. Si vos styles changent, vous pouvez facilement changer le nom et le chemin sans avoir à recompiler.

L'ajout de liens codés en dur vers CSS dans une classe rompt également avec l'objectif de séparer l'interface utilisateur et la conception du modèle d'application. Vous ne souhaitez pas non plus que les chemins de feuille de style codés en dur soient gérés en c #, car vous ne pouvez plus créer de "skins" ni de modèles de style distincts pour différents périphériques, thèmes, etc., comme ceci:

<link rel="stylesheet" href="~/UI/Skins/skin1/base.css" />
<link rel="stylesheet" href="~/UI/Skins/skin2/base.css" />

En utilisant ce système et Razor, vous pouvez maintenant désactiver le chemin d'accès des bases de données ou des paramètres utilisateur et modifier l'ensemble de la conception de votre site Web en modifiant simplement le chemin de manière dynamique.

Il y a 15 ans, l'objectif de CSS était de développer des "skins" de feuille de style contrôlés par l'application et par l'application, afin que vous puissiez modifier l'apparence de l'interface utilisateur indépendamment de l'application et réorganiser le contenu indépendamment de la structure de données. .... par exemple une version imprimable, mobile, version audio, fichier XML brut, etc.

En revenant maintenant à ce système de chemins «démodé» et codé en dur utilisant des classes C #, des styles rigides comme Bootstrap et en fusionnant les thèmes des sites avec le code d’application, nous sommes revenus à la façon dont les sites Web ont été construits en 1998.

0
Stokely