Carga y selección de datos en tablas relacionadas empleando AJAX DropDownExtender y SqlDataSource (II)

Aplicando mejoras visuales

En la primera entrega de este artículo vimos como crear, mediante el control DropDownExtender del Ajax Toolkit, una lista desplegable cuyos elementos componíamos a partir de un DataView obtenido desde un objeto SqlDataSource.

La funcionalidad conseguida era correcta, no resultando así en lo tocante al apartado visual, ya que en la carga inicial de datos, este control produce un molesto efecto de parpadeo, al mostrar por un instante el control Panel que contiene la lista de elementos. Por otro lado se encuentra el hecho de que los mencionados elementos, al ser controles LinkButton, se visualizan como es natural con la apariencia estándar de enlaces. En esta parte del artículo, nuestro objetivo será aplicar algunas mejoras estéticas a la lista para que luzca con toda su lozanía y esplendor ;-). Estas operaciones las desarrollaremos dentro del evento Load de la página.

Poniéndonos manos a la obra, en primer lugar modificaremos la configuración de color del TextBox que realiza la apertura de la lista a través de sus propiedades de estilo. Adicionalmente también tendremos que actuar sobre la propiedad DropDownExtender.HighlightBackColor si queremos que al situar el cursor sobre el TextBox se mantenga el mismo color. La forma de evitar el parpadeo inicial de la lista pasará por asignar el valor «none» al estilo «display» del Panel.

//….

// configurar aspecto visual de los componentes de la lista desplegable

this.pnlElementosLista.Style[«display»] = «none»;

this.txtTituloLista.Style[HtmlTextWriterStyle.Color] = «DarkBlue»;

this.txtTituloLista.Style[HtmlTextWriterStyle.BackgroundColor] = «LightGreen»;

this.ddeLista.HighlightBackColor = System.Drawing.Color.FromName(«LightGreen»);

// obtener las filas de la fuente de datos

DataView dvDimProductSubcategory =

    (DataView)this.dsrDimProductSubcategory.Select(new DataSourceSelectArguments());

//….

A continuación pasaremos a retocar los LinkButton que funcionan como elementos de la lista, modificando igualmente sus propiedades de estilo. Por ejemplo, mediante TextDecoration eliminaremos el subrayado del texto, y para que se dispongan en vertical dentro de la lista, asignaremos el valor «block» al estilo Display.

// recorrer las filas de datos…

for (int nIndice = 0; nIndice < dvDimProductSubcategory.Count; nIndice++)

{

    //….

    // configurar aspecto visual base del elemento de lista

    oLinkButton.Style[HtmlTextWriterStyle.TextDecoration] = «none»;

    oLinkButton.Style[HtmlTextWriterStyle.Display] = «block»;

    oLinkButton.Style[HtmlTextWriterStyle.Cursor] = «default»;

    oLinkButton.Style[HtmlTextWriterStyle.BackgroundColor] = «LightGreen»;

    oLinkButton.Style[HtmlTextWriterStyle.Color] = «DarkBlue»;

    oLinkButton.Style[HtmlTextWriterStyle.Padding] = «4px 19px 4px 33px»;

    //….

}

En su estado actual, nuestra lista de elementos se mostraría de forma similar a la siguiente imagen.

Visualmente ya hemos mejorado algo, pero todavía nos faltan un par de cosillas. La más inmediata sería suprimir el horrendo espacio vacío que queda entre cada elemento, problema este con muy fácil solución, ya que simplemente tenemos que eliminar la línea de código que inserta una etiqueta <br> después de añadir el LinkButton al Panel.

La segunda cuestión radica en el hecho de que el usuario, al desplazar el cursor por la lista abierta, no obtiene una respuesta visual del elemento sobre el que está o ha dejado de estar posicionado. Este otro entuerto lo vamos a desfacer añadiendo un par de funciones en javascript para los eventos onmouseover y onmouseout, correspondientes a la parte cliente de los LinkButton. Al modificar algunas propiedades visuales de estos elementos, conseguiremos ofrecer una adecuada interacción con el usuario. Dichas operaciones podríamos codificarlas en un bloque de script de la página de la siguiente forma.

