Control de excepciones con ASP.NET MVC

Generalmente, el hecho de no controlar las excepciones de una aplicación, y mostrar una página como la siguiente al usuario, supone una pérdida de calidad palpable en el producto.

En ASP.NET MVC podemos controlar estos mensajes redirigiendo al usuario a unas páginas más amigables y mostrando un mensaje menos alarmante de la aplicación. Si lo único que necesitamos es controlar excepciones personalizadas o aquellas que no pertenezcan a la rama de HttpException podríamos realizar los siguientes pasos:

  1. Habilitamos customErrors en el archivo web.config de la aplicación.
    <customErrors mode="On"/>

  2. Utilizamos el action filter HandleError, ofrecido por ASP.NET MVC, en el controlador, el cual redirige todas las excepciones a la página Error.aspx por defecto ubicada en Views/Shared, aunque podemos indicarle otra vista en el atributo.
  3. using System;
    using System.Web.Mvc;

    namespace HandleErrorASPNETMVC2RC2.Controllers
    {
    [HandleError(Order = 2)]
    public class HomeController : BaseController
    {
    public ActionResult Index()
    {
    ViewData["Message"] = "Welcome to ASP.NET MVC!";

    return View();
    }

    [HandleError(ExceptionType = typeof(DivideByZeroException), View = "DivideByZeroError", Order = 1)]
    public ActionResult DivideByZeroExceptionAction()
    {
    throw new DivideByZeroException("DivideByZeroException is handled!");
    }

    }
    }

Si quisiéramos controlar excepciones de tipo HttpException como la siguiente:

public ActionResult NotFoundHttpExcepcion()
{
throw new HttpException(404, "Not Found duh!");
}

No sería posible solamente con el action filter proporcionado.

Tenemos varias alternativas para manejar estas excepciones. En este post, voy a exponer las dos que me han resultado más factibles:

HACIENDO USO DE APPLICATION_ERROR (GLOBAL.ASAX)

Podríamos definir un comportamiento para los errores de la aplicación, a través de Application_Error, de la siguiente manera (obtenido a través de stackoverflow):

protected void Application_Error(object sender, EventArgs e)
{
var exception = Server.GetLastError();

Response.Clear();

var httpException = exception as HttpException;

var routeData = new RouteData();
routeData.Values.Add("controller", "HttpError");

if (httpException == null)
routeData.Values.Add("action", "Index");
else
{
switch (httpException.GetHttpCode())
{
case 404:
routeData.Values.Add("action", "NotFound");
break;
case 403:
routeData.Values.Add("action", "Forbidden");
break;
default:
routeData.Values.Add("action", "Default");
break;
}
}

routeData.Values.Add("error", exception);

Server.ClearError();

IController errorController = new HttpErrorController();
errorController.Execute(new RequestContext(new HttpContextWrapper(Context), routeData));

}

En este caso tenemos un controlador llamado HttpError con una serie de vistas: Index, NotFound, Forbidden y Default. La parte positiva de esta forma es que, además de tener la posibilidad de redirigir a una vista personalizada, podemos realizar alguna acción, a través del controlador, antes de finalizar la petición. Además podemos utilizar este método de forma conjunta con HandleError para cubrir todas las excepciones posibles.

SOBREESCRIBIENDO ONEXCEPTION

Por otro lado, si lo que queremos es utilizar un atributo común para todas las excepciones, incluyendo HttpExceptions, podemos sobrescribir el action filter HandleError ampliando su funcionalidad de la siguiente manera:

using System.Web;
using System.Web.Mvc;

namespace HandleErrorASPNETMVC2RC2
{
public class HandleErrorHttpException : HandleErrorAttribute
{

public override void OnException(ExceptionContext filterContext)
{
if (!filterContext.IsChildAction && (!filterContext.ExceptionHandled && filterContext.HttpContext.IsCustomErrorEnabled))
{
var httpException = filterContext.Exception as HttpException;
if (httpException != null)
{
var controllerName = (string)filterContext.RouteData.Values["controller"];
var actionName = (string)filterContext.RouteData.Values["action"];
var model = new HandleErrorInfo(filterContext.Exception, controllerName, actionName);

var viewResult = new ViewResult
{
ViewName = View,
MasterName = Master,
ViewData = new ViewDataDictionary<HandleErrorInfo>(model),
TempData = filterContext.Controller.TempData
};
filterContext.Result = viewResult;
filterContext.ExceptionHandled = true;
filterContext.HttpContext.Response.Clear();
filterContext.HttpContext.Response.StatusCode = httpException.GetHttpCode();
filterContext.HttpContext.Response.TrySkipIisCustomErrors = true; //Deshabilita el manejo de errores de IIS
}
else
base.OnException(filterContext);
}
}
}
}

De esta manera, todas aquellas excepciones que pertenezca a HttpException pasarán por el primer bloque y  para cualquier otro tipo de excepción utilizará el método de la clase base.

Implementando esta segunda opción, podemos utilizar el nuevo action filter para controlar los errores de nuestros controladores.

using System;
using System.Web;
using System.Web.Mvc;

namespace HandleErrorASPNETMVC2RC2.Controllers
{
[HandleErrorHttpException(Order = 2)]
public class HomeController : BaseController
{
public ActionResult Index()
{
ViewData["Message"] = "Welcome to ASP.NET MVC!";

return View();
}

[HandleErrorHttpException(ExceptionType = typeof(DivideByZeroException), View = "DivideByZeroError", Order = 1)]
public ActionResult DivideByZeroExceptionAction()
{
throw new DivideByZeroException("DivideByZeroException is handled!");
}

public ActionResult Fordibben()
{
throw new HttpException(403, "Forbidden duh!");
}

[HandleErrorHttpException(ExceptionType = typeof(HttpException), View = "NotFound", Order = 1)]
public ActionResult NotFoundHttpExcepcion()
{
throw new HttpException(404, "Not Found duh!");
}

[HandleErrorHttpException(ExceptionType = typeof(InvalidOperationException), View = "InvalidOperationException", Order = 1)]
public ActionResult ViewDoesntExist()
{
return View("Doesnt Exist");
}
}
}

