Tambahkan file CSS atau JavaScript ke kepala tata letak dari tampilan atau tampilan sebagian

176

Kepala halaman tata letak:

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

Tampilan (AnotherView) dari kebutuhan aplikasi:

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

dan AnotherView memiliki tampilan parsial (AnotherPartial) yang membutuhkan:

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

Pertanyaan: Bagaimana kita bisa menambahkan tautan file CSS ini ke tautan AnotherView dan AnotherPartial ke kepala Layout ?

RenderSection bukanlah ide yang baik karena AnotherPage dapat memiliki lebih dari satu Partials. Menambahkan semua CSS ke kepala tidak berguna karena akan berubah secara dinamis (tergantung pada halaman lain).

asp.net-mvc asp.net-mvc-3 razor Nuri YILMAZ
sumber
@NuriYILMAZ ini adalah perbedaan besar antara "dari tampilan" dan "atau tampilan sebagian" sesuai judul kata Anda. Lagi pula, ada ide baru tentang hal itu?
Shimmy Weitzhandler

Jawaban:

196

Tata letak:

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

Melihat:

@model ProjectsExt.Models.DirectoryObject

@section AddToHead{
    <link href="@Url.Content("~/Content/Upload.css")" rel="stylesheet" type="text/css" />
}
RouR
sumber
5
Saya pikir ini adalah solusi paling sederhana.
iamichi
Solusi yang bagus!
jerrylroberts
14
Itu tidak akan berfungsi jika AddToHeadbagian itu dalam tampilan parsial tertanam di View.
Shimmy Weitzhandler
57
Pertanyaan yang secara khusus menyebutkan tampilan sebagian dan jawaban berperingkat tertinggi ini tidak membahas masalah ini! Ini mungkin solusi yang sangat baik untuk permintaan lain, tetapi bukan yang ini.
gagak vulcan
1
Akan menjadi solusi yang elegan jika secara akut bekerja dengan pandangan parsial.
Jonny
75

Pembaruan : contoh dasar tersedia di https://github.com/speier/mvcassetshelper

Kami menggunakan implementasi berikut untuk menambahkan file JS dan CSS ke halaman tata letak.

Lihat atau PartialView:

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

Layout page:

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

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

Ekstensi 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>";
}
Kalman Speier
sumber
2
@JBeckton: Lihat dalam kode dan ganti Insertmetode dengan Addmetode
Valamas
9
@Kalman - keamanan utas ini (menurut saya benar) telah dipertanyakan: stackoverflow.com/questions/6609586/…
Marc Gravell
2
Ini sangat salah; itu harus [ThreadStatic], atau, lebih disukai, disimpan di HttpContext.Items.
SLaks
6
Apakah saya melewatkan sesuatu? Jika Styles.Render () dipanggil dalam <head>, maka file css apa pun yang ditambahkan setelah <head> (yaitu file yang ditambahkan dalam tampilan sebagian) tidak akan dirender. (MVC menerjemahkan dari atas ke bawah.)
ken
3
@FernandoCorreia Saya pikir Anda salah semuanya. Bagian yang diberi nama tidak berfungsi dalam tampilan sebagian yang merupakan dasar dari keseluruhan utas ini.
Shimmy Weitzhandler
11

Sayangnya, ini tidak mungkin secara default untuk digunakan sectionseperti yang disarankan pengguna lain, karena a sectionhanya tersedia untuk segera childa View.

Namun yang berhasil adalah menerapkan dan mendefinisikan ulang sectiondalam setiap tampilan , yang berarti:

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

Dengan cara ini setiap pandangan dapat menerapkan bagian kepala, bukan hanya anak-anak langsung. Ini hanya berfungsi sebagian, terutama dengan banyak parsial masalah dimulai (seperti yang telah Anda sebutkan dalam pertanyaan Anda).

Jadi satu-satunya solusi nyata untuk masalah Anda adalah menggunakan ViewBag. Koleksi terbaik mungkin adalah kumpulan (daftar) terpisah untuk CSS dan skrip. Agar ini berfungsi, Anda perlu memastikan bahwa yang Listdigunakan diinisialisasi sebelum pandangan dijalankan. Kemudian Anda dapat dapat melakukan hal-hal seperti ini di bagian atas setiap pandangan / parsial (tanpa peduli jika Scriptsatau Stylesnilai null:

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

Di tata letak Anda kemudian dapat mengulangi koleksi dan menambahkan gaya berdasarkan nilai-nilai di 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" />
}

Saya pikir itu jelek, tapi itu satu-satunya yang berhasil.

****** PEMBARUAN **** Karena mulai menjalankan tampilan bagian dalam terlebih dahulu dan mencari jalan keluar ke tata letak dan gaya CSS mengalir, mungkin masuk akal untuk membalik daftar gaya melalui ViewBag.Styles.Reverse().

Dengan cara ini, gaya paling luar ditambahkan terlebih dahulu, yang sejalan dengan cara kerja lembar gaya CSS.

