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

En esta entrada vamos a ver cómo crear una Web API con métodos de acción CRUD (Create, Read, Update, Delete), y a consumirla desde el lado Cliente, en este caso una aplicación MVC. Utilizaré Visual Studio 2015 y Entity Framework para acceder a los datos.

Lo primero es saber qué es una Web API: Una API es una estructura o sistema que facilita la creación de servicios HTTP que pueden ser consumidos por una amplia variedad de clientes, desde exploradores a dispositivos móviles.

Para este ejemplo, utilizaré la tabla DEPT de la siguiente base de datos: Hospital.mdb

Antes de empezar, cuando tengamos la base de datos en nuestro SQL, debemos hacer la columna DEPT_NO primary key:

Una vez hecho esto, podemos empezar:

Creación de la API

Crear un nuevo proyecto ASP.NET Aplication en Visual Studio seleccionando la plantilla «Web Api», yo lo he llamado «WebApiConsumoCliente». Esto nos creará un proyecto con todo lo necesario para que podamos crear nuestra API con el mínimo esfuerzo y de una forma muy sencilla.
Lo siguiente es agregar sobre la carpeta «Models» un objeto ADO.NET Entity Data Model que yo llamaré «EntidadDepartamentos» y seleccionar la tabla DEPT:
El siguiente paso es crearnos una clase en la carpeta «Models» que utilizaremos para llenarla de los metodos que vamos a utilizar en nuestra API: Leer(GET), Insertar(POST), Modificar(PUT), Eliminar(DELETE). Yo la llamaré «FuncionesCRUD», y debería quedar tal que así:
Después debemos crear un controlador del tipo «Web Api Controller class», que hereda de ApiController, en el cual nos incluirá los métodos genéricos para los métodos GET, POST, PUT y DELETE, los cuales sustituiremos por los nuestros propios:
Por último, vamos a añadir en el método «Application_Start» del archivo «Global.asax» la siguiente línea para que nos devuelva los datos en formato JSON en lugar de XML:

Consumo de Web Api

Para este ejemplo consumiremos la api desde el mismo proyecto para simplificar código. Vamos a ello:

El primer paso es crear una zona en la carperta Views, que yo llamaré «Consumo», y su correspondiente controlador «ConsumoController» que únicamente devuelva la vista «Index», que he diseñado de la siguiente forma:
Después, creamos la sección «scripts» y dentro de ella esccribimos el siguiente código JQuery para que al cargar la página nos muestre los departamentos en la tabla:
Por último, añadir con JQuery las llamadas para el resto de métodos y asociarlos a cada botón. Debería quedar algo parecido a lo siguiente: