เพิ่มไฟล์ 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 สามารถมีได้มากกว่าหนึ่ง Partials เพิ่ม CSS ทั้งหมดในส่วนหัวไม่มีประโยชน์เพราะจะเปลี่ยน dynamicaly (ขึ้นอยู่กับ Anotherpages)


@NuriYILMAZ เป็นความแตกต่างอย่างมากระหว่าง "จากจำนวนการดู" และ "หรือมุมมองบางส่วน" ตามที่ชื่อของคุณระบุไว้ อย่างไรก็ตามมีความคิดใหม่ ๆ เกี่ยวกับเรื่องนี้หรือไม่?
Shimmy Weitzhandler

คำตอบ:


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

57
คำถามที่กล่าวถึงมุมมองบางส่วนโดยเฉพาะและคำตอบที่ได้รับคะแนนสูงสุดนี้ไม่ได้แก้ปัญหา! นี่อาจเป็นโซลูชันที่ยอดเยี่ยมสำหรับแบบสอบถามอื่น แต่ไม่ใช่คำถามนี้
Raven vulcan

1
น่าจะเป็นคำตอบที่สง่างามถ้ามันทำงานได้ดีกับมุมมองบางส่วน
Jonny

75

อัปเดต : ตัวอย่างพื้นฐานมีให้ที่https://github.com/speier/mvcassetshelper

เรากำลังใช้การนำไปใช้ต่อไปนี้เพื่อเพิ่มไฟล์ JS และ CSS ลงในหน้าเลย์เอาต์

ดูหรือบางมุมมอง:

@{
    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//
Marc Gravell

2
นี่เป็นสิ่งที่ผิดมาก มันควรจะเป็นหรือควรเก็บไว้ใน[ThreadStatic] HttpContext.Items
SLaks

6
ฉันพลาดอะไรไปรึเปล่า? หาก Styles.Render () ถูกเรียกใน <head> ไฟล์ css ใด ๆ ที่ถูกเพิ่มหลังจาก <head> (เช่นไฟล์ที่เพิ่มในมุมมองบางส่วน) จะไม่ถูกแสดงผล (MVC แสดงผลจากบนลงล่าง)
เคน

3
@ FernandoCorreia ฉันคิดว่าคุณเข้าใจผิด ส่วนที่มีชื่อไม่ทำงานในมุมมองบางส่วนซึ่งเป็นฐานของเธรดทั้งหมดนี้
Shimmy Weitzhandler

11

น่าเศร้าที่เป็นไปไม่ได้โดยเริ่มต้นจากการใช้sectionเป็นผู้ใช้อื่นแนะนำเนื่องจากsectionจะใช้ได้เฉพาะกับทันทีของchildView

สิ่งที่ใช้ได้ผลคือการนำไปปฏิบัติและนิยามใหม่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" />
}

ฉันคิดว่ามันน่าเกลียด แต่มันเป็นสิ่งเดียวที่ทำงานได้

****** UPDATE **** นับตั้งแต่เริ่มดำเนินการภายในมุมมองครั้งแรกและวิธีการทำงานของมันออกมาในรูปแบบและ CSS ViewBag.Styles.Reverse()ในรูปแบบที่มีการซ้อนก็อาจจะทำให้ความรู้สึกที่จะกลับรายการรูปแบบผ่าน

วิธีนี้จะเพิ่มสไตล์ภายนอกส่วนใหญ่ก่อนซึ่งสอดคล้องกับสไตล์ชีทของ CSS ที่ทำงานอยู่ดี


1
ขอบคุณ ntziolis มันดูดี แต่หัวเลย์เอาต์แบบมีดโกนทำงานก่อนมุมมองอื่นและการเปลี่ยนแปลงแบบ. และแบบ. ว่างเปล่าก่อนมุมมองอื่น ฉันพบบล็อกที่ดีเกี่ยวกับเรื่องนี้และฉันแบ่งปันคำถามนี้
นูริ YILMAZ

