Creación y Consumo en Cliente Core de WEB API

El objetivo del siguiente post es adquirir los conocimientos necesarios para la creación y consumo de Web Api para ello el siguiente documento esta acompañado de un ejemplo práctico junto con imágenes de apoyo.

El ejemplo consiste en la creación de un Web Api que consume de una base de datos de sql (creada por nosotros mismos) esta base de datos es sobre coches y sus características. Posteriormente a la creación del Web Api, procederemos a su consumo desde el cliente con un proyecto Mvc.Core.

En primer lugar, procedemos a la creación del Web Api siguiendo los siguientes pasos.

Creamos un nuevo proyecto de tipo MVC Empty con la selección de Web Api a la cual hemos llamado ApiPostCreacionyConsumo.

Agregamos el NuGet de Entity Framework

Sobre Models, creamos una nueva clase llamada Coche en esta clase mapearemos la tabla con las características del coche que tenemos en nuestra base de datos de SQL.

Creamos una nueva carpeta llamada Data y una clase llamada CochesContext

Incluimos la cadena de conexión dentro del fichero Web.config

Creamos una carpeta llamada Repositories y una clase llamada RepositoryCoches

Sobre la carpeta Controllers, creamos un nuevo controlador de tipo Web Api Empty llamado CochesController

Por último, indicamos que solamente queremos el formato Json para nuestra Api en la carpeta App_Start y en la clase WebApiConfig

Publicamos nuestra Api en Azure con un nombre único

Habilitamos CORS en Azure una vez subido el App Service.

https://www.flickr.com/photos/170033104@N04/40574510273/in/dateposted-public/

En nuestro ejemplo hemos dejado la Api en localhost sin subirla a la nube, aunque es conveniente subirla siempre para poder trabajar desde Azure.

Una vez credo el Web Api, continuamos con la creación de un nuevo proyecto de tipo MVC Core llamado ClienteApiPostCreacionyConsumo utilizando la plantilla por defecto de MVC.

Sobre la carpeta Controllers, creamos un nuevo controlador llamado CochesController de tipo MVC Empty.

Creamos la página Index.cshtml donde mostraremos las tablas con las características de los coches y el buscador de coche por marca de este. Esta página es la que consume en cliente del Web Api

Para acceder a la página Index hemos insertado un enlace en el _Layout que nos redirige a dicha página.

Como en la nuestra Api hemos mapeado el modelo Coche aquí cogemos dicho modelo de la Api por lo que no tenemos que mapear.

Nos creamos una Carpeta Repositories y en dicha Carpeta una Interface llamada IRepositoryApiCoches con los método empleados en el CochesRepository del Api.

Añadimos también en la carpeta Repositories la clase RepositoryApiCoches con las tareas que llaman a los métodos del Api por lo que son asíncronos , debido a esto hacemos uso de async y await.