Hace unos meses, un usuario de StackOverflow planteaba una interesante cuestión: ¿qué debería saber un desarrollador para construir un sitio web público? Es decir, ¿cuáles son aquellos aspectos importantes que deben tenerse en cuenta a la hora de crear un site de calidad, desde el punto de vista técnico?

Tras un tiempo de respuestas, ideas y debates, otro usuario ha realizado una recopilación de los aspectos y sugerencias más votadas y los ha publicado en forma de lista categorizada, donde podemos encontrar muy buenas ideas a tener en cuenta en nuestros propios desarrollos, y que me he permitido traducir.

Muchos de los puntos son obvios y seguro que ya los estáis teniendo en cuenta, quizás otros son demasiado exagerados, y seguro que alguno de ellos ni siquiera os los habíais planteado. En cualquier caso el resultado es una relación interesante y muy a tener en cuenta para mejorar nuestros sitios web.

Interfaz y experiencia de usuario

• Ser consciente de que los navegadores implementan los estándares de forma diferente y asegurarse de que el sitio web funciona razonablemente bien en la mayoría de los principales navegadores. Como mínimo, sería necesario probarlo con un navegador que utilice un motor reciente Gecko (Firefox), Webkit (Safari, Chrome y algunos navegadores móviles), las versiones soportadas de Internet Explorer, y Opera.
• Tener en cuenta que el sitio web puede ser visitado utilizando medios distintos a los navegadores habituales, como por ejemplo teléfonos móviles, lectores de pantalla, o motores de búsqueda. Usar estándares de accesibilidad como WAI o Section508.
• Considerar los mecanismos de actualización del sitio web para que estos procesos no afecten a los usuarios una vez que el sistema está en marcha y puedan producirse de forma suave y transparente. Por ejemplo, puede ayudar el mantener entornos de prueba paralelos, el uso de herramientas de control del código fuente, o mecanismos de builds automatizados.
• No mostrar errores directamente al usuario.
• No incluir en las páginas direcciones de correo de usuarios en texto plano, para evitar que sean bombardeados por los spammers.
• Incluir límites razonables de utilización del sitio para evitar malos usos por parte de usuarios o procesos automáticos (como puede ser los virus). Por ejemplo, es razonable que un sistema de correo electrónico gratuito limite el número de mensajes diarios que puede enviar un usuario, aunque el número máximo sea muy alto; otro ejemplo podemos verlo en Google, que muestra un mensaje de error cuando detecta demasiado tráfico hacia sus servidores desde una única dirección IP.

Seguridad

• Conocer la amplia guía de desarrollo OWASP, que  cubre la seguridad de sitios web de forma muy completa.
• Conocer el fundamento de los ataques de inyección SQL y cómo prevenirlos.
• Jamás confiar en los datos introducidos por los usuarios.
• Evitar el almacenamiento de contraseñas en texto plano utilizando técnicas criptográficas como hashes y salts.
• No intentes utilizar tu magnífico y elaborado sistema de autenticación; es bastante probable que existan fallos impredecibles de los que sólo te darás cuenta después de haber sido hackeado.
• Usar SSL/HTTPS en las páginas de identificación de usuarios y, en general, en todas aquellas páginas donde sea introducida información sensible, como datos personales o bancarios.
• Evitar el secuestro de sesiones (session hijacking).
• Evitar los ataques XSS (Cross Site Scripting).
• Evitar los ataques XSRF (Cross Site Request Forgeries).
• Mantener tus sistemas actualizados con los últimos parches disponibles.
• Asegurarse de que la información de conexión a la base de datos está almacenada en un lugar lo suficientemente seguro.
• Mantener informado sobre las últimas técnicas de ataque y vulnerabilidades que afecten a la plataforma sobre la que trabajas.
• Conocer el manual The Google Browser Security Handbook.

Rendimiento

• Implementar el cacheado de páginas cuando sea necesario. Comprender y usar apropiadamente los mecanismos de cacheo HTTP.
• Optimizar las imágenes. Por ejemplo, no utilizar una imagen de 20 Kb. como mosaico de fondo.
• Conocer cómo comprimir el contenido de las páginas con gzip.
• Echar un vistazo al sitio Yahoo Exceptional Performance, donde se muestran directrices y buenas prácticas para mejorar el rendimiento de sitios web. Utilizar herramientas como YSlow.
• Utilizar la técnica de CSS Sprites para las pequeñas imágenes (como las que encontramos en las barras de herramientas), con objeto de minimizar el número de peticiones HTTP.
• Los sitios web de alto tráfico deberían considerar el despliegue de componentes en distintos dominios para optimizar la descarga en paralelo de los mismos.
• En general, minimizar el número total de peticiones HTTP necesarias para que el navegador muestre las páginas.

