Ahora continuaremos con la implementación del servicio que hemos creado desde las entradas anteriores, puedes acceder a nuestra entada anterior desde aquí.
Pues bien ahora vamos a desarrollar las peticiones faltantes, para ello agregaremos las siguientes lineas a nuestro archivo Clientes.js:
$(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");
}
}
});
}
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("No se pudo obtener informacion mediante AJAX");
}
}
});
}
function crearCliente(nuevoCliente) {
$.ajax({
url: "/api/clientes/",
data: JSON.stringify(nuevoCliente),
type: "POST",
contentType: "application/json;charset=utf-8",
success: function(data) {
if (data != null) {
alert("El nuevo cliente ha sido creado con el Id " + data.Id);
recuperarClientes();
} else {
alert("No se ha podido almacenar al cliente, por favor intentelo nuevamente");
}
}
});
}
function actualizarCliente(cliente, callback) {
$.ajax({
url: "/api/clientes",
data: JSON.stringify(cliente),
type: "PUT",
contentType: "application/json;charset=utf-8",
statusCode: {
200: function () {
callback();
recuperarClientes();
},
404: function() {
alert("Cliente no encontrado!");
}
}
});
}
function eliminarCliente(id) {
$.ajax({
url: "/api/clientes/" + id,
data: {},
type: "DELETE",
success: function () {
recuperarClientes();
alert("Se ha eliminado al cliente");
}
});
}
recuperarClientes();
$('#buscarCliente').click(function() {
var id = $('#IdCliente').val();
if (id != null) {
buscarCliente(id);
} else {
alert('No existe el cliente');
}
});
$('#crearCliente').click(function () {
var nuevoCliente = {
Nombre: $("#NombreCliente").val(),
Apellido: $("#ApellidoCliente").val()
};
crearCliente(nuevoCliente);
});
$("#actualizarCliente").click(function() {
var cliente = {
Id: $("#Id").val(),
Nombre: $("#NombreClienteM").val(),
Apellido: $("#ApellidoClienteM").val()
};
actualizarCliente(cliente, function() {
alert("El Cliente se ha actualizado... En la db el cambio si seria persistente");
});
});
$("#eliminarCliente").click(function () {
var id = $('#IdEliminar').val();
eliminarCliente(id);
});
});
Con estas modificaciones en el Script podremos utilizar los verbos PUT, DELETE y POST. Completando nuestro ejemplo. Ahora daremos vida a estas peticiones en nuestro servicio REST, actualizando nuestro archivo ClientesController con el siguiente código:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Runtime.Remoting;
using System.Web;
using System.Web.Http;
using System.Web.Http.Description;
using Microsoft.Ajax.Utilities;
using WebApiRest.Models;
namespace WebApiRest.Controllers
{
public class ClientesController : ApiController
{
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;
}
//GET /api/clientes/1
public Cliente Get(int id)
{
var cliente = clientes.SingleOrDefault(c => c.Id == id);
if (cliente != null)
{
return cliente;
}
return null;
}
//POST /api/clientes/5/Luis
[ResponseType(typeof(Cliente))]
public IHttpActionResult Post(Cliente nuevoCliente)
{
nuevoCliente.Id = clientes.Select(c => c.Id).Max() + 1;
clientes.Add(nuevoCliente);
//return Ok(clientes);
return CreatedAtRoute("DefaultApi", new { id = nuevoCliente.Id }, nuevoCliente);
}
//PUT /api/clientes/5/Luis
public HttpResponseMessage Put(Cliente clienteUpdate)
{
var cliente = clientes.SingleOrDefault(c => c.Id == clienteUpdate.Id);
if (cliente != null)
{
cliente.Nombre = clienteUpdate.Nombre;
cliente.Apellido = clienteUpdate.Apellido;
return new HttpResponseMessage(HttpStatusCode.OK);
}
throw new HttpResponseException(HttpStatusCode.NotFound);
}
//DELETE /api/clientes/5
[ResponseType(typeof(Cliente))]
public HttpResponseMessage Delete(int id)
{
var cliente = clientes.SingleOrDefault(c => c.Id == id);
if (cliente != null)
{
clientes.Remove(cliente);
return new HttpResponseMessage(HttpStatusCode.OK);
}
throw new HttpResponseException(HttpStatusCode.NotFound);
}
}
}
Ahora agregaremos el interfaz necesario para poder enviar la información de las peticiones JQuery al servicio REST, quedando la vista de la siguiente manera:
La modificación de la vista anterior nos dará una salida como la siguiente:
Cuando tengamos esto listo, entonces debemos recompliar nuestro proyecto y procederemos a ejecutarlo y a realizar las pruebas que muestran las imágenes a continuación:
@{
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"/>
<h2>Crear cliente</h2>
@Html.Label("Nombre:")
@Html.TextBox("NombreCliente")
@Html.Label("Apellido:")
@Html.TextBox("ApellidoCliente")
<input type="button" id="crearCliente" value="Crear" />
<h2>Actualizar cliente</h2>
@Html.Label("Id:")
@Html.TextBox("Id")
@Html.Label("Nombre:")
@Html.TextBox("NombreClienteM")
@Html.Label("Apellido:")
@Html.TextBox("ApellidoClienteM")
<input type="button" id="actualizarCliente" value="Actualizar" />
<h2>Eliminar cliente</h2>
@Html.Label("Id:")
@Html.TextBox("IdEliminar")
<input type="button" id="eliminarCliente" value="Eliminar" />
La modificación de la vista anterior nos dará una salida como la siguiente:
Cuando tengamos esto listo, entonces debemos recompliar nuestro proyecto y procederemos a ejecutarlo y a realizar las pruebas que muestran las imágenes a continuación:
Crear Cliente
 |
 |
Actualizar Cliente
|
 |
Eliminar Cliente
 |
 |
Bien ahora hemos terminado de construir nuestro servicio REST, con esto tenemos clara la base de funcionamiento de este tipo de servicio. En la siguiente entrega modificaremos este ejemplo terminado para que la información sea consistente en una base de datos.
