Fügen Sie dem Layoutkopf CSS- oder JavaScript-Dateien aus Ansichten oder Teilansichten hinzu

176

Layout Seitenkopf:

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

Eine Ansicht (AnotherView) aus der Anwendung benötigt:

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

und AnotherView hat eine Teilansicht (AnotherPartial), die Folgendes benötigt:

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

Frage: Wie können wir hinzufügen , diese CSS - Dateien verknüpft AnotherView und AnotherPartial Links zu Layout - Kopf ?

RenderSection ist keine gute Idee, da AnotherPage mehr als eine Partials haben kann. Das Hinzufügen aller CSS zu head ist nicht sinnvoll, da sich die Dynamik ändert (dies hängt von Anotherpages ab).

asp.net-mvc asp.net-mvc-3 razor Nuri YILMAZ
quelle
@NuriYILMAZ es ist ein großer Unterschied zwischen "aus Ansichten" und "oder Teilansichten", wie Ihr Titel sagt. Wie auch immer, irgendwelche neuen Ideen zu diesem Thema?
Shimmy Weitzhandler

Antworten:

195

Layout:

<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>

Aussicht:

@model ProjectsExt.Models.DirectoryObject

@section AddToHead{
    <link href="@Url.Content("~/Content/Upload.css")" rel="stylesheet" type="text/css" />
}
RouR
quelle
5
Ich denke, das ist die einfachste Lösung.
Iamichi
Schöne Out-of-the-Box-Lösung!
Jerrylroberts
14
Das funktioniert nicht, wenn sich der AddToHeadAbschnitt in einer Teilansicht befindet, die in die eingebettet ist View.
Shimmy Weitzhandler
57
Die speziell erwähnte Teilansicht und diese am höchsten bewertete Antwort sprechen das Problem nicht an! Dies ist möglicherweise eine hervorragende Lösung für eine andere Abfrage, jedoch nicht für diese.
Vulkanrabe
1
Wäre eine elegante Lösung gewesen, wenn es akut mit Teilansichten funktioniert hätte.
Jonny
75

Update : Basisbeispiel verfügbar unter https://github.com/speier/mvcassetshelper

Wir verwenden die folgende Implementierung, um JS- und CSS-Dateien zur Layoutseite hinzuzufügen.

Ansicht oder Teilansicht:

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

Layoutseite:

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

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

HtmlHelper-Erweiterung:

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
quelle
2
@JBeckton: Schauen Sie sich den Code an und ersetzen Sie InsertMethoden durch AddMethoden
Valamas
9
@ Kalman - die Thread-Sicherheit davon wurde (meiner Ansicht nach ganz richtig) in Frage gestellt: stackoverflow.com/questions/6609586/…
Marc Gravell
2
Das ist sehr falsch; es sollte [ThreadStatic]oder vorzugsweise in gelagert werden HttpContext.Items.
SLaks
6
Vermisse ich etwas Wenn Styles.Render () in <head> aufgerufen wird, werden nach <head> hinzugefügte CSS-Dateien (dh in Teilansichten hinzugefügte Dateien) nicht gerendert. (MVC rendert von oben nach unten.)
Ken
3
@FernandoCorreia Ich denke du hast alles falsch verstanden. Benannte Abschnitte funktionieren nicht in Teilansichten, die die Basis dieses gesamten Threads bilden.
Shimmy Weitzhandler
11

Leider ist dies standardmäßig nicht möglich, sectionwie von einem anderen Benutzer vorgeschlagen, da a sectionnur für den unmittelbaren Zugriff childvon a verfügbar ist View.

Was jedoch funktioniert, ist die Implementierung und Neudefinition der sectionin jeder Ansicht , was bedeutet:

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

Auf diese Weise kann jede Ansicht einen Kopfabschnitt implementieren, nicht nur die unmittelbaren Kinder. Dies funktioniert jedoch nur teilweise, insbesondere bei mehreren Teilbereichen beginnen die Probleme (wie Sie in Ihrer Frage erwähnt haben).

Die einzige wirkliche Lösung für Ihr Problem ist die Verwendung von ViewBag. Das Beste wäre wahrscheinlich eine separate Sammlung (Liste) für CSS und Skripte. Damit dies funktioniert, müssen Sie sicherstellen, dass die Listverwendete Ansicht initialisiert wird, bevor eine der Ansichten ausgeführt wird. Dann können Sie solche Dinge oben in jeder Ansicht / jedem Teil ausführen (ohne sich darum zu kümmern, ob der Wert Scriptsoder Stylesnull ist:

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

Im Layout können Sie dann die Sammlungen durchlaufen und die Stile basierend auf den Werten in der hinzufügen 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" />
}

Ich finde es hässlich, aber es ist das einzige, was funktioniert.

****** UPDATE **** Da zuerst die inneren Ansichten ausgeführt werden und sich das Layout herausarbeitet und die CSS-Stile kaskadieren, ist es wahrscheinlich sinnvoll, die Stilliste über umzukehren ViewBag.Styles.Reverse().

Auf diese Weise wird zuerst der äußerste Stil hinzugefügt, was der Funktionsweise von CSS-Stylesheets entspricht.