ntziolis
sumber
1
Terima kasih ntziolis. Ini terlihat seperti bagus tetapi, kepala tata letak silet bekerja terlebih dahulu sebelum tampilan lain, dan .scripts dan .styles dynamics kosong sebelum tampilan lain. Saya menemukan blog yang bagus tentang itu dan saya membagikan pertanyaan ini.
Nuri YILMAZ
Ini akan bekerja untuk semua tampilan turunan tetapi tidak untuk sebagian. Untuk sebagian memang urutan eksekusi salah. pada dasarnya untuk parsial tidak ada cara untuk memasukkannya ke dalam header. Saya akan menyarankan, daripada menambahkannya ke header, tambahkan saja di awal tag tubuh. Ini tidak akan menjadi pilihan pertama saya, tetapi dengan cara ini Anda memiliki cara ringkas untuk mengelola semua gaya / js di satu tempat, bukan yang menyebarkannya.
ntziolis
Saya setuju dengan Anda. Karena saya menemukan beberapa solusi seperti yang saya sebutkan pada jawaban tetapi itu adalah solusi js. Saya benar-benar bertanya-tanya mengapa kita tidak bisa menggunakan halaman layout sebagai clasic asp.net. Itu berarti saya dapat meraih ke kepala dari halaman anak.
Nuri YILMAZ
11

Anda dapat menentukan bagian dengan metode RenderSection dalam tata letak.

Tata letak

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

Kemudian Anda dapat memasukkan file css Anda di area bagian dalam tampilan Anda kecuali tampilan sebagian .

Bagian bekerja dalam tampilan, tetapi tidak berfungsi dalam tampilan sebagian oleh desain . 

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

Jika Anda benar-benar ingin menggunakan area bagian dalam tampilan sebagian, Anda dapat mengikuti artikel untuk mendefinisikan kembali metode RenderSection.

Pisau Cukur, Tata Letak Bersarang, dan Bagian yang Didefinisikan Ulang - Marcin On ASP.NET

Milkker
sumber
6

Saya memiliki masalah yang sama, dan akhirnya menerapkan jawaban Kalman yang sangat baik dengan kode di bawah ini (tidak begitu rapi, tetapi bisa dibilang lebih mudah dikembangkan):

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

Proyek ini berisi metode AssignAllResources statis:

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

di halaman _layout

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

dan di sebagian dan tampilan

Html.Assets().Libraries.Uses("DataTables");
Html.Assets().AddScript("~/Scripts/emailGridUtilities.js");
Brent
sumber
Menarik. Sepertinya berlebihan, tapi saya melihat ini lebih banyak digunakan dengan situs web yang tidak punya pilihan, tetapi untuk berurusan dengan pengguna yang menggunakan versi lama yaitu ... seperti di lingkungan perusahaan di mana beberapa negara belum meningkatkan, dan Anda ingin menembak diri sendiri. lol. +1 untuk itu
pqsk
5

Saya mencoba menyelesaikan masalah ini.

Jawaban saya ada di sini.

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

Misalnya, _Layout.cshtml adalah:

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

Dan, Anda dapat mendaftarkan file .js dan .css ke "DynamicHeader" di mana pun Anda inginkan.

Untuk exmaple, blok kode di AnotherPartial.cshtm adalah:

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

Kemudian, akhirnya menghasilkan HTML adalah:

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

Coba solusi out-of-the-box (ASP.NET MVC 4 atau lebih baru):

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

    bundle.Include("~/Scripts/myFile.js");
}
RouR
sumber
Saya mendapat pesan kesalahan:CS0103: The name 'BundleTable' does not exist in the current context
Kunal
nvm: mengatasinya. Harus menambahkan System.Web.OptimizationyaituSystem.Web.Optimization.BundleTable.Bundles.GetRegisteredBundles().First(b => b.Path == "~/bundles/css");
Kunal
1
Bukankah ini memodifikasi bundel secara global? Jika Anda melakukan ini di halaman A dan kemudian membuka halaman B, halaman B juga akan menyertakan myFile.js yang menurut saya tidak diinginkan oleh OP
miles82
4

Bagi kita yang menggunakan ASP.NET MVC 4 - ini mungkin membantu.

Pertama, saya menambahkan kelas BundleConfig di folder App_Start.

Inilah kode saya yang saya gunakan untuk membuatnya:

using System.Web.Optimization;

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

Kedua, saya mendaftarkan kelas BundleConfig di file Global.asax:

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

Ketiga, saya menambahkan bantuan gaya ke file CSS saya:

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

Akhirnya saya menggunakan sintaks ini dalam Tampilan apa pun:

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

Berikut ini adalah plugin NuGet bernama Cassette , yang antara lain memberikan Anda kemampuan untuk mereferensikan skrip dan gaya secara parsial.

Meskipun ada sejumlah konfigurasi yang tersedia untuk plugin ini, yang membuatnya sangat fleksibel. Berikut ini cara paling mudah untuk merujuk file skrip atau file stylesheet:

Bundles.Reference("scripts/app");

Menurut dokumentasi :

Panggilan untuk Referencedapat muncul di mana saja di halaman, tata letak atau tampilan sebagian.

Argumen jalur dapat berupa salah satu dari yang berikut:

  • Jalur bundel
  • Jalur aset - seluruh bundel yang mengandung aset ini direferensikan
  • URL
gagak vulcan
sumber
2

Saya menulis pembungkus mudah yang memungkinkan Anda untuk mendaftar gaya dan skrip di setiap tampilan sebagian secara dinamis ke tag kepala.

Ini didasarkan pada jsakamoto DynamicHeader disiapkan, tetapi memiliki beberapa peningkatan kinerja & tweak.

Sangat mudah digunakan, dan serbaguna.

Penggunaan:

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

Anda dapat menemukan kode lengkap, penjelasan, dan contoh di dalamnya: Tambahkan Gaya & Skrip Secara Dinamis ke Tag Kepala

Amir Yonatan
sumber