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
– Dismissile, Commented Nov 19, 2013 at 20:36
Can you be more specific=) Can you provide a couple steps list, please — Bryuk
– Bryuk, Commented Nov 19, 2013 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
– Dismissile, Commented Nov 19, 2013 at 20:52

Pradeep Singh · Accepted Answer · 2019-05-06 09:43:57Z

118

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

edited May 6, 2019 at 9:43

Pradeep Singh

4705 silver badges13 bronze badges

answered Nov 19, 2013 at 21:00

Simon C

9,4983 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Void Over a year ago

If you want the entire theme then you only need to reference jquery.ui.all.css

Luminous Over a year ago

There's an issue with only including jquery.ui.all.css. See hear to read about it

ProfK Over a year ago

@Luminous all.css seems to be working OK in a project I've just created.

Ken Palmer Over a year ago

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

Samsquanch · Accepted Answer · 2014-10-09 14:09:49Z

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

`

fubo · Accepted Answer · 2017-08-25 13:41:09Z

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, 2017 at 13:41

fubo

46.2k20 gold badges109 silver badges139 bronze badges

answered Feb 3, 2017 at 10:40

benscabbia

18.2k13 gold badges54 silver badges62 bronze badges

2 Comments

Rinktacular Over a year ago

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.

benscabbia Over a year ago

@Rinktacular You're welcome! We've all been there :)

Community · Accepted Answer · 2020-06-20 09:12:55Z

5

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

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 3, 2017 at 2:40

user2662006

2,30424 silver badges16 bronze badges

Comments

Zenyuk · Accepted Answer · 2021-01-23 10:27:07Z

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

Collectives™ on Stack Overflow

How to add jQueryUI library in MVC 5 project?

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related