Web API con métodos de acción y consumo C#

Introducción a ASP.NET Web API

ASP.NET Web API (acrónimo de Application Programming Interface) es un framework para construir servicios basados en HTTP. ASP.NET Web API Framework no obliga a usar cualquier estilo de arquitectura específico para crear servicios, aunque se usa mucho para crear servicios RESTful.

Servicios RESTful

Los servicios RESTful (acrónimo de Representational State Transfer) introducido por primera vez en el año 2001. REST es un modelo de arquitectura para crear API y que usa HTTP para comunicarse. El modelo de arquitectura REST tiene ciertas restricciones que un sistema debería cumplir que son:

  • Client Server (separación entre la lógica en Cliente y la lógica en Servidor).
  • Stateless (una comunicación de este tipo significa que no hay que guardar ningún dato relacionado con el cliente y procesar cada petición de forma independiente).
  • Cacheable (esta restricción guarda la respuesta que devuelve una API y la va usando tantas veces como sea necesario sin volver a atacar a la API).
  • Uniform Interface (se refiere a los recursos que representan entidades de datos como Mensajeros, Pedidos).

Métodos de acción CRUD

Muchas funcionalidades que puede tener una aplicación se pueden sumar con el acrónimo CRUD (es decir Create, Read, Update y Delete). Hay cuatro métodos HTTP que se corresponden a estas acciones:

  • GET para recuperar los datos.
  • POST para agregar un nuevo registro.
  • PUT para modificar un registro.
  • DELETE para eliminar el mismo.

Consumo

Los servicios API pueden ser consumidos por distintos tipos de clientes como navegadores, aplicaciones móviles, aplicaciones de escritorio, así como IoT (Internet of things).

 

Desarrollo de la solución

Grupo de recursos en Azure

Vamos a necesitar:

  • Base de datos que la vamos a llamar Mensajeria
  • App Service para publicar la parte de Web API que la vamos a llamar wamensajeria
  • App Service para publicar la aplicación MVC que la vamos a llamar clientemensajeria

 

Crear el proyecto Web API

