Consumo Web API en Azure desde cliente
En este video tutorial voy a crear una aplicación en la que haré un Web Service que devolverá la información de mis clientes que están en mi Base de Datos de Azure. En mi API, tendré los métodos GET, PUT, POST y DELETE en RestFul y formatearé la salida de la respuesta JSON para ser consumida por un cliente.
Así, visualizaremos primero cómo crear la Web API con acceso a datos y poder llamarlos desde dicho servicio RestFul. Para ello, utilizaré un acceso a datos desde nuestra aplicación, concretamente, Entitiy Framework con la base de datos CLIENTES de Azure.
Después, tendré otro proyecto MVC para obtener dichos métodos (GET, PUT, POST y DELETE.). Para ello, crearé una página que consumirá el proyecto API en Azure desde cliente, es decir, con HTML5 y Ajax.
Lo primero será crear un nuevo proyecto Aplicación Web ASP .NET llamado ConsumoWebApiCliente. Será un proyecto MVC Empty con las librerías de tipo Web API.
Antes de crear un nuevo elemento Entity Framework, hay que asegurarse de que la tabla de la Base de Datos que vamos a usar tiene Primary Key. En mi ejemplo, la clave primaria de mi tabla CLIENTES será el IDCLIENTE.
Una vez, confirmado este punto, ahora sí, sobre Models agregamos un nuevo elemento Entity Framework llamado ContextoClientes y agregamos la tabla CLIENTES de nuestra base de datos.
El siguiente paso, será crear un modelo que realizará diferentes búsquedas sobre los clientes de mi tabla para devolver contenidos al API.
Sobre Models, agregaré una nueva clase llamada ModeloClientes. En ella, estarán los métodos para las búsquedas.
A continuación, sobre la carpeta Controllers, agregamos un nuevo controlador llamado ClientesController de tipo API Controller Empty.
Ahora, es necesario eliminar la salida XML mediante el archivo WebApiConfig.cs.
public static void Register(HttpConfiguration config) {
// Web API configuration and services
config.Formatters.Remove(config.Formatters.XmlFormatter);
Y ya podremos comprobar las llamadas en los múltiples métodos GET de nuestra URL.
A continuación, podemos a darle formato a los datos. Para ello, hay que agregar la librería NewtonJson.json del paquete NuGet. Dependiendo de la versión MVC, la librería ya vendrá incluida, por lo que en este caso, solo habría que actualizarla.
Mediante las decoraciones que ofrece JSON, indicaremos qué propiedades sean expuestas en la salida. En este caso, en la clase CLIENTES.cs indicaré que el campo IDCLIENTE se llamará CLAVE.
Y podemos comprobar que al consumir el servicio, los datos han cambiado.
A continuación, debemos publicar la API en Azure y comprobar su funcionalidad.
Entramos dentro del portal Azure y configuramos CORS para admitir todos los orígenes.
Una vez que funciona la API y está publicada en Azure, vamos a Visual Studio, y creo un nuevo proyecto de tipo MVC que llamaré ClienteApiClientes.
Sobre la vista Home, Index, creamos nuestro Script para acceder a los datos.
A continuación, hacemos la funcionalidad de las peticiones Ajax al servicio Api. Para ellos, primero creamos una función JavaScript para cargar todos los clientes en el desplegable.
Después, creamos una funcionalidad para buscar los clientes por su id y cada uno de los botones que necesitamos.
Lo mismo con los botones para eliminar, insertar y modificar.
Por último, realizamos el diseño de la página Index.
Arrancamos el MVC, con la API también arrancada y comprobamos que el cliente consume los datos de la API y realiza todas las funcionalidades de los métodos GET, PUT, POST y DELETE.
