Crear un proyecto de API web

A continuación, utilizaremos ASP.NET Web API para crear una API web que devuelva
una lista de productos. La página web de front-end usa jQuery para mostrar los
resultados.

Inicie Visual Studio y seleccione Nuevo proyecto desde la página de inicio. O bien,
desde el menú Archivo, seleccione Nuevo y luego Proyecto.

En el panel Plantillas, seleccione Plantillas instaladas y expanda el nodo Visual

C# . En Visual C# , seleccione Web. En la lista de plantillas de proyecto,
seleccione Aplicación web ASP.NET . Nombre el proyecto "AppProductos" y
haga clic en Aceptar.
En el cuadro de diálogo Nuevo proyecto ASP.NET , seleccione la plantilla vacía . En
"Agregar carpetas y referencias principales para", verifique la API web . Haga clic
en Aceptar
Agregar un modelo
Un modelo es un objeto que representa los datos en su aplicación. ASP.NET Web API
puede serializar automáticamente su modelo a JSON, XML o algún otro formato, y
luego escribir los datos serializados en el cuerpo del mensaje de respuesta
HTTP. Siempre que un cliente pueda leer el formato de serialización, puede
deserializar el objeto. La mayoría de los clientes pueden analizar XML o
JSON. Además, el cliente puede indicar qué formato desea estableciendo el
encabezado Aceptar en el mensaje de solicitud HTTP.2

Comencemos por crear un modelo simple que represente un producto.

Si Solution Explorer no está ya visible, haga clic en el menú Ver y

seleccione Solution Explorer. En el Explorador de soluciones, haga clic con el botón
derecho en la carpeta Modelos. En el menú contextual, selecciona Agregar y luego
selecciona Clase.

Nombre la clase "Product". Agregue las siguientes propiedades a la Clase Product .

namespace AppProductos.Models
{
public class Product
{
public int Id { get; set; }
public string Name { get; set; }
public string Category { get; set; }
public decimal Price { get; set; }
}
}
Agregar un controlador
En la API web, un controlador es un objeto que maneja las solicitudes HTTP. Agregaremos
un controlador que puede devolver una lista de productos o un único producto especificado
por ID.
En el Explorador de soluciones, haga clic con el botón derecho en la carpeta
Controladores. Seleccione Agregar y luego seleccione Controlador.

En el cuadro de diálogo Agregar andamio, seleccione Controlador de API web -

Vacío. Haga clic en Agregar.
En el cuadro de diálogo Agregar controlador, nombre el controlador
"ProductsController". Haga clic en Agregar.

El andamio crea un archivo llamado ProductsController.cs en la carpeta

Controladores.
Si este archivo no está abierto, haga doble clic en el archivo para abrirlo. Reemplace
el código en este archivo con lo siguiente:

using AppProductos.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;

namespace AppProductos.Controllers
{
public class ProductsController : ApiController
{
Product[] products = new Product[]
{
new Product { Id = 1, Name = "Sopa de Tomate", Category =
"Comestibles", Price = 1 },
new Product { Id = 2, Name = "Yo-yo", Category = "Juguetes", Price =
3.75M },
new Product { Id = 3, Name = "Martillo", Category = "Herramientas",
Price = 16.99M },
new Product { Id = 4, Name = "Atun", Category = "Comestibles", Price =
1.67M },
};

public IEnumerable<Product> GetAllProducts()

{
 return products;
}

public IHttpActionResult GetProduct(int id)

{
var product = products.FirstOrDefault((p) => p.Id == id);
if (product == null)
{
return NotFound();
}
return Ok(product);
}
}
}

Para mantener el ejemplo simple, los productos se almacenan en una matriz fija
dentro de la clase de controlador. Por supuesto, en una aplicación real, consultaría
una base de datos o usaría alguna otra fuente de datos externa.8

El controlador define dos métodos que devuelven productos:

 El GetAllProducts método devuelve toda la lista de productos como un

tipo IEnumerable <Product>.
 El GetProduct método busca un solo producto por su ID.

¡Eso es! Usted tiene una API web en funcionamiento. Cada método en el controlador
corresponde a uno o más URI:

Método del controlador URI

GetAllProducts / api / productos

GetProduct / api / products / id

Para el GetProduct método, la identificación en el URI es un marcador de

posición. Por ejemplo, para obtener el producto con ID de 5, el URI sí lo
está api/products/5
Para obtener más información acerca de cómo la API web enruta las solicitudes HTTP
a los métodos de controlador.
Llamar a la API web con Javascript y jQuery
En esta sección, agregaremos una página HTML que usa AJAX para llamar a la API
web. Usaremos jQuery para hacer llamadas AJAX y también para actualizar la
página con los resultados.

En el Explorador de soluciones, haga clic con el botón derecho en el proyecto y

seleccione Agregar, luego seleccione Nuevo elemento

En el cuadro de diálogo Agregar elemento nuevo, seleccione

el nodo web en Visual C # y luego seleccione el elemento de la página
HTML . Nombre la página "index.html".
Reemplace todo en este archivo con lo siguiente:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Product App</title>
</head>
<body>

<div>
<h2>Todos los Productos </h2>
<ul id="products" />
</div>
<div>
<h2>Buscar por ID</h2>
<input type="text" id="prodId" size="5" />
<input type="button" value="Search" onclick="find();" />
<p id="product" />
</div>

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-
2.0.3.min.js"></script>
<script>
var uri = 'api/products';

$(document).ready(function () {
// Send an AJAX request
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of products.
 $.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});

function formatItem(item) {
return item.Name + ': $' + item.Price;
}

function find() {
var id = $('#prodId').val();
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}
</script>
</body>

</html>
Hay varias formas de obtener jQuery. En este ejemplo, utilicé Microsoft Ajax
CDN . También puede descargarlo desde http://jquery.com/ , y la plantilla del
proyecto ASP.NET "Web API" también incluye jQuery.

Obtener una lista de productos

Para obtener una lista de productos, envíe una solicitud HTTP GET a "/ api /
products".

La función jQuery getJSON envía una solicitud AJAX. Para la respuesta contiene una
matriz de objetos JSON. La done función especifica una devolución de llamada que
se llama si la solicitud tiene éxito. En la devolución de llamada, actualizamos el DOM
con la información del producto.

$(document).ready(function () {
// Send an AJAX request
$.getJSON(uri)
.done(function (data) {
// On success, 'data' contains a list of products.
$.each(data, function (key, item) {
// Add a list item for the product.
$('<li>', { text: formatItem(item) }).appendTo($('#products'));
});
});
});
Obtener un producto por ID

Para obtener un producto por ID, envíe una solicitud HTTP GET a "/ api / products
/ id ", donde id es la identificación del producto.

function find() {
var id = $('#prodId').val();
$.getJSON(uri + '/' + id)
.done(function (data) {
$('#product').text(formatItem(data));
})
.fail(function (jqXHR, textStatus, err) {
$('#product').text('Error: ' + err);
});
}

Todavía llamamos getJSON para enviar la solicitud de AJAX, pero esta vez
colocamos la identificación en el URI de solicitud. La respuesta de esta solicitud es
una representación JSON de un solo producto.

Ejecutando la aplicación
Presione F5 para comenzar a depurar la aplicación. La página web debería verse
como la siguiente:

Para obtener un producto por ID, ingrese la ID y haga clic en Buscar

Si ingresa una ID inválida, el servidor devuelve un error de HTTP: