सीएसएस या जावास्क्रिप्ट फ़ाइलों को विचारों या आंशिक विचारों से सिर लेआउट में जोड़ें


176

लेआउट पृष्ठ सिर:

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

एप्लिकेशन आवश्यकताओं से एक दृश्य (अन्य दृश्य):

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

(दूसरे दृश्य में आंशिक दृश्य है (अन्यपार्टियल) जिसकी आवश्यकता है:

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

प्रश्न: हम इन सीएसएस फाइलों को अन्य कैसे जोड़ सकते हैं एक और दृश्य और लेआउट के सिर के लिए अन्य लिंक लिंक ?

रेंडरसेन एक अच्छा विचार नहीं है क्योंकि अन्य पेजेज में एक से अधिक भाग हो सकते हैं। सभी सीएसएस को सिर से जोड़ें उपयोगी नहीं है क्योंकि यह गतिशीलता को बदल देगा (यह अन्यपृष्ठों पर निर्भर करता है)।


@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
मुझे लगता है कि यह सबसे सरल उपाय है।
इमामी

बॉक्स समाधान से बाहर अच्छा है!
जेरालोबर्ट्स

14
यदि AddToHeadअनुभाग आंशिक रूप से एम्बेडेड है, तो यह काम नहीं करेगा View
शिम्मी वेइटहैंडलर

57
इस प्रश्न में विशेष रूप से आंशिक दृश्य का उल्लेख किया गया है और यह उच्चतम श्रेणी का उत्तर समस्या का समाधान नहीं करता है! यह एक और प्रश्न के लिए एक उत्कृष्ट समाधान हो सकता है, लेकिन यह नहीं।
वल्केन रेवेन

1
अगर यह आंशिक रूप से आंशिक विचारों के साथ काम करता है तो एक सुरुचिपूर्ण समाधान होगा।
जॉनी

75

अपडेट : मूल उदाहरण https://github.com/speier/mvcassetshelper पर उपलब्ध है

हम जेएस और सीएसएस फाइलों को लेआउट पेज में जोड़ने के लिए निम्नलिखित कार्यान्वयन का उपयोग कर रहे हैं।

देखें या आंशिक दृश्य:

@{
    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
@ जेबीटन: कोड में एक नज़र है और Insertविधियों के साथ Addतरीकों को बदलें
वेलमास

9
@Kalman - इस के धागे की सुरक्षा (काफी मेरे विचार में सही ढंग से) प्रश्न उठाये गए हैं: stackoverflow.com/questions/6609586/...
मार्क Gravell

2
यह बहुत गलत है; यह होना चाहिए [ThreadStatic], या, अधिमानतः, में संग्रहीत HttpContext.Items
SLACs

6
क्या मैं कुछ भूल रहा हूँ? यदि Styles.Render () को <head> कहा जाता है, तो <head> (यानी आंशिक विचारों में जोड़ी गई फ़ाइलें) के बाद जोड़ी गई किसी भी css फ़ाइलों को रेंडर नहीं किया जाएगा। (एमवीसी ऊपर से नीचे तक प्रतिपादन करता है।)
केन

3
@FernandoCorreia मुझे लगता है कि आपको यह सब गलत लगा। नामांकित अनुभाग आंशिक विचारों में काम नहीं करते हैं जो इस पूरे धागे का आधार है।
शिम्मी वेइटहैंडलर

11

अफसोस की बात है, यह डिफ़ॉल्ट रूप से उपयोग करने के लिए संभव नहीं है sectionजैसा कि किसी अन्य उपयोगकर्ता ने सुझाव दिया है, क्योंकि sectionयह केवल एक के तत्काल उपलब्ध childहै View

हालांकि जो काम करता है वह sectionहर दृष्टिकोण में लागू और पुनर्परिभाषित होता है , जिसका अर्थ है:

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

इस तरह हर दृश्य एक हेड सेक्शन को लागू कर सकता है, न कि सिर्फ तात्कालिक बच्चों को। यह केवल आंशिक रूप से काम करता है, विशेष रूप से कई हिस्से के साथ परेशानी शुरू होती है (जैसा कि आपने अपने प्रश्न में उल्लेख किया है)।

तो आपकी समस्या का एकमात्र वास्तविक समाधान है ViewBag। सबसे अच्छा शायद सीएसएस और लिपियों के लिए एक अलग संग्रह (सूची) होगा। इस कार्य के लिए, आपको यह सुनिश्चित करने की आवश्यकता है कि 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" />
}

मुझे लगता है कि यह बदसूरत है, लेकिन यह केवल एक चीज है जो काम करती है।

****** अद्यतन **** चूंकि यह पहले आंतरिक विचारों को क्रियान्वित करना शुरू कर देता है और लेआउट और सीएसएस शैलियों के लिए अपने तरीके से काम कर रहा है, इसलिए यह शायद शैली की सूची को उल्टा करने के लिए समझ में आएगा ViewBag.Styles.Reverse()

इस तरह सबसे बाहरी शैली पहले जोड़ दी जाती है, जो इनलाइन के साथ है कि सीएसएस शैली की चादरें कैसे भी काम करती हैं।


1
धन्यवाद ntziolis यह अच्छा लग रहा है लेकिन, रेजर लेआउट प्रमुख दूसरे विचारों से पहले काम करते हैं, और .scripts और .styles गतिशीलता दूसरे विचारों से पहले खाली थी। मुझे इसके बारे में अच्छा ब्लॉग मिला और मैंने यह सवाल साझा किया।
नूरी YILMAZ

यह किसी भी व्युत्पन्न दृश्य के लिए काम करेगा लेकिन भाग के लिए नहीं। वास्तव में फेशियल के लिए निष्पादन का क्रम गलत है। मूल रूप से भाग के लिए उन्हें हेडर में शामिल करने का कोई तरीका नहीं है। मैं यह सुझाव दूंगा कि इसे हेडर में जोड़ने के बजाय इसे केवल बॉडी टैग की शुरुआत में जोड़ें। यह मेरी पहली पसंद नहीं होगी, लेकिन इस तरह से आपके पास एक ही जगह पर सभी शैलियों / जेएस को प्रबंधित करने का एक संक्षिप्त तरीका है, बल्कि यह चारों ओर बिखरा हुआ है।
ntziolis

मैं आपसे सहमत हूँ। क्योंकि मुझे उत्तर पर सूचीबद्ध के रूप में कुछ समाधान मिले, लेकिन यह बिल्कुल जेएस समाधान है। मुझे वास्तव में आश्चर्य हो रहा है कि हम लेआउट पृष्ठ का उपयोग 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>

तब आप आंशिक दृश्य को छोड़कर अपने सीएसएस फ़ाइलों को अपने विचार में अनुभाग क्षेत्र में शामिल कर सकते हैं ।

अनुभाग देखने में काम करता है, लेकिन डिज़ाइन द्वारा आंशिक दृश्य में काम नहीं करता है

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

यदि आप वास्तव में आंशिक दृश्य में अनुभाग क्षेत्र का उपयोग करना चाहते हैं, तो आप लेख को पुन: प्रस्तुत करने की विधि को फिर से परिभाषित करने के लिए अनुसरण कर सकते हैं।

रेज़र, नेस्टेड लेआउट और पुनर्परिभाषित अनुभाग - मार्सिन ऑन 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>";
    }
}

