How to add jQueryUI library in MVC 5 project?

by

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="https://stackoverflow.com/questions/20081328/~/Scripts/jQuery.ui.1.8.2.js" />

More Related Contents:

  1. Ajax.BeginForm in MVC to upload files
  2. The field date must be a date in mvc in chrome [duplicate]
  3. Simple ASP.NET MVC CRUD views opening/closing in JavaScript UI dialog
  4. Jquery dialog partial view server side validation on Save button click
  5. How to simplify my statefull interlaced modal dialogs in ASP.NET MVC
  6. File upload using MVC 4 with Ajax
  7. Usage of the ASP.NET MVC4 jquery/javascript bundles
  8. Jquery post and unobtrusive ajax validation not working mvc 4
  9. Dialog box runs for 1 sec and disappears?
  10. Downloading jQuery UI CSS from Google’s CDN
  11. The specified value does not conform to the required format yyyy-MM-dd
  12. Mvc Jquery Ajax Post returns null
  13. jQuery ui datepicker with Angularjs
  14. jquery UI Sortable with table and tr width
  15. CustomAttribute reflects html attribute MVC5
  16. How to get the position of a draggable object
  17. Setting min date in jQuery datepicker
  18. Restrict jQuery draggable items from overlapping/colliding with sibling elements
  19. Return Partial View and JSON from ASP.NET MVC Action
  20. jquery with ASP.NET MVC – calling ajax enabled web service
  21. How can I make a jQuery UI ‘draggable()’ div draggable for touchscreen?
  22. attaching jquery validation to replacement element
  23. SVG draggable using JQuery and Jquery-svg
  24. How to detect if a browser is Chrome using jQuery?
  25. Keeping a related ASP.NET application’s session alive from another ASP.NET application
  26. jQuery UI: Datepicker set year range dropdown to 100 years
  27. jQuery UI Autocomplete – menu disappears on hover
  28. changing location.hash with jquery ui tabs
  29. jQuery document ready function
  30. jQuery UI – Droppable only accept one draggable

Leave a Comment