Ajouter des fichiers CSS ou JavaScript à la tête de mise en page à partir de vues ou de vues partielles

177

Tête de page de mise en page:

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

Une vue (AnotherView) de l'application nécessite:

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

et AnotherView a une vue partielle (AnotherPartial) qui nécessite:

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

Question: Comment pouvons-nous ajouter ces liens de fichiers CSS AnotherView et AnotherPartial à la tête de mise en page ?

RenderSection n'est pas une bonne idée car AnotherPage peut avoir plusieurs Partials. Ajouter tous les CSS en tête n'est pas utile car cela changera de manière dynamique (cela dépend de Anotherpages).

asp.net-mvc asp.net-mvc-3 razor Nuri YILMAZ
la source

@NuriYILMAZ c'est une énorme différence entre "à partir de vues" et "ou vues partielles" selon votre titre. Quoi qu'il en soit, de nouvelles idées à ce sujet?

Shimmy Weitzhandler

196

Disposition:

<html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title</title>
        <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
        <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
        <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
        @if (IsSectionDefined("AddToHead"))
        {
            @RenderSection("AddToHead", required: false)
        }

        @RenderSection("AddToHeadAnotherWay", required: false)
    </head>

Vue:

@model ProjectsExt.Models.DirectoryObject

@section AddToHead{
    <link href="@Url.Content("~/Content/Upload.css")" rel="stylesheet" type="text/css" />
}

RouR
la source

5

Je pense que c'est la solution la plus simple.

iamichi

Belle solution prête à l'emploi!

jerrylroberts

14

Cela ne fonctionnera pas si la AddToHeadsection est dans une vue partielle intégrée dans le View.

Shimmy Weitzhandler

57

La question mentionnait spécifiquement la vue partielle et cette réponse la mieux notée ne résout pas le problème! Cela peut être une excellente solution pour une autre requête, mais pas celle-ci.

corbeau vulcan

1

Cela aurait été une solution élégante si cela fonctionnait réellement avec des vues partielles.

Jonny

75

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

Nous utilisons l'implémentation suivante pour ajouter des fichiers JS et CSS dans la page de mise en page.

Vue ou vue partielle:

@{
    Html.Assets().Styles.Add("/Dashboard/Content/Dashboard.css");
    Html.Assets().Scripts.Add("/Dashboard/Scripts/Dashboard.js");
}

Page de mise en page:

<head>
    @Html.Assets().Styles.Render()
</head>

<body>
    ...
    @Html.Assets().Scripts.Render()
</body>

Extension HtmlHelper:

public static class HtmlHelperExtensions
{
    public static AssetsHelper Assets(this HtmlHelper htmlHelper)
    {
        return AssetsHelper.GetInstance(htmlHelper);
    }    
}

public class AssetsHelper 
{
    public static AssetsHelper GetInstance(HtmlHelper htmlHelper)
    {
        var instanceKey = "AssetsHelperInstance";

        var context = htmlHelper.ViewContext.HttpContext;
        if (context == null) return null;

        var assetsHelper = (AssetsHelper)context.Items[instanceKey];

        if (assetsHelper == null)
            context.Items.Add(instanceKey, assetsHelper = new AssetsHelper());

        return assetsHelper;
    }

    public ItemRegistrar Styles { get; private set; }
    public ItemRegistrar Scripts { get; private set; }

    public AssetsHelper()
    {
        Styles = new ItemRegistrar(ItemRegistrarFormatters.StyleFormat);
        Scripts = new ItemRegistrar(ItemRegistrarFormatters.ScriptFormat);
    }
}

public class ItemRegistrar
{
    private readonly string _format;
    private readonly IList<string> _items;

    public ItemRegistrar(string format)
    {
        _format = format;
        _items = new List<string>();
    }

    public ItemRegistrar Add(string url)
    {
        if (!_items.Contains(url))
            _items.Add(url);

        return this;
    }

    public IHtmlString Render()
    {
        var sb = new StringBuilder();

        foreach (var item in _items)
        {
            var fmt = string.Format(_format, item);
            sb.AppendLine(fmt);
        }

        return new HtmlString(sb.ToString());
    }
}

