Hola a todos, una de las características que más me gustan de Kendo UI es que tenemos la posibilidad de utilizar una serie de helpers para enriquecer la interfaz de usuario (las vistas), y en esta oportunidad quiero mostrar como es de sencillo implementar el helper autocomplete.

Como primer paso, vamos a crear una sencilla clase que actuará como nuestro modelo:

public class Country { public int CountryId { get; set; } public string Name { get; set; } }

Luego, en el controlador definimos algunos datos:

private readonly List countries = new List(){ new Country { CountryId = 1, Name = "Colombia"}, new Country { CountryId = 2, Name = "Argentina"}, new Country { CountryId = 3, Name = "Brazil"}, new Country { CountryId = 4, Name = "Bolivia"}, new Country { CountryId = 5, Name = "España"}, new Country { CountryId = 6, Name = "Chile"}, new Country { CountryId = 7, Name = "Francia"}, new Country { CountryId = 8, Name = "Alemania"}, new Country { CountryId = 9, Name = "Italia"}, new Country { CountryId = 10, Name = "China"} };

Finalmente creamos una función que retorne los resultados en formato JSON:

public JsonResult GetCountries() { return Json(countries.ToList(), JsonRequestBehavior.AllowGet); }

Ahora, en la vista en la cual vamos a implementar el helper:

@using Kendo.Mvc.UI; @{ ViewBag.Title = "Autocomplete"; }

Kendo UI - Autocomplete

@(Html.Kendo().AutoComplete() .Name("country") .Placeholder("Choose a country...") .DataTextField("Name") .Filter("contains") .DataSource(source => { source.Read(read => { read.Action("GetCountries", "Home"); }); }) )

Revisando el código de la vista se tienen varias puntos importantes:

  • Agregar un using al namespace Kendo.Mvc.UI
  • Definir el helper con Html.Kendo.Autocomplete
  • La propiedad que se encarga de realizar la llamada a la función GetCountries es DataSource, allí utilizando una expresión lambda se define la acción a llamar y como segundo parámetro el controlador en el cual se encuentra la acción: read.Action(“GetCountries”, “Home”);

Y ahora una pequeña imagen de como se ve el autocomplete ya funcionando:

KendoUI Autocomplete

Saludos!

Código en GitHub!