In my BundleConfig.cs file I am trying to include all of my angularjs files in one step. I have:
bundles.Add(new ScriptBundle("~/bundles/angular").Include(
"~/Scripts/angular.js",
"~/Scripts/angular-*"));
bundles.Add(new ScriptBundle("~/bundles/App").IncludeDirectory(
"~/App", "*.js", true));
The first include works fine. It includes all of the angular files; however, the second include does not. When I go to sources in the browser it does not show up.
Any Suggestions?
Apparently the step that I missed was adding:
#Scripts.Render("~/bundles/app")
To the _Layout.cshtml page.
Now everything works as intended
Related
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.
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")
}
When I set EnableOptimizations to true, certain css attributes seem to be missing. This is similar to other questions, but for them the entire css files are missing. For my case, it only seems to be certain attributes.
Specifically, the padding on container-fluid from bootstrap.css goes missing. Everything else works fine though.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-theme.css",
"~/Content/site.css"));
I do not have the folder ~Content/css to cause the virtual directory issue as most other answers have stated.
I did some searching on this but couldn't find out why, but in my project, commenting out a line in the .Include() breaks the entire ScriptBundle. If I comment out one line, the other javascript files will not load.
Can you comment out individual bundles, or do you need to remove them and maybe put the comment below the code in case you need to put it back?
Ex.
This works:
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/bootstrap-multiselect.js",
"~/Scripts/bootstrap-datepicker.js",
"~/Scripts/respond.js"));
This causes the other javascript files in the ScriptBundle not to get loaded.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
// "~/Scripts/bootstrap-multiselect.js",
"~/Scripts/bootstrap-datepicker.js",
"~/Scripts/respond.js"));
Commenting out a line like you show shouldn't be a problem. Check your rendered script sections -- If you see the bootstrap resources included on your page then the bundler is working.
If your other scripts stop working then this indicates a problem with your javascript still referencing the removed bundle resource.
of course you can comment some lines (as you did), but remember you need to recompile your project to get affected
Basically after a bunch of work I've finally managed to get up and running with Bootstrap in my ASP.NET MVC4 project.
Here is my folder structure:
Here is my bundleconfig:
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrapjs").Include(
"~/Scripts/bootstrap.js"));
bundles.Add(new ScriptBundle("~/Content/bootstrapcss").Include(
"~/Content/bootstrap.css",
"~/Content/bootstrap-responsive.css"));
}
However when I try to add an HTML element with an icon:
<button type="submit" class="btn"><i class="icon-search"></i></button>
The icon does not appear.
The last bundle needs to be a StyleBundle, not a ScriptBundle. Here's an example from one of my projects:
bundles.Add(new StyleBundle("~/bundles/css").Include(
"~/content/css/bootstrap.min.css",
"~/content/css/font-awesome.min.css",
"~/content/css/common.css"));
I should note that I organize my CSS files into a specific folder, and this specific project uses FontAwesome in place of the Glyphicons.
As noted from the comments, the default Bootstrap package assumes that the CSS files are in one folder, and that the icon sprite file is in another folder at the same level as the CSS folder. Based on that assumption, the path to the sprite is set to "../img/glyphicons-halflings.png". If your files are not located in the same places, you need to manually edit the path, or use the Customizer to build a download that has the correct path for both the light and the dark versions of the sprite file.
I have downloaded MVC4 and trying to work out how the bundling feature works in a standard project. It would seem that having the bundle:
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
Brings back all the jquery.js files but not the knockout.js files in the included scripts. Why is this? And also what is the _references.js file about and why is the knockout.js file commented out?
If you look into your project Global.asax file, you should find there something like this:
protected void Application_Start()
{
...
BundleTable.Bundles.RegisterTemplateBundles();
}
Now the RegisterTemplateBundles is registering only a predefined subset of scripts:
jquery-*
jquery.mobile*
jquery-ui*
jquery.unobtrusive*
jquery.validate*
MicrosoftAjax.js
MicrosoftMvc.js
modernizr*
AjaxLogin.js
If you want some additional files you could either change RegisterTemplateBundles to EnableDefaultBundles:
protected void Application_Start()
{
...
BundleTable.Bundles.EnableDefaultBundles();
}
Or create your own custom bundle (you can read more about bundling and minification here). You should also know that EnableDefaultBundles has some performance impact.
The _references.js file is used by Visual Studio for JavaScript intellisense. You can learn more from following article:
JavaScript Intellisense in VS11, The _references.js File
tpeczek is correct. Most folks don't use Knockout.js, that's why it's not included by default. Bundling/Minification (BM) has changed considerably for RC and it will be much simpler to add files to bundles. See my Bundling and Minification tutorial
I was able to add a file to the bundle with the following line of code added after the RegisterTemplateBundles()
BundleTable.Bundles.RegisterTemplateBundles();
BundleTable.Bundles.Where(x => x.Path == "~/Scripts/js").First().AddFile("~/scripts/knockout-2.0.0.js");