How to send Angularjs data to an ASP.NET MVC backend?

Question

What would be the best and simplest alternative?

I have the 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);
            }
        }



    }
}

I have the 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);
                });
        };



})();

Final Result:

Doubts:

1 - I need to do Get by passing a parameter that would be the User ID

2 - I need to post and delete also sending the User ID is game number

I am providing the complete project, has only 1 table (with script already with data), in case someone can help me learn this, I am using VS 2015, I thank you.

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

Answer 1

Client

The recommended way to be doing this is to create a service in Angularjs who will be in charge of communicating with the server, this service then will expose functions that will be used as communication interfaces by controllers.

One concept that needs to be borne in mind is the following:

╔════════════════════════════════════════╦═══════════════════════════════════╗
║ 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                ║
╚════════════════════════════════════════╩═══════════════════════════════════╝

Source: This table is an adaptation to Portuguese of one that can be found in the book Angularjs Up and Running.

Here’s an example of a service I set up to communicate with a Restful API that manages products. It uses a service of Angularjs himself called $http to perform HTTP requests:

(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);
                });
        };
    }
})();

And how would you make use of that service in the controller? Well, here’s an example from service above being used:

(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);
            });
        };
    }
})();

Server

The ASP.NET MVC service can be created through a action method that returns a Jsonresult, Below is a simple example:

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

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

But I recommend you take a look at the ASP.NET Web API. Unlike ASP.NET MVC, the ASP.NET Web API is a framework developed specifically for creating Restful Apis.

It has many facilities that help to develop an API faster, such as the default integration with Json.NET to "serialize" objects in JSON, among other things.