Nota: Cuando intentamos realizar un retorno a una vista que no existe el tipo de excepción es InvalidOperationException como se muestra en el último caso.

Espero que haya sido de utilidad.

¡Saludos!

Definiendo el primer layout con Silverlight

Después de conocer los distintos tipos de proyectos disponibles con Silverlight 3, a día de hoy última versión estable (Silverlight 4 Beta disponible), podemos comenzar a crear una aplicación de lo más sencilla. Antes de comenzar con el layout, vamos a crear un proyecto de tipo Silverlight Application.

Al pulsar en OK nos aparece una nueva ventana:

En este cuadro de diálogo nos están ofreciendo la posibilidad de agregar además un proyecto web a la solución. Toda aplicación Silverlight necesita un soporte web donde insertarse, debido a la plataforma en la que se basa.
Seleccionamos la opción por defecto, que es ASP.NET Web Application Project, y pulsamos OK para que adjunte este proyecto a la solución.

 

Por defecto, la página de inicio en este caso sería PrimeraAppSLTestPage.aspx donde está incrustada la aplicación Silverlight, PrimeraAppSL, para poder mostrarla en el navegador. ¿Dónde está alojada la misma?

Si echamos un vistazo a la página generada observamos lo siguiente:

<%@ Page Language="C#" AutoEventWireup="true" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>PrimeraAppSL</title>
<style type="text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
text-align:center;
}
</style>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}

var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;

if (errorType == "ImageError" || errorType == "MediaError") {
return;
}

var errMsg = "Unhandled Error in Silverlight Application " + appSource + "n" ;

errMsg += "Code: "+ iErrorCode + " n";
errMsg += "Category: " + errorType + " n";
errMsg += "Message: " + args.ErrorMessage + " n";

if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " n";
errMsg += "Line: " + args.lineNumber + " n";
errMsg += "Position: " + args.charPosition + " n";
}
else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " n";
errMsg += "Position: " + args.charPosition + " n";
}
errMsg += "MethodName: " + args.methodName + " n";
}

throw new Error(errMsg);
}
</script>
</head>
<body>
<form id="form1" runat="server" style="height:100%">
<div id="silverlightControlHost">
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
<param name="source" value="ClientBin/PrimeraAppSL.xap"/>
<param name="onError" value="onSilverlightError" />
<param name="background" value="white" />
<param name="minRuntimeVersion" value="3.0.40818.0" />
<param name="autoUpgrade" value="true" />
<a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
<img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style:none"/>
</a>
</object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
</form>
</body>
</html>

A parte de una pequeña definición de estilos y de la creación de una función javascript, que trata los errores que se puedan producir de Silverlight, vemos que se especifica un div dentro del formulario del body, el cual contiene un objeto con los parámetros relativos a nuestra aplicación, tales como el tipo de aplicación y versión, la ubicación de la aplicación, la función a la que debe llamar en caso de error (la función javascript mencionada anteriormente), el color de fondo, si está permitida la actualización del plugin de manera automática y un link de referencia al mismo por si no está instalado en el cliente.

LAYOUT

Para comenzar con algo simple, y suponiendo que tenemos nociones de Web Forms, vamos a enfocarlo de la siguiente manera: Imaginemos que tenemos un formulario con Web Forms de lo más simple con una serie de campos para rellenar y queremos pasarlo a Silverlight.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AppWebForm._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="formulario" runat="server">
<div>
<div>
<asp:Label runat="server" AssociatedControlID="txtName" ID="lblName" Text="Name:" />
<asp:TextBox runat="server" ID="txtName" />
</div>
<div>
<asp:Label runat="server" AssociatedControlID="txtLastName" ID="lblLastName" Text="Last Name:" />
<asp:TextBox runat="server" ID="txtLastName" />
</div>
<div>
<asp:Label runat="server" AssociatedControlID="dddlGenre" ID="lblGenre" Text="Genre:" />
<asp:DropDownList runat="server" ID="dddlGenre">
<asp:ListItem Text="Female" Value="F" />
<asp:ListItem Text="Male" Value="M" />
</asp:DropDownList>
</div>
<div>
<asp:Label runat="server" AssociatedControlID="calBirthday" ID="lblBirthday" Text="Birthday" />
<asp:Calendar runat="server" ID="calBirthday" Caption="Birthday"></asp:Calendar>
</div>
<asp:Button runat="server" ID="btnEnviar" Text="Send" />
</div>
</form>
</body>
</html>

En Silverlight no utilizamos HTML para la creación de la interfaz de usuario sino XAML (eXtensible Application Markup Language), el cuál ya se utilizaba para Windows Presentation Foundation.

En el proyecto de Silverlight tenemos dos archivos con extensión xaml: App.xaml y MainPage.xaml. El primero de ellos se utiliza para declarar recursos compartidos y manejar eventos globales, de la misma manera que un archivo Global.asax en aplicaciones ASP.NET, y el segundo es donde definiremos la interfaz de usuario.

Para comenzar a «dibujar» la UI, abrimos el archivo MainPage.xaml donde inicialmente observamos el siguiente contenido:

<UserControl x:Class="PrimeraAppSL.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot">

</Grid>
</UserControl>

En el primer etiquetado tenemos la defición del control, asociado a una clase que actuará como code behind, una serie de espacios de nombres y por último las medidas del control. Dentro de él, de forma predeterminada, se define un Grid.
Llegados a este punto, conviene hacer una distinción: Existen generalmente dos tipos de elementos dentro del layout: contenedores y controles. Todos ellos están incluidos dentro de System.Windows.Controls. Los que heredan de Panel se consideran contenedores, los cuales nos ayudarán a ubicar a los controles dentro de la interfaz. Los contenedores más comunes son el Grid, Canvas y StackPanel, aunque hay disponibles otros que veremos más adelante.

