Note: If you are following along at home you may have noticed that the number of the series posts has changed. I have taken some *poetic license* and decided that the previous post introducing Kendo UI for ASP.NET MVC was actually part part 3 of the original series on Kendo UI in ASP.NET MVC as well as part 1 of a new series on Kendo UI for ASP.NET MVC. Clear as mud, right?
To stay in line, and catch up, with the pre-Kendo UI for ASP.NET MVC series this post is going to show you how to implement the Kendo UI AutoComplete control using the HtmlHelper extension. In case you didn’t catch the original post on implementing the AutoComplete using Kendo UI (core/non-mvc) in ASP.NET MVC, the Kendo UI AutoComplete control is a text box that has an associated list of items that when text is entered into it a suggestion list is displayed allowing the user to select an item.
To get started follow steps 1 - 6 in the previous post to prep a new solution.
Next I created a server side model: Manufacturer.cs
namespace Part2_AutoComplete.Web.Models
{
public class Manufacturer
public int Id { get; set; }
public string Name { get; set; }
}
As you can see the view the model is a very simple class that contains only an Id and a Name field.
After that I created my view: Index.cshtml
@using Kendo.Mvc.UI
@model IEnumerable<Part2_AutoComplete.Web.Models.Manufacturer>
@{
ViewBag.Title = "Kendo UI for ASP.NET MVC: Part 2 - AutoComplete";
<h2>@ViewBag.Title</h2>
@(Html.Kendo().AutoComplete()
.Name("manufacturerAutoComplete")
.DataTextField("Name")
.BindTo(Model)
.Suggest(true)
.Filter(FilterType.StartsWith)
.Placeholder("Manufacturer...")
.DataSource(source => {
source.Read(read =>
read.Action("GetManufacturers", "Home");
}).ServerFiltering(true);
})
)
Lastly we can code our controller: HomeController.cs
namespace Part2_AutoComplete.Web.Controllers {
public class HomeController : Controller {
public ActionResult Index() {
return View(new List<Manufacturer> {new Manufacturer {Id = 1, Name = "Aston Martin"}});
[HttpGet]
public JsonResult GetManufacturers() {
string searchValue = Request.Params["filter[filters][0][value]"];
IList<Manufacturer> manufacturers = BuildManufacturersList().Where(x => x.Name.StartsWith(searchValue, StringComparison.InvariantCultureIgnoreCase)).ToList();
return Json(manufacturers, JsonRequestBehavior.AllowGet);
private IEnumerable<Manufacturer> BuildManufacturersList() {
IList<Manufacturer> manufacturers = new List<Manufacturer>();
manufacturers.Add(new Manufacturer {Id = 1, Name = "Aston Martin"});
manufacturers.Add(new Manufacturer {Id = 2, Name = "Audi"});
manufacturers.Add(new Manufacturer {Id = 3, Name = "Buggati"});
manufacturers.Add(new Manufacturer {Id = 4, Name = "BMW"});
manufacturers.Add(new Manufacturer {Id = 5, Name = "Chevrolet"});
manufacturers.Add(new Manufacturer {Id = 6, Name = "Ferrari"});
manufacturers.Add(new Manufacturer {Id = 7, Name = "Ford"});
manufacturers.Add(new Manufacturer {Id = 8, Name = "Lamborghini"});
manufacturers.Add(new Manufacturer {Id = 9, Name = "Mazda"});
manufacturers.Add(new Manufacturer {Id = 10, Name = "McLaren"});
manufacturers.Add(new Manufacturer {Id = 11, Name = "Mercedes Benz"});
manufacturers.Add(new Manufacturer {Id = 12, Name = "Porsche"});
return manufacturers;
That’s it. Now that we are caught up with the transition to Kendo UI for ASP.NET MVC in the next post we can move on to something fresh and new…and Kendo UI certainly has a lot to offer in that area!
The code is available on GitHub.
Remember Me
a@href@title, strike
Keith Burnell is a Microsoft web MVP and Senior Software Engineer with Skyline Technologies and president of the Fox Valley .Net User Group. Keith has been developing software for over 10 years specializing in large scale ASP.NET and ASP.NET MVC web site development and architecture (more...)
Disclaimer The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.