I have a minimal ASP.NET MVC 5 app that was generated via Scaffolding. When I look at the generated _Layout.cshtml file I see a <script> tag toward the bottom of the page that loads jQuery but nowhere in _Layout.cshtm do I see a reference to a jQuery Validation module in a <script> tag.
If I go into Chrome Developer Tools, under the "Sources" tab, I can see that indeed jQuery.validate and jquery.validate.unobtrisuve are loaded! But how can they be loaded if they were not referenced by a <script> tag?
If you look in App_Start BundleConfig.cs you should see reference to:
bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));
which defines the jQuery validation script bundle. Certain scaffold pages (for example Login) have:
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
referenced at the bottom of the View.
This is picked up by #RenderSection("scripts", required: false) at the bottom of _Layout (which renders the script if it is defined).
Related
I am trying to bundle a jquery file on a view which doesn't have layout as below
<html>
<head>
#section Scripts{
<script src="#System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/bundles/jquery")">
</script>
}
<script type="text/javascript">
$(document).ready(function () {
The bundle config for the above is already written and is as below
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
Whenever I call the document.ready function I see a $ not defined exception which means that the scripts haven't loaded.
The same bundling is working perfectly when placed in a layout.cshtml under the same shared folder. Am I missing something?
This is the problem line:
#section Scripts{
If you are not using a layout page, this section is not rendering (I'm surprised it wouldn't be throwing an error). Sections are only used for layout pages. If you want a page to work, get rid of the section and then put the jquery bundle script directly in the page.
You may also want to consider: Why scripts at the end of body tag
Use like this:
#Scripts.Render("~/bundles/jquery")
I got the Kendo UI intellisense working when I write script on _Layout.cshtml page, but when I want to use it from page utilizing this layout, then the intellisense is gone.
When I add the script kendo.all.min.js at the top of the page utilizing layout, intellisense is back. Such plumbing does not seem right + messes up the console debugging (says that this component was already loaded).
I'm talking about the Kendo UI intellisense (not the MVC helpers, which works ok). I added the below to _Layout.cshtml and it is normally registered in _ViewStart.cshtml.
<head>
#Styles.Render("~/Content/kendo/css")
<script src="~/Scripts/kendo/jquery.min.js"></script>
<script src="~/Scripts/kendo/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/kendo/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
</head>
I added a _references.js file containing:
/// <reference path="kendo/kendo.all.min.js" />
based on this article:
http://madskristensen.net/post/the-story-behind-_referencesjs
It did the job.
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")
}
What is the difference of both statements concerning the section Scripts and script-tag? NOT the content inside the scripts that does not interest me.
#section Scripts {
#Scripts.Render(Bundles.Scripts.Validation)
}
vs
<script src="#Url.Content("~/Scripts/Validation.js")"></script>
The first one renders the <script> tag where you have #RenderSection("Scripts") in your layout.
This is preferred when you don't have to include a script for all pages.
Also #Scripts.Render will minify and bundle your scripts. Usually this is used at the end of body tag so that Views can get the scripts after the DOM is rendered.
The second one remains where you use the <script> tag.
If you use it in Layout, the script is included in all pages (e.g. jQuery).
Let's take an example
<!-- HTML in Layout, before Scrip -->
#RenderBody()
<script src="#Url.Content("~/Scripts/jquery.min.js")"></script>
#RenderSection("Scripts")
<!-- HTML after Script -->
Here, if the script make use of jQuery you want to included with section because jQuery is included before section.
If you include with <script> in your view you will give an error, that jQuery is missing, because is included before jQuery.
You might want to define sections in you _layout.cshtml file for specific content. It is generally believed that styles belong to <head> and scripts belong before </body>. Your mileage may vary.
If you just output <script> it will go with all the content and not where you might want it to be.
And if script inside view depends on something (jquery) and in your layout you have
#renderBody()
<script src=jquery.js></script>
#renderSection("scripts",required:false)
then you are screwed (-:
I have a very simple MVC project, and in my _Layout.cshtml I have some js includes like so:
<script src="~/scripts/jquery-2.0.3.min.js"></script>
<script src="~/scripts/easing.js"></script>
<script src="~/scripts/bootstrap.js"></script>
However, when it renders, it renders on the page like (note the tilde on the first one):
<script src="~/scripts/jquery-2.0.3.min.js"></script>
<script src="/scripts/easing.js"></script>
<script src="/scripts/bootstrap.js"></script>
I can't seem to get it to render properly, and it doesn't matter which script tag is first, that's the one it adds/keeps the tilde on. I've resorted to including the jquery script twice, the first one will have a tilde but the second one will get included, but I don't like that solution at all.
I'm working with VS 2012, it's a .NET 4.5 MVC application. From my searches it seems this was a known issue for Razor v1, but the solutions they provide don't seem to apply here.
You should be using #Url.Content() helper (We're not in ASP.NET any more, toto).
<script src="#Url.Content("~/Scripts/jquery-2.0.3.min.js")"></script>
<!-- etc. -->
Another option is to use the Microsoft.AspNet.Web.Optimization package and create bundles:
**BundleConfig.cs
public void RegisterBundles(BundleCollection bundles)
{
// ...
bundles.Add(new ScriptBundle("~/js/site").Include(
"~/Scripts/jquery-2.0.3.min.js",
"~/Scripts/easing.js",
"~/Scripts/bootstrap.js"
));
// ...
}
Then in your page use:
#Scripts.Render("~/js/site")
Either stick the references in a bundle and use #Scripts.Render("~/bundlename") or use
<script src="#Url.Content("~/scripts/jquery-2.0.3.min.js")"></script>