A grandes rasgos, podemos decir que el Grid posiciona sus elementos a semejanza de una tabla o cuadrilla, el Canvas los ubica de una forma similar a la que acostumbramos con CSS (Top, Left) y en el caso del StackPanel podemos utilizarlo, generalmente, como un conjunto de controles en línea dándole un sentido vertical o horizontal. Para este ejemplo utilizaremos el Grid como contenedor.

Antes de comenzar a añadir los controles, necesitamos definir cómo será nuestro Grid.

<UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Class="PrimeraAppSL.MainPage"
d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Margin="5" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="60" />
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
</Grid>
</UserControl>

En este caso, le estamos pidiendo que el contenedor esté compuesto de 5 líneas con un alto automático y un mínimo de 60 y dos columnas, la primera con un width determinado y la segunda con un mínimo de 60.
Por último, necesitamos añadir y posicionar los controles dentro del grid definido, por ejemplo de la siguiente forma:

<UserControl xmlns:controls="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls" 
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d" x:Class="PrimeraAppSL.MainPage"
d:DesignWidth="640" d:DesignHeight="480">
<Grid x:Name="LayoutRoot" Margin="5" Height="400" Width="400">
<Grid.RowDefinitions>
<RowDefinition Height="Auto" MinHeight="60" />
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
<RowDefinition Height="Auto" MinHeight="60"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="100"/>
<ColumnDefinition MinWidth="60"/>
</Grid.ColumnDefinitions>
<TextBlock x:Name="ForeName" Text="Name:" Width="50" Height="25" Grid.Row="0" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox x:Name="txtName" Width="150" Height="25" Grid.Row="0" Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock x:Name="LastName" Text="Last Name:" Height="25" Grid.Row="1" Grid.Column="0" HorizontalAlignment="Right"/>
<TextBox x:Name="txtLastName" Width="150" Height="25" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left"/>
<TextBlock x:Name="Genre" Text="Gerne:" Height="25" Grid.Row="2" Grid.Column="0" HorizontalAlignment="Right"/>
<ComboBox x:Name="comboGenre" Width="150" Height="25" Grid.Row="2" Grid.Column="1" HorizontalAlignment="Left">
<ComboBoxItem Content="Female"/>
<ComboBoxItem Content="Male"/>
</ComboBox>
<TextBlock x:Name="Calendar" Text="Birthday:" Height="25" Grid.Row="3" Grid.Column="0" HorizontalAlignment="Right"/>
<controls:Calendar x:Name="BirthdayCalendar" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Left"/>
<Button x:Name="buttonGrid" Content="Send" Width="100" Height="25" Grid.Row="4" Grid.Column="1"/>
</Grid>
</UserControl>

Para posicionar los controles dentro del Grid, tomando como primer valor el 0, usamos Grid.Row para indicar la fila y Grid.Colum  para la columna.

Si arrancamos la aplicación para comprobar el resultado, obtendríamos lo siguiente:

En una primera toma de contacto con XAML, hemos comprobado como podemos montar un formulario, bastante similar al anterior mostrado con Web forms, y posiblemente de una forma algo más atractiva sin realizar modificaciones de estilo considerables.

Adjunto el proyecto por si fuera de utilidad.

¡Saludos!

Dropbox

Dropbox se trata de un servicio que te permite almacenar tus archivos de forma remota y, a su vez, que estos mismos estén sincronizados en distintos dispositivos. Actualmente tiene soporte para Windows, Linux, Mac e iPhone.

Lo que más me ha interesado de Dropbox es utilizarlo como un simple controlador de versiones  para proyectillos personales =)  La cuenta gratuita son 2 GB de capacidad y es necesario instalar un cliente en cada uno de los equipos donde queremos realizar la sincronización. El resultado será una carpeta, por defecto en Mis documentos, con el siguiente aspecto:

Una vez instalado, todo lo que arrastremos a esta carpeta será alojado en el servidor remoto y comenzará a sincronizar con todos aquellos dispositivos que tengamos enlazados. 
Como opciones tenemos la posibilidad de obtener el link para poder compartirlo con otras personas, ver el histórico de versiones del archivo y visualizar Dropbox mediante web.

Si por ejemplo tengo una solución dentro de Dropbox y además la tengo compartida con una serie de personas, podría visualizar quién y cuándo modificó un archivo e incluso volver a una versión anterior.

A mi, personalmente, me va a ayudar a dejar algo más de lado el pendrive ¡Me pareció lo más cómodo!

Espero que a alguien más le sirva =)

¡Saludos!

Comenzando con Silverlight

Uno de los objetivos de este año 2010 iba a ser justamente este: Comenzar con Silverlight.
Realmente no creo que sea necesaria una presentación exhaustiva sobre el producto pero, para comenzar con mi tira de post relacionados, comenzaré hablando de los aspectos básicos que nos afectan a los desarrolladores en el modo de trabajar. 

En primer lugar, para comenzar a trabajar con Silverlight, es necesario descargar las herramientas para Visual Studio. Podemos usar Web Platform Installer o bien realizar una descarga directa a través de este enlace para la versión 3.

TIPOS DE PROYECTOS PARA SILVERLIGHT