<script language=«javascript» type=«text/javascript»>

function LinkButton_onmouseover(oLnkBtn)

{

    oLnkBtn.style.backgroundColor = ‘LightSkyBlue’;

    oLnkBtn.style.border = ‘1px solid DarkBlue’;

    oLnkBtn.style.padding = ‘3px 18px 3px 32px’;

}

function LinkButton_onmouseout(oLnkBtn)

{

    oLnkBtn.style.backgroundColor = ‘LightGreen’;

    oLnkBtn.style.borderStyle = ‘none’;

    oLnkBtn.style.padding = ‘4px 19px 4px 33px’;

}

</script>

Sin embargo, como ya hemos comentado anteriormente, todas las operaciones pertenecientes a esta parte del artículo las vamos a implementar en el codebehind de la página, y dado que necesitamos emitir código de script desde el servidor al cliente, recurriremos a la propiedad ClientScript de la página, que contiene un objeto ClientScriptManager, cuyo método RegisterClientScriptBlock emplearemos para pasarle el bloque de código de script que previamente habremos creado mediante un objeto StringBuilder, como vemos a continuación.

protected void Page_Load(object sender, EventArgs e)

{

    // emitir código cliente para los eventos

    // que se produzcan sobre los elementos de la lista desplegable

    System.Text.StringBuilder sbScript = new System.Text.StringBuilder();

    sbScript.Append(«function LinkButton_onmouseover(oLnkBtn) n»);

    sbScript.Append(«{ n»);

    sbScript.Append(«oLnkBtn.style.backgroundColor = ‘LightSkyBlue’; n»);

    sbScript.Append(«oLnkBtn.style.border = ‘1px solid DarkBlue’; n»);

    sbScript.Append(«oLnkBtn.style.padding = ‘3px 18px 3px 32px’; n»);

    sbScript.Append(«} n»);

    sbScript.Append(«function LinkButton_onmouseout(oLnkBtn) n»);

    sbScript.Append(«{ n»);

    sbScript.Append(«oLnkBtn.style.backgroundColor = ‘LightGreen’; n»);

    sbScript.Append(«oLnkBtn.style.borderStyle = ‘none’; n»);

    sbScript.Append(«oLnkBtn.style.padding = ‘4px 19px 4px 33px’; n»);

    sbScript.Append(«} n»);

    this.ClientScript.RegisterClientScriptBlock(this.GetType(), «CodigoJS», sbScript.ToString(), true);

    //….

Para que dicho código de script pueda ser ejecutado cuando el control LinkButton desencadene los eventos anteriormente comentados,  los asociaremos mediante su propiedad Attributes de la siguiente forma.

for (int nIndice = 0; nIndice < dvDimProductSubcategory.Count; nIndice++)

{

    //….

    // configurar aspecto visual base del elemento de lista

    //….               

    //….               

    // asociar código cliente con eventos del LinkButton,

    // para advertir el estado de entrada y salida del cursor

    // en cada elemento de la lista desplegable

    oLinkButton.Attributes.Add(«onmouseover», «LinkButton_onmouseover(this)»);

    oLinkButton.Attributes.Add(«onmouseout», «LinkButton_onmouseout(this)»);

    //….               

}

Al volver a ejecutar la aplicación, el aspecto visual de nuestro control de lista habrá mejorado considerablemente como podemos comprobar en la siguiente imagen.

La única tarea pendiente que nos queda para completar el ejemplo corresponde a la búsqueda, en la tabla DimProductCategory, del registro relacionado con el valor seleccionado en la lista. Pero este es un aspecto que dejaremos para la próxima entrega del artículo. El código fuente de la entrega actual está disponible en este enlace.

Un saludo.