SEO

• Utilizar direcciones URL amigables para los buscadores. Por ejemplo, utilizar direcciones del tipo "ejemplo.com/paginas/titulo-del-articulo" en lugar de "ejemplo.com/index.php?page=45".
• No utilizar enlaces que digan "pulse aquí". Estarías creando sitio web poco optimizado para buscadores, a la vez que complicando las cosas para los usuarios que utilizan lectores de pantalla.
• Crear un mapa del sitio en XML (sitemap).
• Utilizar <link rel="canonical" ... /> Cuando tengas múltiples URLs que apunten a un mismo contenido.
• Utilizar las herramientas disponibles en www.google.com/webmasters.
• Instalar Google Analytics desde el principio.
• Conocer cómo funcionan los rastreadores de los buscadores y el archivo robots.txt.
• No maquetar con tablas; Google generalmente valorará positivamente el marcado HTML semántico y la maquetación con CSS.
• Si tienes contenido no textual en la página, utiliza en el sitemap las extensiones de Google para audio, video, etc. Hay alguna información sobre ello en la respuesta de Tim Farley.

Tecnología

• Entender el protocolo HTTP; conocer cosas como GET, POST, sesiones, cookies, y saber lo que significa e implica su naturaleza "sin estado" (stateless).
• Escribir el código (X)HTML y CSS conformes a las especificaciones de la W3C, y asegurarse de que validan. El objetivo es evitar las particularidades de los navegadores, a la vez que se facilita enormemente la navegación utilizando browsers no estándar como lectores de pantalla o dispositivos móviles.
• Comprender cómo se procesa el código javascript en los navegadores. Mover los scripts al final de las páginas.
• Comprender cómo funciona el sandbox de javascript, especialmente si pretendes utilizar iframes.
• Asegurarse de que javascript puede ser deshabilitado sin que la página deje de funcionar. AJAX debe ser una extensión, y no la base sobre la que se construya un sitio. Aunque la mayoría de usuarios lo tengan activado, recordar que existen muchos y muy populares dispositivos en los que no funcionará correctamente.
• Entender la diferencia entre las reflexiones 301 y 302 (esto también es un aspecto SEO).
• Aprender tanto como sea posible sobre la plataforma en la que será desplegado el sitio web en producción.
• Considerar el uso de un reseteador de CSS.
• Considerar herramientas como jQuery, que oculta muchas de las particularidades de los distintos navegadores utilizando javascript para la manipulación del DOM.

Corrección de errores

• Entender que pasarás el 20% del tiempo codificando y el 80% restante manteniéndolo, por tanto codifica apropiadamente.
• Configurar un buen sistema de notificación y gestión de errores.
• Habilitar sistemas para que los usuarios puedan contactar contigo y trasladarte críticas y sugerencias.
• Documentar cómo funciona la aplicación para facilitar el futuro soporte y mantenimiento del sistema.
• Poner a funcionar el sistema primero en Firefox y después en Internet Explorer.
• Hacer copias de seguridad frecuentes.

Publicado en: Variable not found.

El control de errores en aplicaciones web es fundamental si queremos ofrecer un interfaz robusto y amigable para los usuarios en cualquier situación. No hay nada más frustrante para un usuario que una pantalla de error con contenidos indescifrables y que no le aportan alternativas de salida.

El framework ASP.NET MVC nos ofrece mecanismos de control de errores muy potentes basada en la utilización del atributo HandleError, el cual definirá la vista que será mostrada al usuario cuando se produzca alguna excepción no controlada en el código de los controladores, siempre que en el web.config se haya activado el uso de errores personalizados mediante la propiedad CustomErrors.

En este post vamos a profundizar en el uso del atributo HandleError, comentando cómo se implementa en el controlador, su ámbito de actuación, los parámetros que ofrece y la forma de crear las vistas para mostrar los errores de forma amigable.

El controlador

HandleError puede ser declarado tanto a nivel de clase (controlador) como a nivel de acción. En el primer caso, se establecerá el comportamiento general para todas las acciones del controlador, mientras que en el segundo será aplicable sólo a la acción a la que se asocie el atributo:

// Control de errores a nivel de clase de controlador, 
// que será aplicado a todas las acciones del mismo.
[HandleError()]
public class HomeController : Controller
{
    ...
}

// Control de errores a nivel de acción concreta...
[HandleError(ExceptionType=typeof(ArgumentException), View="ArgumentError")]
public ActionResult Calculate(int a, int b)
{
  ViewData["results"] = calculateSomething();
  return View();
}

En realidad, el comportamiento definido en el atributo HandleError a nivel de clase también se aplicará a los errores generados por las vistas u otros resultados (ActionResult) retornados por los controladores. Es decir, sobre el segundo de los ejemplos anteriores, la vista “ArgumentError” (que existirá en un archivo llamado ArgumentError.aspx) será invocada cuando la excepción ArgumentException sea lanzada bien por el propio controlador, o bien por la vista “Calculate” que retorna por defecto.

Un último detalle sobre esto: el atributo HandleError puede ser especificado tantas veces como necesitemos sobre la misma acción o controlador, indicando comportamientos para distintos tipos de excepción. El atributo que se tendrá en cuenta cuando se produzca un error será el primero que se encuentre cuyo tipo de excepción (parámetro ExceptionType) sea compatible con la excepción lanzada.

El manejador de errores que se empleará en una acción será el primero que corresponda al tipo de excepción producida, teniendo en cuenta tanto los atributos que adornan la acción como los que acompañan a su controlador, y siempre según un orden preestablecido.

Veamos con más detenimiento los parámetros que admite la declaración del atributo.

Parámetros de HandleError

        [HandleError(
            ExceptionType=typeof(DivisionByZero), 
            View="ErrorPersonalizado", 
            Master="MaestraErrores",
            Order = 0)
        ]
        public ActionResult Index()
        ...

• ExceptionType permite indicar el tipo de excepción que se pretende controlar. Por defecto, el sistema entenderá que la regla se refiere al tipo base Exception, por lo que se aplicará a todos los errores que se generen, pues todas las excepciones heredan de esta clase.
• View, el nombre de la vista que será mostrada al usuario. Por defecto se tomará el valor “Error”, por eso en la plantilla de proyectos ASP.NET MVC ya existe una vista con este nombre.
• Master, la página maestra con la que será renderizada la vista, independientemente de lo que tenga declarado ésta.
• Order, un valor numérico (por defecto –1, el más prioritario) que indica la prioridad de aplicación de esta regla cuando el sistema encuentre varios atributos HandleError aplicables al mismo elemento y que puedan presentar conflictos. Los valores más pequeños, Por ejemplo, si no se indicara este parámetro en el siguiente caso, el resultado dependería del orden de declaración, lo cual no es demasiado recomendable:
  

  [HandleError(Order=10, View="ErrorGenerico")]
  public class HomeController : Controller
  {
    ...
    [HandleError (ExceptionType=typeof(DivisionByZero),
                  View="OperacionIncorrecta", Order=1)]
    public ActionResult Calculate()
    ...

  
  Como puede intuirse, esto hará que en caso de producirse una división por cero, se muestre la vista “OperacionIncorrecta” y no la “ErrorGenerico”.

Cada vez que utilicemos HandleError es conveniente tener muy en cuenta la prioridad (definida en la propiedad Order), el alcance (las excepciones a tratar, definidas en la propiedad ExceptionType), así como los valores por defecto en cada caso. Esto evitará comportamientos misteriosos del sistema una vez se produzcan errores en tiempo de ejecución.

Acceso desde la vista a la información del error

Ya hemos comentado anteriormente que la vista que será mostrada a los usuarios cuando se produzca un error será la indicada en el parámetro View del atributo HandleError, o la vista "Error", si este parámetro no es informado. Sea cual sea, el archivo nombredevista.aspx deberá estar localizable por el motor de vistas en el momento de su lanzamiento (por cierto, si no te gustan las ubicaciones por defecto, puedes ver cómo modificar la forma en la que se buscan las vistas en este post).

La vista de un error es una página .aspx normal, como una vista más de la web, pero con la particularidad de que puede recibir información sobre el error que ha provocado su presentación. De hecho, se trata de una vista tipada que hereda de ViewPage<System.Web.Mvc.HandleErrorInfo>, de forma que  la propiedad Model será del tipo HandleErrorInfo, clase que nos ofrece completa información sobre el origen del problema:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
    Inherits="System.Web.Mvc.ViewPage<System.Web.Mvc.HandleErrorInfo>" %>

<asp:Content ID="errorTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Error en el sistema
</asp:Content>
<asp:Content ID="errorContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>
        Ups, se ha producido un ligero inconveniente...
    </h2>
    <p>
        La acción <%= Model.ActionName %>  
        del controlador <%= Model.ControllerName %>
        ha lanzado la excepción <%= Model.Exception.GetType().Name %> con
        el mensaje "<%= Model.Exception.Message %>".
    </p>
</asp:Content>

A pesar de no ser un buen ejemplo como pantalla del error amigable para el usuario ;-), el código anterior ilustra cómo es posible acceder desde la vista a los datos del contexto del error proporcionados por el entorno, y cómo la clase HandleErrorInfo nos ofrece una información sobre la acción en la que se ha lanzado la excepción, el controlador en el que se encuentra la misma, y lo más interesante, nos ofrece en la propiedad Exception la excepción producida, por lo que tendremos acceso a su tipo, descripción e incluso al estado de la pila de llamadas en el momento de producirse el error.

Publicado en: www.variablenotfound.com

El gran K. Scott Allen comentaba hace unas semanas en OdeToCode un pequeño truco que puede resultar de utilidad cuando tengamos un código jQuery que no funcione correctamente.

Como comenta el autor, la mayoría de los problemas con jQuery se deben a un uso incorrecto de los potentes selectores, así que lo que propone es el uso de la consola javascript incluida en algunas herramientas como Firebug (para Firefox) o las propias herramientas de desarrollo incluidas en Internet Explorer 8 (geniales, por cierto).

Esta consola permite en ambos casos introducir instrucciones javascript de forma directa, que serán ejecutadas en el contexto de la página actual como si formaran parte del código de las mismas. Por tanto, en aquellas páginas en las que se incluido jQuery, será posible ejecutar llamadas y selecciones a lo largo del DOM y observar el resultado de forma interactiva.

En la imagen adjunta se ve cómo podemos ir realizando consultas con selectores e ir observando sus resultados con Firebug. Hay que tener en cuenta que la mayoría de operaciones de selección con jQuery retornan una colección con los elementos encontrados, por eso podemos utilizar length para obtener el número de coincidencias. Pero no sólo eso, podríamos utilizar expresiones como la siguiente para mostrar por consola el texto contenido en las etiquetas que cumplan el criterio:

$("div > a").each(function() { console.log($(this).text()) })

Y más aún, si lo que queremos es obtener una representación visual sobre la propia página, podemos alterar los elementos o destacarlos con cualquiera de los métodos de manipulación disponibles en jQuery, por ejemplo:

$("a:contains['sex']").css("background-color", "yellow")

La siguiente captura muestra el resultado de una consulta realizada con las herramientas de desarrollo incluidas en Internet Explorer 8:

En fin, un pequeño truco para facilitarnos un poco la vida.

Fuente: What I Do When My jQuery Code Doesn’t Work

• primero, la descarga de estas librerías será, para el cliente, probablemente más rápida que si las tiene que obtener desde tu servidor a través de internet. Se trata de infraestructura de red de Google, y eso implica unas garantías.


• segundo, y relacionada con la anterior, si se trata de un sitio web de alto tráfico, la concurrencia permitida seguramente será infinitamente mayor que la que puedas ofrecer en otro servidor.


• tercero, si el usuario ha visitado previamente otro sitio web que use también la misma librería, se beneficiará del cacheado local de la misma, puesto que su navegador no la descargaría de nuevo. Y en cualquier caso, se estarían aprovechando las optimizaciones de caché de Google.


• cuarto, no consumes ancho de banda de tu proveedor, aunque éste sea despreciable. Y con despreciable me refiero al ancho de banda, no al proveedor ;-)


• quinto, puedes utilizar las librerías desde webs alojadas en algún sitio donde no se pueda, o no sea sencillo, subir archivos de scripts, como la plataforma Blogger desde la que escribo.

• jQuery
• jQuery UI
• Prototype
• script_aculo_us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

  <script 
    src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js">
  </script>

• API de visualización, que permite a los desarrolladores acceder a datos estructurados y mostrarlos en una gran variedad de formatos, como tablas o gráficos estadísticos.
• API Ajax para búsquedas, que facilita la incorporación de capacidades de búsqueda de cualquier tipo (páginas, direcciones, multimedia, etc.) en sitios web utilizando javascript.
• API Ajax de idioma, que nos permite acceder mediante javascript a las herramientas de detección de idioma, traducción y transliteración de Google.
• API de datos de Blogger, que permite el acceso con Ajax a información sobre blogs, posts y comentarios de esta plataforma de publicación.
• API de bibliotecas Ajax, la red de distribución de librerías estándar como jQuery, jQuery UI, Prototype, script.aculo.us, MooTools o Dojo.
• API de Google Maps, con el que podremos integrar Google Maps en nuestras webs y utilizar los servicios de localización y posicionamiento que nos ofrece.
• API de Google Earth, el cual nos facilita la inclusión del sistema Google Earth en webs, así como la interacción con ellos vía javascript.
• API Ajax para feeds, un conjunto de funciones que nos permiten obtener feeds de otras páginas sin necesidad de crear proxies de servidor.
• API de Google Calendar, el interfaz a través del cual podemos crear aplicaciones totalmente integradas con Google Calendar.

 <div class="fotonifty" 
      style="background: url(images/paisaje1.jpg) no-repeat top left;" >
   <img src="images/paisaje1.jpg" alt="Magnífico paisaje" />
 </div>
 [...]

 /* Estilos de la página */
 <style type="text/css">
    .fotonifty
    {
        width: 150px;
        height: 150px;
        margin: 10px;
    }
    
    .fotonifty img
    {
        display: none;
    }
 </style>

 <cc1:Nifty ID="Nifty1" runat="server" 
    Selectors="div.fotonifty" 
    CornerSize="Big"
    FixedHeight="true" />

• Web del proyecto en Google Code
• Página de descargas del proyecto
• NiftyDotNet en vivo y en directo

• El control se renderiza en cliente con una etiqueta <img>.
• Se puede forzar al control a generar las imágenes al vuelo o a almacenarlas físicamente en una carpeta.
• Las imágenes generadas pueden ser cacheadas para mejorar el rendimiento.
• Genera BMPs, JPGs, PNGs o EMFs.
• Permite también usarlo con aplicaciones no ASP.NET 3.5 a través del modo "binary streaming", que fuerza a que el control elimine toda la salida HTML de la página donde se encuentra y retorne únicamente la imagen como resultado, de forma dicha página puede ser utilizada como source de un tag <img> en otro sitio.
• Soporta eventos del tipo "PrePaint" y "PostPaint" para poder hacer retoques a mano sobre los resultados, como:

  void Chart1_PostPaint(object sender, ChartPaintEventArgs e)
  {
    e.ChartGraphics.Graphics.DrawString("Hola", 
                                        new Font("Arial", 12f), 
                                        Brushes.Black, 10, 10);
  }
  

   
  
• 25 tipos de gráficas, muchas de ellas con vistas en tres dimensiones, en las que se puede modificar prácticamente todo: rotación, inclinación, sombras, etc.
• Podemos crear imágenes con múltiples gráficas distintas, utilizar en ellas todas las series de datos que deseemos, con un número ilimitado de puntos.
• Control total sobre los ejes en cuanto a escalado, visualización o etiquetado.
• Posibilidad de añadir anotaciones, leyendas y otros elementos "extra".
• Permite establecer datos enlazando el control a fuentes (binding), o de forma manual sobre el mismo utilizando los diseñadores o etiquetas ASP.NET.
• Soporta mapeo de imágenes, posibilidad de capturar clicks sobre áreas para establecer comportamientos personalizados, o combinarlo con Ajax para enriquecer la experiencia de usuario.

Instalación

• Un error de Javascript que aparecía cuando el control no encontraba ningún elemento en la página que correspondiera con los selectores indicados y había sido especificada además la propiedad Fixed-Height.
• En páginas cuya sección HEAD no incluía el atributo RUNAT="SERVER" se mostraban caracteres extraños en pantalla, y no se redondeaban los elementos de la página.

• Web del proyecto en Google Code
• Página de descargas del proyecto
• NiftyDotNet en vivo y en directo

  protected void Page_Load(object sender, EventArgs e)
  {
    MaestraContenidos master = Master as MaestraContenidos;
    master.Titulo = "Título";
  }

<%@ MasterType VirtualPath="~/site1.master" %>

<%@ MasterType TypeName="ProyectoWeb.MaestraContenidos" %>

