title: '$' is undefined. How to use jQuery 2.0.1 in empty ASP.NET MVC 4 project?
body: <p>I already take a look at: <a href="https://stackoverflow.com/questions/12715325/is-undefined">&#39;$&#39; is undefined</a>, but it did not solve my problem; that´s why I open another thread.</p>
  
  <p>This is what I did...</p>
  
  <p>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:</p>
  
  <pre><code>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
  </code></pre>
  
  <p>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).</p>
  
  <pre><code>public static void RegisterBundles(BundleCollection bundles)
  {
      bundles.Add(new ScriptBundle("~/bundles/jquery")
          .Include("~/Scripts/jquery-2.0.*"));
  
  }
  </code></pre>
  
  <p>I also defined a layout page that has the following content...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
          &lt;title&gt;@this.ViewBag.Title&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              @this.RenderBody()
          &lt;/div&gt;
          @this.RenderSection("Scripts", required: false)
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My index view has the following content...</p>
  
  <pre><code>@using System.Web.Optimization
  @model dynamic
  
  @{
      this.Layout = "~/Views/Shared/Layout.cshtml";
  }
  
  @section Scripts
  {
      @Scripts.Render("~/bundles/jquery")
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
  
          });
      &lt;/script&gt;
  }
  </code></pre>
  
  <p>The following markup is rendered to the output stream...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="viewport" content="width=device-width" /&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
  
          &lt;/div&gt;
  
      &lt;script src="/root/Scripts/jquery-2.0.1.js"&gt;&lt;/script&gt;
      &lt;script src="/root/Scripts/jquery-2.0.1.min.map"&gt;&lt;/script&gt;
  
      &lt;script type="text/javascript"&gt;
          $(document).ready(function() {
  
          });
      &lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>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?</p>