Integrando YUI con ASP.NET MVC

Si han estado trabajando o al menos le han dado una mirada al ASP.NET MVC framework, sabrán que a diferencia del ASP.NET tradicional, no se encuentran disponibles al menos de momento controles como por ejemplo el GridView, este vacío lo podemos llenar con una gran cantidad de controles de terceros que fueron creados para trabajar sobre alguna de las diversas librerías JavaScript que hay en este momento dando vueltas, una de las mejores y más completas librerías a mi entenderes YUI (The Yahoo! User Interface Library) , la misma viene repleta de controles y una excelente documentación, que hacen que su implementación sea algo relativamente sencillo.

Para mostrar lo fácil que es integrar YUI a nuestras soluciones ASP.NET MVC, vamos a crear una aplicación de ejemplo en el que utilizaremos los controles DataSource y DataTable de YUI para consumir un feed Json creado con el nuevo JsonResult.

Para comenzar empezaremos con el código del Controller.

public JsonResult GetPlayersList(){
    OranjeDataContext
    ctx = new OranjeDataContext();
    var data = (from player in ctx.Players
        select player).ToList();

    return this.Json(new {
    players = data.ToArray() }, "text/html");
}

En el podrán observar que estoy utilizando el nuevo JsonResult que es un nuevo tipo de ActionResult que nos permite serializar la salida en formato Json, lo demás es solo una
query LinqToSql y un poco de formateo en la forma de exponer el código Json, ya que la DataTable de YUI espera recibir la data de la siguiente manera.

Notaran que antes de la data propiamente dicha la DataTable de YUI espera obtener el nombre de la entidad expuesta.

Bien, el siguiente paso es consumir la data en la View, para ello lo primero que haremos será crear las referencias a los archivos JavaScript necesarios, para ello pueden utilizar el YUI Dependency Configurator, el cual indicándole los controles a implementar nos indicara los archivos que debemos utilizar.

Lo siguiente es consumir la data, para ello deberemos de incluir el siguiente código en la vista.

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.PopulateGrid = new function() {
        var myColumnDefs = [
            {key:"PlayerId", label:"Id"},
            {key:"Name"},
            {key:"Number"},
            {key:"Age"},
            {key:"Caps"},
        ];

        this.myDataSource = new YAHOO.util.DataSource("Home/GetPlayersList?");
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

        this.myDataSource.responseSchema = {
            resultsList: "players",fields: ["PlayerId","Name","Number","Age","Caps"]};
            this.myDataTable = new YAHOO.widget.DataTable("myGrid", myColumnDefs, this.myDataSource);
        };
});

En el podrán observar que creamos un evento que se dispara cuando se carga la vista, luego hay una función en la cual definimos las columnas a utilizar por nuestro DataTable, configuramos el DataSource el cual referencia al método que devuelve el Json serializado desde el Controller, a continuacion seleccionamos los campos de la entidad que utilizaremos y por ultimo creamos el DataTable al cual le pasamos los valores antes asignados mas el Id del elemento HTML en el cual queremos que se cree.

Si todo sale bien, deberían de ver en el browser algo parecido a lo que se aprecia en la imagen siguiente, en la misma también podrán notar la salida del JsonResult.

Aquí concluye este ejemplo, si desean seguir investigando la gran cantidad de características que se incluyen en el control DataTable, como así también los demás controles que forman parte de YUI lo pueden hacer en los siguientes links.

The Yahoo! User Interface Library (YUI)
Yahoo! User Interface Blog

Advertisement