Chalalo Land

Tecnologías ASP.NET y un poco Más

Contacto


 Si quierer cooperar, yo feliz, muy agradecido :)

De donde me Visitan?

Locations of visitors to this page

Generic Content

Si te gustaron los articulos, y te animas te estaría muy agradecido!


Recent Posts

Tags

Community

Blogs de MVP

Amigos Geeks

Blogs Imperdibles

GODS

Archives

Email Notifications

Comenzando con ASP.NET Web API y Odata

Hola, vamos a comenzar una pequeña serie de comenzar a utilizar el protocolo Odata junto a ASP.NET Web API, una combinación realmente potente. Para hacer un poco de memoria, OData es un protocolo abierto que permite tener acceso a un origen de datos, mediante una URL especialmente construida, constituye un enfoque simplificado de como acceder a orígenes de datos remotos. OData usa HTTP ,Atom y JSON, y nos permite a los desarrolladores crear apps que se comunican con variadas fuentes de datos. Lee más sobre este protocolo acá: http://www.odata.org/introduction/

Ahorra bien, ya hemos visto Web API en varias post que puedes encontrar en el siguiente enlace. http://geeks.ms/blogs/gperez/search.aspx?q=web+api

Lo bueno es que el release ASP.NET 2012.2 , agrega el soporte de OData para WebAPI, vamos a comenzar con lo más básico y para entender  OData , trabajaremos con la plantilla de Web API que nos provee Visual Studio .

Para realizar el primer ejemplo vamos crear un proyecto de WebApi, para eso elegimos aplicación web de asp.net mvc

image

image

Luego vamos a agregar algunos elementos a la colección que ya nos aparece en la acción Get del controlador que crea la plantilla por defecto (ValuesController)

// GET api/values

[Queryable]
public IEnumerable<string> Get()
{
return new string[] { "value0","value1","value2","value3",value4","value5", "value6", "value7", "value8", "value9", "value10" };

}

Fijate que agregué también el atributo Queryable, esto permitirá que podamos hacer las consultas con OData. Si no tienes la referencia la puedes buscar en Nuget o descárgala desde acá:

http://www.nuget.org/packages/microsoft.aspnet.webapi.odata

Ahora ya tenemos algunos elementos más para poder jugar un poco con OData.

Vamos a realizar ejemplos básicos y revisar cual es la respuesta a nuestras peticiones.

Para llamar a la acción por defecto (estoy en mi máquina) hacemos:

 

http://localhost:1927/Api/Values y el resultado es:

image

Ahora bien ocupemos un poco más de Odata, si revisar la documentación del core veremos que existen sentencias para hacer querys (revísalas en http://www.odata.org/documentation/odata-v3-documentation/odata-core/#1023_Querying_Collections)

Vamos a ver $top y $skip,la primera nos permite obtener los primeros n elementos de la colección, asi que si hacemos:
http://localhost:1927/Api/Values?$top=2 , el resultado es:

image

Ahora bien, con $skip no “saltamos” n resultados , asi que si hacemos:
http://localhost:1927/Api/Values?$skip=2

image

Lo que nos da la pauta para realizar, por ejemplo , paginaciones:
http://localhost:1927/Api/Values?$top=3&$skip=3

image

Ahora veamos un pequeño ejemplo de como consumir esto con jquery y paginando, voy a tratar de simplificar al máximo el código

image

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<script src="Scripts/jquery-1.8.2.min.js"></script>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script>

        $(document).ready(function () {

            var skip = 0;

            var top = 3;

 

            $("#atras").click(function (e) {

                if (skip > 0) {

                      cargaDatos(skip= skip - top);

                }

            });

 

            $("#adelante").click(function (e) {

                    cargaDatos(skip= skip + top);

            });

 

            function cargaDatos(skip) {

                $("ol").empty();

                var url = "$top=" + top + "&$skip=" + skip;

                $.getJSON('Api/Values?' + url, function (data) {

                    $.each(data, function (key, val) {

                        $("ol").append('<li>' + val + '</li>');

                    });

                });

            }

      

            cargaDatos(skip);

        });

    </script>

</head>

<body>

    <h1>Ejemplo con OData</h1>

    <button id="atras"><<</button>

    <button id="adelante">>></button>

    <ol></ol>

 

</body>

</html>

Como puedes ver hago uso de la función getJSON de jquery para enviarlo los parámetros de skip y top, de manera de ir avanzando el skip para “paginar”. Entonces, cuando se carga por primera vez la página se carga con skip=0 y top=3 , que me posicionan en la primera página, luego cuando presionan el botón adelante o atrás se agrega o disminuye el valor del top. Dentro de la función lo primero que hago es limpiar la lista para que no se vayan agregando los valores a los ya existentes y la variable url nos permite completar la url final que se enviará a la webapi, bastante sencillo!.

Bueno, seguiré con artículos de este tipo, metiéndonos cada vez mas en esta poderosa combinación de asp.net Sonrisa

Espero que te sirva!
@chalalo

Posted: 14/4/2013 3:17 por Gonzalo Perez | con 1 comment(s)
Archivado en: ,,
Comparte este post:

Comentarios

Kiquenet ha opinado:

Interesante, qué siga la serie! :-)

REST, OData, Web API...cuál se recomienda?

Diferencias entre REST y OData ??

Saludos.

# April 19, 2013 9:10 AM