jQuery UI Helpers

I want to tell you about great tool to use jQuery UI on your ASP.NET MVC pages. I’ve found jQuery UI Helpers and in my opinion it’s awsome 🙂 In very easy way you can use them on your websites.

I’ll show you very short example how to use it. So, first of all we have to create new project:

After that we have to import jQueryUI Helpers. We can use nuget to do it:

In next step we have to add configuration to BundleConfig.cs, web.config and _Layout.chtml:

Add to BundleConfig.cs:
[csharp]
bundles.Add(new ScriptBundle(“~/bundles/jqueryui”).Include(
“~/Scripts/jquery-ui-{version}.js”,
“~/Scripts/jquery-ui.unobtrusive-{version}.js”));

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.menu.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”)
[/csharp]
Add to web.config:
[xml]
…

[/xml]
And we have to add links to scripts and styles in out _Layout.chtml (or any other file where we want to use jQuery UI):

Now we can use jQuery UI (Index.cshtml):

And here is effect:

I think that you see how easy it is 😉 I hope that you read documentation and use it on your more complex websites.