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");
Related
I have two themes' folders called Default and New in Views folder. These folders are included .cshtml extension files. I want to use these folders as theme option. How can I do theme settings in global.asax?
Install bootstrap through visual studio Manage Nugget Packages and you can utilize free themes available. Lot of free themes are available in https://bootswatch.com/. Download a CSS from the mentioned link and replace the one in your bootstrap CSS folder. Hope this helps...
EDIT
Actually in Asp.Net MVC Global.asax has nothing to do with setting themes. Current theme in MVC is decided by the styles specified in _Layout.cshtml file. Usually this file lies inside Views\Shared path. The _ViewStart.cshtml which lies directly under Views folder decides which layout should the view use.
Approach 1
If we require some other layout for certain views we can add another _ViewStart.cshtml inside the folder where those views exist and specify the path of _NewLayout.cshtml in it. The views will automatically get the new layout/theme while you render it.
Approach 2
Use a logic and set your layout/theme accordingly as shown below in /Views/_ViewStart.cshtml file,
#{
if (this.User.IsInRole("Admin") || !this.User.Identity.IsAuthenticated) {
Layout = "~/Views/Shared/_Layout.cshtml";
} else {
Layout = "~/Views/Shared/_LayoutUser.cshtml";
}
}
I'm working on a rails + angularjs app.
Here is my file structure:
app/
assets/
javascript/
templates/
home.html
partial.html
Inside the home.html.erb file I want to include the partial.html.erb file.
home.html.erb
<ng-include src="'partial.html'"></ng-include>
I also tried
<ng-include src="'<%= asset_path('partial.html') %>'"></ng-include>
But still doesn't work... Thanks for your help
Setup gem "angular-rails-templates"
It will automaticaly compile your templates into javascript, and make them available to angular. After that you may use ng-include as usual.
<ng-include src="'templates/partial.tpl.html'"></ng-include>
It's not a good idea to mix server templates and AngularJS' templates. Put your AngularJS templates in your public directory, then put in the src attribute the path to this template from the client.
public/templates/partial.tpl.html => <ng-include src="'/templates/partial.tpl.html'></ng-include>"
Another way to get the template from the client is to compile your templates to a JS file with html2js for example.
I added the bundle in BundleConfig.cs as shown below:
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.min*"));
In the _Layout.cshtml I have the following:
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/angular")
#RenderSection("scripts", required: false)
</body>
</html>
In the network traffic it does not show the angular file.
Bundling in ASP.NET MVC is quite clever in that it understands *.min and when to use or no to use it. So if you do this in your bundle:
bundles.Add(new ScriptBundle("~/bundles/angular").Include("~/Scripts/angular.js"));
In debug-mode, it will send a request for "/scripts/angular.js" and in release-mode it will send a request to "/scripts/angular.min.js"
In order to benefit from this, you should put both the original and the minified file in your scripts folder. That way, when you're debugging you have full access to the uncompressed source and in your production environment, the optimized file will be loaded
you have given incorrect file name
~/Scripts/angular.min*
instead it should be
~/Scripts/angular.js
.min would automatically be added in the production mode\
Bundler not including .min files
in my case the problem was with Global.asax.cs
you need to have
BundleConfig.RegisterBundles(BundleTable.Bundles);
in your Application_Start()
I have to rewrite a legacy asp.net mvc app using lots of:
Url.Content()
to get it to work in a different/additional deployment environment where the virtual directory is a sub directory of the default site.
At the moment css classes like this:
.icos-pencil:before { content: url(/content/images/global/icons/usual/icon-pencil.png); }
are also broke. Is there a similar 'helper' (?) like Url.Content for the css above?
If you want use helper in js or css file you can write own view engine such as jsHelper or you can use this code
background-image:url('../../content/images/global/icons/usual/icon-pencil.png');
becomes
background-image:url('content/images/global/icons/usual/icon-pencil.png');
Simply use relative path in your CSS.
I have a layout with an #RenderSection("scripts") section and I have a bundle that would need to be included in this section for some views. I thought that just doing this in the view would work, but it's not rendering the scripts.
#section scripts {
#Scripts.Render("~/bundles/myBundle")
}
In my view, how can I include a bundle to the scripts section?
Layout
#Scripts.Render("~/bundles/jquery", "~/bundles/scripts")
#RenderSection("scripts", required: false)
View
#section scripts {
#Scripts.Render("~/bundles/movie")
}
Try below mentioned solution inside the View.
View
#section Scripts{
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/movie")"></script>
}
Why mix the rendersection with bundling? If you choose to down the route of bundling, you can simply put your scripts in .JS file ,put it in their own bundle if you like and call that bundle on your view. For ex:
bundles.Add(new ScriptBundle("~/bundles/myscripts").Include(
"~/Scripts/myscript1.js",
"~/Scripts/myscript2.js"));
then view will have the following:
#Scripts.Render("~/bundles/myscripts")
Also make sure your Web.config has compilation debug set to false like below:
<compilation debug="false" />
it makes sure the scripts are bundled and minified.
Update
Based on comments and my recent experience, I can see why would we want to use the two together. Perfect case of learning in the community! :) So, if you decide to come back for refactoring, I would make sure there are no typos to begin with. If it still does not work, please let me know what the problem is and I will update the answer accordingly. Thanks everyone!
I can not replicate the issue you are having
#section scripts {
#Scripts.Render("~/bundles/movie")
}
renders fine with no issue (and respects the debug flag)
i would agree with #Mrchref and revisit your paths
on the other hand, you could use something like this:
public static class Helpers
{
public static HtmlString StaticContent(this System.Web.Mvc.UrlHelper url, string contentPath)
{
return new HtmlString(System.Web.Optimization.Scripts.Render(contentPath).ToString());
}
}
Usage:
#section Scripts{
#Url.StaticContent("~/assets/js/jquery")
}
i would advise not to use it as is,
You would need to find another solution for System.Web.Optimization.Scripts.Render(contentPath).ToString() since it basically renders the same function you are using (and not working).
You should play around with System.Web.Optimization.BundleTable.Bundles and see if you can query for both version, check the debug flag, and serve the correct content.
I believe a new build would solve your problem. Please follow these steps if not:
Step 1: add this into BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/common").Include("~/Scripts/common.js"));
Step 2: add this line in your view/layout
#Scripts.Render("~/bundles/common")
Step 3: build your project and run it.