Utilización de ExtJs con Web-Api 2

Tomando como base la nota anterior donde usamos ExtJs con MVC3, propongo hacer el mismo trabajo pero con Web-Api, la nueva plataforma de Microsoft que permite construir fácilmente servicios HTTP. Esta plataforma es ideal para aplicationes RESTful, asi como dispositivos móbiles, sitios web, etc.

Veamos como proceder:

1) Creación del proyecto ASP.NET MVC 4

2) De XML a JSON

Web-Api genera por defecto datos en formato XML. A nosotros nos es más conveniente el formato JSON, para modificar este comportamiento, basta agregar una linea de código dentro del archivo Global.asax.cs:

 GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

3) Modelos

Creamos dos archivos, uno llamado Libros.cs (idéntico al de la nota anterior) y uno nuevo llamado ExtAnswer.cs, que contendrá la respuesta JSON producida por el controlador web-api.

 public class Libro
    {

        public string Codigo { get; set; }
        public string Titulo { get; set; }
        public string Autor { get; set; }
        public string Idioma { get; set; }
        public decimal Precio { get; set; }

    }
 

     public class ExtAnswer
    {

        public List<Libro> data { get; set; }
        public int total { get; set; }
        public bool success { get; set; }
    }
 

4) Creación de un nuevo Controlador

Agregamos una nueva clase de tipo ApiController, dentro el archivo: BooksController.cs,

   public ExtAnswer GetLibros(){

            Libro libro1 = new Libro { Titulo = "En un rincón del alma", Autor = "Antonia de J. Corrales", Codigo = "9788415420231", Idioma = "Español", Precio = 15.00M };
            Libro libro2 = new Libro { Titulo = "La casa de Riverton", Autor = "Kate Morton", Codigo = "9788466325066", Idioma = "Español", Precio = 10.99M };
            Libro libro3 = new Libro { Titulo = "Dime quién soy", Autor = "Julia Navarro", Codigo = "9788499087566", Idioma = "Español", Precio = 21.00M };
            Libro libro4 = new Libro { Titulo = "La caida de los gigantes", Autor = "Ken Follet", Codigo = "9788499893570", Idioma = "Español", Precio = 12.95M };
            Libro libro5 = new Libro { Titulo = "El tiempo entre costuras", Autor = "Maria Dueñas", Codigo = "9788499981833", Idioma = "Español", Precio = 13.77M };

            List<Libro> libros = new List<Libro>();

            libros.Add(libro1);
            libros.Add(libro2);
            libros.Add(libro3);
            libros.Add(libro4);
            libros.Add(libro5);

            return new ExtAnswer { data = libros, total = libros.Count, success = true };
        }

5) Vista

Finalmente modificamos la vista por defecto del proyecto (Index.cshtml), agregando el script que usamos en la nota anterior, casi sin modificaciones:

<header>
    <div class="content-wrapper">
        <div class="float-left">
            <p class="site-title">
                <a href="~/">ASP.NET Web API</a></p>
        </div>
    </div>
    <link href="../../Content/ext-all.css" rel="stylesheet" type="text/css" />
</header>
<div id="body">
    <section class="content-wrapper main-content clear-fix">
        <h3>Utilización de ExtJs con Web-API:</h3>

        <div id="contenedor">
    </div>
</section>
    <script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.0-gpl/ext-all.js"></script>
    <script type="text/javascript">
        Ext.define('Myapp.model.Libro', {
            extend: 'Ext.data.Model',
            fields: [
                       { name: 'Codigo', type: 'string' },
                       { name: 'Titulo', type: 'string' },
                       { name: 'Autor', type: 'string' },
                       { name: 'Idioma', type: 'string' },
                       { name: 'Precio', type: 'string' },
                   ]
        });

        var mystore = new Ext.data.Store({
            extend: 'Ext.data.Store',
            requires: ['Myapp.model.Libro'],
            model: 'Myapp.model.Libro',
            autoLoad: true,
            autoSync: false,
            proxy: {
                type: 'ajax',
                api: {
                    read: 'api/Books/List'
                },
                appendId: false,
                batchActions: true,
                reader: {
                    type: 'json',
                    root: 'data',
                    messageProperty: 'message',
                    successProperty: 'success',
                    totalProperty: 'total'
                }
            }
        });
        $(document).ready(function () {
            var grid = Ext.create('Ext.grid.Panel', {
                store: mystore,
                title: 'Libros',
                requires: 'MyApp.model.Libro',
                stateful: true,
                collapsible: true,
                multiSelect: true,
                stateId: 'stateGrid',
                columns: [
                        { header: 'Codigo', dataIndex: 'Codigo' },
                        { header: 'Titulo', dataIndex: 'Titulo' },
                        { header: 'Autor', dataIndex: 'Autor' },
                        { header: 'Idioma', dataIndex: 'Idioma' },
                        { header: 'Precio', dataIndex: 'Precio' }
                    ],
                renderTo: 'contenedor',
                width: 700,
                height: 400
            });

            grid.getStore().load();

        });

    </script>
</div>

No nos resta que lanzar el programa, pulsando F5 desde Visual Studio, la página principal deberia mostrar la grilla con los resultados:

Desde este enlace se puede descargar el proyecto completo