Si arrancamos Visual Studio y comprobamos las nuevas posibilidades observamos que existen 3 tipos distintos dentro de la pestaña Silverlight:

  • Silverlight Application: Se utiliza para generar una aplicación desde cero con Silverlight.

    El archivo de entrada de la aplicación es App.xaml el cual tiene un archivo cs ligado que actúa como code behind. La extensión del mismo proviene de XAML utilizado en Windows Presentation Foundation para definir la interfaz de usuario. A través de él comienza la aplicación y se determina qué control de usuario se iniciará en primer instancia.

    private void Application_Startup(object sender, StartupEventArgs e)
    {
    this.RootVisual = new MainPage();
    }

    Por defecto, se genera un archivo llamado MainPage.xaml que corresponde a un control de usuario en XAML. 

    <UserControl x:Class="SilverlightApplication1.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" d:DesignWidth="640" d:DesignHeight="480">
    <Grid x:Name="LayoutRoot">

    </Grid>
    </UserControl>
  • Silverlight Class Library: Se utiliza para generar librerías relacionadas con Silverlight.

    En este punto, es posible que nos preguntemos cuál es la diferencia entre un proyecto de librería para Silverlight y uno tradicional, puesto que las diferencias (a parte de las referencias) no parecen para nada visibles. Si vemos las propiedades de proyecto de ambas, veríamos lo siguiente:

    Class Library
     

    Class Library For Silverlight 

    1. No permite referenciar ningún objeto de inicio ni especificar opciones de build.
    2. El CRL de Silverlight es diferente al de .NET. 
    3. Algunas de las referencias habituales de .NET no son soportadas por el pluging de Silverlight. 

     

  • Silverlight Navigation Application: Este último proyecto tiene como cometido las aplicaciones RIA (Aplicaciones de Internet Enriquecidas)

 

Según vayamos viendo cada uno de los proyectos, se intentará profundizar más en cada uno de ellos. Por el momento, me parecía interesante ver qué tipos están disponibles y ponernos manos a la obra en los que, espero, sean unos muy entretenidos posts =)

¡Saludos!

ReSharper 5 y ASP.NET MVC

En el día de hoy, se ha puesto a nuestra disposición la nueva versión de Resharper 5 Beta (Build 1612), compatible con Visual Studio 2010 RC. Si bien es cierto que llevamos disfrutando de distintas versiones desde el pasado mes de Octubre, voy a aprovechar esta ocasión para comentar algunas de las novedades que presenta esta gran herramienta en cuanto a ASP.NET MVC se refiere.

Todas las versiones publicadas están disponibles en el siguiente enlace

EN LAS VISTAS

Si no utilizamos plantillas T4 en nuestros proyectos con ASP.NET MVC, tenemos el inconveniente de no poder navegar de las vistas a los controladores, acciones, etcétera a menos que usemos Resharper 🙂

 

En aquellos links que aparezcan subrayados dentro de nuestras vistas, tendremos la posibilidad de navegar a su implementación pulsando Control + click izquierdo sobre el link o bien posicionándonos sobre el texto subrayado y pulsando F12.
Por otro lado, tenemos la capacidad de generar código a través de estos mismos literales utilizando el mismo sistema que para cualquier otro método, propiedad, etcétera que no esté implementado.

Nota: Para mostrar el popup de Resharper, basta con seleccionar el link resaltado en rojo y pulsar sobre la bombilla o bien Alt + Intro.

EN LOS CONTROLADORES

Para seguir la misma línea, podemos navegar desde las acciones a las vistas pulsando Control + click sobre View o bien F12.


.

En este caso, además, nos presenta dos posibilidades: Acudir a la vista como tal, en este caso Index.aspx, o bien acceder a la implementación del método View que se encuentra en System.Web.Mvc.

Por último, podemos localizar tipos, comprobar los usos, mostrar intellisense para la localización de vistas, etcétera de la misma forma que lo hacíamos con el resto de proyectos.

Control + T (Localización de tipos)

.

Shift + F12 (Encontrar usos)

Control + space (Intellisense)

Tanto en controladores:

Como en las vistas:

Sin duda alguna, para todos aquellos que usemos Resharper, ya podemos empezar a contar con sus consejos para aplicaciones ASP.NET MVC.

¡Saludos!

Intellisense para archivos .skin

Hoy estuve trasteando con los archivos .skin y me sorprendió el hecho de que el intellisense no estuviera habilitado. Este va a ser un post muy corto pero creo que estoy muy mal acostumbrada y sin intellisense no puedo vivir =P

Para habilitarlo sólo debemos seguir los siguientes pasos:

  1. En el menú de Visual Studio seleccionamos Tools > Options y, dentro del apartado Text Editor, nos ubicamos en File Extension

  2. En la parte superior de este apartado, tenemos un recuadro donde podemos escribir la extensión y seleccionar el editor. En este caso, escribimos skin y seleccionamos User Control Editor. Para finalizar pulsamos en Add y OK. 

  3. Para que el cambio tenga efecto, es necesario cerrar todos los archivos de skins.

      

 

¡Y esto es todo! Ya podemos disfrutar de intellisense en estos archivos. ¡Uf! Necesitaba comentarlo para la gente que sufre por estas cosas como yo =D

¡Saludos!

Inyección de dependecias e Inversión de control

La verdad, no soy consciente de cuántos son los desarrolladores que conocen el significado de Inyección de Dependencias (Dependency Injection) o Inversión de control (Inversion of Control). Para ser sincera, nunca trabajé con ello en ningún proyecto real pero si he intentado recopilar información y conceptos para poder aplicarlos a mis proyectos personales.

Generalmente, cuando tenemos una clase que depende de otras para ciertas acciones, necesitamos inicializar instancias de las mismas para poder utilizarlas posteriormente. En ocasiones, una de las alternativas puede ser crear un objeto de dichas clases de forma privada e inicializarlas, utilizando el constructor de la clase principal.

Si vemos estas acciones desde el punto de vista de la Inyección de Dependencias y la Inversión de Control, no sería la forma más óptima debido a que la clase que sufre estas dependencias no debería ser la responsable de la creación de las mismas.

¿QUÉ CONSEGUIMOS?

  • Desacoplamiento.
  • Mejora la posibilidad de testeo de la aplicación.
  • Mejor mantenimiento a la hora de realizar cambios de los componentes, gracias a la modularidad.
  • […]

Ambos conceptos están tan ligados que, en ocasiones, no se hace distinción. Se utiliza el concepto Inversión de Control para delegar en otro componente, un framework por ejemplo, la responsabilidad de crear las instancias necesarias en lugar de crearlas nosotros mismos. Por otro lado, la Inyección de Dependencias es el término utilizado cuando una clase depende de otra y, a través del constructor generalmente acepta un parámetro del tipo del cual depende. 

