# Monday, 25 June 2012

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.

Sunday, 02 July 2017 10:26:01 (Central Daylight Time, UTC-05:00)
Hi there very nice website!! Guy .. Beautiful .. Amazing ..
I'll bookmark your web site and take the feeds also? I am
glad to seek out so many helpful information right here within the
submit, we'd like work out extra strategies on this
regard, thanks for sharing. . . . . .
Friday, 20 July 2018 16:10:00 (Central Daylight Time, UTC-05:00)
Hi. I see that you don't update your website too often.
I know that writing posts is time consuming and boring. But did you know that there is a tool that allows
you to create new posts using existing content (from
article directories or other blogs from your niche)?
And it does it very well. The new articles are unique and pass the copyscape test.
You should try miftolo's tools
Name
E-mail
(will show your gravatar icon)
Home page

Comment (Some html is allowed: a@href@title, strike) where the @ means "attribute." For example, you can use <a href="" title=""> or <blockquote cite="Scott">.  

Enter the code shown (prevents robots):

Live Comment Preview