Usando parametros OData na Web API

Neste artigo vou mostrar um recurso muito poderoso da Web API, que é o suporte a ODATA.

Primeiro você deve baixar o Update para o Visual Studio 2012 no link abaixo.

http://www.asp.net/vnext/overview/fall-2012-update

Este update contém algumas novidades, entre elas a integração entre o Entity Framework (Iqueryable) e o a WebApi (OData).

Segundo passo-> Criar uma classe Usuario que servira como modelo para efetuarmos o CRUD.

using System;

using System.Collections.Generic;

 

public partial class Usuario

{

    public int Id { get; set; }

    public string Nome { get; set; }

    public string Telefone { get; set; }

    public string Email { get; set; }

    public string Senha { get; set; }

}

Segundo passo -> Criar o DBContext do Entity Framework que servira de acesso a dados.

public partial class Model1Container : DbContext

{

    public Model1Container()

        : base("name=Model1Container")

    {

    }   

 

    public DbSet UsuarioSet { get; set; }

}

Terceiro Passo -> Adicionar a string de conexão no web.config. O nome da string de conexão deve ser a mesma que está em seu DBContext, no nosso caso Model1Container.

<add name="Model1Container" providerName="System.Data.SqlClient" connectionString="Data Source=DANIMAR-PC\SQLEXPRESS;Initial Catalog=Banco_Dados_Teste;Integrated Security=True"/>

Quarto Passo -> Habilitar o Migrations atraves do Package Manager Console, o Migrations permite que o banco de dados seja criado automaticamente. Também podemos fazer o processo manualmente, mas neste caso vamos usar o automatico. Digite o comando no console.

Enable-Migrations –EnableAutomaticMigrations

Quinto Passo -> Adicionar o controller de Usuario que servirá como API para os métodos de Inserir e Listar usuários. Após isto iremos utilizar através de javascript os métodos deste controller.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using System.Web.Http.OData;

using System.Web.Http.OData.Query;

 

namespace ApiTeste.Controllers

{

    public class UsuarioController : ApiController

    {

        private Models.Model1Container db = new Models.Model1Container();

                 

        [HttpGet]       

        public ODataResult Get(ODataQueryOptions options)

        {

            var results = (options.ApplyTo(db.UsuarioSet) as IQueryable);

            var count = results.Count();

            var limitedResults = results.Take(5).ToArray();

            return new ODataResult(limitedResults, null, count);

        }

 

        // POST api/Teste

        public HttpResponseMessage PostUsuario(ApiTeste.Models.Usuario usuario)

        {

            if (ModelState.IsValid)

            {

                db.UsuarioSet.Add(usuario);

                db.SaveChanges();

 

                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created, usuario);

                response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = usuario.Id }));

                return response;

            }

            else

            {

                return Request.CreateResponse(HttpStatusCode.BadRequest);

            }

        }

         

    }

}

 Aqui está a página que faz o uso da API.

<div id="body">

    <section class="featured">

        <div class="content-wrapper">

            <hgroup class="title">

                <h1>Lista de usuários do sistema!</h1>

            </hgroup>

            <p>

                <button data-bind="click: abrirCriacaoUsuario">Criar Novo Usuário</button>

            </p>

        </div>

    </section>

    <section class="content-wrapper main-content clear-fix">

        @using (Html.BeginForm("PostUsuario", "Usuario", FormMethod.Post, new { id = "formularioUsuario", style = "display:none;", data_bind = "submit: SalvarUsuario, with: Usuario" }))

        {

            <div>

                <label>Nome:</label>

                <input type="text" data-bind="value:Nome" />

            </div>

            <div>

                <label>Telefone:</label>

                <input type="text" data-bind="value:Telefone" />

            </div>

            <div>

                <label>E-mail:</label>

                <input type="text" data-bind="value:Email" />

            </div>

            <div>

                <label>Senha:</label>

                <input type="text" data-bind="value:Senha" />

            </div>

            <div>

                <button type="submit">Salvar Dados</button>

                <button type="reset" data-bind="click:$parent.cancelarInsercao">Cancelar</button>

            </div>

        }

        <hr />

        <span>Nome</span><input type="text" data-bind="value: filtro" /><button data-bind="click:buscarUsuarios">Pesquisar</button>

        <table>

            <thead>

                <tr>

                    <th data-bind="click: ordenarPorNome">Nome</th>

                    <th data-bind="click: ordenarPorTelefone">Telefone</th>

                    <th data-bind="click: ordenarPorEmail">E-mail</th>

                </tr>

            </thead>

            <tbody data-bind="foreach: ListaUsuarios">

                <tr>

                    <td data-bind="text:Nome"></td>

                    <td data-bind="text:Telefone"></td>

                    <td data-bind="text:Email"></td>

                </tr>

            </tbody>

        </table>

        <a href="#" data-bind="click:anterior">Página anterior</a>

                     

        <a href="#" data-bind="click:proximo">Próxima página</a>

    </section>

</div>

 

<style type="text/css">

    th

    {

        cursor: pointer;

    }

</style>

 

@section scripts {

    <script src="~/Scripts/knockout-2.1.0.js"></script>

    <script type="text/javascript">

        $(document).ready(function () {

 

            function UsuarioEntidade(data) {

                this.Id = ko.observable(data.Id);

                this.Nome = ko.observable(data.Nome);

                this.Telefone = ko.observable(data.Telefone);

                this.Email = ko.observable(data.Email);

                this.Senha = ko.observable(data.Senha);

            }

 

            function Modelo() {

                var self = this;

 

                self.Usuario = ko.observable(new UsuarioEntidade({}));

                self.ListaUsuarios = ko.observableArray([]);

                self.order = ko.observable('Nome');               

                self.pagina = ko.observable(0);

                self.filtro = ko.observable('');

 

                self.buscarUsuarios = function () {

                    var url = '/Api/Usuario/Get?$orderby=' + self.order() + '&$skip=' + self.pagina() * 5;

 

                    if(self.filtro()!='')

                        url += "&$filter=startswith(Nome, '" + self.filtro() + "') eq true";

                    $.getJSON(url, null, function (data) {

                        var mapeado = $.map(data.Items, function (obj) { return new UsuarioEntidade(obj); });

                        self.ListaUsuarios(mapeado);

                    });

                };

 

                self.SalvarUsuario = function () {

                    var elemento = ko.toJSON(self.Usuario());

                    jQuery.ajax({

                        url: '/Api/Usuario/PostUsuario',

                        type: "POST",

                        data: elemento,

                        dataType: "json",

                        contentType: 'application/json; charset=utf-8',

                        success: function (result) {

                            debugger;

                            self.buscarUsuarios();

                        }

                    });

                };

 

                self.ordenarPorNome = function () {

                    self.order("Nome");

                    self.buscarUsuarios();

                }

 

                self.ordenarPorTelefone = function () {

                    self.order("Telefone");

                    self.buscarUsuarios();

                }

 

                self.ordenarPorEmail = function () {

                    self.order("Email");

                    self.buscarUsuarios();

                }

 

                self.proximo = function () {

                    self.pagina(self.pagina() + 1);

                    self.buscarUsuarios();

                }

 

                self.anterior = function () {

                    self.pagina(self.pagina() - 1);

                    if (self.pagina() < 0)

                        self.pagina(0);

                    self.buscarUsuarios();

                }

 

                self.cancelarInsercao = function () {

                    $('#formularioUsuario').slideUp();

                };

 

                self.abrirCriacaoUsuario = function () {

                    self.Usuario(new UsuarioEntidade({}));

                    $('#formularioUsuario').slideDown();

                };

            }

 

            var model = new Modelo();

            ko.applyBindings(model);

            model.buscarUsuarios();

        });

    

 

}

A parte mais importante do código anterior é esta:

self.ListaUsuarios = ko.observableArray([]);

self.order = ko.observable('Nome');               

self.pagina = ko.observable(0);

self.filtro = ko.observable('');

 

self.buscarUsuarios = function () {

    var url = '/Api/Usuario/Get?$orderby=' + self.order() + '&$skip=' + self.pagina() * 5;

 

    if(self.filtro()!='')

        url += "&$filter=startswith(Nome, '" + self.filtro() + "') eq true";

    $.getJSON(url, null, function (data) {

        var mapeado = $.map(data.Items, function (obj) { return new UsuarioEntidade(obj); });

        self.ListaUsuarios(mapeado);

    });

};

Nas primeiras linhas temos nossas variaveis:
ListaUsuarios -> Guarda o resultado da consulta a API. Como ela é uma variavel observable do knockout cada vez que modificarmos, o html  será gerado automaticamente.
order -> Guarda a ordem dos resultados.
pagina -> guarda a página atual.
filtro -> guarda o filtro para a consulta.

Dentro do método buscarUsuarios primeiro criamos a url com os parâmetros. Os parâmetros devem obedecer a definição ODATA.
A WebApi irá automaticamente converter nossos parâmetros para a variável do nosso método no controller (ODataQueryOptions options)

A web api atualmente suporta $orderby, $top, $skip e $filter. Vale a pena olhar a ultima documentação para verificar mas opções suportadas.

Você pode baixar o exemplo completo aqui

Obrigado.