How to add jQueryUI library in MVC 5 project?

I've just installed Visual Studio 2013 and started new MVC 5 project. I'm kind of new in MVC developing and I can't figure out how to add libraries in my project.

I see some similar parts. For example, on the _Layout.cshtml I have this code:

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")

Then in the packages.config file:

<packages>
  <package id="Antlr" version="3.4.1.9004" targetFramework="net45" />
  <package id="bootstrap" version="3.0.0" targetFramework="net45" />
  <package id="EntityFramework" version="6.0.0" targetFramework="net45" />
  <package id="jQuery" version="1.10.2" targetFramework="net45" />
  <package id="jQuery.Validation" version="1.11.1" targetFramework="net45" />
</packages>

Then as far as I know something happens on Global.asax

So, I've downloaded jQuery UI libraries with .js and css files. My question is: Where and what should I add in term of use this libraries everywhere like default libraries (bootstrap or jquery)? And jQuery UI has 3 folders with content. I added this folders with all content to my project, I just need to add references.

The code you see rendering css and scripts on your _Layout.cshtml page (i.e. @Scripts.Render("~/bundles/modernizr")) is called bundling. Check out some info here: http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

So, to add jQueryUI you would do the following:

In your Global.asax.cs file you should see a number of registrations:

BundleConfig.RegisterBundles(BundleTable.Bundles);

This goes to the BundleConfig class which registers any bundles. For jQueryUI you could do the following:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

This is creating a new script bundle called ~/bundles/jqueryui.

Then it can be added to your layout page by doing this:

@Scripts.Render("~/bundles/jqueryui")

Then you'll do the same for css:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
              "~/Content/themes/base/jquery.ui.core.css",
              "~/Content/themes/base/jquery.ui.resizable.css",
              "~/Content/themes/base/jquery.ui.selectable.css",
              "~/Content/themes/base/jquery.ui.accordion.css",
              "~/Content/themes/base/jquery.ui.autocomplete.css",
              "~/Content/themes/base/jquery.ui.button.css",
              "~/Content/themes/base/jquery.ui.dialog.css",
              "~/Content/themes/base/jquery.ui.slider.css",
              "~/Content/themes/base/jquery.ui.tabs.css",
              "~/Content/themes/base/jquery.ui.datepicker.css",
              "~/Content/themes/base/jquery.ui.progressbar.css",
              "~/Content/themes/base/jquery.ui.theme.css"));

and add it with

@Styles.Render("~/Content/themes/base/css")

Note:

• In MVC4, a non-empty project already has jQuery set up. For an empty project you would have to add it yourself. Not 100% sure about the new MVC 5.
• You can install jQueryUi from NuGet, but the official package doesn't add this bundling stuff.
• You could just do the old fashioned referencing of you css and js files (e.g. <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js" />

The css bundle should look as follows for version 1.11.1 now:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/accordion.css",
        "~/Content/themes/base/all.css",
        "~/Content/themes/base/autocomplete.css",
        "~/Content/themes/base/base.css",
        "~/Content/themes/base/button.css",
        "~/Content/themes/base/core.css",
        "~/Content/themes/base/datepicker.css",
        "~/Content/themes/base/dialog.css",
        "~/Content/themes/base/draggable.css",
        "~/Content/themes/base/menu.css",
        "~/Content/themes/base/progressbar.css",
        "~/Content/themes/base/resizable.css",
        "~/Content/themes/base/selectable.css",
        "~/Content/themes/base/selectmenu.css",
        "~/Content/themes/base/slider.css",
        "~/Content/themes/base/sortable.css",
        "~/Content/themes/base/spinner.css",
        "~/Content/themes/base/tabs.css",
        "~/Content/themes/base/theme.css",
        "~/Content/themes/base/tooltip.css"));

`

To install jQueryUI + the latest version of jQuery you can use NuGet:

Install-Package jQuery.UI.Combined

This will update your existing jQuery libraries to the latest version.

You can then reference this by going in App_Start/BundleConfig.cs and add:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
            "~/Scripts/jquery-ui-{version}.js"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
            "~/Content/themes/base/all.css"));

You can then use it on individual pages or globally in _Layout.cshtml

@Styles.Render("~/Content/themes/base/css") // Add to <head> tags
@Scripts.Render("~/bundles/jqueryui") // Add above </body>

After installing JQuery ui using the NuGet add following snippets to BundleConfig.cs as shown below

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-{version}.js"));

also

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
        "~/Content/themes/base/jquery.ui.core.css",
        "~/Content/themes/base/jquery.ui.autocomplete.css",
        "~/Content/themes/base/jquery.ui.theme.css"));

Now add following snippets to your _Layout.cshtml as shown below

 @Styles.Render("~/Content/themes/base/css")

and

@Scripts.Render("~/bundles/jqueryui")

I just want to make it little bit clear, hope this will help. Thanks

As specified in the accepted answer by Simon C, indeed it is necessary to bundle jQuery UI js:

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
  "~/Scripts/jquery-ui-{version}.js"));

and the use by calling:

@Scripts.Render("~/bundles/jqueryui")

at the same time as of 23 Jan 2021 the css files does not include jquery.ui.* prefix.

It is also not necessary to include these individual files as it specified in the header of jquery-ui.css:

• Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css

So, one can just write this to bundle jquery-ui.css:

bundles.Add(new StyleBundle("~/Content/themes/base/css")
    .Include("~/Content/themes/base/jquery-ui.css");

and use it in pages by means of:

@Styles.Render("~/Content/themes/base/css")