Menu
Although bundling is a neat feature of VS, sometimes I want to have a script or css to be available to a particular page. This way, I can make sure that name conflicts and/or overrides will be avoided.
Is it possible to bundle files so that only global and page specific files are available?
So for example, say I have a page called Cabinet.cshtml. And I also have Cabinet.js and Cabinet.css files. On the other hand I have another page called AdminPanle.cshtml with files admin.js and admin.css.
Now, I would like these two views to have access only to their corresponding files and also jQuery and jQuery ui. So jQuery must be global.
993
So what's the problem? By default in your BundleConfig.cs you have:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
"~/Scripts/jquery-ui-{version}.js"));
So put this bundles in your head of your _Layout.cshtml:
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
And create 4 other bundles:
//scripts
bundles.Add(new ScriptBundle("~/bundles/cabinet").Include(
"~/Scripts/Cabinet.js"));
bundles.Add(new ScriptBundle("~/bundles/admin").Include(
"~/Scripts/admin.js"));
//styles
bundles.Add(new StyleBundle("~/Content/cabinet").Include("~/Content/Cabinet.css"));
bundles.Add(new StyleBundle("~/Content/admin").Include("~/Content/admin.css"));
Now you can separate theese scripts and styles and add them only on page that you need.
Also I suppose it's good to define 2 sections in your _Layout.cshtml in head tag.
<head>
//other scripts and styles here
@RenderSection("scriptslib", required: false)
@RenderSection("csslib", required: false)
</head>
So now in your Views (Cabinet.cshtml and AdminPanle.cshtml) you can place your libs where they suppose to be like this:
@section scriptslib{
@Scripts.Render("~/bundles/cabinet")
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