परियोजना में एक स्थिर असाइनमेंट विधियाँ शामिल हैं:

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

मैंने इस मुद्दे को हल करने की कोशिश की।

मेरा जवाब यहाँ है।

"डायनेमिकहेडर" - http://dynamicheader.codeplex.com/ , https://nuget.org/packages/DynamyHeader

उदाहरण के लिए, _Loutout.cshtml है:

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

और, आप .js और .css फ़ाइलों को कहीं भी "डायनामिक हैडर" में पंजीकृत कर सकते हैं।

निर्वासन के लिए, अन्य प्रॉपर्टी कोड कोड में है।

@{
  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
कुणाल

nvm: इसे हल किया। संलग्न करना पड़ा System.Web.OptimizationयानीSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");
कुणाल

1
क्या यह बंडल को विश्व स्तर पर संशोधित नहीं करता है? यदि आप इसे पृष्ठ A और बाद में खुले पेज B पर करते हैं, तो पृष्ठ B में myFile.js भी शामिल होगा, जो मुझे नहीं लगता कि OP
mi82

4

ASP.NET MVC 4 का उपयोग करने वाले हम में से लोगों के लिए - यह मददगार हो सकता है।

सबसे पहले, मैंने 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"));
    }
}

दूसरा, मैंने 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.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");    
}

आप पूरा कोड, स्पष्टीकरण और उदाहरण अंदर पा सकते हैं: शैलियाँ और लिपियों को गतिशील रूप से हेड टैग में जोड़ें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.