Lista desplegable de elementos en horizontal utilizando el control AJAX DropDownExtender

El control DropDownExtender, incluido en el Ajax Control Toolkit, nos permite crear listas desplegables con un elevado nivel de personalización, como en el caso que nos ocupa actualmente, donde supongamos que necesitamos crear una lista cuyos elementos, al ser desplegados, se dispongan alineados en horizontal, en lugar de verticalmente, como ocurre con el control DropDownList.


Por si alguien se encuentra en la tesitura de tener que desarrollar un control con un comportamiento como el que acabamos de mencionar, vamos a describir, a modo de pequeño tutorial, los pasos que debemos completar para obtener una lista desplegable de tales características.


El proyecto de ejemplo que vamos a crear se ha desarrollado utilizando Visual Studio 2008, el cual ya incluye por defecto las extensiones de AJAX en el cuadro de herramientas, mientras que el paquete de controles “Ajax Control Toolkit” será necesario descargarlo e instalarlo aparte. En la siguiente dirección encontraremos el enlace “Download the Control Toolkit”, que nos permitirá descargar el conjunto de controles adicionales para AJAX.


En el caso de que nos encontremos trabajando con una versión anterior del entorno de desarrollo: Visual Studio 2005, Visual Web Developer, etc., en la siguiente dirección hallaremos descargas también para estas versiones.


Una vez que tengamos nuestro entorno de desarrollo ajustado adecuadamente nos pondremos manos a la obra. En primer lugar crearemos un nuevo proyecto de tipo ASP.NET Web Application, basado en lenguaje C#.


Como segundo paso primordial, añadiremos al diseñador del WebForm un componente ScriptManager, imprescindible si queremos “AJAXificar” 😉 nuestra aplicación.


 


A continuación pasaremos a diseñar nuestra lista desplegable personalizada, utilizando el control DropDownExtender, cuyo mecanismo de funcionamiento se sustenta en el uso de dos controles: uno que actúe como desencadenador de apertura de la lista, y otro que contenga los elementos de la misma.


Añadiremos por lo tanto un Label, para abrir la lista, y un Panel, que funcionará como lista de elementos, sobre la que el usuario se desplazará para realizar su selección. Dentro de este último insertaremos varios Label, que harán las veces de elementos de la lista.


El siguiente paso consistirá en añadir el control DropDownExtender al WebForm, indicando en sus propiedades TargetControlID y DropDownControlID, los nombres de los controles que abrirán la lista y mostrarán los elementos respectivamente. Todo ello lo vemos en el siguiente código fuente.

<form id=”form1″ runat=”server”>
<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
</asp:ScriptManager>
<div>
    <asp:Label ID=”lblTituloLista” runat=”server” Text=”Elegir artículo” Width=”200px”></asp:Label>
    <asp:Panel ID=”pnlElementosLista” runat=”server” Width=”200px”>
        <asp:Label ID=”lblMonitor” runat=”server” Text=”Monitor”></asp:Label>
        <asp:Label ID=”lblMemoria” runat=”server” Text=”Memoria USB”></asp:Label>
        <asp:Label ID=”lblTeclado” runat=”server” Text=”Teclado”></asp:Label>
    </asp:Panel>
    <cc1:DropDownExtender ID=”DropDownExtender1″ runat=”server” DropDownControlID=”pnlElementosLista”
        TargetControlID=”lblTituloLista”>
    </cc1:DropDownExtender>
</div>
</form>

Tras estas operaciones, ya tenemos nuestro control de lista con una funcionalidad mínima, pero no completa, y decimos esto porque si ejecutamos la aplicación, observaremos que el Label de apertura se visualiza con un botón de despliegue, que al ser pulsado, abre el control Panel que contiene los elementos, pero estos ni cambian su estado visual al pasar el cursor sobre ellos, ni reaccionan ante un clic del usuario, como vemos en la siguiente imagen.



Además, como inconveniente añadido, cuando se carga el formulario en el navegador, observaremos que el panel de elementos se muestra por un instante, lo que provoca un desagradable efecto de parpadeo. Esto lo solucionamos insertando en el atributo Style del control Panel, los siguientes valores que inicialmente ocultan este.



Para completar esta falta de funcionalidad recurriremos al uso de estilos y eventos en el lado cliente. Necesitamos cambiar el estado visual, por ejemplo el color, cuando se produzcan los eventos onmousemove y onmouseout sobre cada elemento contenido en la lista, lo que solventaremos definiendo sendos estilos para estas situaciones, que asignaremos mediante las pertinentes funciones en javascript.


