Ahora continuaremos con la implementación de nuestro servicio REST, sin embargo si no has visto la primera parte del post te recomiendo que lo hagas aquí para poder entrar en contexto de lo que haremos a continuación.
Pues teniendo en cuenta lo que desarrollamos en el ejemplo anterior, hemos corroborado que nuestro código fuente es funcional, por lo que explicaremos su funcionamiento y su implementación.
private List<Cliente> clientes = new List<Cliente>
{
new Cliente() {Id = 1,Nombre = "Luis",Apellido = "Chavez"},
new Cliente() {Id = 2,Nombre = "Juan",Apellido = "Perez"},
new Cliente() {Id = 3,Nombre = "Antonio",Apellido = "Fuentes"}
};
//GET /api/clientes
public IEnumerable<Cliente> Get()
{
return clientes;
}
Pues bien, primero que vemos es una lista que simulará nuestro repositorio de datos, que cuenta con 3 clientes que corresponden a nuestra entidad Cliente que creamos en nuestra entrega anterior. Posteriormente encontramos el método Get que corresponderá al verbo HTTP que habíamos comentado y que nos permitirá hacer una petición para que se nos entregue la lista de clientes y esto lo probamos en nuestra entrega anterior en el navegador, sin embargo aunque esto es posible no queremos consumirlo de esta manera, pero entonces se preguntarán ¿Cómo lo consumiremos?.
Pues bien lo primero que haremos es desviarnos un poco de nuestro controlador para poder ver las rutas de nuestra aplicación, similar a un proyecto MVC, para ello abrimos el archivo Global.asax y nos muestra un método que se ejecuta al inicio de nuestra aplicación que carga las configuraciones de nuestro sitio, entre ellas se encuentran las rutas de nuestro API, entonces ahora vamos a nuestra tabla de rutas que encontraremos en el archivo RouteConfig.cs que se encuentra dentro de la carpeta App_Start y dentro de este archivo encontraremos lo siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace WebApiRest
{
public class RouteConfig
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
}
}
Acá podemos ver que nuestra tabla de rutas nos muestra la misma configuración que podemos encontrar en cualquier aplicacion MVC de ASP.NET, en donde invocamos a nuestros métodos de acción el controlador al que pertenece según el estándar. Esto es lo que permite que se lance nuestra aplicación en el Home que mostramos en la entrega anterior, pero aún no explica como es que se pudo acceder al método ClientesController si en nuestro navegador digitamos "/api/clientes", pues bien en este tipo de aplicaciones se definen las rutas de las peticiones aparte, ya que este archivo de rutas manejará el sitio general y en el archivo que se mostrará a continuación las rutas del servicio REST y esto lo encontramos en el archivo WebApiConfig.cs y encontramos lo siguiente:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Mvc;
namespace WebApiRest
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional}
// /{name}
//,name=UrlParameter.Optional
);
}
}
}
Pues acá encontramos la razón del porque nuestra aplicación fue capaz de resolver la ruta "/api/clientes" y esto es porque se define el mapeo de la ruta del api de esta manera, sin embargo si lo deseamos podríamos personalizarla igual que la de otra aplicación MVC pero por estandar se suele dejar de esta manera, pero tal como comentaba en la entrega anterior si se desea nombrar a los métodos de manera diferente al estándar debemos modificar la ruta para que se le especifique la acción ya que por defecto si la dejamos como se encuentra entonces debemos utilizar los verbos HTTP ya que solamente de esa manera el servicio REST entendería las peticiones que se hagan. En nuestro ejemplo trabajaremos con el estandár.
Pues bien ahora de esta breve explicación continuaremos con la implementación para poder consumir nuestro primer método que corresponde al verbo GET, para ello debemos crear el método "GestionClientes" en el controlador Home, con el siguiente código:
public ActionResult GestionClientes()
{
return View();
}
Como podemos ver la acción solamente nos regresa una vista, sin embargo esta por el momento no existe, por lo que si invocamos el URI "/home/GestionClientes" obtendremos un error y para ello entonces crearemos una vista nueva dando clic derecho sobre el subdirectorio Home que se encuentra dentro del directorio Views y seleccionamos el menú Add -> View y creamos la vista GestionClientes, que corresponde al método de acción que hemos creado, como lo muestra la siguiente imagen:
Como pueden notar hemos seleccionado un Layout(equivalente al master page de Web Forms) para que se incluyan los archivos de CSS que dan el mismo estilo a la página principal. Ahora damos clic en Add par aregar la nueva vista a nuestro proyecto y debería tener un contenido similar a este:
@{
ViewBag.Title = "GestionClientes";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>GestionClientes</h2>
En esta vista debemos implementar las peticiones a nuestro servicio REST, pero ¿Cómo lo haremos?. Pues lo haremos mediante JQuery. Para ello incluiremos un archivo javascript en nuestro directorio "Scripts", el archivo tendrá el nombre "Clientes.js".
Ahora entonces estamos listos para implementar nuestro servicio, lo primero que haremos es desarrollar una función jquery que nos permita ejecutar el primero verbo HTTP, que sería GET para obtener la lista de los clientes, que corresponde a la lista que creamos en nuestro controlador de clientes, tal como lo muestra el siguiente código:
$(document).ready(function() {
function recuperarClientes() {
$.ajax({
url: '/api/clientes',
type: "GET",
data: { },
success: function (data) {
if (data != null) {
var target = $('#clientes');
target.empty();
for (var i = 0; i < data.length; i++) {
target.append('<li>'+ '('+data[i].Id+') '+data[i].Nombre + ' '+data[i].Apellido+'</li>' );
}
}
else {
alert("No se pudo obtener informacion mediante AJAX");
}
}
});
}
recuperarClientes();
});
En nuestro archivo JQuery hemos declarado la función de carga del documento en la cual se ejecutará la función "recuperarClientes()" que también se encuentra declarada en el cuerpo de la función de carga del documento, esto hará una petición AJAX a nuestro controlador, como se puede ver la url "/api/clientes" que es la ruta que hemos declarado para acceder a nuestro recurso y el tipo es una petición GET que corresponderá al método Get() que hemos declarado, se puede observar que en nuestro Web Api hemos podido sobrecargar este método ya que existe otro método con el nombre Get pero que necesita un parámetro entero, entonces justamente esta es la clave la petición negocia con el servicio REST el método GET que corresponde a la firma que no necesita parámetros, ya que "data: { }" se encuentra vacío, ya que no necesita ningún parámetro. Y ahora hacemos la inclusión de este script, modificando la vista de la siguiente manera:
@{
ViewBag.Title = "GestionClientes";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/Clientes.js")" type="text/javascript"></script>
<h2>Gestion de Clientes</h2>
<p id="clientes"></p>
Al ejecutar nuestro proyecto deberíamos tener una salida como esta:
Si hemos tenido esta salida en nuestro navegador entonces hemos hecho correctamente todos los pasos expuestos. Ahora entonces agregaremos a nuestra vista una caja de texto y un botón para buscar un cliente específico mediante su ID, para utilizar y mostrar que nuestro servicio REST entiende que método debe ejecutarse, modificando nuestra vista de la siguiente manera:
@{
ViewBag.Title = "GestionClientes";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Scripts/Clientes.js")" type="text/javascript"></script>
<h2>Gestion de Clientes</h2>
<p id="clientes"></p>
<h2>Buscar Clientes</h2>
@Html.TextBox("IdCliente")
<input type="button" id="buscarCliente" value="Buscar"/>
Y obtendríamos la siguiente salida en nuestra vista:
Ahora entonces debemos agregar la función buscarCliente a nuestro archivo javascript y posteriormente hacer que cuando hagamos submit al botón Buscar se ejecute dicha función, agregando el siguiente código:
function buscarCliente(codigo) {
$.ajax({
url: '/api/clientes/',
type: "GET",
data: {id:codigo},
success: function (data) {
if (data != null) {
var target = $('#clientes');
target.empty();
target.append('<li>' + '(' + data.Id + ') ' + data.Nombre + ' ' + data.Apellido + '</li>');
}
else {
alert("Código inexistente!");
}
}
});
}
$('#buscarCliente').click(function() {
var id = $('#IdCliente').val();
if (id != null) {
buscarCliente(id);
} else {
alert('No existe el cliente');
}
});
Ahora digitemos cualquiera de los tres códigos disponibles y obtendríamos en pantalla la muestra de ese cliente en específico y los demás desaparecerían. Así mismo si se digitamos un código que no existe obtendríamos un alert, tal como se muestran en las siguientes pantallas:
En la siguiente entrega terminaremos de abordar la implementación de nuestro servicio con los verbos PUT, DELETE y POST. Completando nuestro ejemplo.
No hay comentarios:
Publicar un comentario