Para llevar a cabo el patrón de diseño de Inyección de Dependencias, es necesario el uso de interfaces y, lo más óptimo sería utilizar alguno de los frameworks disponibles para llevar a cabo la Inversión de Control. Algunos de estos frameworks son: Spring.NETWindsor Container, StructureMap, Unity, etcétera.

EJEMPLO A EVITAR

Por ver un ejemplo, supongamos que tenemos el siguiente código:

using System.Web.Mvc;
using IoC.Models;

namespace IoC.Controllers
{
[HandleError]
public class HomeController : Controller
{
private readonly ITwitterService _twitterService;
public HomeController()
{
_twitterService = new TwitterService();
}

public ActionResult Index()
{
return View(_twitterService.FetchTweets());
}
}
}

Tenemos un controlador, en una aplicación ASP.NET MVC, donde estamos haciendo uso de una librería que conecta con Twitter. Cuando se solicita la acción Index de este controlador, el controlador se crea, a través del constructor inicializa la variable _twitterService y realiza la llamada a FetchTweets. Esto funciona sin problemas, pero supone un inconveniente a la hora de realizar pruebas unitarias.

Por otro lado, si el día de mañana queremos, por ejemplo, utilizar otra clase que implemente ITwitterService bien porque hemos cambiado de librería, porque la forma de trabajar con Twitter es totalmente distinta, etcétera, deberíamos modificar a su vez este controlador(es) para modificar en el constructor la clase que implementa la interfaz a partir de ahora. Este es un caso bien simple pero ¿Y si nuestros controladores son dependientes de más de una clase y las mismas están en constante revisión, actualización, modificación, etcétera? La solución es bien simple:

using System.Web.Mvc;
using IoC.Models;

namespace IoC.Controllers
{
[HandleError]
public class HomeController : Controller
{
private readonly ITwitterService _twitterService;
public HomeController(ITwitterService twitterService)
{
_twitterService = twitterService;
}

public ActionResult Index()
{
return View(_twitterService.FetchTweets());
}
}
}

Gracias a la inyección de dependencias, liberamos al controlador de la carga de generar las instancias que necesita, lo abstraemos del tipo de clase que implementa la interfaz en este momento y conseguimos modularizar la aplicación.

PRUEBAS UNITARIAS

Si quisiéramos hacer un test, por ejemplo, que comprobara que al llamar a la acción Index el método FetchTweets es llamado, sin realizar la llamada real a Twitter e incluso sin hacer uso de la conexión que esto requiere a Internet, podríamos hacerlo de la siguiente manera:

using IoC.Controllers;
using IoC.Models;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Rhino.Mocks;

namespace IoC.Tests.Controllers
{
[TestClass]
public class HomeControllerTest
{
[TestMethod]
public void HomeController_AlLlamarALaAccionIndex_FetchTweetsEsLlamado()
{
//Arrange
var mockTwitterService = MockRepository.GenerateMock<TwitterService>();
mockTwitterService.Stub(m => m.FetchTweets()).Return(null);
var homeController = new HomeController(mockTwitterService);

//Act
homeController.Index();

//Assert
mockTwitterService.AssertWasCalled(m => m.FetchTweets());
}
}
}

Nota: En este ejemplo he utilizado la librería RhinoMocks para crear la prueba unitaria.

Esto es realmente importante si queremos hacer pruebas unitarias de la aplicación, pero también es cierto que se nos presenta el siguiente problema ¿Cada vez que llame a HomeController voy a tener que encargarme y asegurarme en cada caso de que reciba una instancia de las interfaces que solicita el constructor? Aquí es donde entra en juego IoC y los numerosos frameworks existentes para este rol.

Para ver un pequeño ejemplo de cómo podríamos delegar esta funcionalidad en uno de los frameworks que soportan Inversión del Control, voy a utilizar StructureMap como demostración. Para descargar la última versión del framework podemos dirigirnos a este enlace.

CONFIGURANDO STRUCTUREMAP

En este ejemplo, vamos a configurar StructureMap de tal forma que sepa cómo actuar en el caso de requerir una instancia para una interfaz de tipo ITwitterService. Para ello, me he creado la siguiente clase:

using IoC.Models;
using StructureMap;

namespace IoC.StructureMapConfiguration
{
public static class BootStrapper
{
public static void SetupContainer()
{
ObjectFactory.Configure(s => s.For<ITwitterService>().Use<TwitterService>());
}
}
}

En una sola línea, le estoy indicando que para la interfaz ITwitterService, debemos usar una instancia de la clase TwitterService. La magia de todo esto es que, si el día de mañana esta interfaz es implementada por otra clase, y además esta interfaz es usada en numerosos sitios de nuestra aplicación, solamente debemos modificar esta línea para que la clase que la implementa comience a servirse como dependencia en los casos que lo requiera.

CONTROLADORES ASP.NET MVC YSTRUCTUREMAP

Por otro lado, si lo que queremos es trabajar con ASP.NET MVC, debemos realizar una serie de cambios: Cuando nosotros hacemos una petición en una aplicación con ASP.NET MVC, la clase ControllerBuilder genera de forma automática el controlador solicitado, se despacha la petición y el controlador finaliza. Para poder utilizar las propiedades de StructureMap, necesitamos crear una clase que herede de la factoría de controladores. De esta manera, controlaremos el momento en el cual se solicita una instancia de un controlador y, si este tiene dependencias, poder administrarlas con la configuración realizada anteriormente para StructureMap en la clase BootStraper.

using System;
using System.Web.Mvc;
using System.Web.Routing;
using StructureMap;

namespace IoC.StructureMapConfiguration
{
internal class StructureControllerFactory : DefaultControllerFactory
{
protected override IController GetControllerInstance(RequestContext requestContext, Type controllerType)
{
if (controllerType != null)
return ObjectFactory.GetInstance(controllerType) as IController;

return base.GetControllerInstance(requestContext, controllerType);
}
}
}

INICIALIZANDO LA CONFIGURACIÓN DE STRUCTUREMAP Y ASOCIADO LA NUEVA FACTORÍA DE CONTROLADORES

Para finalizar, necesitamos inicializar tanto la configuración creada en BootStraper, para que StructureMap reconozca la interfaz especificada, como la asignación de la nueva factoría de controladores a la aplicación ASP.NET MVC. La mejor ubicación para este caso concreto, podría ser el archivo Global.asax.

using System.Web.Mvc;
using System.Web.Routing;
using IoC.StructureMapConfiguration;

namespace IoC
{
// Note: For instructions on enabling IIS6 or IIS7 classic mode,
// visit http://go.microsoft.com/?LinkId=9394801

public class MvcApplication : System.Web.HttpApplication
{
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index", id = "" } // Parameter defaults
);

}

protected void Application_Start()
{
AreaRegistration.RegisterAllAreas();

RegisterRoutes(RouteTable.Routes);

BootStrapper.SetupContainer();

ControllerBuilder.Current.SetControllerFactory(new StructureControllerFactory());

}
}
}

Si arrancamos la aplicación, comprobaríamos que efectivamente se crea un controlador con su dependencia y delegamos esta acción gracias a la Inversión de Control.

Adjunto el proyecto por si fuera de utilidad.

¡Saludos!

Gracias a Hadi Hariri por sus enseñanzas 🙂

T4MVC: Eliminando literales de controladores, acciones y vistas.

T4MVC es una plantilla T4 (Text Template Transformation Toolkit), creada por David Ebbo, que genera de forma automática un conjunto de helpers que nos ayudarán a eliminar el uso de literales de nuestra aplicación ASP.NET MVC. Gracias al uso de esta plantilla, podemos utilizar intellisense para localizar el nombre de Controladores, acciones, vistas, scripts etcétera y conseguir un código con menos errores y mucho más mantenible.

Para poder descargarla, bastará con acceder al proyecto ubicado en Codeplex

INSTALACIÓN

La generación del código, se consigue nada más agregar los archivos T4MVC.tt  y T4MVC.settings.t4

¿Por qué es necesario agregar también el archivo .settings?

El archivo T4MVC.settings.t4 contiene un conjunto de constantes que ayudarán a generar el código en base a ellas. Por ejemplo:

// The prefix used for things like MVC.Dinners.Name and MVC.Dinners.Delete(Model.DinnerID)
const string HelpersPrefix = "MVC";

Esta constante nos indica el prefijo que precede a los helpers generados por T4MVC.

// The folder under the project that contains the areas
const string AreasFolder = "Areas";

El nombre de la carpeta que agrupa las áreas.

// The folder under the project that contains the controllers
const string ControllersFolder = "Controllers";

// The folder under the project that contains the views
const string ViewsRootFolder = "Views";

El nombre de las carpetas que contienen los controladores y las vistas.

// Folders containing static files for which links are generated (e.g. Links.Scripts.Map_js)
readonly string[] StaticFilesFolders = new string[] {
"Scripts",
"Content",
};

La carpeta donde figuran los archivos javascript y los estilos.

// If true,the template output will be split into multiple files.
static bool SplitIntoMultipleFiles = true;

La plantilla generará varios archivos de salida.

Si modificamos cualquiera de las constantes y compilamos la solución, se regenerará el código de salida de la plantilla.

En el momento de agregar los archivos, o al recompilar, nos aparecerá el siguiente cuadro de diálogo:

Solamente es un aviso y nos están advirtiendo de que el archivo que estamos intentando agregar/recompilar puede dañar nuestro equipo 🙂 y que no se ejecute si proviene de una fuente de la que no confiamos. En este momento podemos pulsar OK, lo cual significa que arrancará la plantilla de forma automática o bien podemos cancelar y se parará el proceso. Pulsamos OK y arriesgamos 😉

Si nos fijamos en el Solution explorer, ha generado varios archivos .cs ligados a la plantilla .tt.

Como la constante SplitIntoMultipleFiles es igual a true, nos generará tantos archivos como controladores tenga el proyecto.

EJEMPLOS

Controladores


Acciones / Vistas


Links dentro de Content/Scripts


En el controlador

return RedirectToAction("Index");

T4MVC

return RedirectToAction(MVC.Tweet.Actions.Index());  

Global.asax

routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Tweet", action = "Index", id = "" } // Parameter defaults
);

T4MVC

routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = MVC.Tweet.Name, action = MVC.Tweet.ActionNames.Index, id = "" } // Parameter defaults
);

Scripts

<script src="../../Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

T4MVC

<script src="<%=Links.Scripts.jquery_1_3_2_min_js %>" type="text/javascript"></script>

Render Partial

<% Html.RenderPartial("TimeLine"); %>

T4MVC

<% Html.RenderPartial(MVC.Tweet.Views.TimeLine); %>

Action Links

<%=Html.ActionLink("Back to TimeLine", "Index") %>

T4MVC

<%=Html.ActionLink("Back to TimeLine", MVC.Tweet.Actions.Index()) %>


¡Saludos!

Llamar a un Ajax.ActionLink desde JQuery con temporizador

