Gerardo Contijoch

Experiencias del día a día trabajando con .NET – ASP.NET, C#, ASP.NET MVC y demas…

Un CheckBoxList que funciona en ASP.NET MVC

Posted by Gerardo Contijoch en julio 4, 2009

Si buscamos en internet ‘CheckBoxList ASP.NET MVC’ encontraremos infinidad de páginas con quejas de la desaparición del método de extensión CheckBoxList() de la clase HtmlHelper en la Preview 5 de ASP.NET MVC (antes de la versión oficial). Este es un problema de aparente fácil resolución ya que el método CheckBox() sigue estando presente, por lo que una lista de CheckBoxes podría crearse con un código similar al siguiente:

   1: <% for (int i = 0; i < 4; i++) {%>
   2:   <%= Html.CheckBox("checks", (object)new { value = "val" + i.ToString() })%><%= "Check " + i.ToString() %><br/>
   3: <%}%>

Sin embargo, rápidamente nos vamos a encontrar con dos problemas. El primero de ellos se hace presente dentro del código de la acción que se ejecuta al postear el form.

Dada la siguiente vista:

   1: <% using (Html.BeginForm("Index1", "Home", FormMethod.Post)) { %>
   2:     <% for (int i = 0; i < 4; i++) {%>
   3:         <%= Html.CheckBox("checks1", (object)new { value = "val" + i.ToString() })%><%= "Check " + i.ToString() %><br/>
   4:     <%}%>
   5:     <input type="submit" value="Post!" />
   6: <%}%>

veamos como recibimos los valores de los CheckBoxes si tildamos sólo los dos primeros CheckBoxes (los asociados a los valores ‘val0’ y ‘val1’):

aspnetmvc-checkboxes-valoresChecks1

Como se puede apreciar, lo que recibimos es un array de valores un tanto desconcertante. Esto se debe a la manera en que postea el valor de los CheckBoxes.

Posteo de Checkboxes

Un CheckBox no es más que un input de tipo checkbox en una página, el cual puede tener o no un valor asociado. A diferencia de como funciona un input de tipo text (un TextBox), el valor del checkbox sólo se postea si el mismo esta tildado. Esto significa que si en un form HTML no tildamos un CheckBox, su valor no será enviado al servidor, lo cual puede traer muchos problemas en ASP.NET MVC si nuestra acción (la asociada al form que posteamos) tiene que recibir como parámetro el valor del CheckBox, ya que la llamada fallará cuando este no este tildado y el DefaultModelBinder no pueda asignarle un valor al parámetro asociado al mismo (debido a que no se posteó).

Es por este problema que el método de extensión CheckBox renderiza dos inputs en vez de uno solo. El primer input es el propio CheckBox (un imput de tipo ‘checkbox’), y el segundo es un input de tipo hidden llamado igual, pero cuyo valor esta hardcodeado a ‘false’. Es decir, dado el siguiente código:

   1: <%= Html.CheckBox("checkbox") %>"Check"

se renderiza lo siguiente en la página:

   1: <input id="checkbox" type="checkbox" value="true" name="checkbox"/>
   2: <input type="hidden" value="false" name="checkbox"/>
   3: Check
   4: <br/>

Así, si posteamos el form sin tildar el CheckBox, se postea el valor del input oculto, es decir, para la variable del post ‘checkbox’ se asigna el valor ‘false’ (que en el servidor es transformado en el booleano False). En cambio, si tildamos el CheckBox, se postea el valor ‘true, false’ (uno por cada input). Este valor es procesado por el DefaultModelBinder y lo interpreta como el booleano True.

Posteo de más de un CheckBox

Hay que reconocer que es un método bastante ingenioso de resolver el problema, pero lamentablemente está pensado para funcionar sólo con un único CheckBox. Volviendo al ejemplo que presenté al comienzo de este post, se puede ver ahora que el array que recibimos en nuestra acción esta conformado por los valores asociados a cada uno de los CheckBoxes renderizados, esto es, se posteo ‘val0, false’ para el primer CheckBox, ‘val1, false’ para el segundo, ‘false’ para el tercero, y ‘false’ para el cuarto (recordemos que los dos últimos CheckBoxes no fueron tildados). Esta forma de recibir los parámetro puede ser bastante problemática. Por un lado, no podemos procesar los valores con un foreach ya que no todos los valores nos interesan, sólo aquellos que son distintos a ‘false’ nos resultan útiles. Uno podría discriminar estos valores para recuperar sólo el set que nos interesa, pero esto es posible únicamente si no posteamos valores booleanos ya que si efectivamente queremos un valor ‘false’ cuando no tildamos un CheckBox, no vamos a poder ubicarlo fácilmente dentro del array. Es verdad que uno puede imaginarse una lógica un tanto compleja en donde si se encuentra un valor ‘true’, entonces ignora el siguiente valor (que debería ser ‘false’), pero esto tiene una utilidad limitada, ya que muy posiblemente nos topemos con el segundo de los problemas que mencioné anteriormente.

Este segundo problema es similar al del posteo de los valores, pero se presenta a la hora de mostrarlos a los valores. Cuando posteamos un form en ASP.NET MVC los parámetros de las acciones se cargan en el ModelState, lo cual nos permite, al momento de renderizar la vista inicializar los valores de los controles con los valores posteados para que los mismos no aparezcan vacíos (recordemos que la web es stateless y luego de un post las páginas se vuelven a cargar desde cero). El modo de hacerlo es matcheando los nombres de los controles (atributo name) con las entradas del ModelState. Así, si tenemos un TextBox llamado ‘txtNombre’, ASP.NET MVC va a crear una entrada dentro del ModelState con el nombre ‘txtNombre’ asociado al valor posteado en el TextBox. Al momento de renderizar la página se consulta el ModelState y se cargan los valores posteados con anterioridad. Particularmente en nuestro caso, lo que se carga en el ModelState es un arrays de valores, el cual esta asociado a todos los CheckBoxes en el form. Y eso es un problema ya el método CheckBox() no esta preparado para procesar un array de valores, sino un único valor que determina si un CheckBox esta o no tildado (ese código puede verse claramente cerca de la línea 153 de la clase InputExtensions en el código fuente de ASP.NET MVC). Como consecuencia de esto, si tenemos más de un CheckBox con el mismo nombre en el form, los mismos no van a recuperar su estado anterior.

