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

Creando operaciones CRUD en Web API


Luego de haber dado un esbozo de lo que era Web API y ver unos pequeños ejemplos en esta serie de tutoriales comenzaremos a crear las operaciones CRUD (Create, Read, Update, Delete) para usar la base de datos que ya está hecha en MongoDB, sin embargo para este tutorial se dejará el alcance hasta un contexto de lista local. Posteriormente se hará la conexión a la base de datos y los demás temas propuestos en la primera entrada.

Para no extender este tutorial se partirá desde el ejercicio anterior de donde pueden descargar la solución.

Adaptando el proyecto con repositorio Continue reading “Creando operaciones CRUD en Web API”

Creando y entendiendo nuestro primer Web API


Cover Entry

Continuando con esta serie de tutoriales para aprender a usar Web API, comenzaremos con lo más básico e ir gradualmente aumentando la complejidad hasta llevar al objetivo inicial.

En este tutorial crearemos nuestro primer proyecto de ASP .NET Web API y ASP .NET MVC, donde consumiremos el API desde JQuery que ya viene por defecto en la plantilla de Bootstrap, recordemos que se está usando Visual Studio 2013 en su último update. Continue reading “Creando y entendiendo nuestro primer Web API”