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.
Related
I have two script bundles defined:
bundles.Add(new ScriptBundle("~/scripts/common").Include(
"~/Scripts/jquery-1.11.1.js",
"~/Scripts/jquery-ui-1.10.4.custom.min.js",
"~/Scripts/jquery.validate.js"));
bundles.Add(new ScriptBundle("~/scripts/sectionCommon").Include(
"~/Scripts/A.js",
"~/Scripts/B.js",
"~/Scripts/C.js"));
I have one set on my master layout page:
#Scripts.Render("~/scripts/common")
And one set on a subset of my pages where it is used:
#Scripts.Render("Scripts/sectionCommon")
So far so good and this works.
When I run my site using debug compilation, the JS files from the first bundle are rendered to the markup as individual script links per file, whereas the second bundle remains as a single minified bundle:
<script src="/siteRoot/Scripts/jquery-1.11.1.js"></script>
<script src="/siteRoot/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/siteRoot/Scripts/jquery.validate.js"></script>
<script src="/siteRoot/Scripts/sectionCommon"></script>
Does anybody have any idea why this might be happening? Bit of a pain while debugging.
Figured this out while I was writing the question. Thought I would answer it in case this bites anybody else. The difference between the two was using the tilda to get a site relative url:
#Scripts.Render("~/scripts/common")
#Scripts.Render("Scripts/sectionCommon")
Both of these render out the script as intended, but only the top one (using the site relative URL) was rendering out the individual script references in debug.
When I create an MVC project that uses Razor, the following lines are generated:
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", false)
What is the difference between these lines ? Is it the case that #Scripts.Render generates a <scripts> section and then #RenderSection("scripts", false) renders it ?
The first one renders out a bundle, which is a group of related Javascript files. For instance, you might want to bundle jQuery and jQuery UI together. Bundles also get the benefit of bundling and minification when a solution is compiled in release mode. ref: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification
#RenderSection indicates that a page that uses the layout in question can inject markup in a particular spot in the layout. Sections are in effect a placeholder (and work much like the ContentPlaceHolder server control from web forms if you are familiar with that). That reference is probably right before the closing body tag, where it is believed by some to be the best spot to put scripts. You could have a section called scripts, or head, or footer, it is completely arbitrary and sections don't necessarily have anything to do with scripts at all. ref: http://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts-and-sections-with-razor
These are completely different things.
The #Scripts.Render("~/bundles/jquery") is rendering a group of scripts for you, creating all the <script> tags. in the BundleConfig.cs file you are able to create bundles of scripts and css files.
One of its advantages allow you to group multiple files that are commonly used together. Instead of including each of these files explicitly you can include all of them using explicit Scripts.Render(groupName).
You can read more about Bundling and Minification here.
The #RenderSection("scripts", false) is about rendering a section in the view.
A section allow you to specify a region of content within a layout. It expects one parameter which is the name of the section. If you don’t provide that, an exception will be thrown.
Here is a good article explaining about Layouts, RenderBody, RenderSection and RenderPage in ASP.NET MVC.
The first parameter to the “RenderSection()” helper method specifies
the name of the section we want to render at that location in the
layout template. The second parameter is optional, and allows us to
define whether the section we are rendering is required or not. If a
section is “required”, then Razor will throw an error at runtime if
that section is not implemented within a view template that is based
on the layout file (which can make it easier to track down content
errors). If a section is not required, then its presence within a
view template is optional, and the above RenderSection() code will
render nothing at runtime if it isn’t defined.
I'm using CKEditor for the first time and trying to do something that I thought would be very simple to do but so far I've had no success.
Essentially I want to place the editor.js, config.js and styles.js in a scripts folder but want the "Skins" folder that contains the css and images to appear within a separate "Styles" folder.
The application consists of a simple view that displays the editor on load.
The code to display the editor is a follows:
angular.element(document).ready(function () {
CKEDITOR.config.contentsCss = '/Styles/CKEditor/';
CKEDITOR.replace('editor');
});
The HTML within my view is as follows:
#section scripts
{
<script src="~/Scripts/ckeditor.js" type="text/javascript"></script>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/Main.js" type="text/javascript"></script>
}
<h2>Index</h2>
<textarea id="editor" name="editor"></textarea>
This is an MVC application and the scripts are rendered at the end of the body within the layout view.
The editor will not display in any browser. As I understand it setting the contentsCss property should do the trick.
If I place the skins beneath my script folder it works fine. I can see in the generated source that it is adding a link to the header pointing to /Scripts/Skins/moono..., but I want it to add a reference to /Styles/Skins/moono...
Is what I am trying to do feasable and if so what am I missing here? I was expecting this to be simple.
As a work around I could just add some routing rules that redirects the relevant request to a different location, but I'd rather get to the bottom of the issue before I do this.
Further information:
My application is an ASP.net 4.5/MVC 4 app.
I'm referencing angular because I'll be using that once I've sorted this issue. I have tried removing all references to angular but the problem still persists.
I've tried setting the contentsCss property in the following ways:
Directly using CKEDITOR.config.contentsCss
Within the config.js file. The sample assigns an anonymous function to CKEDITOR.editorConfig and in there you can manipulate congif entries.
Passing a config parameter when calling the "replace" method on the CKEditor object.
I've tried manipulating the contentsCss property both before and after the call to replace.
I'm using the latest version of CKEditor (4.2)
Thanks to #Richard Deeming, I've found the answer.
I'm using the default moono style, so I needed to set the CKEDITOR.config.skin property as follows:
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/'
My final code now looks like this:
angular.element(document).ready(function () {
CKEDITOR.config.skin = 'moono,/Styles/CKEditor/Skins/moono/';
CKEDITOR.replace('editor');
});
You have to set the url to the actual folder containing the skin itself (I thought CKEditor might append skins/mooono itself but it doesn't).
I also found that you must include the final '/' from the URL.
Looking at the documentation, you need to specify the path as part of the skin name:
CKEDITOR.skinName = 'CKeditor,/Styles/CKeditor/';
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");
A simple question (I hope):
We have a set structure within our projects for Assets, that being /Assets/img/, /Assets/css/ and /Assets/js/
I've been reading Brad Wilson's excellent article on Unobtrusive AJAX, in which he mentions the files required, FTA:
In addition to setting the flag, you will also need to include two script files: jQuery (~/Scripts/jquery-1.4.1.js) and the MVC plugin for unobtrusive Ajax with jQuery (~/Scripts/jquery.unobtrusive-ajax.js).
Is anyone aware of a way of informing MVC to look in a folder other than /Scripts/ for these files - I don't want to add a whole folder in the root of the project just for these 2 files.
UPDATE
Oh dear, end of the day brain-rot obviously. Sorry all!
Many thanks
In your view, you can use whatever path you want to set up for your scripts:
<script src="#Url.Content("~/Scripts/jquery-1.4.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
I have mine pointed to the Scripts folder as that is what was set up by default, but you can change that to your specific path.
the way that I have seen it done is to create an extension method on the HtmlHelper class for including javascript.
public static string Script(this HtmlHelper helper, string filename)
{
if(!filename.EndsWith(".js")) filename += ".js";
var path = string.Format("<script src='/Assets/js/{0}' type="text/javascript"></script>", filename);
return path;
}
then in your master page you can add this block to the header
<%= Html.Script("jquery-1.4.1") %>
<%= Html.Script("jquery.unobtrusive-ajax.min") %>