Hace unos días me encontré con un caso en el que era necesario llamar de forma asíncrona a una acción de un controlador ASP.NET MVC, para refrescar una pantalla con los nuevos resultados. Además, era necesario que se hiciera cada X tiempo para que no me denegaran el servicio.
Desconozco si existe una forma más óptima de realizar esta funcionalidad en ASP.NET MVC pero, si sirve de ayuda, muestro el código de mi solución «temporal» a este caso en concreto:

  1. Creo un enlace con las propiedades de Ajax de la siguiente manera.
    <%=Ajax.ActionLink("Refresh","RefreshTags", new { tag = ViewData["tags"] }, new AjaxOptions { HttpMethod = "Post", OnBegin = "onBeginRetrievingTags", OnComplete = "onCompleteRetrivingTags", UpdateTargetId = "tweets" },new{Id="ActionLinkTags"})%>

    Para más información sobre Ajax con ASP.NET MVC, puedes consultar este otro post.

  2. Por el lado del controlador, creo la acción que va a devolver el listado actualizado, en este caso, de tweets.
    [HttpPost]
    public ActionResult RefreshTags(string tag)
    {
    ViewData["tags"] = tag;
    List<Tweet> entries = _serviceTweet.FilterBy(tag);
    return PartialView("TweetList", entries);
    }

    Si observamos detenidamente la acción, vemos que nos redirige a una vista parcial llamada TweetList donde muestro el resultado obtenido.

  3. Ejecutamos la aplicación, vemos que al renderizar la página en cuestión, nos devuelve el siguiente elemento para nuestro link.
    <a Id="ActionLinkTags" href="/Tweet/RefreshTags?tag=aspnetmvc" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, httpMethod: 'Post', updateTargetId: 'tweets', onBegin: Function.createDelegate(this, onBeginRetrievingTags), onComplete: Function.createDelegate(this, onCompleteRetrivingTags) });">Refresh</a>
  4. Para llevar a cabo la llamada a través de JQuery, en un archivo js, he creado las siguientes funciones.
    function launchConfigTags() {

    $("#ActionLinkTags").dblclick(function(e) {

    Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(e),
    {
    insertionMode: Sys.Mvc.InsertionMode.replace,
    httpMethod: 'Post',
    updateTargetId: 'tweets',
    onBegin: Function.createDelegate(this, onBeginRetrievingTags),
    onComplete: Function.createDelegate(this, onCompleteRetrivingTags)
    });
    });

    Timer();
    }

    function Timer() { setTimeout("refreshTags()", 60000); }

    function refreshTags() { $("#ActionLinkTags").trigger("dblclick"); }

    De manera conjunta, realizan exactamente la misma llamada que si pulsaramos el link con un tiempo estimado de un minuto.

  5. Si queremos que el refresco se realice desde el primer momento que la página está disponible, podemos lanzar la función que bindea el evento doble click al link en el evento ready, iniciando de esta manera el ciclo de llamadas.
    $(document).ready(function() { launchConfigTags(); });

Espero que sea de utilidad.

¡Saludos!

Las tablas de Windows Azure Storage

En este post, voy a centrarme en las tablas de Windows Azure Storage, las cuales podemos definirlas como un conjunto de datos estructurados pero no relacionales. Es decir, tenemos un conjunto de registros con sus correspondientes columnas y primary keys pero no es posible la relación entre una tabla y otra del Storage. En el caso de necesitar tablas relacionales, tenemos SQL Azure.

Para comenzar, vamos a crear una pequeña aplicación donde almacenamos perfiles de usuario. Abrimos Visual Studio como administrador y creamos un nuevo proyecto de tipo Cloud Service con un Web Role.

Una vez creado, nos aparecerán dos proyectos: El web role y el proyecto de configuración de Windows Azure.

CREACIÓN DE LOS DATOS ESTRUCTURADOS

Como he mencionado antes, el contenido de las tablas de Storage son datos estructurados. Cada registro de esa tabla será una entidad y el conjunto de registros será una colección de entidades. En este caso, nuestra entidad se llamará Profile y estará compuesta por un nombre y un email. Para representar esta entidad/registro de nuestra tabla, creamos la siguiente clase en el proyecto ProfileManager:

using System;

namespace ProfileManager
{
public class Profile : Microsoft.WindowsAzure.StorageClient.TableServiceEntity
{
public Profile()
{
//PartitionKey y RowKey son requeridas para cada entidad añadida a la tabla
PartitionKey = "Users";
RowKey = string.Format("{0:10}_{1}", DateTime.MaxValue.Ticks - DateTime.Now.Ticks, Guid.NewGuid());
}

public string UserName { get; set; }
public string Email { get; set; }

}
}

Lo más importante a tener en cuenta en esta clase es que hereda de TableServiceEntity, que está dentro de una de las librerías de Windows Azure.
Hemos definido un constructor, donde inicializamos dos propiedades heredadas, PartitionKey y RowKey, las cuales son requeridas para poder insertar, modificar y eliminar correctamente una entidad en la tabla. De lo contrario, generaría una excepción.

Las propiedades heredadas por cada entidad son:

  • PartitionKey, se utiliza para determinar en qué partición debe estar la entidad que se está creando. Esto es debido a que las tablas están particionadas para soportar el balanceo de carga, a través de nodos de almacenamiento. Las entidades que pertenecen a una misma PartitionKey permanecen juntas. Además, esta clave forma parte de la primary key del registro. Para mejorar la escalabilidad de la aplicación, debemos tener en cuenta que se considera recomendable clasificar nuestros datos entre varias Partition Keys.
  • RowId, se trata de la segunda parte de la primary key. Es un identificador único dentro de la partición.
  • Timespan, es una propiedad de tipo DateTime que se utiliza para guardar la fecha de modificación de la entidad.

 

CONTEXTO DE LA TABLA

Por otro lado, necesitamos generar una serie de operaciones para que podamos trabajar con la tabla que, en un futuro, estará ubicada en la nube. Para ello, creamos una clase que herede de TableServiceContext, donde agregaremos las opciones de recuperar y añadir entidades en la tabla Profiles.

using System.Linq;
using Microsoft.WindowsAzure;

namespace ProfileManager
{
public class ProfileTableServiceContext : Microsoft.WindowsAzure.StorageClient.TableServiceContext
{
public ProfileTableServiceContext(string baseAddress, StorageCredentials credentials) : base(baseAddress, credentials) { }

public IQueryable<Profile> Profiles
{
get { return CreateQuery<Profile>("Profiles"); }
}

public void AddProfile(string userName, string email)
{
AddObject("Profiles", new Profile { UserName = userName, Email = email });
SaveChanges();
}
}
}