• si decidís cambiar la página maestra en tiempo de ejecución, en cuanto intentéis acceder a la propiedad Master, vuestra aplicación reventará debido a que el tipo no es el correcto.


• si cambiáis la maestra a la que está asociada una página de contenidos, tenéis que acordaros de cambiar también la directiva MasterType de la misma para que todo funcione bien.

1. Texto plano, es decir, introduciendo un enlace del tipo:
   <a href="mailto:user@myserver.xx">email me</a>


2. Sustituyendo las arrobas por "AT" y los puntos por "DOT", de forma que una dirección queda de la forma:
   <a href="mailto:userATserverDOTxx">email me</a>


3. Sustituyendo las arrobas y puntos por sus correspondientes entidades HTML:
   <a href="mailto:user&#64;server&#46;xx">email me</a>


4. Introduciendo la dirección con los códigos de los caracteres que la componen:
   <a href="mailto:%73%69%6c%76%61%6e%66%6f%6f%62%61%72%34%40%74%69%6c%6c%6c%61%74%65%65%65%65%65">email me</a>


5. Mostrando la dirección de correo sin enlace y troceándola con comentarios HTML, que el usuario podrá ver sin problema como user@myserver.com aunque los bots se encontrarán con algo como:
   
   user<!-- -->@<!--- @ -->my<!-- -->server.<!--- . -->com


6. Construyendo el enlace desde javascript en tiempo de ejecución con un código como el siguiente:

   var string1 = "user";
   var string2 = "@";
   var string3 = "myserver.xx";
   var string4 = string1 + string2 + string3;
   document.write("<a href=" + "mail" + "to:" + string1 +
     string2 + string3 + ">" + string4 + "</a>");

7. Escribiendo la dirección al revés en el código fuente y cambiando desde CSS la dirección de presentación del texto, así:
   

   <style type="text/css">
    span.codedirection { unicode-bidi:bidi-override; direction: rtl; }
   </style>
   
   <span class="codedirection">moc.revresym@resu</span>

8. Introduciendo texto incorrecto en la dirección y ocultándolo después desde CSS:

   <style type="text/css">
    span.displaynone { display:none; }
   </style>
   
   Email me: user@<span class="displaynone">goaway</span>myserver.net

9. Generando el enlace desde javascript partiendo de una cadena codificada en ROT13, según una idea original de Christoph Burgdorfer:

   <script type="text/javascript">  
    document.write('<n uers=\"znvygb:fvyinasbbone10@gvyyyngr.pbz\" ery=\"absbyybj\">'.replace(/[a-zA-Z]/g, function(c){return String.fromCharCode((c<="Z"?90:122)>=(cc=c.charCodeAt(0)+13)?c:c-26);}));   
   </script>silvanfoobar's Mail</a>

   
   

 <a href="http://www.csszengarden.com" hreflang="en">CSS Zen Garden</a>

a[hreflang="en"]
{
    padding-right: 19px;
    background-image: url(img/bandera_ing.jpg);
    background-position: right center;
    background-repeat: no-repeat;
}

Antes de nada: estructurar la solución

• El modelo, que representará la información manejada por el sistema. Para no complicar el ejemplo (o complicarlo, según se mire ;-)), vamos a crear una colección en memoria sobre la que realizaremos las consultas.


• La vista, que será un formulario en el que colocaremos los dos desplegables. El primero de ellos permitirá seleccionar una categoría tomada del Modelo, y el segundo mostrará los elementos de dicha categoría de forma dinámica.


• El controlador, en el que incluiremos acciones, en primer lugar, para inicializar y mostrar el formulario y, en segundo lugar, para obtener la lista de elementos relacionados con la categoría seleccionada. Esta última acción será invocada por la vista cuando el primer desplegable cambie de valor.

Primero: el modelo

public class Datos
{
  private static Dictionary<string, string[]> datos =
    new Dictionary<string, string[]>
    {
      { "Animal",  new[] { "Perro", "Gato", "Pez"}           },
      { "Vegetal", new[] { "Flor", "Árbol", "Espárrago"}     },
      { "Mineral", new[] { "Cuarzo", "Pirita", "Feldespato"} }
    };

  public static IEnumerable<string> GetCategories()
  {
    return datos.Keys;
  }

  public static IEnumerable<string> GetElementsForCategory(string category)
  {
    string[] els = null;
    datos.TryGetValue(category, out els);
    return els;
  }
}

• La información se almacenará en un Dictionary<string,string[]>. Esto, por si no estás muy familiarizado con los generics o tipos genéricos, sólo quiere decir que se trata de un diccionario cuya clave será de tipo string (las categorías) y el valor será un array de strings (los elementos asociados a cada categoría).
  
  De esta forma, podremos obtener fácilmente la lista de categorías simplemente enumerando las claves (Keys) del diccionario, y los elementos contenidos en una categoría sólo con devolver el valor asociado a la misma, como vemos en los métodos GetCategories() y GetElementsForCategories().
  


• Para inicializar el diccionario he utilizado un inicializador de colecciones, una característica de C# 3.0 ya comentada en un post anterior.


• Los dos métodos de consulta de datos retornan un IEnumerable<string> (¡me encantan los generics!), flexibilizando el tipo devuelto. Así, podríamos devolver cualquier tipo de objeto que implemente este interfaz, prácticamente todas las listas, colecciones y arrays, siempre que contengan en su interior un string.

Segundo: la vista

<form method="post" action="#">
<fieldset><legend>Formulario</legend>
  <label for="ddCategory">Categoría:</label>
  <%= Html.DropDownList("ddCategory") %>
  <label for="ddElement">Elemento:</label>
  <%= Html.DropDownList("ddElement") %>
</fieldset>
</form>

<script type="text/javascript">

  // Inicialización

  $(document).ready(function() {        
    $("#ddCategory").change(function() {
      cambiaElementos($("#ddCategory").val());
    });
    cambiaElementos($("#ddCategory").val());
  });

  // Carga el desplegable de elementos en función
  // de la categoría que le llega como parámetro.

  function cambiaElementos(cat) {
       
    var dd = document.getElementById("ddElement");
    dd.options.length = 0;
    dd.options[0] = new Option("Espere...");
    dd.selectedIndex = 0;
    dd.disabled = true;

    // Control de errores

    $("#ddElement").ajaxError(function(event, request, settings) {
      dd.options[0] = new Option("Categoría incorrecta");
    });

    // Obtenemos los datos...

    $.getJSON(
        '<%= Url.Action("GetElements") %>', // URL a la acción
        { category: cat },                  // Objeto JSON con parámetros
        function(data) {                    // Función de retorno exitoso
          $.each(data, function(i, item) {
            dd.options[i] = new Option(item, item);
          });
          dd.disabled = false;
        });
    }
    </script>

• La URL de la acción, obtenida utilizando el helper Url.Action que devuelve la dirección de la acción cuyo nombre le pasamos como parámetro.


• El objeto, en formato JSON, uyas propiedades representan los parámetros a enviar al controlador.


• La función a ejecutar cuando se reciban datos del servidor. El parámetro de entrada data contendrá el array de string con el que tenemos que llenar el desplegable, enviado desde el servidor según la notación JSON.
  
  Aunque el recorrido de este vector y la carga de opciones en el control podría haberse realizado de forma sencilla mediante un bucle, he utilizado el método each para ilustrar el uso de este tipo de iteradores, tan de moda y muy al estilo funcional empleado, por ejemplo, en las expresiones lambda. Este método recibe dos parámetros; el primero es la colección sobre la cual se va a iterar, y el segundo es una función que se ejecutará para cada uno de los elementos recorridos.

Tercero: el controlador

  public class HomeController : Controller
  {
    public ActionResult Index()
    {
      ViewData["ddCategory"] = new SelectList( Datos.GetCategories() );
      ViewData["ddElement"] = new SelectList( new [] {"(Selecciona)"} );
      return View();
    }

    public ActionResult GetElements(string category)
    {
      IEnumerable<string> elements = Datos.GetElementsForCategory(category);
      if (elements == null)
        throw new ArgumentException("Categoría " + category +" no es correcta");

      Thread.Sleep(1000); // Simulamos tiempo de proceso...

      return Json(elements);
    }
 }

Descargar proyecto (Visual Web Developer Express 2008 + SP1 + ASP.NET MVC Preview 3)

 .lupa
 {
   background: white url(icono_lupa.gif) no-repeat 2px center;
   padding: 2px 2px 2px 18px;
 }
 .telefono
 {
   background: white url(icono_telefono.gif) no-repeat 2px center;
   padding: 2px 2px 2px 18px;
 }

 <input type="text" class="lupa" />
 <input type="text" class="telefono" />