How to add jQueryUI library in MVC 5 project?

Question

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.

You should look into Nuget. This is basically the preferred way of adding dependencies to .net projects now. — Dismissile, Nov 19 '13 at 20:36
Can you be more specific=) Can you provide a couple steps list, please — Bryuk, Nov 19 '13 at 20:47
Bryuk - Right click your References in your project and select "Manage Nuget Packages". From there you can search for packages, update packages, etc. When you create a new MVC5 application, it automatically installs a bunch of Nuget packages for you: jQuery, Bootstrap, etc. Find out more at www.nuget.org — Dismissile, Nov 19 '13 at 20:52

score 118 · Accepted Answer · edited May 06 '19 at 09:43

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" />

If you want the entire theme then you only need to reference jquery.ui.all.css — Void, Jun 04 '14 at 07:55
There's an issue with only including jquery.ui.all.css. [See hear to read about it](http://stackoverflow.com/questions/11970293/mvc4-bundling-css-failed-unexpected-token-found-import) — Luminous, Apr 29 '15 at 14:20
@Luminous `all.css` seems to be working OK in a project I've just created. — ProfK, May 01 '15 at 13:47
Great instructions @simon-c. The CSS file naming conventions are different in jQuery UI version 1.12. Devs can remove the "jquery.ui." prefix after "base/" in those paths. This worked for me: bundles.Add(new StyleBundle("~/Content/themes/base/css").Include("~/Content/themes/base/jquery-ui.min.css")); — Ken Palmer, Jan 10 '18 at 20:53

score 33 · Answer 2 · edited Oct 09 '14 at 14:09

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"));

`

score 23 · Answer 3 · edited Aug 25 '17 at 13:41

23

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>

edited Aug 25 '17 at 13:41

fubo

44,811
17
103
137

answered Feb 03 '17 at 10:40

benscabbia

17,592
13
51
62

2

Oh my god. I have been stuck for an entire day because I've been adding the script to the head and not the body... Thank you. – Rinktacular Feb 23 '17 at 18:11
1

@Rinktacular You're welcome! We've all been there :) – benscabbia Feb 28 '17 at 06:27

score 5 · Answer 4 · edited Jun 20 '20 at 09:12

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

score 1 · Answer 5 · answered Jan 23 '21 at 10:27

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")

How to add jQueryUI library in MVC 5 project?

5 Answers5

Linked