Por otro lado, la forma de detectar cuándo se realiza una selección sobre alguno de los elementos de la lista será a través de su evento onclick, para el que escribiremos una función que muestre el contenido del Label sobre el que se ha pulsado. Vemos seguidamente todo este código de la página al completo.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeBehind=”Default.aspx.cs” Inherits=”ListaDesplegableHorizontal._Default” %>
<%@ Register Assembly=”AjaxControlToolkit” Namespace=”AjaxControlToolkit” TagPrefix=”cc1″ %>
<!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>Lista desplegable con elementos alineados en horizontal</title>
    <style type=”text/css”>
        .ConFoco
        {
            background-color: #0099FF;
            color: White;
        }
        .SinFoco
        {
            background-color: #CCFFFF;
            color: Black;
        }
    </style>
    <script language=”javascript” type=”text/javascript”>
    function Ctl_onmousemove(oControl)
    {
        oControl.className = “ConFoco”;
    }
    function Ctl_onmouseout(oControl)
    {
        oControl.className = “SinFoco”;
    }
    function Ctl_onclick(oControl)
    {
        alert(oControl.innerText);
    }
    </script>
</head>
<body>
    <form id=”form1″ runat=”server”>
    <asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
    </asp:ScriptManager>
    <div>
        <asp:Label ID=”lblTituloLista” runat=”server” Text=”Elegir artículo” Width=”200px”
            CssClass=”SinFoco”></asp:Label>
        <asp:Panel ID=”pnlElementosLista” runat=”server” Width=”200px” CssClass=”SinFoco”
            Style=”display: none; visibility: visible;“>
            <asp:Label ID=”lblMonitor” runat=”server” Text=”Monitor”></asp:Label>
            <asp:Label ID=”lblMemoria” runat=”server” Text=”Memoria USB”></asp:Label>
            <asp:Label ID=”lblTeclado” runat=”server” Text=”Teclado”></asp:Label>
       
</asp:Panel>
        <cc1:DropDownExtender ID=”ddeListaBase” runat=”server” DropDownControlID=”pnlElementosLista”
            TargetControlID=”lblTituloLista” HighlightBackColor=”#CCFFFF”>
        </cc1:DropDownExtender>
    </div>
    </form>
</body>
</html>

Para asociar los controles con el código cliente que acabamos de escribir, utilizaremos el evento Load del WebForm, donde emplearemos la propiedad Attributes que contienen los controles, que nos permite establecer qué función de las que acabamos de escribir será ejecutada al desencadenarse un determinado evento cliente sobre el control.

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        foreach (Control oControl in this.pnlElementosLista.Controls)
        {
            if (oControl.GetType() == typeof(Label))
            {
                ((Label)oControl).Attributes.Add(“onmousemove”, “Ctl_onmousemove(this)”);
                ((Label)oControl).Attributes.Add(“onmouseout”, “Ctl_onmouseout(this)”);
                ((Label)oControl).Attributes.Add(“onclick”, “Ctl_onclick(this)”);
            }
        }
    }
}


Con estos ajustes que acabamos de realizar, ya hemos conseguido crear un control de lista con el comportamiento que indicábamos al principio de este post: una lista desplegable de elementos abierta en disposición horizontal, los cuales reaccionan visualmente a la interacción con el usuario, como vemos en la siguiente imagen.



El ejemplo de este artículo se puede descargar desde el siguiente enlace.


Espero que os pueda resultar de utilidad 8-).


Un saludo.


 

3 Comentarios

  1. ifernandez

    Una forma fácil, rápida y completa de “AJAXSIFICAR”, buen articulo Luismy

  2. lmblanco

    Muchas gracias Isaac, me alegra que te haya interesado 😎

    Espero darle alguna “vueltecilla” más a este control, a ver si puedo contar alguna otra curiosidad

  3. lmblanco

    Hola espinete

    Para el ejemplo desarrollado en este artículo he utilizado una máquina con Windows Vista y Visual Studio 2008 Beta 2. No he utilizado máquinas virtuales.

    Acabo de actualizar el contenido del artículo, y le he añadido un enlace al final desde el que puedes descargar el proyecto de Visual Studio para que hagas las pruebas que necesites. Espero que te resulte de utilidad.

    Un saludo,
    Luismi

Leave a Reply

Tema creado por Anders Norén