MVC: Haciendo amigables a los ListBox

Siempre se debe tener en cuenta el volumen de los datos, no sólo por el tiempo de descarga de los mismos sino también, porque buscar una opción entre demasiadas puede ser algo que tire abajo el sitio desarrollado.

En esta oportunidad, veremos cómo hacer la interfaz de usuario resulte en una mejor experiencia para quien la usa. Para ello, utilizaremos el control Chosen desarrollado por Harvest. Este control no sólo permitirá al usuario poder elegir la opción deseada entre muchas opciones, sino que además resulta agradable visualmente.

En un post anterior habíamos desarrollado una interfaz en la que se le permitía a un usuario seleccionar de un ListBox las materias a las que deseaba inscribirse como alumno. Basados en ese ejemplo, procederemos a "convertir" el ListBox en un control más amigable para el usuario.

Para esto, descargaremos la librería de Chosen y los agregaremos a nuestro proyecto de la siguiente manera:

• Copiar los archivos de script chosen.jquery.js y chosen.jquery.min.js en la carpeta scripts.
• Copiar los archivos de imagen chosen-sprite.png y chosen-sprite@2x.png en las carpetas Content\themes\base\images\ y Content\themes\base\minified\images\.
• Copiar los archivos de estilo: chosen.css en la carpeta Content\themes\base\ y chosen.min.css en la carpeta Content\themes\base\minified\.
• Modificar ambos archivos de estilo para que se puedan encontrar las imágenes. En donde dice url('chosen-sprite.png') debe decir url('images/chosen-sprite.png'). Hacer lo mismo para el archivo de imagen chosen-sprite@2x.png.

Una vez hecho esto, nuestro proyecto debería tener agregado lo necesario para poder implementar el control Chosen.
Como siguiente paso, pasaremos a implementar el control. Para hacerlo se debe hacer lo siguiente:
Modificar la clase BundleConfig para que se agreguen tanto el script como el estilo del control.

using System.Web;
using System.Web.Optimization;

namespace ProgramacionSolida.SeleccionMultiple
{
    public class BundleConfig
    {
        public static void RegisterBundles( BundleCollection bundles )
        {
            bundles.Add( new ScriptBundle( "~/bundles/jquery" ).Include(
                        "~/Scripts/jquery-{version}.js" ) );

            bundles.Add( new ScriptBundle( "~/bundles/jqueryui" ).Include(
                        "~/Scripts/jquery-ui-{version}.js" ) );

            bundles.Add( new ScriptBundle( "~/bundles/jqueryval" ).Include(
                        "~/Scripts/chosen.jquery.js", //Inclusión del script de chosen
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*" ) );

            bundles.Add( new ScriptBundle( "~/bundles/modernizr" ).Include(
                        "~/Scripts/modernizr-*" ) );

            bundles.Add( new StyleBundle( "~/Content/css" ).Include(
                "~/Content/themes/base/chosen.css", //Inclusión del CSS de chosen
                "~/Content/site.css" ) );

            bundles.Add( new StyleBundle( "~/Content/themes/base/css" ).Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css" ) );
        }
    }
}

Una vez hecho esto, ambos archivos quedarán embebidos en el diseño de nuestra aplicación MVC.
El siguiente paso es activarlo en la página que se desea implementar. En nuestro ejemplo, es en la vista de inscripción (Inscribir.cshtml). Por un lado, al control ListBox le agregaremos un objeto con un atributo HTML: data_placeholder. Este atributo es utilizado por el control para mostrar un texto de inicialización.

<div class="editor-label">
    @Html.LabelFor( model => model.MateriasSeleccionadas )
</div>
<div class="editor-field">
    @Html.ListBox( "MateriasSeleccionadas", ViewBag.ListMaterias as MultiSelectList, new { data_placeholder = "Seleccione los horarios de atención..." } )
    @Html.ValidationMessageFor( model => model.MateriasSeleccionadas )
</div>

Y por otro lado, agregaremos un script local para "convertir" el control ListBox en el control chosen.

    <script type="text/javascript">
        $('#MateriasSeleccionadas').chosen({
            no_results_text: "No se encuentran coincidencias!",
            allow_single_deselect: true,
            width: "300px"
        });
    </script>

Finalmente, veremos como el ListBox original se ha convertido en un control que permite al usuario tener una experiencia mejorada en nuestro sitio al momento de elegir opciones.

Vista original del ListBox.

Vista con el control chosen implementado.

Para que resulte más práctico, dejo a disposición la descarga de este ejemplo. El mismo fue creado con Visual Studio 2012 y .Net Framework 4.5.

Por Juan Barrionuevo