Додайте файли CSS або JavaScript до макету голови з подань або часткових представлень


176

Макет сторінки заголовка:

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

Перегляд (AnotherView) із програми потребує:

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

і AnotherView має частковий вигляд (AnotherPartial), який потребує:

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

Питання: Як ми можемо додати до цих файлів CSS посилання AnotherView та AnotherPartial посилання до голови макета ?

RenderSection - це не дуже гарна ідея, тому що в AnotherPage може бути більше однієї партії. Додавання всіх CSS до голови не корисно, оскільки це буде динамічно змінюватися (це залежить від Anotherpages).


@NuriYILMAZ - це величезна різниця між "від поглядів" та "або частковими переглядами", згідно з назвою. У будь-якому випадку, якісь нові ідеї з цього питання?
Шиммі Вайцхандлер

Відповіді:


196

Макет:

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

Вид:

@model ProjectsExt.Models.DirectoryObject

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

5
Я думаю, що це найпростіше рішення.
iamichi

Приємне рішення з коробки!
jerrylroberts

14
Це не спрацює, якщо AddToHeadрозділ знаходиться в частковому вигляді, вбудованому в View.
Шиммі Вайцхандлер

57
Питання, про яке було сказано конкретно, частковий погляд, і ця відповідь з найбільш високим рейтингом не стосується цього питання! Це може бути відмінним рішенням для іншого запиту, але не цього.
вулкан ворон

1
Було б елегантним рішенням, якби воно гостро працювало з частковими поглядами.
Джоні

75

Оновлення : основний приклад доступний на веб-сторінці https://github.com/speier/mvcassetshelper

Ми використовуємо наступну реалізацію для додавання файлів JS та CSS на сторінку макета.

Перегляд або PartialView:

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

Сторінка макета:

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

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

Розширення 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>";
}

2
@JBeckton: Погляньте на код і замініть Insertметоди Addметодами
Valamas

9
@Kalman - безпека цього потоку (на мою думку цілком коректно) була поставлена ​​під сумнів: stackoverflow.com/questions/6609586/…
Марк Gravell

2
Це дуже неправильно; він повинен бути [ThreadStatic]або, бажано, зберігатися в HttpContext.Items.
СЛАкс

6
Я щось пропускаю? Якщо Styles.Render () викликається в <head>, то всі файли css, додані після <head> (тобто файли, додані в часткових переглядах), не будуть надані. (MVC надає зверху вниз.)
кен

3
@FernandoCorreia Я думаю, ви все помилилися. Іменовані розділи не працюють в часткових видах, що є основою всієї цієї теми.
Шиммі Вайцхандлер

11

До жаль, це не представляється можливим за замовчуванням для використання в sectionякості іншого користувача запропонував, оскільки sectionє тільки безпосередні childзView .

Однак те, що працює, це реалізація та переосмислення sectionкожного погляду , що означає:

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

Таким чином, кожен погляд може реалізувати головний розділ, а не лише безпосередніх дітей. Це працює лише частково, особливо, коли з декількома сторонами починаються проблеми (як ви вже згадували у своєму запитанні).

Тож єдиним реальним рішенням вашої проблеми є використання ViewBag. Найкраще, мабуть, була б окрема колекція (список) для CSS та скриптів. Для цього потрібно переконатися, що Listвикористане ініціалізується перед виконанням будь-якого з представлень. Тоді ви можете робити такі речі у верхній частині кожного перегляду / часткової роботи (без піклування, якщо значення Scriptsабо Stylesзначення є нульовим:

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

Потім у макеті ви можете проглядати колекції та додавати стилі на основі значень у 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" />
}

Я думаю, що це некрасиво, але це єдине, що працює.

****** ОНОВЛЕННЯ **** Оскільки оновлення починає виконувати внутрішні погляди спочатку і відпрацьовує вихід на макет, а стилі CSS каскадують, можливо, має сенс змінити список стилів за допомогою ViewBag.Styles.Reverse() .

Таким чином, спочатку додається найбільш зовнішній стиль, який відповідає принципу роботи аркушів стилів CSS.


1
Спасибі ntziolis. Це виглядає як приємно, але голови макета бритви працюють спочатку перед іншими видами, а .scripts і .styles динаміки були порожніми перед іншими видами. Я знайшов приємний блог про це, і поділився цим питанням.
Нурі ЙІЛМАЗ

Це буде працювати для будь-якого похідного виду, але не для часткового. Для партійних дій дійсно порядок страти неправильний. в основному для партії немає можливості включити їх до заголовка. Я б запропонував, замість того, щоб додавати його до заголовка, просто додати його на початку тегу body. Це був би не мій перший вибір, але таким чином у вас є стислий спосіб керування всіма стилями / js в одному місці, а не розкидання їх навколо.
ntziolis

Я з вами згоден. Тому що я знайшов деякі рішення, як я вказав у відповіді, але це саме js рішення. Мені дуже цікаво, чому ми не могли використовувати сторінку макета як класичний asp.net. Це означає, що я можу дістатися до головної сторінки з дочірньої сторінки.
Нурі ЙІЛМАЗ

11

Розділ можна визначити за допомогою RenderSection в макеті.

Макет

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

Тоді ви можете включити свої файли css у розділ у розділі перегляду, за винятком часткового перегляду .

Розділ працює з огляду, але не працює в режимі часткового перегляду .

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

Якщо ви дійсно хочете використовувати область розділу в частковому перегляді, ви можете дотримуватися статті, щоб переглядати метод RenderSection.

Бритва, вкладені макети та перероблені розділи - Марцін на ASP.NET


6

У мене виникла подібна проблема, і в кінцевому підсумку застосував відмінну відповідь Калмана за допомогою наведеного нижче коду (не настільки акуратний, але, мабуть, більш широкий)

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

Проект містить статичний метод AssignAllResources:

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

на сторінці _layout

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

і в часткових (іх) і видах

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

Цікаво. Здається, це надмірне вбивство, але я бачу, що це використовується більше на веб-сайтах, які не мають іншого вибору, окрім роботи з користувачами, які використовують старіші версії, наприклад ... як у корпоративних середовищах, де деякі країни не модернізувались, і ви хочете знімати себе. Лол. +1 для цього
pqsk

5

Я намагався вирішити це питання.

Моя відповідь тут.

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

Наприклад, _Layout.cshtml є:

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

І ви можете зареєструвати .js та .css файли в "DynamicHeader" де завгодно завгодно.

Для прикладу, блок коду в AnotherPartial.cshtm:

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

Тоді, остаточний вихід HTML:

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

4

Спробуйте нестандартне рішення (ASP.NET MVC 4 або новішої версії):

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

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

Я отримую помилку:CS0103: The name 'BundleTable' does not exist in the current context
Kunal

nvm: вирішено. Мав додати, System.Web.OptimizationтобтоSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");
Kunal

1
Чи це не змінює пакет в усьому світі? Якщо ви зробите це на сторінці A і пізніше відкрийте сторінку B, на сторінці B також буде включений myFile.js, який, я думаю, не хотів OP
милі82,

4

Для тих, хто використовує ASP.NET MVC 4 - це може бути корисним.

Спочатку я додав клас BundleConfig у папку App_Start.

Ось мій код, який я використовував для його створення:

using System.Web.Optimization;

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

По-друге, я зареєстрував клас BundleConfig у файлі Global.asax:

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

По-третє, я додав помічників стилів до свого файлу 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;
}

Нарешті, я використав цей синтаксис у будь-якому перегляді:

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

3

Ось плагін NuGet під назвою Кассета , який, крім усього іншого, надає вам можливість посилатися на сценарії та стилі в партіях.

Хоча для цього плагіна існує ряд конфігурацій , що робить його дуже гнучким. Ось найпростіший спосіб пересилання файлів скриптів або таблиць стилів:

Bundles.Reference("scripts/app");

Відповідно до документації :

Дзвінки до Reference можуть з’являтися в будь-якому місці сторінки, макета або часткового перегляду.

Аргумент шляху може бути одним із наступних:

  • Шлях пучка
  • Шлях до активності - посилання на весь пакет, що містить цей актив
  • URL-адреса

2

Я написав просту оболонку, яка дозволяє динамічно реєструвати стилі та сценарії в кожному частковому перегляді в тег заголовка.

Він заснований на розробці jsakamoto DynamicHeader, але має деякі покращення продуктивності та налаштування.

Він дуже простий у використанні та універсальний.

Використання:

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

Ви можете знайти повний код, пояснення та приклади всередині: Додайте стилі та сценарії динамічно до тегу Head

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.