Ntziolis
quelle
1
Danke ntziolis. Es sieht gut aus, aber Rasiermesser-Layoutköpfe funktionieren zuerst vor einer anderen Ansicht, und die Dynamik von .scripts und .styles war vor einer anderen Ansicht leer. Ich habe einen schönen Blog darüber gefunden und diese Frage geteilt.
Nuri YILMAZ
Dies funktioniert für jede abgeleitete Ansicht, jedoch nicht für Teilansichten. Für Teilweise ist die Reihenfolge der Ausführung tatsächlich falsch. Grundsätzlich gibt es für Partials keine Möglichkeit, sie in den Header aufzunehmen. Ich würde vorschlagen, anstatt es dem Header hinzuzufügen, fügen Sie es einfach am Anfang des Body-Tags hinzu. Es wäre nicht meine erste Wahl, aber auf diese Weise haben Sie eine präzise Möglichkeit, alle Stile / js an einem Ort zu verwalten, anstatt sie zu verteilen.
Ntziolis
Ich bin mit dir einverstanden. Weil ich einige Lösungen gefunden habe, wie ich in der Antwort aufgeführt habe, aber es ist genau js Lösungen. Ich frage mich wirklich, warum wir die Layoutseite nicht als klassisches asp.net verwenden konnten. Es bedeutet, dass ich von der untergeordneten Seite zum Kopf gelangen kann.
Nuri YILMAZ
11

Sie können den Abschnitt mit der RenderSection- Methode im Layout definieren.

Layout

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

Anschließend können Sie Ihre CSS-Dateien mit Ausnahme der Teilansicht in den Abschnittsbereich Ihrer Ansicht aufnehmen .

Der Abschnitt funktioniert in der Ansicht, jedoch nicht in der Teilansicht . 

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

Wenn Sie den Abschnittsbereich wirklich in einer Teilansicht verwenden möchten, können Sie dem Artikel folgen, um die RenderSection-Methode neu zu definieren.

Rasiermesser, verschachtelte Layouts und neu definierte Abschnitte - Marcin On ASP.NET

Melker
quelle
6

Ich hatte ein ähnliches Problem und wandte Kalmans ausgezeichnete Antwort mit dem folgenden Code an (nicht ganz so ordentlich, aber wohl erweiterbarer):

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>";
    }
}

Das Projekt enthält eine statische AssignAllResources-Methode:

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");

auf der _layout Seite

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

und in den Teilen und Ansichten

Html.Assets().Libraries.Uses("DataTables");
Html.Assets().AddScript("~/Scripts/emailGridUtilities.js");
Brent
quelle
Interessant. Scheint übertrieben zu sein, aber ich sehe, dass dies eher bei Websites verwendet wird, die keine andere Wahl haben, als sich mit Benutzern zu befassen, die ältere Versionen von verwenden, z. B. ... in Unternehmensumgebungen, in denen einige Länder kein Upgrade durchgeführt haben und Sie selbst fotografieren möchten. lol. +1 dafür
pqsk
5

Ich habe versucht, dieses Problem zu lösen.

Meine Antwort ist hier.

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

Zum Beispiel ist _Layout.cshtml:

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

Außerdem können Sie .js- und .css-Dateien bei "DynamicHeader" registrieren, wo immer Sie möchten.

Der Codeblock in AnotherPartial.cshtm lautet beispielsweise:

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

Dann lautet die endgültige Ausgabe von HTML:

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

Probieren Sie die sofort einsatzbereite Lösung aus (ASP.NET MVC 4 oder höher):

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

    bundle.Include("~/Scripts/myFile.js");
}
RouR
quelle
Ich erhalte eine Fehlermeldung:CS0103: The name 'BundleTable' does not exist in the current context
Kunal
nvm: gelöst. Musste System.Web.OptimizationdhSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");
Kunal
1
Ändert dies nicht das Bundle global? Wenn Sie dies auf Seite A tun und später Seite B öffnen, wird auf Seite B auch myFile.js enthalten sein, was meiner Meinung nach vom OP nicht gewünscht wurde
Meilen82
4

Für diejenigen von uns, die ASP.NET MVC 4 verwenden, kann dies hilfreich sein.

Zuerst habe ich eine BundleConfig-Klasse im Ordner App_Start hinzugefügt.

Hier ist mein Code, mit dem ich ihn erstellt habe:

using System.Web.Optimization;

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

Zweitens habe ich die BundleConfig-Klasse in der Datei Global.asax registriert:

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

Drittens habe ich meiner CSS-Datei Stil-Helfer hinzugefügt:

/* 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;
}

Schließlich habe ich diese Syntax in jeder Ansicht verwendet:

@Styles.Render("~/Content/css")
Terry H.
quelle
3

Hier ist ein NuGet- Plugin namens Cassette , mit dem Sie unter anderem Skripte und Stile in Partials referenzieren können.

Es gibt jedoch eine Reihe von Konfigurationen für dieses Plugin, was es sehr flexibel macht. Hier ist die einfachste Möglichkeit, auf Skript- oder Stylesheet-Dateien zu verweisen:

Bundles.Reference("scripts/app");

Laut Dokumentation :

Anrufe an Referencekönnen an einer beliebigen Stelle in einer Seite, einem Layout oder einer Teilansicht angezeigt werden.

Das Pfadargument kann eines der folgenden sein:

  • Ein Bündelpfad
  • Ein Asset-Pfad - Auf das gesamte Bundle, das dieses Asset enthält, wird verwiesen
  • Eine URL
vulkanischer Rabe
quelle
2

Ich habe einen einfachen Wrapper geschrieben, mit dem Sie Stile und Skripte in jeder Teilansicht dynamisch im Head-Tag registrieren können.

Es basiert auf dem DynamicHeader jsakamoto, bietet jedoch einige Leistungsverbesserungen und -verbesserungen.

Es ist sehr einfach zu bedienen und vielseitig.

Die Verwendung:

@{
    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");    
}

Den vollständigen Code, Erklärungen und Beispiele finden Sie im Folgenden : Stile und Skripte dynamisch zum Head Tag hinzufügen

Amir Yonatan
quelle