public class ItemRegistrarFormatters
{
    public const string StyleFormat = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";
    public const string ScriptFormat = "<script src=\"{0}\" type=\"text/javascript\"></script>";
}

Kalman Speier
la source

2

@JBeckton: Jetez un œil dans le code et remplacez les Insertméthodes par des Addméthodes

Valamas

9

@Kalman - la sécurité des threads de ceci a (tout à fait correctement à mon avis) été remise en question: stackoverflow.com/questions/6609586/…

Marc Gravell

2

C'est très faux; il doit être [ThreadStatic], ou, de préférence, stocké dans HttpContext.Items.

SLaks

6

Est-ce que je manque quelque chose? Si Styles.Render () est appelé dans <head>, alors tous les fichiers css ajoutés après <head> (c'est-à-dire les fichiers ajoutés dans des vues partielles) ne seront pas rendus. (MVC rend de haut en bas.)

ken

3

@FernandoCorreia Je pense que vous avez tout faux. Les sections nommées ne fonctionnent pas dans les vues partielles qui constituent la base de tout ce thread.

Shimmy Weitzhandler

11

Malheureusement, cela n'est pas possible par défaut de l'utiliser sectioncomme un autre utilisateur l'a suggéré, car a sectionn'est disponible que pour l'immédiat childde a View.

Ce qui fonctionne cependant, c'est la mise en œuvre et la redéfinition du sectiondans chaque vue , ce qui signifie:

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

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

La seule vraie solution à votre problème consiste donc à utiliser le ViewBag. Le mieux serait probablement une collection séparée (liste) pour CSS et scripts. Pour que cela fonctionne, vous devez vous assurer que Listutilisé est initialisé avant l'exécution de l'une des vues. Ensuite, vous pouvez faire des choses comme celle-ci en haut de chaque vue / partielle (sans vous soucier si la valeur Scriptsou Stylesest nulle:

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

Dans la mise en page, vous pouvez ensuite parcourir les collections et ajouter les styles en fonction des valeurs du 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 moche, mais c'est la seule chose qui fonctionne.

****** UPDATE **** Puisqu'il commence à exécuter les vues internes en premier et à se frayer un chemin vers la mise en page et que les styles CSS sont en cascade, il serait probablement logique d'inverser la liste de styles via ViewBag.Styles.Reverse().

De cette façon, le style le plus extérieur est ajouté en premier, ce qui est en ligne avec le fonctionnement des feuilles de style CSS de toute façon.

Ntziolis
la source

1

Merci ntziolis. Cela a l'air sympa, mais les têtes de mise en page de rasoir fonctionnent d'abord avant une autre vue, et la dynamique .scripts et .styles était vide avant une autre vue. J'ai trouvé un joli blog à ce sujet et j'ai partagé cette question.

Nuri YILMAZ

Cela fonctionnera pour n'importe quelle vue dérivée mais pas pour les partiels. Pour les partiels, en effet, l'ordre d'exécution est faux. essentiellement pour les partiels, il n'y a aucun moyen de les inclure dans l'en-tête. Je suggérerais, au lieu de l'ajouter à l'en-tête, de l'ajouter simplement au début de la balise body. Ce ne serait pas mon premier choix, mais de cette façon, vous avez une manière concise de gérer tous les styles / js en un seul endroit, plutôt que de les disperser.

ntziolis

Je suis d'accord avec toi. Parce que j'ai trouvé des solutions comme je l'ai énuméré dans la réponse, mais ce sont exactement des solutions js. Je me demande vraiment pourquoi nous ne pourrions pas utiliser la page de mise en page comme asp.net classique. Cela signifie que je peux accéder à la tête à partir de la page enfant.

Nuri YILMAZ

11

Vous pouvez définir la section par la méthode RenderSection dans la mise en page.

Disposition

<head>
  <link href="@Url.Content("~/Content/themes/base/Site.css")"
    rel="stylesheet" type="text/css" />
  @RenderSection("heads", required: false)
</head>

Ensuite, vous pouvez inclure vos fichiers css dans la zone de section de votre vue, sauf en vue partielle .

La coupe fonctionne en vue, mais ne fonctionne pas en vue partielle par conception .

<!--your code -->
@section heads
{
  <link href="@Url.Content("~/Content/themes/base/AnotherPage.css")"
  rel="stylesheet" type="text/css" />
}

Si vous souhaitez vraiment utiliser la zone de section en vue partielle, vous pouvez suivre l'article pour redéfinir la méthode RenderSection.

Razor, dispositions imbriquées et sections redéfinies - Marcin sur ASP.NET

Trayeur
la source

6

J'ai eu un problème similaire et j'ai fini par appliquer l'excellente réponse de Kalman avec le code ci-dessous (pas aussi soigné, mais sans doute plus extensible):

namespace MvcHtmlHelpers
{
    //http://stackoverflow.com/questions/5110028/add-css-or-js-files-to-layout-head-from-views-or-partial-views#5148224
    public static partial class HtmlExtensions
    {
        public static AssetsHelper Assets(this HtmlHelper htmlHelper)
        {
            return AssetsHelper.GetInstance(htmlHelper);
        }
    }
    public enum BrowserType { Ie6=1,Ie7=2,Ie8=4,IeLegacy=7,W3cCompliant=8,All=15}
    public class AssetsHelper
    {
        public static AssetsHelper GetInstance(HtmlHelper htmlHelper)
        {
            var instanceKey = "AssetsHelperInstance";
            var context = htmlHelper.ViewContext.HttpContext;
            if (context == null) {return null;}
            var assetsHelper = (AssetsHelper)context.Items[instanceKey];
            if (assetsHelper == null){context.Items.Add(instanceKey, assetsHelper = new AssetsHelper(htmlHelper));}
            return assetsHelper;
        }
        private readonly List<string> _styleRefs = new List<string>();
        public AssetsHelper AddStyle(string stylesheet)
        {
            _styleRefs.Add(stylesheet);
            return this;
        }
        private readonly List<string> _scriptRefs = new List<string>();
        public AssetsHelper AddScript(string scriptfile)
        {
            _scriptRefs.Add(scriptfile);
            return this;
        }
        public IHtmlString RenderStyles()
        {
            ItemRegistrar styles = new ItemRegistrar(ItemRegistrarFormatters.StyleFormat,_urlHelper);
            styles.Add(Libraries.UsedStyles());
            styles.Add(_styleRefs);
            return styles.Render();
        }
        public IHtmlString RenderScripts()
        {
            ItemRegistrar scripts = new ItemRegistrar(ItemRegistrarFormatters.ScriptFormat, _urlHelper);
            scripts.Add(Libraries.UsedScripts());
            scripts.Add(_scriptRefs);
            return scripts.Render();
        }
        public LibraryRegistrar Libraries { get; private set; }
        private UrlHelper _urlHelper;
        public AssetsHelper(HtmlHelper htmlHelper)
        {
            _urlHelper = new UrlHelper(htmlHelper.ViewContext.RequestContext);
            Libraries = new LibraryRegistrar();
        }
    }
    public class LibraryRegistrar
    {
        public class Component
        {
            internal class HtmlReference
            {
                internal string Url { get; set; }
                internal BrowserType ServeTo { get; set; }
            }
            internal List<HtmlReference> Styles { get; private set; }
            internal List<HtmlReference> Scripts { get; private set; }
            internal List<string> RequiredLibraries { get; private set; }

            public Component()
            {
                Styles = new List<HtmlReference>();
                Scripts = new List<HtmlReference>();
                RequiredLibraries = new List<string>();
            }
            public Component Requires(params string[] libraryNames)
            {
                foreach (var lib in libraryNames)
                {
                    if (!RequiredLibraries.Contains(lib))
                        { RequiredLibraries.Add(lib); }
                }
                return this;
            }
            public Component AddStyle(string url, BrowserType serveTo = BrowserType.All)
            {
                Styles.Add(new HtmlReference { Url = url, ServeTo=serveTo });
                return this;
            }
            public Component AddScript(string url, BrowserType serveTo = BrowserType.All)
            {
                Scripts.Add(new HtmlReference { Url = url, ServeTo = serveTo });
                return this;
            }
        }
        private readonly Dictionary<string, Component> _allLibraries = new Dictionary<string, Component>();
        private List<string> _usedLibraries = new List<string>();
        internal IEnumerable<string> UsedScripts()
        {
            SetOrder();
            var returnVal = new List<string>();
            foreach (var key in _usedLibraries)
            {
                returnVal.AddRange(from s in _allLibraries[key].Scripts
                                   where IncludesCurrentBrowser(s.ServeTo)
                                   select s.Url);
            }
            return returnVal;
        }
        internal IEnumerable<string> UsedStyles()
        {
            SetOrder();
            var returnVal = new List<string>();
            foreach (var key in _usedLibraries)
            {
                returnVal.AddRange(from s in _allLibraries[key].Styles
                                   where IncludesCurrentBrowser(s.ServeTo)
                                   select s.Url);
            }
            return returnVal;
        }
        public void Uses(params string[] libraryNames)
        {
            foreach (var name in libraryNames)
            {
                if (!_usedLibraries.Contains(name)){_usedLibraries.Add(name);}
            }
        }
        public bool IsUsing(string libraryName)
        {
            SetOrder();
            return _usedLibraries.Contains(libraryName);
        }
        private List<string> WalkLibraryTree(List<string> libraryNames)
        {
            var returnList = new List<string>(libraryNames);
            int counter = 0;
            foreach (string libraryName in libraryNames)
            {
                WalkLibraryTree(libraryName, ref returnList, ref counter);
            }
            return returnList;
        }
        private void WalkLibraryTree(string libraryName, ref List<string> libBuild, ref int counter)
        {
            if (counter++ > 1000) { throw new System.Exception("Dependancy library appears to be in infinate loop - please check for circular reference"); }
            Component library;
            if (!_allLibraries.TryGetValue(libraryName, out library))
                { throw new KeyNotFoundException("Cannot find a definition for the required style/script library named: " + libraryName); }
            foreach (var childLibraryName in library.RequiredLibraries)
            {
                int childIndex = libBuild.IndexOf(childLibraryName);
                if (childIndex!=-1)
                {
                    //child already exists, so move parent to position before child if it isn't before already
                    int parentIndex = libBuild.LastIndexOf(libraryName);
                    if (parentIndex>childIndex)
                    {
                        libBuild.RemoveAt(parentIndex);
                        libBuild.Insert(childIndex, libraryName);
                    }
                }
                else
                {
                    libBuild.Add(childLibraryName);
                    WalkLibraryTree(childLibraryName, ref libBuild, ref counter);
                }
            }
            return;
        }
        private bool _dependenciesExpanded;
        private void SetOrder()
        {
            if (_dependenciesExpanded){return;}
            _usedLibraries = WalkLibraryTree(_usedLibraries);
            _usedLibraries.Reverse();
            _dependenciesExpanded = true;
        }
        public Component this[string index]
        {
            get
            {
                if (_allLibraries.ContainsKey(index))
                    { return _allLibraries[index]; }
                var newComponent = new Component();
                _allLibraries.Add(index, newComponent);
                return newComponent;
            }
        }
        private BrowserType _requestingBrowser;
        private BrowserType RequestingBrowser
        {
            get
            {
                if (_requestingBrowser == 0)
                {
                    var browser = HttpContext.Current.Request.Browser.Type;
                    if (browser.Length > 2 && browser.Substring(0, 2) == "IE")
                    {
                        switch (browser[2])
                        {
                            case '6':
                                _requestingBrowser = BrowserType.Ie6;
                                break;
                            case '7':
                                _requestingBrowser = BrowserType.Ie7;
                                break;
                            case '8':
                                _requestingBrowser = BrowserType.Ie8;
                                break;
                            default:
                                _requestingBrowser = BrowserType.W3cCompliant;
                                break;
                        }
                    }
                    else
                    {
                        _requestingBrowser = BrowserType.W3cCompliant;
                    }
                }
                return _requestingBrowser;
            }
        }
        private bool IncludesCurrentBrowser(BrowserType browserType)
        {
            if (browserType == BrowserType.All) { return true; }
            return (browserType & RequestingBrowser) != 0;
        }
    }
    public class ItemRegistrar
    {
        private readonly string _format;
        private readonly List<string> _items;
        private readonly UrlHelper _urlHelper;

        public ItemRegistrar(string format, UrlHelper urlHelper)
        {
            _format = format;
            _items = new List<string>();
            _urlHelper = urlHelper;
        }
        internal void Add(IEnumerable<string> urls)
        {
            foreach (string url in urls)
            {
                Add(url);
            }
        }
        public ItemRegistrar Add(string url)
        {
            url = _urlHelper.Content(url);
            if (!_items.Contains(url))
                { _items.Add( url); }
            return this;
        }
        public IHtmlString Render()
        {
            var sb = new StringBuilder();
            foreach (var item in _items)
            {
                var fmt = string.Format(_format, item);
                sb.AppendLine(fmt);
            }
            return new HtmlString(sb.ToString());
        }
    }
    public class ItemRegistrarFormatters
    {
        public const string StyleFormat = "<link href=\"{0}\" rel=\"stylesheet\" type=\"text/css\" />";
        public const string ScriptFormat = "<script src=\"{0}\" type=\"text/javascript\"></script>";
    }
}

Le projet contient une méthode AssignAllResources statique:

assets.Libraries["jQuery"]
        .AddScript("~/Scripts/jquery-1.10.0.min.js", BrowserType.IeLegacy)
        .AddScript("~/Scripts//jquery-2.0.1.min.js",BrowserType.W3cCompliant);
        /* NOT HOSTED YET - CHECK SOON 
        .AddScript("//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js",BrowserType.W3cCompliant);
        */
    assets.Libraries["jQueryUI"].Requires("jQuery")
        .AddScript("//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js",BrowserType.Ie6)
        .AddStyle("//ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/eggplant/jquery-ui.css",BrowserType.Ie6)
        .AddScript("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js", ~BrowserType.Ie6)
        .AddStyle("//ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/themes/eggplant/jquery-ui.css", ~BrowserType.Ie6);
    assets.Libraries["TimePicker"].Requires("jQueryUI")
        .AddScript("~/Scripts/jquery-ui-sliderAccess.min.js")
        .AddScript("~/Scripts/jquery-ui-timepicker-addon-1.3.min.js")
        .AddStyle("~/Content/jQueryUI/jquery-ui-timepicker-addon.css");
    assets.Libraries["Validation"].Requires("jQuery")
        .AddScript("//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js")
        .AddScript("~/Scripts/jquery.validate.unobtrusive.min.js")
        .AddScript("~/Scripts/mvcfoolproof.unobtrusive.min.js")
        .AddScript("~/Scripts/CustomClientValidation-1.0.0.min.js");
    assets.Libraries["MyUtilityScripts"].Requires("jQuery")
        .AddScript("~/Scripts/GeneralOnLoad-1.0.0.min.js");
    assets.Libraries["FormTools"].Requires("Validation", "MyUtilityScripts");
    assets.Libraries["AjaxFormTools"].Requires("FormTools", "jQueryUI")
        .AddScript("~/Scripts/jquery.unobtrusive-ajax.min.js");
    assets.Libraries["DataTables"].Requires("MyUtilityScripts")
        .AddScript("//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js")
        .AddStyle("//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css")
        .AddStyle("//ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css");
    assets.Libraries["MvcDataTables"].Requires("DataTables", "jQueryUI")
        .AddScript("~/Scripts/jquery.dataTables.columnFilter.min.js");
    assets.Libraries["DummyData"].Requires("MyUtilityScripts")
        .AddScript("~/Scripts/DummyData.js")
        .AddStyle("~/Content/DummyData.css");

dans la page _layout

@{
    var assets = Html.Assets();
    CurrentResources.AssignAllResources(assets);
    Html.Assets().RenderStyles()
}
</head>
...
    @Html.Assets().RenderScripts()
</body>

et dans le (s) partiel (s) et les vues

Html.Assets().Libraries.Uses("DataTables");
Html.Assets().AddScript("~/Scripts/emailGridUtilities.js");

Brent
la source

Intéressant. Cela semble excessif, mais je vois que cela est davantage utilisé avec des sites Web qui n'ont pas le choix, mais pour traiter avec des utilisateurs utilisant des versions plus anciennes de ie ... comme dans des environnements d'entreprise où certains pays ne se sont pas mis à niveau et où vous voulez vous tirer dessus. lol. +1 pour cela

pqsk

5

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 enregistrer des fichiers .js et .css dans «DynamicHeader» où vous le souhaitez.

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

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

Ensuite, le HTML de sortie final est:

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

jsakamoto
la source

4

Essayez la solution prête à l'emploi (ASP.NET MVC 4 ou version ultérieure): Try the out-of-the-box solution (ASP.NET MVC 4 or later):

@{
    var bundle = BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/js");

    bundle.Include("~/Scripts/myFile.js");
}

RouR
la source

Je reçois une erreur:CS0103: The name 'BundleTable' does not exist in the current context

Kunal

nvm: résolu. Dû ajouter System.Web.OptimizationieSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");

Kunal

1

Cela ne modifie-t-il pas le bundle globalement? Si vous faites cela à la page A et plus tard, ouvrez la page B, la page B contiendra également myFile.js, ce que je ne pense pas être voulu par l'OP

miles82

4

Pour ceux d'entre nous qui utilisent ASP.NET MVC 4 - cela peut être utile.

Tout d'abord, j'ai ajouté une classe BundleConfig dans le dossier App_Start.

Voici mon code que j'ai utilisé pour le créer:

using System.Web.Optimization;

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/SiteMaster.css"));
    }
}

