Görünümlerden veya kısmi görünümlerden mizanpaj başlığına CSS veya JavaScript dosyaları ekleme


176

Düzen sayfaları başlığı:

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

Uygulamadan bir Görünüm (AnotherView) şunlara ihtiyaç duyar:

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

ve AnotherView aşağıdakileri gerektiren kısmi bir görünüme (AnotherPartial) sahiptir:

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

Soru: Bu CSS dosya bağlantılarını AnotherView ve AnotherPartial bağlantılarını Düzen başlığına nasıl ekleyebiliriz ?

RenderSection iyi bir fikir değildir çünkü AnotherPage'in birden fazla Kısmi olabilir. Tüm CSS'yi kafaya eklemek yararlı olmaz çünkü dinamik olarak değişir (Anotherpages'e bağlıdır).


@NuriYILMAZ, başlığınıza göre "görünümlerden" ve "veya kısmi görünümlerden" büyük bir fark olduğunu söylüyor. Her neyse, bu konuda yeni fikirler var mı?
Shimmy Weitzhandler

Yanıtlar:


196

Yerleşim:

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

Görünüm:

@model ProjectsExt.Models.DirectoryObject

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

5
Bence bu en basit çözüm.
iamichi

Kutusundan çıkan çözüm güzel!
jerrylroberts

14
AddToHeadBölüm, içine gömülü kısmi bir görünümdeyse bu işe yaramaz View.
Shimmy Weitzhandler

57
Bu soru kısmi görüşten özellikle bahsetti ve bu en yüksek puan alan cevap sorunu çözmüyor! Bu, başka bir sorgu için mükemmel bir çözüm olabilir, ancak bu değil.
vulcan kuzgun

1
Eğer kısmi görüşlerle acutally çalıştı zarif bir çözüm olurdu.
Jonny

75

Güncelleme : https://github.com/speier/mvcassetshelper adresinde bulunan temel örnek

Düzen sayfasına JS ve CSS dosyaları eklemek için aşağıdaki uygulamayı kullanıyoruz.

Görünüm veya PartialView:

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

Düzen sayfası:

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

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

HtmlHelper uzantısı:

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: Koda bir göz atın ve Insertyöntemleri Addyöntemlerle değiştirin
Valamas

9
@Kalman - bunun iş parçacığı güvenliği (benim görüşüme göre oldukça doğru) şu soruya çağrıldı: stackoverflow.com/questions/6609586/…
Marc Gravell

2
Bu çok yanlış; Olması gereken [ThreadStatic]tercihen saklanabilir, ya da HttpContext.Items.
SLaks

6
Bir şey mi kaçırıyorum? <head> içinde Styles.Render () çağrılırsa, <head> öğesinden sonra eklenen herhangi bir css dosyası (yani, kısmi görünümlerde eklenen dosyalar) oluşturulmaz. (MVC yukarıdan aşağıya doğru işler.)
ken

3
@FernandoCorreia Sanırım her şeyi yanlış anladın. Adlandırılmış bölümler, tüm iş parçacığının temelini oluşturan kısmi görünümlerde çalışmaz.
Shimmy Weitzhandler

11

Ne yazık ki, bu varsayılan sectionolarak başka bir kullanıcının önerdiği gibi kullanmak mümkün değildir , çünkü a sectionsadece childa View.

Ancak işe yarayan, sectionher görüşte uygulamak ve yeniden tanımlamaktır , yani:

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

Bu şekilde her görüş sadece yakın çocukları değil, bir baş bölümü de uygulayabilir. Bu sadece kısmen işe yarıyor, özellikle birden fazla kısmi ile sorunlar başlıyor (sorunuzda belirttiğiniz gibi).

Yani probleminize tek gerçek çözüm ViewBag. En iyisi muhtemelen CSS ve komut dosyaları için ayrı bir koleksiyon (liste) olacaktır. Bunun çalışması için, Listgörünümlerden herhangi biri yürütülmeden önce kullanılanın başlatıldığından emin olmanız gerekir . Daha sonra her görünümün / kısmi öğenin üstünde böyle şeyler yapabilirsiniz ( Scriptsveya Stylesdeğeri null olursa umursamadan :

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

Düzende, koleksiyonlar arasında döngü yapabilir ve stilleri içindeki değerlere dayalı olarak ekleyebilirsiniz 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" />
}

Bence bu çirkin, ama işe yarayan tek şey bu.

****** GÜNCELLEME **** İlk önce iç görünümleri yürütmeye başladığı ve mizanpaja doğru ilerlemeye başladığı ve CSS stilleri basamaklı olduğundan, muhtemelen stil listesini tersine çevirmek mantıklı olacaktır ViewBag.Styles.Reverse().

Bu şekilde ilk olarak en dış stil eklenir, bu da CSS stil sayfalarının nasıl çalıştığı ile aynıdır.


1
Teşekkürler ntziolis. Güzel gibi görünüyor, ancak jilet düzen kafaları başka bir görünümden önce çalışıyor ve .scripts ve .styles dinamikleri başka bir görünümden önce boştu. Bu konuda güzel bir blog buldum ve bu soruyu paylaştım.
Nuri YILMAZ

Bu türetilmiş herhangi bir görünüm için çalışır, ancak kısmi olanlar için çalışmaz. Kısmenler için gerçekten icra sırası yanlıştır. temelde kısmi olanlar için bunları başlığa dahil etmenin bir yolu yoktur. Başlığa eklemek yerine sadece gövde etiketinin başına eklemenizi öneririm. Bu benim ilk tercihim olmayacaktı, ancak bu şekilde tüm stilleri / j'leri tek bir yerde yönetmenin kısa bir yoluna sahipsiniz, daha ziyade onları etrafa dağıtın.
ntziolis

Sana katılıyorum. Çünkü cevabımda listelediğim gibi bazı çözümler buldum ama tam olarak js çözümleri. Düzen sayfasını neden clasic asp.net olarak kullanamadığımızı gerçekten merak ediyorum. Bu, alt sayfadan başa ulaşabileceğim anlamına gelir.
Nuri YILMAZ

11

Bölümü düzende RenderSection yöntemiyle tanımlayabilirsiniz .

Yerleşim

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

Daha sonra, css dosyalarınızı kısmi görünüm dışında görünümünüzdeki bölüm alanına dahil edebilirsiniz .

Bölüm görünüşte çalışır, ancak tasarıma göre kısmi görünümde çalışmaz .

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

Bölüm alanını gerçekten kısmi görünümde kullanmak istiyorsanız, RenderSection yöntemini yeniden tanımlamak için makaleyi takip edebilirsiniz.

Ustura, İç İçe Düzen ve Yeniden Tanımlanmış Bölümler - Marcin ASP.NET'te


6

Benzer bir sorun yaşadım ve Kalman'ın aşağıdaki kodla mükemmel cevabını uyguladım (oldukça düzgün değil, ama tartışmasız daha geniş olabilir):

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

Proje statik bir AssignAllResources yöntemi içerir:

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 sayfasında

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

ve kısmi (ler) ve görünümlerde

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

İlginç. Overkill gibi görünüyor, ancak bunun daha fazla seçeneği olmayan web siteleri ile daha çok kullanıldığını görüyorum, ancak bazı eski sürümleri yükseltmeyen şirket ortamlarında olduğu gibi eski sürümlerini kullanan kullanıcılarla uğraşmak ve kendinizi çekmek istiyorsunuz. lol. Bunun için +1
pqsk

5

Bu sorunu çözmeye çalıştım.

Cevabım burada.

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

Örneğin, _Layout.cshtml:

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

Ayrıca, .js ve .css dosyalarını istediğiniz yere "DynamicHeader" a kaydedebilirsiniz .

Exmaple için, AnotherPartial.cshtm içindeki kod bloğu:

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

Ardından, nihai çıktı HTML'si:

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

4

Kullanıma hazır çözümü deneyin (ASP.NET MVC 4 veya üzeri):

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

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

Bir hata alıyorum:CS0103: The name 'BundleTable' does not exist in the current context
Kunal

nvm: çözüldü. Ekleme zorunda kaldı System.Web.OptimizationyaniSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");
Kunal

1
Bu, paketi global olarak değiştirmez mi? Bunu sayfa A'da ve daha sonra sayfa B'de açarsanız, sayfa B'de OP'nin istediğini düşünmediğim myFile.js de yer alacaktır
miles82

4

ASP.NET MVC 4 kullananlarımız için - bu yardımcı olabilir.

İlk olarak, App_Start klasörüne bir BundleConfig sınıfı ekledim.

İşte oluşturmak için kullanılan benim kod:

using System.Web.Optimization;

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

İkinci olarak, Global.asax dosyasında BundleConfig sınıfını kaydettirdim:

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

Üçüncü olarak, CSS dosyama stil yardımcıları ekledim:

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

Sonunda bu sözdizimini herhangi bir Görünümde kullandım:

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

3

İşte Cassette adında bir NuGet eklentisi .

Bu eklenti için çok sayıda yapılandırma olmasına rağmen , bu onu son derece esnek hale getirir. Komut dosyası veya stil sayfası dosyalarına başvurmanın en basit yolu:

Bundles.Reference("scripts/app");

Belgelere göre :

Şu numaralara sesli arama yapılıyor: Reference sayfanın, mizanpajın veya kısmi görünümün herhangi bir yerinde görünebilir.

Yol argümanı aşağıdakilerden biri olabilir:

  • Paket yolu
  • Bir varlık yolu - bu varlığı içeren tüm pakete başvurulur
  • Bir URL

2

Her kısmi görünümde stilleri ve komut dosyalarını dinamik olarak kafa etiketine kaydetmenizi sağlayan kolay bir sarmalayıcı yazdım.

Bu, DynamicHeader jsakamoto'nun dayanmasına dayanıyor, ancak bazı performans iyileştirmeleri ve ayarlamalar var.

Kullanımı çok kolay ve çok yönlü.

Kullanım:

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

Tam kodu, açıklamaları ve örnekleri içeride bulabilirsiniz: Stil ve Komut Dosyalarını Dinamik Olarak Başlık Etiketine Ekleme

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.