How to add jQueryUI library to MVC 5 project?

Question

I just installed Visual Studio 2013 and started a new MVC 5 project. I am a little new in MVC development and I cannot figure out how to add libraries to my project.

I see some similar parts. For example, on _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 downloaded jQuery UI libraries with .js and css files. My question is: Where and what should I add to the term of use of these libraries everywhere, for example, the default libraries (bootstrap or jquery)? And jQuery UI has 3 folders with content. I added these folders with all the content to my project, I just need to add links.

Answer 1

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

So, to add jQueryUI, you have to do the following:

In your Global.asax.cs file, you should see several registrations:

 BundleConfig.RegisterBundles(BundleTable.Bundles); 

This refers to the BundleConfig class which registers any packets. For jQueryUI you can do the following:

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

This creates a new script package named ~/bundles/jqueryui .

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

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

Then you will 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") 

Remarks:

• In MVC4, jQuery is already configured for a non-empty project. For an empty project, you must add it yourself. Not 100% sure about the new MVC 5.
• You can install jQueryUi from NuGet, but the official package does not add this package.
• You can just make old-fashioned links to your CSS and JS files (for example, <script language="JavaScript" src="~/Scripts/jQuery.ui.1.8.2.js"/>

Answer 2

Now the css package should look like this for version 1.11.1:

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

`

Answer 3

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

 Install-Package jQuery.UI.Combined 

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

You can then refer to this by going to App_Start/BundleConfig.cs and adding:

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

Then you can use it on separate pages or globally in _Layout.cshtml

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

Answer 4

After installing the jQuery user interface using NuGet, add the 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 the following snippets to your _Layout.cshtml as shown below

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

as well as

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

I just want to clarify the situation, I hope this helps. thank