Deuxièmement, j'ai enregistré la classe BundleConfig dans le fichier Global.asax:

protected void Application_Start()
{
    BundleConfig.RegisterBundles(BundleTable.Bundles);
}

Troisièmement, j'ai ajouté des helpers de style à mon fichier CSS:

/* Styles for validation helpers */
.field-validation-error {
    color: red;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

Enfin, j'ai utilisé cette syntaxe dans n'importe quelle vue:

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

Terry H
la source

3

Voici un plugin NuGet appelé Cassette , qui vous offre entre autres la possibilité de référencer des scripts et des styles dans des partiels.

Bien qu'il existe un certain nombre de configurations disponibles pour ce plugin, ce qui le rend très flexible. Voici le moyen le plus simple de référencer des fichiers de script ou de feuille de style:

Bundles.Reference("scripts/app");

Selon la documentation :

Les appels à Referencepeuvent apparaître n'importe où dans une page, une mise en page ou une vue partielle.

L'argument de chemin peut être l'un des suivants:

Un chemin de bundle

Un chemin d'actif - l'ensemble du bundle contenant cet actif est référencé

Une URL

corbeau vulcain
la source

2

J'ai écrit un wrapper facile qui vous permet d'enregistrer dynamiquement des styles et des scripts dans chaque vue partielle dans la balise head.

Il est basé sur le jsakamoto de DynamicHeader mis en place, mais il a quelques améliorations et ajustements de performances.

Il est très facile à utiliser et polyvalent.

L'usage:

@{
    DynamicHeader.AddStyleSheet("/Content/Css/footer.css", ResourceType.Layout);    
    DynamicHeader.AddStyleSheet("/Content/Css/controls.css", ResourceType.Infrastructure);
    DynamicHeader.AddScript("/Content/Js/Controls.js", ResourceType.Infrastructure);
    DynamicHeader.AddStyleSheet("/Content/Css/homepage.css");    
}

Vous pouvez trouver le code complet, des explications et des exemples à l'intérieur: Ajouter des styles et des scripts dynamiquement à la balise Head

Amir Yonatan
la source

Ajouter des fichiers CSS ou JavaScript à la tête de mise en page à partir de vues ou de vues partielles

Réponses: