Three steps to use jQuery UI in ASP.NET MVC 5

By September 29, 2014MVC

Many developers struggle to work with jQuery UI in an ASP.NET MVC application. In this post, I will show you three steps required to start working with jQuery UI in an ASP.NET MVC application. At the end of the post we will take a look at working with the autocomplete widget.
The following three steps will let you work with jQuery UI in an ASP.NET MVC application:
Step 1: Add the jQuery UI Reference
Add the jQuery UI reference into the project using the NuGet manager. Once this is done, you should find the reference added in the Content folder and the Scripts folder.

jqueryui1

Step 2: Bundle the required files
Open the BundleConfig.cs file. In this file add two entries, one for the jQuery UI scripts and other for jQuery UI CSS.
Add the script entry as follows:

Next add the CSS files for jQueryUI widgets.  CSS for all the widgets can be bundled like this:

For the purpose of this example, let’s say you are only working with the autocomplete widget. In this case, you would only bundle the core.css and autocomplete.css as shown below:

Step 3: Refer to the Bundles
Once the bundles for jQuery UI have been created, you need to add them to the layout file. That can be done as follows:

By default you will find the jQuery bundle at the end of the layout file. To work with jQuery UI widgets, you should move the jQuery bundle to the top of the file and also include the bundles for jQuery UI CSS and Scripts.
You have now completed the three steps necessary to work with jQueryUI in an ASP.NET MVC application.
Use jQueryUI Widgets
Now let’s look at the autocomplete widget in action.  I have created a controller for returning JSON data as follows:

We will now bind the returned JSON from the GetMP() action to the autocomplete widget. On the razor view, you can create an autocomplete widget like this:

Make sure the view is using the layout file in which you added the reference of the bundles.
Summary
We’ve seen in this post that working with jQuery UI widgets is as simple as following three simple steps:

  1. Add the  jQuery UI reference
  2. Bundle the required files
  3. Refer to the bundles

The autocomplete widget is also a helpful tool when working with jQuery UI bundles.
I hope this post was useful. Happy coding.


Also published on Medium.

The following two tabs change content below.
  • steven.short

    You sir, are my hero. Thank you so much for making this dummy proof 🙂

  • Trupti Dalia

    Thanks a lot. I was facing error of Jquery-ui & needed to update it. Your article helped me update it & also add it in bundle. Now my app is working fine & smoothly.

  • Dubby

    Good example buddy!!!

  • Saldatoccio

    Good example, but when I start typing something in the autocomplete field GetMP is invoked with term = null! Why the content of the field is not passed to GetMP?

    • Misterx25

      +1. Hours that I’m pulling my hair trying to solve the exact same problem. Did you solve it ? Anyone ?

  • Saldatoccio

    Fixed, I had to rename the controller’s parameter!

    • Hifni Nazeer

      Could you please post here on how you went about solving the issue

      • Lazar Pantovic

        Just make the parameter in controller ‘term’

  • Hifni Nazeer

    Getting an Error! JavaScript runtime error: ‘$’ is undefined

  • Nice post ! Thank you.

  • Spratz norris

    Hello! thanks for the post, but i don’t know where i must put both actionresult methods. If i put them in the layout or in a page (.cshtml, i’m using razor V2), althought i use “@{}” around, it shows erros like “}” expected, etc
    Can you help me?
    You can mail if you want
    Thanks you very much!

  • Mark Kenyon

    My MVC project uses bootstrap.3.3.4. I added the code just as you recommend, but get the message: Uncaught TypeError: $(…).dialog is not a function
    When I added the NuGet jquery-ui I got version 1.11.4, and ~Scriptsjquery-1.6.4.js, but the app already had ~ContentJSjquery.1.11.2.js. Which one should I use?

    • Styles goes in the header, and scripts goes at the end of the file just before (@RenderSection)

      If you guys do this on top then you’ll be loading twice the objects.

      You can use the package manager console:
      and just add this:
      Install-package jquery.ui.combined

      And if you’re going to use ajax.beginform:
      Install-Package jQuery.Ajax.Unobtrusive

  • Pingback: jquery - Auto-Complete input field in asp.net MVC5 - CSS PHP()

  • Pingback: How can I get a jQuery UI Dialog to display as a Dialog (instead of being pinned to the bottom of the page)? « TechAnswer()

  • Osama Ali El-Sayed

    can any one post a working example ?? it drive me crazy for 2 day

  • Rahul Kanojia

    Thanks for this valuable post…

  • Pingback: Three steps to use jQuery UI in ASP.NET MVC 5 | Sai()