December 2, 2014 10:25 by
Peter
Several developers struggle to work along with jQuery UI inside an ASP.NET MVC 5 application. During this publish, I will be able to show you 3 actions needed to begin dealing with jQuery UI inside an ASP.NET MVC application. In the end from the publish we'll check out working with the autocomplete widget. On the listed 3 steps that could allow you perform along with jQuery UI inside an ASP.NET MVC Apps:
1. Add the jQuery UI Reference
Add the jQuery UI reference straight into the project by using the NuGet manager. Once this is done, you ought to discover the reference additional inside the Content folder and also the Scripts folder.
2. Bundle the needed files
Open up the BundleConfig.cs file. In this file add 2 entries, one to the jQuery UI scripts along with 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 those the widgets could be bundled such as 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 the example, let’s say you're solely dealing with the autocomplete widget. During this case, you'd just bundle the core. css and autocomplete. css as shown beneath:
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"));
3. Refer towards the Bundles
Once the bundles for jQuery UI happen to be produced, you have to add them to be able to the layout file. That may 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")
Obviously you will see the jQuery bundle at the end from the layout file. To work along with jQuery UI widgets, you ought to transfer the jQuery bundle to the top of the file and likewise include the bundles for jQuery UI CSS and Scripts.
You've currently completed the 3 steps needed to work along with jQueryUI inside an ASP. NET MVC application.
Use jQueryUI Widgets
Now let’s look into the autocomplete widget in action. I've developed 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'll currently bind the returned JSON coming from the GetMP () motion towards the autocomplete widget. Upon the razor view, you are able to create an autocomplete widget such as this:
<input type="text" id="mpvalue" name="mpvalue" />
<script type="text/javascript">
$(document).ready(function () {
$('#mpvalue').autocomplete({
source: '@Url.Action("GetMP")'
});
})
</script>
Be certain the view is using the layout file in which you added the reference from the bundles.