สิ่งนี้จะใช้งานได้สำหรับมุมมองที่ได้รับแต่ไม่ได้มีไว้สำหรับ partials สำหรับพรรคพวกนั้นคำสั่งของการประหารชีวิตนั้นผิด โดยทั่วไปสำหรับงานปาร์ตี้ไม่มีวิธีที่จะรวมไว้ในส่วนหัว ฉันอยากจะแนะนำแทนที่จะเพิ่มไปยังส่วนหัวเพียงเพิ่มไว้ในตอนต้นของแท็กร่างกาย มันจะไม่ใช่ตัวเลือกแรกของฉัน แต่วิธีนี้คุณมีวิธีรัดกุมในการจัดการสไตล์ / js ทั้งหมดในที่เดียวแทนที่จะกระจายไปทั่ว
ntziolis

ฉันรู้สึกกังวลกับคุณ เพราะฉันพบวิธีแก้ปัญหาบางอย่างตามที่ระบุไว้ในคำตอบ แต่มันเป็นโซลูชัน js ฉันสงสัยจริงๆว่าทำไมเราไม่สามารถใช้หน้าเลย์เอาต์เป็น clasic asp.net มันหมายความว่าฉันสามารถไปถึงหัวจากหน้าเด็ก
นูริ YILMAZ

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 ใหม่

มีดโกน, เลย์เอาต์ที่ซ้อนกันและส่วนที่นิยามใหม่ - Marcin บน 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");

น่าสนใจ ดูเหมือนว่า overkill แต่ฉันเห็นว่ามันถูกใช้กับเว็บไซต์ที่ไม่มีทางเลือกมากกว่า แต่เพื่อจัดการกับผู้ใช้ที่ใช้เวอร์ชันเก่ากว่าเช่น ... เช่นในสภาพแวดล้อมขององค์กรที่บางประเทศยังไม่ได้อัพเกรดและคุณต้องการยิงตัวเอง ฮ่า ๆ. +1 สำหรับสิ่งนั้น
pqsk

5

ฉันพยายามที่จะแก้ปัญหานี้

คำตอบของฉันอยู่ที่นี่

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

ตัวอย่างเช่น _Layout.cshtml คือ:

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

และคุณสามารถลงทะเบียนไฟล์. js และ. css ไปที่ "DynamicHeader" ได้ทุกที่ที่คุณต้องการ

สำหรับ exmaple บล็อคโค้ดใน 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
miles82

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ชื่อCassetteซึ่งเหนือสิ่งอื่นใดให้ความสามารถในการอ้างอิงสคริปต์และสไตล์ในงาน Partials

แม้ว่าจะมีการกำหนดค่าจำนวนมากสำหรับปลั๊กอินนี้ซึ่งทำให้มีความยืดหยุ่นสูง นี่เป็นวิธีที่ง่ายที่สุดในการอ้างอิงไฟล์สคริปต์หรือสไตล์ชีท:

Bundles.Reference("scripts/app");

ตามเอกสาร :

โทรไปที่ Referenceสามารถปรากฏที่ใดก็ได้ในหน้าเค้าโครงหรือมุมมองบางส่วน

อาร์กิวเมนต์ path สามารถเป็นหนึ่งในสิ่งต่อไปนี้:

  • เส้นทางมัด
  • เส้นทางสินทรัพย์ - กลุ่มทั้งหมดที่มีเนื้อหานี้มีการอ้างอิง
  • URL

2

ฉันเขียน wrapper ง่าย ๆ ที่ให้คุณลงทะเบียนสไตล์และ scrips ในมุมมองบางส่วนแบบไดนามิกในแท็ก head

มันขึ้นอยู่กับการวาง DynamicHeader jsakamoto แต่มีการปรับปรุงประสิทธิภาพการทำงานบางอย่าง & ปรับแต่ง

มันใช้งานง่ายและหลากหลาย

การใช้งาน:

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

คุณสามารถค้นหารหัสเต็มคำอธิบายและตัวอย่างภายใน: เพิ่มสไตล์และสคริปต์แบบไดนามิกลงในแท็กส่วนหัว

โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.