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

Many developers struggle to work with jQuery UI in an ASP.NET MVC application.

Here are three steps required to start working 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.

Step 2: Bundle the Required Files

Open the BundleConfig.cs file. In this file add two en-tries, one for the jQuery UI scripts and other for jQuery UI CSS.

Add the script entry as follows:

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

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

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

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 auto-complete.css as shown below:

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

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:

@Styles.Render(“~/Content/css”)@Styles.Render(“~/Content/themes/base/css”)@Scripts.Render(“~/bundles/modernizr”)@Scripts.Render(“~/bundles/jquery”)@Scripts.Render(“~/bundles/bootstrap”)@Scripts.Render(“~/bundles/jqueryui”)

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 bun-dles for jQuery UI CSS and Scripts.

You have now completed the three steps necessary to work with jQueryUI in an ASP.NET MVC application.

Working with the Autocomplete Widget

Now let’s look at the autocomplete widget in action. We have created a controller for returning JSON data as follows:

public ActionResult Index() { return View(); } public ActionResult GetMP(string term) { var result = from r in _db.GetMPDetails() where r.Name.ToLower().Contains(term) select r.Name; return Json(result, JsonRequestBehavior.AllowGet); }

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.

<input type=”text” id=”mpvalue” name=”mpvalue” />

<script type=”text/javascript”> $(document).ready(function () {

$(‘#mpvalue’).autocomplete({ source: ‘@Url.Action(“GetMP”)’ });

})</script>

We’ve seen that working with jQuery UI widgets is as simple as following three simple steps:1. Add the jQuery UI reference2. Bundle the required files3. Refer to the bundles

The autocomplete widget is also a helpful tool when working with jQuery UI bundles.

Download the eBook

Using Kendo UI Mobile With RequireJS

Are you thirsty for some scalable, elegant Kendo Mobile architec-ture? We all have been! The reason is because everything is global-ly scoped and seems to work much smoother if you jumble all your JavaScript on a single page. Fear no more though, RequireJS to the rescue!

In this eBook, you’ll learn:

• How breaking the rules can yield some awesome results• Advantages of fusing RequireJS to your Kendo UI architecture• An overview of the framework and file structure of Kendo UI