Lo primero que observamos es que recupera el constructor de la clase base. Es un paso obligatorio ya que la misma no contiene un constructor sin parámetros, lo cual es lógico, debido a que es necesario una dirección que nos indique dónde está el endpoint donde queremos operar y, como segundo parámetro, las credenciales para tener acceso.

Nota: Es necesario añadir la dll System.Data.Services.Client.

CADENA DE CONEXIÓN A DESARROLLO

Antes de realizar las pruebas oportunas contra la nube, podemos realizar un testeo inicial con el entorno de desarrollo Development Storage y Development Fabric. Para realizar las pruebas en local, creamos una entrada en la sección connectionStrings del archivo de configuración con el siguiente valor:

<connectionStrings>
<add name="AzureConnection" connectionString="UseDevelopmentStorage=true"/>
</connectionStrings>

CREACIÓN DE LA TABLA

Tanto en local como en la nube, antes de añadir registros, necesitamos crear la tabla en el Storage. Si bien es un paso que solamente debemos realizar una vez, podemos utilizar el archivo de inicio WebRole.cs que se generó cuando creamos el proyecto. Dentro del método OnStart(), añadimos el siguiente código:

using System.Configuration;
using System.Linq;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Diagnostics;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;

namespace ProfileManager
{
public class WebRole : RoleEntryPoint
{
public override bool OnStart()
{
DiagnosticMonitor.Start("DiagnosticsConnectionString");

// For information on handling configuration changes
// see the MSDN topic at http://go.microsoft.com/fwlink/?LinkId=166357.
RoleEnvironment.Changing += RoleEnvironmentChanging;

CloudStorageAccount.SetConfigurationSettingPublisher((configName, configSetter) =>
configSetter(ConfigurationManager.ConnectionStrings[configName].ConnectionString));

var storageAccount = CloudStorageAccount.FromConfigurationSetting("AzureConnection");
CloudTableClient.CreateTablesFromModel(typeof(ProfileTableServiceContext),
storageAccount.TableEndpoint.AbsoluteUri, storageAccount.Credentials);
return base.OnStart();
}

Lo primero que debemos especificar es de qué manera podemos recuperar la configuración necesaria para conectar a la cuenta de Storage a través de SetConfigurationSettingPublisher.
Una vez indicado el modo, recuperamos la cadena de conexión utilizando FromConfigurationSetting y, por último, creamos la tabla llamado a CreateTablesFromModel, pasándole como parámetros la clase que creamos con las operaciones que podemos realizar contra nuestra tabla, y que estaba heredando de TableServiceContext, el endpoint y las credenciales.

Para probar el ejemplo, he creado un pequeño formulario con dos textbox donde añadimos un nombre y un email y, pulsando en el botón Add Profile, añadimos esos datos en forma de entidad a la tabla del Storage y mostramos las entidades almacenadas hasta el momento.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ProfileManager.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:Label runat="server" ID="lblUserName" Text="UserName:"></asp:Label>
<asp:TextBox runat="server" ID="txtUserName"></asp:TextBox>
<asp:Label runat="server" ID="lblEmail" Text="Email:"></asp:Label>
<asp:TextBox runat="server" ID="txtEmail"></asp:TextBox>
<asp:Button runat="server" ID="btnAdd" Text="Add Profile" OnClick="btnAdd_Click" />
</div>
<div>
<asp:GridView ID="grvProfiles" runat="server" BackColor="White" BorderColor="#E7E7FF"
BorderStyle="None" BorderWidth="1px" CellPadding="3" GridLines="Horizontal">
<RowStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" />
<FooterStyle BackColor="#B5C7DE" ForeColor="#4A3C8C" />
<PagerStyle BackColor="#E7E7FF" ForeColor="#4A3C8C" HorizontalAlign="Right" />
<SelectedRowStyle BackColor="#738A9C" Font-Bold="True" ForeColor="#F7F7F7" />
<HeaderStyle BackColor="#4A3C8C" Font-Bold="True" ForeColor="#F7F7F7" />
<AlternatingRowStyle BackColor="#F7F7F7" />
</asp:GridView>
</div>
</div>
</form>
</body>
</html>

using System;
using Microsoft.WindowsAzure;

namespace ProfileManager
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

protected void btnAdd_Click(object sender, EventArgs e)
{
var storage = CloudStorageAccount.FromConfigurationSetting("AzureConnection");
var operations = new ProfileTableServiceContext(storage.TableEndpoint.ToString(), storage.Credentials);

operations.AddProfile(txtUserName.Text, txtEmail.Text);
grvProfiles.DataSource = operations.Profiles;
grvProfiles.DataBind();
}
}
}

 


CADENA DE CONEXIÓN PARA WINDOWS AZURE STORAGE

Cuando ya estemos listos para utilizar el Storage de Azure, necesitamos crear una cuenta de almacenamiento y  cambiar la cadena de conexión:

<connectionStrings>
<add name="AzureConnection" connectionString="DefaultEndpointsProtocol=https;AccountName=YOUR_ACCOUNTNAME;AccountKey=PRIMARY_ACCESS_KEY"/>
</connectionStrings>

Nota: Existen una serie de combinaciones para realizar la conexión pero, por el momento, usaremos la mencionada a modo introductorio.

Si arrancamos de nuevo la aplicación y añadimos un par de registros, obtendríamos el siguiente resultado.

CLOUD STORAGE STUDIO

Para finalizar me gustaría mencionar la siguiente aplicación, la cual es bastante útil para visualizar, crear, modificar y eliminar elementos del Storage de Azure (tanto tablas, como blobs y queues). Su nombre es Cloud Storage Studio y, si bien es de pago, tenemos la posibilidad de probarla de forma gratuita durante 30 días.
Si accedemos a la tabla que acabamos de generar con esta demo, podemos ver todos los detalle de la misma tal y como se muestra en la siguiente captura.

¡Saludos!