MVC 6 reference Jquery in empty template

Question

I've created a new MVC6 empty project. Added bower.json and jquery dependency

bower.json

...
  "dependencies": {
    "jquery": "~2.1.4"

which it did correctly bring in to

wwwroot\lib\jquery

Then I referenced it on my _layout.cshtml page

<script src="~/lib/jquery/dist/jquery.js"></script>

However Intellisense has the path underlined. When opened in a browser > view source and click on path it shows an empty page as if the script was not found.

Also, when I navigate to: http://localhost:57405/lib/jquery/dist/jquery.js, it's not finding it

What am I doing wrong? Do I need app.UseStaticFiles(); in Startup.cs? Thanks

EDIT:

When I hover over <script> tag I get "Path Not Found" tooltip

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Your code should work fine as long as you have the jQuery.js file in that location.

Also you need to make sure that you called the UseStaticFiles() method inside the Configure() method(inside Startup.cs)

public void Configure(IApplicationBuilder app, IHostingEnvironment env,  
                                                             ILoggerFactory loggerFactory)
{
     //Other configuration goes here
     app.UseStaticFiles();  // This enables static file serving from the app.
     app.UseMvc(routes =>
        {
            routes.MapRoute(
                name: "default",
                template: "{controller=Home}/{action=Index}/{id?}");
        });
}

UseStaticFiles() extension method enables static file serving including js files,css files etc..

You may consider using the environment tag helpers to include script to your page for different configurations/enviornments.

It is not necessary that you should use the environment tag helper. You can directly put your script tags in the layout file. But the environment helpers allows us to conditionally render scripts based on the environment. (Minified-Bundled version vs All Un minified version)

<environment names="Development">
    <script src="~/lib/jquery/dist/jquery.js"></script>       
</environment>
<environment names="Staging,Production">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"
            asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
            asp-fallback-test="window.jQuery">
    </script>
</environment>

If you want to include your custom scripts this way, take a look at this answer

Although this is something useful, it doesn't fix the problem of referencing static content files. For some reason any files references in wwwroot\lib\ are not accessible from the view. — ShaneKm, Dec 23 '15 at 16:35
Do I need anything in Startup.cs to tell it to serve files from wwwroot\lib? — ShaneKm, Dec 23 '15 at 16:39
Yes. You need to call the `UseStaticFiles()` method. See my updated answer. — Shyju, Dec 23 '15 at 16:49
Okay, that was it. I needed to Have app.UseStaticFiles(); in my Startup.cs before app.UseMvc() — ShaneKm, Dec 23 '15 at 16:51

MVC 6 reference Jquery in empty template

1 Answers1