Hola a todos, en un post anterior, vimos cómo implementar paginación en Web API, y en está ocasión también vamos a paginar los resultados pero en este caso implementando OData con Web API y haciendo binding a un GridView de Kendo UI.


Lo primero, instalar el paquete de Nuget para OData:

OData Package

Luego es necesario configurar OData para Web API, en ese caso, he creado una nueva clase en la carpeta App_Start llamado ODataConfig.cs, con el siguiente código:


public class ODataConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API routes
        config.MapHttpAttributeRoutes();

        // Web API OData
        var builder = new ODataConventionModelBuilder();
        builder.EntitySet<Customer>("Customer");
        config.MapODataServiceRoute(
            routeName: "odata",
            routePrefix: "odata",
            model: builder.GetEdmModel()
        );
    }
}

Luego se registra en el evento Application_Start del Global.asax:


GlobalConfiguration.Configure(config =>
{
    ODataConfig.Register(config); 
    WebApiConfig.Register(config);
});

Ahora, para crear el Endpoint de OData, creamos un CustomerController, con la diferencia que en lugar de heredar de ApiController lo debe hacer de ODataController, allí vamos a tener un método GetCustomer que debe retornar un IQueryable y adicionalmente se debe decorar con el atributo [EnableQuery]:


public class CustomerController : ODataController
{
    private readonly AppContext context = new AppContext();

    [EnableQuery]
    public IQueryable GetCustomer()
    {
        return context.Customers;
    }

    protected override void Dispose(bool disposing)
    {
        if (disposing)
        {
            context.Dispose();
        }
        base.Dispose(disposing);
    }
}

En este momento, ya podemos validar el endpoint de OData:

OData Test

Ahora, el siguiente paso es hacer binding de ese endpoint de OData a un GridView de Kendo UI, para ello, lo primero es crear un div, ese div va a ser el encargado de ser el GridView, y ahora el código cliente:


$(document).ready(function () {
    LoadGrid();
});

function LoadGrid() {
    $("#grid").kendoGrid({
        dataSource: {
            type: "odata-v4",
            transport: {
                read: "http://localhost:48564/odata/Customer"
            },
            pageSize: 20,
            serverPaging: true
        },
        height: 550,
        groupable: true,
        sortable: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
            { field: "Name", title: "Name" },
            { field: "LastName", title: "Last Name" },
            { field: "Email", title: "Email" }
        ]
    });
}

Y cómo resultado:

OData Kendo UI GridView

Adicionalmente, si revisamos la petición que se hace al endpoint de OData, efectivamente se están retornando los resultados paginados:

OData Pagination

Puedes ver el código en GitHub

Espero el post les sea interesante, saludos!