How to add jQueryUI library in MVC 5 project?
Solution 1
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" />
Solution 2
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"));
`
Solution 3
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>
Solution 4
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
Solution 5
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")
Bryuk
Updated on July 08, 2022Comments
-
Bryuk almost 2 years
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.
-
Bryuk over 10 yearsThanks! That's Perfect!
-
Void almost 10 yearsIf you want the entire theme then you only need to reference jquery.ui.all.css
-
Luminous about 9 yearsThere's an issue with only including jquery.ui.all.css. See hear to read about it
-
ProfK about 9 years@Luminous
all.css
seems to be working OK in a project I've just created. -
Rinktacular about 7 yearsOh 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 about 7 years@Rinktacular You're welcome! We've all been there :)
-
Ken Palmer over 6 yearsGreat 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"));