4

Qual seria a melhor e mais simples alternativa?

Tenho o Web Api:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using Generico.Dominio;
using Generico.Aplicacao;

namespace AspNetWebApi.Controllers
{
    [RoutePrefix("api/AspNetWebApi")]
    public class DefaultController : ApiController
    {

        //http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/5
        [HttpGet]
        [Route("consulta/JogosPorID/{id:int}")]
        public HttpResponseMessage JogosPorID(int id)
        {
            try
            {
                var tTabela = new  JogoDetalheAplicacao();
                var listar = tTabela.ListarTodos(id);
                return Request.CreateResponse(HttpStatusCode.OK, listar.ToArray());
            }
            catch (Exception ex)
            {

                return Request.CreateResponse(HttpStatusCode.BadRequest, ex.Message);
            }
        }



        //http://localhost:7630/api/AspNetWebApi/cadastrar/jogo/4512/20.01/20.10/5
        [HttpPost]
        [Route("cadastrar/jogo/{nJogo}/{valor}/{total}/{idusuario}")]
        public HttpResponseMessage Cadastro(int nJogo, decimal valor, decimal total, int idusuario)
        {
            try
            {
                var tTabela = new JogoDetalheAplicacao();
                tTabela.Inseri(nJogo, valor,total,idusuario);
                return Request.CreateResponse(HttpStatusCode.OK, "Cadastro realizado.");
            }
            catch (Exception ex)
            {

                return Request.CreateResponse(HttpStatusCode.BadRequest, ex.Message);
            }
        }


        //http://localhost:7630/api/AspNetWebApi/deletar/jogo/4512/5
        //precisa usar o postman com opção delete formato json
        [HttpDelete]
        [Route("deletar/jogo/{nJogo}/{idusuario}")]
        public HttpResponseMessage Deletar(int nJogo, int idusuario)
        {
            try
            {
                var tTabela = new JogoDetalheAplicacao();
                var resultado = tTabela.Excluir(nJogo, idusuario);
                return Request.CreateResponse(HttpStatusCode.OK, resultado);
            }
            catch (Exception ex)
            {

                return Request.CreateResponse(HttpStatusCode.BadRequest, ex.Message);
            }
        }


        //http://localhost:1608/api/ApiGuiaCidade/datahora/consulta
        [HttpGet]
        [Route("datahora/consulta")]
        public HttpResponseMessage GetDataHoraServidor()
        {
            try
            {
                var dataHora = DateTime.Now.ToString("dd/MM/yyyy HH:mm:ss");
                return Request.CreateResponse(HttpStatusCode.OK, dataHora);
            }
            catch (Exception ex)
            {

                return Request.CreateResponse(HttpStatusCode.BadRequest, ex.Message);
            }
        }



    }
}

Tenho o Script:

(function () {
    'use strict';

    var numeros = angular
    .module("myModule", [])
    .controller("myController", function ($scope, $http, $log) {

        var sv = this;

        var sucessoCalBack = function (response) {
            $scope.detalhes = response.data;
        };

        var erroCalBack = function (response) {
            $scope.error = response.data;
        };


        //assim funciona, passando o parametro direto 
        $http({
            method: 'GET',
            params: { idusuario: 5 },
            url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/5'})
             .then(sucessoCalBack,erroCalBack);
        });


        sv.getAll = function (idusuario, onSuccess, onFail) {
            var config = {
                method: 'GET',
                url: 'http://localhost:7630/api/AspNetWebApi/consulta/JogosPorID/',
                params: { idusuario:idusuario }
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };


            //Inser Detalhe
        sv.post = function (nJogo, valor, total, idusuario, onSuccess, onFail) {
                var config = {
                    method: 'POST',
                    url: 'http://localhost:7630/api/AspNetWebApi/cadastrar/jogo/',
                    params: { nJogo: nJogo, valor: valor, total: total, idusuario: idusuario }
                }; 
                $http(config)
                    .then(function (response) {
                        onSuccess(response.data);
                    }, function (response) {
                        onFail(response.statusText);
                    });
            };


       //Delete detalhe
        sv.delete = function (idusuario,numerojogo , onSuccess, onFail) {
            var config = {
                method: 'DELETE',
                url: 'http://localhost:7630/api/AspNetWebApi/deletar/jogo/',
                params: { idusuario: idusuario, numerojogo: numerojogo }
            }
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };



})();

Resultado Final: inserir a descrição da imagem aqui

Dúvidas:

1 - eu preciso fazer o Get passando um parâmetro que seria o ID do Usuário

2 – eu preciso fazer o post e delete também enviando o ID do Usuário é número do jogo

Estou disponibilizando o projeto completo, tem apenas 1 tabela (Com script já com dados), caso alguém consiga me ajudar a aprender isso, estou usando o VS 2015, agradeço.

https://drive.google.com/folderview?id=0B-svO0-4L_-NZF9pWFVwV3p4Wms&usp=sharing

1 Resposta 1

5

Cliente

A maneira recomendada de ser fazer isso é criando um service em AngularJS que será encarregado de se comunicar com o servidor, esse service então irá expor funções que serão utilizadas como interfaces de comunicação pelos controllers.

Um conceito que é necessário ter em mente é o seguinte:

╔════════════════════════════════════════╦═══════════════════════════════════╗
║ Controllers                            ║ Services                          ║
╠════════════════════════════════════════╬═══════════════════════════════════╣
║ Lógicas da apresentação (view)         ║ Lógicas de negócio                ║
║----------------------------------------║-----------------------------------║
║ Coisas diretamente relacionadas à view ║ Coisas que independem da view     ║
║----------------------------------------║-----------------------------------║
║ Coisas específicas                     ║ Coisas reutilizáveis              ║
║----------------------------------------║-----------------------------------║
║ Responsável por buscar os dados no     ║ Responsável por fazer requisições ║
║ servidor, por exibir os dadoss, por    ║ ao servidor, por lógicas de       ║
║ gerenciar interações do usuário, por   ║ validação, armazenamento de dados ║ 
║ estilos e exibição de partes da UI     ║ dentro do app e reutilização de   ║
║                                        ║ lógicas de negócio                ║
╚════════════════════════════════════════╩═══════════════════════════════════╝

Fonte: Essa tabela é uma adaptação para o português de uma que pode ser encontrada no livro AngularJS Up and Running.

Aqui vai um exemplo de um service que montei para se comunicar com uma API RESTFul que gerencia produtos. Ele utiliza um service do próprio AngularJS chamado $http para realizar as requisições em HTTP:

(function () {
    'use strict';

    angular
        .module('app')
        .service('products', products);

    products.$inject = ['$http', 'user', 'API_URL'];

    function products($http, user, API_URL) {
        var sv = this;
        var endpoint = API_URL + '/products';

        sv.getAll = function (onSuccess, onFail) {
            var config = {
                method: 'GET',
                url: endpoint
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.getById = function (id, onSuccess, onFail) {
            var config = {
                method: 'GET',
                url: endpoint,
                params: { id: id }
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.post = function (newProduct, onSuccess, onFail) {
            var config = {
                method: 'POST',
                url: endpoint,
                data: newProduct
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.put = function (updatedProduct, onSuccess, onFail) {
            var config = {
                method: 'PUT',
                url: endpoint,
                params: { id: updatedProduct.id },
                data: updatedProduct
            };
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };

        sv.delete = function (id, onSuccess, onFail) {
            var config = {
                method: 'DELETE',
                url: endpoint,
                params: { id: id }
            }
            $http(config)
                .then(function (response) {
                    onSuccess(response.data);
                }, function (response) {
                    onFail(response.statusText);
                });
        };
    }
})();

E como você faria a utilização desse service no controller? Bom, segue aqui um exemplo do service acima sendo utilizado:

(function () {
    'use strict';

    angular
        .module('app')
        .controller('MainController', MainController);

    MainController.$inject = ['$scope', 'products', 'user'];

    function MainController($scope, products, user) {
        var vm = this;

        vm.products = [];

        products.getAll(function (data) {
            vm.products = data;
        }, function (errorMessage) {
            alert(errorMessage);
        });

        vm.deleteProduct = function (id) {
            if (!confirm("Would you like to delete this product?")) {
                return;
            }   

            products.delete(id, function (response) {
                var productIndex = vm.products.findIndex(function (value, index, traversedObject) {
                    return value.Id === id;
                });

                if (productIndex > -1) {
                    vm.products.splice(productIndex, 1);
                }

                alert('Product successfully deleted');
            }, function (errorMessage) {
                alert(errorMessage);
            });
        };
    }
})();

Servidor

O serviço em ASP.NET MVC pode ser criado através de um action method que retorna um JsonResult, segue abaixo um simples exemplo:

public async Task<ActionResult> GetSomeJsonData()
{
    var model = new { Name = "João", LastName = "Silva" };

    return Json(new { Data = model }, JsonRequestBehavior.AllowGet); 
}

Mas eu recomendo que você dê uma olhada no ASP.NET Web API. Diferente do ASP.NET MVC, o ASP.NET Web API é um framework desenvolvido especificamente para a criação APIs RESTFul.

Ele possui muitas facilidades que ajudam a desenvolver uma API mais rapidamente, como por exemplo a integração por padrão com o Json.NET para "serializar" objetos em JSON, dentre outras coisas.

14
  • Fique com dúvidas, então eu não consigo enviar os dados direto para o controller?, eu preciso apenas fazer um poste dos dados : numero é valor, como eu poderia fazer este servisse? agradeço
    – Harry
    Commented 4/01/2016 às 1:55
  • @itasouza atualizei minha resposta adicionando algumas informações sobre como os controllers e services devem ser utilizados e como utilizar o service do exemplo em um controller. Espero que assim fique mais claro para você. :)
    – Zignd
    Commented 4/01/2016 às 2:03
  • Eu vou criar um service e prepara ele para receber os dados, assim que ficar pronto caso tenha dúvidas eu retorno a pergunta, agradeço imensamente a sua ajuda.
    – Harry
    Commented 4/01/2016 às 2:18
  • Eu montei o serviço, fiz os testes é ate conseguir retornar os dados, mais não conseguir seguir, veja que alterei o meu código, também postei o projeto que só tem 1 tabela, seria possível você me ajudar a fazer isso? agradeço
    – Harry
    Commented 5/01/2016 às 15:41
  • @itasouza Para fazer um GET você passa os dados por parâmetro utilizando a propriedade params no objeto de configuração do service $http, de uma olhada no meu exemplo de service e procure pelo método sv.getById. Já sobre o POST, você passa os dados utilizando a propriedade data no objeto de configuração do service $http, de uma olhada no meu exemplo e procure pelo método sv.post.
    – Zignd
    Commented 5/01/2016 às 19:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .