I already take a look at: '$' is undefined, but it did not solve my problem; that´s why I open another thread.
This is what I did...
I created a new solution using Visual Studio 2012 and added an empty ASP.NET MVC 4 project. I added a controller class, defined a default Index action method and let Resharper create the view for it. The project has the following structure:
root/
Controllers/
SampleController.cs
Models/
Views/
Sample/
Index.cshtml
Shared/
Layout.cshtml
Scripts/
jquery-2.0.1.js
jquery-2-0.1.min.js
jquery-2.0.1-min.map
jQuery has been added via Nuget; so I manually added a BundleConfig.cs file to the App_Start folder and added code to define the jQuery script bundle (RegisterBundles will be called by the global.asax).
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery")
.Include("~/Scripts/jquery-2.0.*"));
}
I also defined a layout page that has the following content...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@this.ViewBag.Title</title>
</head>
<body>
<div>
@this.RenderBody()
</div>
@this.RenderSection("Scripts", required: false)
</body>
</html>
My index view has the following content...
@using System.Web.Optimization
@model dynamic
@{
this.Layout = "~/Views/Shared/Layout.cshtml";
}
@section Scripts
{
@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
$(document).ready(function() {
});
</script>
}
The following markup is rendered to the output stream...
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<div>
</div>
<script src="/root/Scripts/jquery-2.0.1.js"></script>
<script src="/root/Scripts/jquery-2.0.1.min.map"></script>
<script type="text/javascript">
$(document).ready(function() {
});
</script>
</body>
</html>
When I debug the application it gives me the error message '$' is undefined. Instead of hosting the application within my local IIS, I also tried to run it through Visual Studio´s Web Development Server, which gives me another hint: a syntax error (unexpected token ';' within the min.map file). Might be the reason why jQuery is not initialized... but how should I solve this?
The actual problem was related to my local IIS, where the static content feature was not available. This had the effect that requests for java script- and css- files where answered with OK 200, but with zero content length. See: https://serverfault.com/questions/115099/iis-content-length-0-for-css-javascript-and-images for information on how to fix the IIS installation.
The following code works now as expected. The one and only thing that is changed is the script bundle definition...
BundleConfig.cs
namespace MvcApplication1
{
using System.Web.Optimization;
public class BundleConfig
{
public const string BundlesJquery = "~/bundles/jquery";
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle(BundlesJquery)
.Include("~/Scripts/jquery-{version}.js"));
}
}
}
Index.cshtml
@using System.Web.Optimization
@using MvcApplication1
@model dynamic
@{
this.ViewBag.Title = "title";
this.Layout = "~/Views/Shared/Layout.cshtml";
}
@section Scripts
{
@Scripts.Render(BundleConfig.BundlesJquery)
<script type="text/javascript">
$(document).ready(function() {
alert("Hello World.");
})
</script>
}
Layout.cshtml
@using System.Web.Optimization
@using MvcApplication1
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>@this.ViewBag.Title</title>
</head>
<body>
<div>
@this.RenderBody()
</div>
@this.RenderSection("Scripts", false)
</body>
</html>
Why don't you just add the script in the HTML?
RootProject/
Pages/
MyPage.aspx
JS/
jquery-2-0.1.min.js
MyPage.aspx's code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../JS/jquery-2-0.1.min.js"></script>
</head>
<body>
<div>
@this.RenderBody()
</div>
@this.RenderSection("Scripts", required: false)
</body>
</html>
Is better if you add all the scripts to the Master Page.
(Note that you have to up level in folder(up 1 level this time) then find the path to the file)
"Why Source Maps are useful?"
"Well, imagine that you are using compressed versions of your files on your production site, including a compressed version of jQuery. You get a report that an important customer is running into a problem. Then how do you debug it? You could debug it a lot easier if you had the uncompressed source, but using that on your high-traffic production site isn't an option. "
If you render only the version "jquery 2.0", you can call it that to jquery:
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
See this for more information.
With IE 11 and a development / QA server on the local network, it can also be an issue with compatibility view settings.
Click on the tools icon in the top right corner of IE 11 (or hit Alt-X) and click on "Compatibility View Settings".
Make sure that the server name is not in the list of servers to use compatibility view settings with and that the "Display intranet sites in Compatibility View" is unchecked.
