Durante estos posts nos enfocaremos principalmente en el Lado del Cliente (HTML y Javascript) pero de todas maneras necesitamos un Lado del Servidor para trabajar.
Este post lo dedicaremos a implementar el lado del servidor, para esto utilizaremos ASP.NET MVC 4 y ASP.NET Web API, aunque podría ser cualquier otra tecnología de nuestro agrado.
Nota: ASP.NET MVC 4 y ASP.NET Web API actualmente se encuentran en Beta y pueden ser descargados de aquí.
Al aplicar estas tecnologías, el lado del servidor quedaría de la siguiente manera:
ASP.NET MVC 4
Utilizaremos esta tecnología para organizar y crear los recursos HTML, Javascript y CSS que luego serán servidos por parte del servidor.
Lo primero que haremos será crear un proyecto ASP.NET MVC 4 en blanco.
Agregamos la hoja de estilos y modificamos el _Layout.cshtml según el Bakery Template de WebMatrix.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Fourth Coffee -@ViewBag.Title</title>
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/css")" rel="stylesheet" type="text/css" />
<link href="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Content/themes/base/css")" rel="stylesheet" type="text/css" />
<script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl("~/Scripts/js")"></script>
</head>
<body>
<div id="page">
<div id="header">
<p class="site-title">
<a href="~/">Fourth Coffee</a></p>
<ul id="menu">
<li><a href="~/">Home</a></li>
<li><a href="~/About">About Us</a></li>
</ul>
</div>
<div id="body">
@RenderBody()
</div>
<div id="footer">
©@DateTime.Now.Year - Fourth Coffee
</div>
</div>
</body>
</html>
Creamos la clase HomeController que retorne la única vista de nuestra aplicación.
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
}
ASP.NET Web API
Nos permite crear y exponer de manera muy simple servicios bajo el protocolo HTTP siguiendo un estilo de arquitectura REST. Algunos de sus beneficios son:- Crear servicios REST.
- Consultas ODATA.
- Diferentes tipos de formatos: JSON, XML, etc.
- Soporte de varios elementos ya existentes dentro ASP.NET: Model Binding, Routing, Validation, Filters, etc.
- Soporte de inyección de dependencias.
- Fácilmente testeable de manera unitaria.
Mediante ASP.NET Web API implementaremos nuestro Data Services endpoint para exponer servicios que envíen y reciban datos en formato JSON desde el cliente. Para esto realizaremos lo siguiente:
Creamos las clases del modelo para la aplicación y crearemos un DbContext típico de Entity Framework.
public class AppDbContext : DbContext
{
public AppDbContext() : base("bakery") { }
public IDbSet<Product> Products { get; set; }
}
Utilizando Nuget agregamos la referencia a AspNetWebApi.Data, luego creamos un controller que herede de AspNetWebApi.Data.DbDataController, los controllers dentro de Web API funcionan de manera muy similar a MVC y permiten exponer servicios HTTP.
También creamos un servicio que devuelva todos los productos en formato JSON.
public class ProductsController : DbDataController<AppDbContext>
{
public IQueryable<Product> Get()
{
return DbContext.Products.AsQueryable();
}
}
Nota: Retornar los datos como IQueryable y no como IEnumerable permite que se puedan realizar consultas ODATA.
Probamos nuestro servicio levantando toda la aplicación y accediendo a la siguiente URL: http://[domain]/api/products.
Esta URL corresponde a nuestro servicio HTTP, debido a que existe la siguiente ruta registrada dentro del Global.asax.
Asimismo, nuestro servicio HTTP dentro del controller tiene el nombre de “Get”, entonces por convención será mapeado automáticamente a todos los GET Request.
Por otro lado el servicio HTTP ha retornado XML, esto se debe a que Chrome envía por defecto en la cabecera de la solicitud Accept: application/xml; si en la cabecera se envía Accept: application/json, el servicio retornaría automáticamente los datos en formato JSON.
Por el momento esto es todo lo que necesitamos implementar en el lado del servidor.
Recursos Adicionales
- http://www.asp.net/mvc/mvc4
- http://weblogs.asp.net/scottgu/archive/2012/02/23/asp-net-web-api-part-1.aspx
- http://sebys.com.ar/2012/04/23/rest-con-asp-net-web-api/
Saludos.
