How To: Consumir REST service desde WebAPI en Frontend


Este Snippet utilizará 2 verbos HTTP que son GET y POST, por lo general son los que más se utilizan.

GET

En ASP .NET Web API se debe tener el controlador de la siguiente manera

public IEnumerable<string> Get()
{
    return new string[] { "value1", "value2" };
}

Donde IEnumerable es el tipo de dato que se desea obtener, entre estos caben los tipos de datos estándares como:

string
int
double
float
etc...

Sin embargo se pueden obtener objetos definidos, este es el caso del uso de bases de datos con Entity Framework.

Como por ejemplo, se requiere obtener un usuario filtrado por cédula o identificador de país

public Usuario Get(string id)
{
    Usuario usuario = _usuarios.GetUsuario(id);
    if (usuario == null)
    {
        usuario = new Usuario() { Cedula = "-1", Contraseña = "N/N", Id_Usuario = -1 };
    }
    return usuario;
}

Ahora solo nos queda ir a nuestro frontend donde queremos consumir, para esto usaremos Ajax y JQuery.

var idUsuario = '1023925417';
 $.getJSON("/api/APIUser/" + idUsuario)
.done(function (data) {
    alert('Ud es ' + data.Id_Usuario);
});

POST

En este caso la variable de datos se llama marcador_usuarioData y contiene información en JSON de la manera.

En la petición definimos que es de tipo POST, una url hacia donde queremos apuntar, los datos, el tipo de contenido y tipo de dato.

var marcador_usuarioData = JSON.stringify({
    Id_Usuario: idUsuario[0],
    Id_Partido: id,
    Marcador_Equipo_A: marcadorA,
    Marcador_Equipo_B:marcadorB
});
$.ajax({
    type: "POST",
    url: "/api/APIGame",
    data: marcador_usuarioData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    processData: true,
    success: function (data, status, jqXHR) {

        console.log('Ok:' + data);

    },
    error: function (xhr) {
        alert(xhr.responseText);
    }
});

Y en el código de backend debe definirse el tipo de dato conocido para si mismo, por ejemplo mirar la estructura con la que se envía “marcador_usuarioData” y mirar como se compone el controlador y la clase

public void Post(Marcador_Usuario item)
{
    // something code
}
...
public partial class Marcador_Usuario
{
    public int Id_Usuario_Marcador { get; set; }
    public int Id_Usuario { get; set; }
    public int Id_Partido { get; set; }
    public Nullable<int> Marcador_Equipo_A { get; set; }
    public Nullable<int> Marcador_Equipo_B { get; set; }
    public Nullable<int> Puntos { get; set; }
}