Un CheckBoxList que funciona

Dado ese problema, decidí crear un nuevo CheckBoxList personalizado (hay un par de implementaciones dando vueltas, pero no encontré ninguna que resolviera el segundo problema).

El código es bastante sencillo y esta ‘inspirado’ en el código del CheckBox original de ASP.NET MVC.

   1: public static partial class HtmlHelperExtensions {
   2:
   3:     public static string CheckBoxList(this HtmlHelper htmlHelper, string name, IEnumerable<string> values, object htmlAttributes) {
   4:         return CheckBoxList(htmlHelper, name, values, values, htmlAttributes);
   5:     }
   6:
   7:     public static string CheckBoxList(this HtmlHelper htmlHelper, string name, IEnumerable<string> values, IEnumerable<string> labels, object htmlAttributes) {
   8:         // No creamos ningun CheckBox si no hay valores
   9:         if (values == null) {
  10:             return "";
  11:         }
  12:
  13:         if (labels == null) {
  14:             labels = new List<string>();
  15:         }
  16:
  17:         RouteValueDictionary attributes = htmlAttributes == null ? new RouteValueDictionary() : new RouteValueDictionary(htmlAttributes);
  18:         attributes.Remove("checked");
  19:
  20:         StringBuilder sb = new StringBuilder();
  21:
  22:         string[] modelValues = new string[] { };
  23:
  24:         ModelState modelState;
  25:         if (htmlHelper.ViewData.ModelState.TryGetValue(name, out modelState)) {
  26:             modelValues = ((string[])modelState.Value.RawValue);
  27:         }
  28:
  29:         // Por cada valor pasado generamos un CheckBox
  30:
  31:         IEnumerator<string> labelEnumerator = labels.GetEnumerator();
  32:         foreach (string s in values) {
  33:             // Si el array contiene el valor correspondiente a este checkbox, entonces fue chequeado
  34:             bool isChecked = modelValues.Contains(s);
  35:             sb.Append(CrearCheckBox(name, s, isChecked, attributes));
  36:
  37:             labelEnumerator.MoveNext();
  38:             if (labelEnumerator.Current != null) {
  39:                 sb.AppendLine(labelEnumerator.Current);
  40:             }
  41:         }
  42:
  43:         // Creamos el div contenedor
  44:         TagBuilder divTag = new TagBuilder("div");
  45:         divTag.InnerHtml = sb.ToString();
  46:
  47:         // No nos olvidemos de indicar si hay un error en alguno de los checks
  48:         if (modelState != null && modelState.Errors.Count > 0) {
  49:             divTag.AddCssClass(HtmlHelper.ValidationInputCssClassName);
  50:         }
  51:
  52:         return divTag.ToString(TagRenderMode.Normal);
  53:     }
  54:
  55:     private static string CrearCheckBox(string name, string value, bool isChecked, IDictionary<string, object> htmlAttributes) {
  56:         TagBuilder tagBuilder = new TagBuilder("input");
  57:         tagBuilder.MergeAttributes(htmlAttributes);
  58:         tagBuilder.MergeAttribute("type", "checkbox");
  59:         tagBuilder.MergeAttribute("name", name, true);
  60:
  61:         tagBuilder.GenerateId(name);
  62:
  63:         if (isChecked) {
  64:             tagBuilder.MergeAttribute("checked", "checked");
  65:         }
  66:
  67:         if (value != null) {
  68:             tagBuilder.MergeAttribute("value", value, true);
  69:         }
  70:
  71:         return tagBuilder.ToString(TagRenderMode.SelfClosing);
  72:     }
  73: }

Su uso es muy sencillo:

   1: <%
   2:    List<string> values = new List<string>() { "val0", "val1", "val2", "val3", "val4" };
   3:    List<string> labels = new List<string>() { "Check 0", "Check 1", "Check 2", "Check 3", "Check 4" };
   4: %>
   5: <%= Html.CheckBoxList("checks3", values, labels, null) %>

Los valores en la acción son recibidos así:

aspnetmvc-checkboxes-valoresChecks2

El código podría mejorarse un poco más agregando la posibilidad de aplicarles estilos al div contenedor de los CheckBoxes, usar labels reales en vez de solo texto, agregar sobrecargas a los métodos, etc., pero preferí dejarlo así porque era más sencillo. Es preciso aclarar que este CheckBoxList, al igual que la primer alternativa que presenté, no va a funcionar bien con valores booleanos ya que la idea es que los valores asociados a cada uno de los CheckBoxes sean únicos.

Si encuentran algún bug o tienen algo que aportar, no duden en comentarlo.

¡Nos vemos en el próximo post!

Publicado originalmente en https://gerardocontijoch.wordpress.com.

3 comentarios to “Un CheckBoxList que funciona en ASP.NET MVC”

  1. Caterina said

    Thanks for a good idea of CheckBoxList implementation =)

  2. Christian said

    Thank you for the information. How would you get model validation working with the checkboxlist? Could you give an example in Razor please? Thank you.

  3. jaime said

    ¿con razor este problema del checkedboxlist no se arregla?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: