[ASP.NET MVC] Implementando el helper autocomplete de Kendo UI

Posted on Actualizado enn


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<Country> countries = new List<Country>(){
	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";
}

<div class="jumbotron">
    <h1>Kendo UI - Autocomplete</h1>
    @(Html.Kendo().AutoComplete()
        .Name("country")
        .Placeholder("Choose a country...")
        .DataTextField("Name")
        .Filter("contains")
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetCountries", "Home");
            });
        })
    )
</div>

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!

5 comentarios sobre “[ASP.NET MVC] Implementando el helper autocomplete de Kendo UI

    jeffersonaguilar escribió:
    10/24/2013 en 09:27

    Hola Julito, esta muy interesante esto, yo lo hacia con jquery y ajax y otro montón de tecnologías que solían hacer las cosas muy complicadas. Saludos

      Julio Avellaneda respondido:
      10/24/2013 en 10:11

      Si, usar algo cliente con jQuery es muy comun, la ventaja de Kendo UI es que ofrece una excelente integración con ASP.NET MVC por medio de los helpers.

      Saludos

    JOSE LUIS escribió:
    10/26/2013 en 18:22

    excelente, se muy interesante, disculpa donde puedo encontrar un buen curso de asp.net 2012, tutorial completo, libro….., gracias por la atención prestada.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s