Ajouter du CSS ou de JavaScript fichiers de mise en page de la tête à partir de points de vue ou vue partielle sur
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>
Vue (AnotherView) à partir des besoins de l'application:
<link href="@Url.Content("~/Content/themes/base/AnotherPage.css")"
rel="stylesheet" type="text/css" />
et AnotherView a une vue partielle (AnotherPartial) qui doit:
<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 tête?
RenderSection n'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 (cela dépend de la Anotherpages).
- c'est une énorme différence entre "à partir de points de vue" et "ou une vue partielle" selon votre titre l'indique. De toute façon, toutes les nouvelles idées sur la question?
Vous devez vous connecter pour publier un commentaire.
Mise en page:
Vue:
AddToHead
section est une vue partielle incorporé dans leView
.Mise à jour: exemple de base disponible à https://github.com/speier/mvcassetshelper
Nous sommes à l'aide de la suite de la mise en œuvre d'ajouter des fichiers CSS et JS dans la page de mise en page.
Vue ou PartialView:
Mise en page:
HtmlHelper extension:
Insert
méthodes avecAdd
méthodes[ThreadStatic]
, ou, de préférence, stockées dansHttpContext.Items
.HttpContextBase
de laHtmlHelper
.HttpContextBase
deHtmlHelper
'sViewContext
comme mentionné par @SLaksMalheureusement, ce n'est pas possible par défaut pour utiliser
section
tant qu'un autre utilisateur a suggéré, depuis unsection
est uniquement disponible à l'immédiatchild
d'unView
.Ce qui fonctionne, cependant, est la mise en œuvre et à la redéfinition de la
section
dans chaque vue, sens: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 la
ViewBag
. Le mieux serait probablement une autre collection (liste) pour les CSS et les scripts. Pour que cela fonctionne, vous devez vous assurer que leList
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
ouStyles
valeur est null:Dans la mise en page vous pouvez ensuite une boucle à travers les collections et ajoutez les styles basés sur les valeurs de la
List
.Je pense que c'est laid, mais c'est la seule chose qui fonctionne.
******Mise à JOUR****
Depuis, il 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 est logique d'inverser 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.
Vous pouvez définir la section par RenderSection méthode de mise en page.
Disposition
Vous pouvez inclure vos fichiers css dans la section zone de votre point de vue à l'exception partielle de la vue.
Le travail de la section en vue, mais pas de travail en vue partielle par la conception.
Si vous voulez vraiment en utilisant la section de la zone en vue partielle, vous pouvez suivre l'article de redéfinir RenderSection méthode.
Rasoir, Imbriqués les Mises en page et de redéfinir les Sections – Marcin Sur ASP.NET
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:
Et, vous pouvez vous inscrire .js et .les fichiers css pour "DynamicHeader" n'importe où vous le souhaitez.
Pour exemple, le bloc de code dans AnotherPartial.cshtm est:
Puis, finalement HTML en sortie est:
Essayer de l'out-of-the-box solution (ASP.NET MVC 4 ou version ultérieure):
CS0103: The name 'BundleTable' does not exist in the current context
System.Web.Optimization
c'est à direSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");
Pour ceux d'entre nous à l'aide de ASP.NET MVC 4 - cela peut être utile.
Tout d'abord, j'ai ajouté un BundleConfig classe dans le App_Start dossier.
Voici mon code que j'ai utilisé pour la créer:
Deuxième, je me suis inscrit le BundleConfig classe dans le monde.asax fichier:
Troisième, j'ai ajouté de style aides à la mon fichier CSS:
Enfin j'ai utilisé cette syntaxe en tout point de Vue:
Ici est un NuGet plugin appelé Cassette, qui, entre autres choses, vous offre la possibilité de référencer les scripts et les styles de partiels.
Si il y a un certain nombre de configurations disponible pour ce plugin, ce qui le rend très flexible. Ici est la façon la plus simple de renvoyer un script ou fichiers de feuille de style:
Selon la documentation:
J'ai écrit un simple wrapper qui permet d'enregistrer des styles et des scripts dans chaque vue partielle de façon dynamique dans la balise head.
Il est basé sur le DynamicHeader jsakamoto mettre en place, mais il a certaines améliorations de performance & tweaks.
Il est très facile à utiliser et polyvalent.
L'utilisation:
Vous trouverez l'intégralité du code, des explications et des exemples à l'intérieur:
Ajouter des Styles & des Scripts de façon dynamique à la Tête de la Balise