Three steps to use JQuery UI in ASP 5

Many developers struggle to work with the JQuery UI in an ASP. NET MVC application. In this post, I'll show you the three steps required to start working Withjquery UI on an ASP. At the end of the post we'll take a look at working with the AutoComplete widget.
The following three steps would let's 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 do, 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 the entries, one for the jquery UI scripts and the other for jquery UI CSS.
Add the script entry as follows:

12	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 is bundled like this:

12345678910111213

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 is only working with the AutoComplete widget. In this case, you would only bundle the Core.css andautocomplete.css as shown below:

1234	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 has been created, you need to add them to the layout file. That can is done as follows:

123456

@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'll find the jQuery bundle at the end of the layout file. To work with jquery UI widgets, should move the jquery bundle to the top of the file and also include the bundles for JQuery UI CSS and Scripts.
You has now completed the three steps necessary to work with jQueryUI in an ASP. Application.
Use jQueryUI Widgets
Now let's look at the AutoComplete widgets in action. I have created a controller for returning JSON data as follows:

12345678910111213

public actionresult Index()         {           return View();         }Public actionresult getmp(string term ) /c15>         { var result = from R in _db. Getmpdetails()                           where r. Name. Tolower (. Contains (term                           select r. Name;              return Json(result, jsonrequestbehavior. Allowget);         }

We'll now bind the returned JSON from the getmp () action to the AutoComplete widget. On the razor view, you can create a AutoComplete widget like this:

1234567891011

<input type="text" id="Mpvalue" name="Mpvalue" /> <script Type="Text/javascript"> $(document). Ready(function () { $(' #mpvalue '). AutoComplete({ source: ' @Url. Action ("getmp") '         });    })</script>

Make sure the view are 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 are 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 is useful. Happy coding.

Three steps to use JQuery UI in ASP 5