En Visual Studio le damos a New Project > ASP.NET WEB Application (Visual C#) —Ponemos en el nombre del proyecto MensajeriaWebApi y seleccionamos Web API.

En la carpeta Models creamos una nueva entidad haciendo clic sobre New Item > Class > ADO.NET Entity Data Model (Visual C#) — La llamamos EntidadMensajeria.

Añadimos la conexión a nuestra base de datos Mensajeria ubicada en Azure y esperamos que nos cree las entidades. Es importante tener en cuenta que las tablas deben tener claves primarias para que funcione.

Luego sobre la misma carpeta Models creamos una nueva clase y la llamamos ModeloMensajeria.cs —Esta clase va a tener los métodos que recuperan datos de la entidad.

namespace MensajeriaWebAPI.Models
{
public class ModeloMensajeria
{
EntidadMensajeria entidad;

public ModeloMensajeria()
{
this.entidad = new EntidadMensajeria();
}

public List<PEDIDOS> GetPedidos()
{
var consulta = from datos in entidad.PEDIDOS
select datos;
return consulta.ToList();
}

public PEDIDOS BuscarPedido(int idpedido)
{
var consulta = from datos in entidad.PEDIDOS
where datos.ID_PEDIDO == idpedido
select datos;
return consulta.First();
}

public void AnyadirPedido(int idpedido, string estadoentrega, DateTime fechacreacion, string destinatario, string direccion, string codigopostal, string telefono, int idmensajero)
{
PEDIDOS p = new Models.PEDIDOS();
p.ID_PEDIDO = idpedido;
p.ESTADO_ENTREGA = estadoentrega;
p.FECHA_CREACION = fechacreacion;
p.DESTINATARIO = destinatario;
p.DIRECCION = direccion;
p.CODIGO_POSTAL = codigopostal;
p.TELEFONO = telefono;
p.ID_MENSAJERO = idmensajero;

this.entidad.PEDIDOS.Add(p);
this.entidad.SaveChanges();
}

public void ModificarPedido(int idpedido, string estadoentrega, DateTime fechacreacion, string destinatario, string direccion, string codigopostal, string telefono, int idmensajero)
{
PEDIDOS p = this.BuscarPedido(idpedido);
p.ESTADO_ENTREGA = estadoentrega;
p.FECHA_CREACION = fechacreacion;
p.DESTINATARIO = destinatario;
p.DIRECCION = direccion;
p.CODIGO_POSTAL = codigopostal;
p.TELEFONO = telefono;
p.ID_MENSAJERO = idmensajero;
this.entidad.SaveChanges();
}

public void EliminarPedido(int idpedido)
{
PEDIDOS p = this.BuscarPedido(idpedido);
this.entidad.PEDIDOS.Remove(p);
this.entidad.SaveChanges();
}
}
}

Ahora sobre la carpeta Controllers añadimos un controlador Web API 2 Controller with read/write actions — Lo llamamos MensajeriaController.cs

Modificamos los métodos para que nos recupere datos del modelo a la hora de recibir peticiones.

namespace MensajeriaWebAPI.Controllers
{
public class MensajeriaController : ApiController
{
ModeloMensajeria modelo;

public MensajeriaController()
{
this.modelo = new ModeloMensajeria();
}

// GET: api/Mensajeria
public List<PEDIDOS> GetPedidos()
{
return this.modelo.GetPedidos();
}

// GET: api/Mensajeria/5
public PEDIDOS GetPedido(int id)
{
return this.modelo.BuscarPedido(id);
}

// POST: api/Mensajeria
public void Post(PEDIDOS p)
{
this.modelo.AnyadirPedido(p.ID_PEDIDO, p.ESTADO_ENTREGA, (DateTime)p.FECHA_CREACION, p.DESTINATARIO, p.DIRECCION, p.CODIGO_POSTAL, p.TELEFONO, (int)p.ID_MENSAJERO);
}

// PUT: api/Mensajeria/5
public void Put(int id, PEDIDOS p)
{
this.modelo.ModificarPedido(p.ID_PEDIDO, p.ESTADO_ENTREGA, (DateTime)p.FECHA_CREACION,p.DESTINATARIO,p.DIRECCION,p.CODIGO_POSTAL,p.TELEFONO,(int)p.ID_MENSAJERO);
}

// DELETE: api/Mensajeria/5
public void Delete(int id)
{
this.modelo.EliminarPedido(id);
}
}
}

En el administrador de paquetes NuGet instalamos Newtonsoft.Json si no lo tenemos instalado.

En Global.asax.cs añadimos estas dos líneas dentro de Application_Start() para que nos devuelve los datos en formato JSON:

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore;
GlobalConfiguration.Configuration.Formatters.Remove(GlobalConfiguration.Configuration.Formatters.XmlFormatter);

Publicamos el proyecto en nuestro recurso App Service llamado wamensajeria.

Crear el proyecto MensajeriaCliente

En Visual Studio le damos a New Project > ASP.NET Web Application (Visual C#) —Le llamamos MensajeriaCliente y seleccionamos MVC

En la carpeta Models creamos la Mensajeros.cs

namespace MensajeriaCliente.Models
{
public class Mensajeros
{
public int ID_MENSAJERO { get; set; }
public string APELLIDOS { get; set; }
public string TELEFONO { get; set; }
}
}

En la carpeta Models creamos la Pedidos.cs

namespace MensajeriaCliente.Models
{
public class Pedidos
{
public int ID_PEDIDO { get; set; }
public string ESTADO_ENTREGA { get; set; }
public DateTime FECHA_CREACION { get; set; }
public string DESTINATARIO { get; set; }
public string DIRECCION { get; set; }
public string CODIGO_POSTAL { get; set; }
public string TELEFONO { get; set; }
public int ID_MENSAJERO { get; set; }
}
}

Creamos un nuevo controlador y lo llamamos MensajeriaController.cs

namespace MensajeriaCliente.Controllers
{
public class MensajeriaController : Controller
{

// GET: Mensajeria
public ActionResult Index()
{
return View();
}
}
}

En la carpeta Views creamos una nueva zona (carpeta) que se llama Mensajeria y dentro de index.cshtml añadimos el código para la vista.
@{
ViewBag.Title = «Index»;
}

@section scripts
{
<script>
$(document).ready(function () {
mostrarPedidos();
});
function mostrarPedidos() {
var url = «http://wamensajeria.azurewebsites.net/api/mensajeria»;

$.getJSON(url, function (data) {
$(«#contenido»).html(«»);
$.each(data, function (p, pedidos) {
var item = «»;
item += «<tr>»;
item += «<td>» + pedidos.ID_PEDIDO + «</td>»;
item += «<td>» + pedidos.ESTADO_ENTREGA + «</td>»;
item += «<td>» + pedidos.FECHA_CREACION + «</td>»;
item += «<td>» + pedidos.DESTINATARIO + «</td>»;
item += «<td>» + pedidos.DIRECCION + «</td>»;
item += «<td>» + pedidos.CODIGO_POSTAL + «</td>»;
item += «<td>» + pedidos.TELEFONO + «</td>»;
item += «<td>» + pedidos.ID_MENSAJERO + «</td>»;
item += «</tr>»;
$(«#contenido»).append(item);
});
});
}
$(«#btncrear»).click(function () {
var url = «http://wamensajeria.azurewebsites.net/api/mensajeria»;

var p = new Object();
p.ID_PEDIDO = $(«#txtidpedido»).val();
p.ESTADO_ENTREGA = $(«#txtestadoentrega»).val();
p.FECHA_CREACION = $(«#txtfechacreacipn»).val();
p.DESTINATARIO = $(«#txtdestinatario»).val();
p.DIRECCION = $(«#txtdireccion»).val();
p.CODIGO_POSTAL = $(«#txtcodigopostal»).val();
p.TELEFONO = $(«#txttelefono»).val();
p.ID_MENSAJERO = $(«#txtidmensajero»).val();

$.ajax({
url: url,
type : «POST»,
contentType: «application/json»,
data: JSON.stringify(p),
success: function (data) {
mostrarPedidos();
$(«#mensaje»).text(«Pedido creado satisfactoriamente.»);
}, error: function (msj) {
$(«#mensaje»).text(«Error, no se ha podido crear el pedido.»);
}
})
})

$(«#btnmodificar»).click(function () {
var num = $(«#txtidpedido»).val();
var url = «http://wamensajeria.azurewebsites.net/api/mensajeria/» + num;

var p = new Object();
p.ID_PEDIDO = $(«#txtidpedido»).val();
p.ESTADO_ENTREGA = $(«#txtestadoentrega»).val();
p.FECHA_CREACION = $(«#txtfechacreacipn»).val();
p.DESTINATARIO = $(«#txtdestinatario»).val();
p.DIRECCION = $(«#txtdireccion»).val();
p.CODIGO_POSTAL = $(«#txtcodigopostal»).val();
p.TELEFONO = $(«#txttelefono»).val();
p.ID_MENSAJERO = $(«#txtidmensajero»).val();

$.ajax({
url: url,
type: «PUT»,
contentType: «application/json»,
data: JSON.stringify(p),
success: function (data) {
mostrarPedidos();
$(«#mensaje»).text(«Pedido modificado satisfactoriamente.»);
}, error: function (msj) {
$(«#mensaje»).text(«Error, no se ha podido modificar el pedido.»);
}
})
})

$(«#btneliminar»).click(function () {
var num = $(«#txtidpedido»).val();
var url = «http://wamensajeria.azurewebsites.net/api/mensajeria/» + num;

$.ajax({
url: url,
type: «DELETE»,
contentType: «application/json»,
success: function (data) {
mostrarPedidos();
$(«#mensaje»).text(«Pedido eliminado satisfactoriamente.»);
}, error: function (msj) {
$(«#mensaje»).text(«Error, no se ha podido eliminar el pedido.»);
}
})
})

$(«#btnrecuperar»).click(function () {
var num = $(«#txtidpedido»).val();
var url = «http://wamensajeria.azurewebsites.net/api/mensajeria/» + num;

$.ajax({
url: url,
type: «GET»,
contentType: «application/json»,
success: function (data) {
$(«#txtestadoentrega»).val(data.ESTADO_ENTREGA);
$(«#txtfechacreacipn»).val(data.FECHA_CREACION);
$(«#txtdestinatario»).val(data.DESTINATARIO);
$(«#txtdireccion»).val(data.DIRECCION);
$(«#txtcodigopostal»).val(data.CODIGO_POSTAL);
$(«#txttelefono»).val(data.TELEFONO);
$(«#txtidmensajero»).val(data.ID_MENSAJERO);

$(«#mensaje»).text(«Datos recuperados satisfactoriamente.»);
}, error: function (msj) {
$(«#mensaje»).text(«Error, no se ha podido recuperar los datos del pedido.»);
}
})

//$.getJSON(url, function (data) {
// $(«#contenido»).html(«»);
// $.each(data, function (p, pedidos) {
// var item = «»;
// item += «<tr>»;
// item += «<td>» + pedidos.ID_PEDIDO + «</td>»;
// item += «<td>» + pedidos.ESTADO_ENTREGA + «</td>»;
// item += «<td>» + pedidos.FECHA_CREACION + «</td>»;
// item += «<td>» + pedidos.DESTINATARIO + «</td>»;
// item += «<td>» + pedidos.DIRECCION + «</td>»;
// item += «<td>» + pedidos.CODIGO_POSTAL + «</td>»;
// item += «<td>» + pedidos.TELEFONO + «</td>»;
// item += «<td>» + pedidos.ID_MENSAJERO + «</td>»;
// item += «</tr>»;
// $(«#contenido»).append(item);
// });
//});
})
</script>
}

<h2>Todos los pedidos</h2>

<table id=»tabla» class=»table-bordered table-hover»>
<tread>
<tr>
<th>ID pedido</th>
<th>Estado de entrega</th>
<th>Fecha de creación</th>
<th>Destinatario</th>
<th>Dirección</th>
<th>Código postal</th>
<th>Teléfono</th>
<th>Id mensajero</th>
</tr>
</tread>
<tbody id=»contenido»></tbody>
</table>

<hr/>
<h2>Administrar pedidos</h2>

<div>
<label>ID pedido:</label>
<input type=»text» id=»txtidpedido» class=»form-control» />
</div>
<div>
<label>Estado entrega:</label>
<select id=»txtestadoentrega» class=»form-control» >
<option value=»PENDIENTE»>PENDIENTE</option>
<option value=»ENTREGADO»>ENTREGADO</option>
<option value=»INCIDENCIA»>INCIDENCIA</option>
</select>

<label>Fecha creación:</label>
<input type=»text» id=»txtfechacreacipn» class=»form-control» />

<label>Destinatario:</label>
<input type=»text» id=»txtdestinatario» class=»form-control» />
</div>
<div>
<label>Dirección:</label>
<input type=»text» id=»txtdireccion» class=»form-control» />

<label>Código postal:</label>
<input type=»text» id=»txtcodigopostal» class=»form-control» />

<label>Teléfono:</label>
<input type=»text» id=»txttelefono» class=»form-control» />
</div>
<div>
<label>ID mensajero:</label>
<select id=»txtidmensajero» class=»form-control»>
<option value=»1″>1</option>
<option value=»2″>2</option>
<option value=»3″>3</option>
<option value=»4″>4</option>
<option value=»5″>5</option>
<option value=»6″>6</option>
<option value=»7″>7</option>
<option value=»8″>8</option>
</select>
</div>

<button id=»btnrecuperar» class=»btn-success»>Recuperar campos</button>
<button id=»btncrear» class=»btn-primary»>Crear</button>
<button id=»btnmodificar» class=»btn-warning»>Modificar</button>
<button id=»btneliminar» class=»btn-danger»>Eliminar</button>
<h5 style=»color:blue» id=»mensaje»></h5>

Publicamos el proyecto en nuestro recurso App Service llamado clientemensajeria.

¡Listo!

Podemos administrar los pedidos entrado en la siguiente enlace: clientemensajeria.azurewebsites.net/Mensajeria

 

Descripción: Un post que explica paso a paso el desarrollo de una Web API y una aplicación MVC, el consumo y los métodos de acción.
Autor: MOHAMED EL HALOUI
Curso: Microsoft MCSD Web Applications + SharePoint Apps
Centro: Tajamar
Año académico: 2016-2017
https://www.linkedin.com/in/melhaloui

Leave a Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.