187 votes

Ajouter des fichiers css ou js à la tête de la mise en page de vues ou des vues partielles

Mise en page des pages de la tête

<head>
    <link href="@Url.Content("~/Content/themes/base/Site.css")" 
                   rel="stylesheet" type="text/css" />
</head>

Une Vue (AnotherView) de l'application qui doivent

<link href="@Url.Content("~/Content/themes/base/AnotherPage.css")" 
               rel="stylesheet" type="text/css" />

et AnotherView ont vue partielle (AnotherPartial) qui ont besoin de

    <link href="@Url.Content("~/Content/themes/base/AnotherPartial.css")" 
                   rel="stylesheet" type="text/css" />

Question: Comment pouvons-nous ajouter ces fichiers css des liens AnotherView et AnotherPartial liens à la Disposition de la tête?

RenderSection est pas une bonne idée parce que AnotherPage peut avoir plus d'une Partiels. Ajouter tous les css pour la tête n'est pas utile car il va changer dynamicaly (dépend de la Anotherpages).

Merci à l'avance.

210voto

RouR Points 1255

Mise en page :

Vue :

80voto

Kalman Speier Points 1470

Mise à jour: exemple de base disponible à https://github.com/speier/mvcassetshelper

Nous utilisons l’implémentation suivante pour ajouter des fichiers JS et CSS dans la page de disposition.

Vue ou PartialView :

Mise en page :

HtmlHelper extension :

12voto

ntziolis Points 7360

Malheureusement, ce n'est pas possible par défaut pour utiliser section tant qu'un autre utilisateur a suggéré, depuis un section n'est disponible que pour l'immédiat, child d'un View.

Ce qui fonctionne, cependant, est la mise en œuvre et à la redéfinition de l' section dans chaque vue, sens:

section Head
{
    @RenderSection("Head", false)
}

De cette façon, chaque point de vue peut mettre en œuvre une section de tête, et pas seulement les enfants immédiats. Cela ne fonctionne que partiellement, et en particulier avec plusieurs partiels, les problèmes commencent (comme vous l'avez mentionné dans votre question).

Donc, la seule solution à votre problème à l'aide de l' ViewBag. Le mieux serait probablement une autre collection (liste) pour les css et les scripts. Pour que cela fonctionne, vous devez vous assurer que l' List utilisé est initialisé avant tout sur les points de vue sont exécutées. Ensuite, vous pouvez faire des choses comme ça dans la partie supérieure de chaque vue/partielle (sans s'occuper si l' Scripts ou Styles de la valeur est nulle:

ViewBag.Scripts.Add("myscript.js");
ViewBag.Styles.Add("mystyle.css");

Dans la mise en page vous pouvez ensuite une boucle à travers les collections et ajoutez les styles basés sur les valeurs de l' List.

@foreach (var script in ViewBag.Scripts)
{
  <script type="text/javascript" src="@script"></script>
}
@foreach (var style in ViewBag.Styles)
{
  <link href="@style" rel="stylesheet" type="text/css" />
}

Je pense que c'est laid, mais c'est la seule chose qui fonctionne.

**Mise à JOUR** Depuis que commence l'exécution de l'intérieur abord, et de travailler son chemin hors de la mise en page et les styles css sont en cascade, il serait probablement un sens à revers le style de la liste via ViewBag.Styles.Reverse().
De cette façon, la plus extérieure de style est ajouté en premier, qui est en ligne avec la façon dont les feuilles de style css de toute façon.

7voto

jsakamoto Points 66

J'ai essayé de résoudre ce problème.

Ma réponse est ici.

"DynamicHeader" - http://dynamicheader.codeplex.com/, https://nuget.org/packages/DynamicHeader

Par exemple, _Layout.cshtml est:

<head>
@Html.DynamicHeader()
</head>
...

Et, vous pouvez vous inscrire .js et .les fichiers css pour "DynamicHeader" n'importe où vous voulez.

Pour exemple, le bloc de code dans AnotherPartial.cshtm est:

@{
  DynamicHeader.AddSyleSheet("~/Content/themes/base/AnotherPartial.css");
  DynamicHeader.AddScript("~/some/myscript.js");
}

Puis, finalement HTML en sortie est:

<html>
  <link href="http://stackoverflow.com/myapp/Content/themes/base/AnotherPartial.css" .../>
  <script src="/myapp/some/myscript.js" ...></script>
</html>
...

6voto

Brent Points 465

J’ai eu un problème similaire et fini par appliquer l’excellente réponse de Kalman avec le code ci-dessous (pas tout à fait aussi propre, mais sans doute plus expansible) :

Le projet contient une méthode AssignAllResources statique :

dans la page _layout

et dans le partial(s) et vues

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X