GridView y PopupControlExtender

Hola a todos, a diario en mi trabajo, he tenido q trabajar bastante con el control gridview de asp, y he tenido que agregarle varias funcionalidades, para que sea mas amigable al usuario y para que su funcionamiento sea mas adecuado... asi que he decidido hacer varios post (este seré el primero sobre este control), para que cualquiera pueda mejorar la usabilidad de este control).

En este post, quiero mostrar como podemos mostrar detalles del gridview de forma "modal" con el popupcontrolextender, y asi darle mas usabilidad a nuestro gridview...
sin más carreta vamos a lo que nos interesa.

La idea es poder mostrar detalles de nuestro gridview con solo pasar el mouse por encima de un boton de detalles, como vemos en la siguiente imagen:



Asi, al pasar el mouse por cada uno de las imagenes, vamos a visualizar el nombre del pais y de la ciudad (un ejemplo simple, ya ustedes veran como aplicarlo).

Pero que necesitamos, como mencione anteriormente, vamos a usar el popucontrolextender del toolkit de ajax (si no lo tienes descargarlo aqui)

Ahora vamos a comenzar a constriur nuestro programa.

Agregamos un control grdiview a nuestra pagina aspx, y dentro de la definición de las columnas, agregamos un imagebutton y un popupcontrol extender, lo importante aqui, es que debemos comunicarnos con el servidor para poder hacer la consulta contra la base de datos y asi poder mostar los detalles, asi que en la propiedad DynamicServiceMethod del popupcontrolextender le damos el nombre de un WebMethodAttribute existente en nuesto codebehind, y en la propiedad DynamicContextKey le vamos a enviar los parametros para poder hacer los filtros en la consulta....

Dentro de nuestro WebMethodAttribute el cual debemos definir como shared en visual basic (static en c#), vamos a realizar laconsulta contra la base de datos, asi como se debe crear una tabla el la cual visualicemos los resultados...

Bien es sabido, que el popupcontrol se activa al dar click en un control (es nuestro caso imagebutton), y como la idea es mostrar los detalles con solo pasar el mouse por encima de la imagen, se debe agregar este comportamiento, lo cual hacemos en el evento rowcreated del gridview...alli agregamos los enventos onmouseover para mostrar los detalles al pasar el mouse por encima y onmouseout para ocultarlo cuando quitemos el mouse...

Como ven, no es algo complicado y si hará que nuestras aplicaciones sean más rápidas y mas fáciles para el usuario...lo cual es algo fundamental...

Link con el ejemplo !!

Espero les sea util este ejemplo y nos vemos en un próximo ejemplo, donde mostraré como hacer una paginación elegante y funcional del gridview...

Mensajes de usuario con Ajax

Muchas veces nos preguntamos, como mostrar mensajes al usuario en nuestra aplicación, ya sea informando sobre un error o bien indicando que una acción termino correctamente.

En esta ocasión, voy a mostrar como soluciones este problema usando el grandioso ajax, más en detalle el modalpopup extender.

La idea es mostrar tres tipos de mensajes (correcto,advertencia y error), para que el usuario sepa exactamente lo que ha sucedido. Así, la pariencia final de nuestros mensajes serán:



Lo primero que debemos hacer es añadir la referencia al toolkit de ajax, luego de agregarlo, definimos la interfaz (para el ejemplo serán tres botones, uno para cada tipo de diálogo).

Luego, añadimos un panel, esta panel será el encargado de contener el mensaje, y será el panel objeto del modalpopupextender de ajax.

Dentro del panel se han definido dos tablas, las cuales contendrán el encabezado del mensaje y el cuerpo del mensaje.

Luego añadimos el control de ajax, en donde pnlMensaje es el panel que contiene todo el cuadro de mensaje, el okcontrolid, es el id del control que cerrará el mensaje, BackgroundCssClass es el estilo definido para el resto de la pantalla, asi el usuario no podrá realizar ninguna acción mientras que el mensaje este visible, y el targetcontrolid "supuestamente" el control que mostrara el mensaje, pero luego veremos que no sera asi, sin embargo se debe definir el control con un estilo en display none para que no sea visto en la página.

Luego de crear la interfaz, pasamos al codebehind, y alli realmente sera en donde se llame cada mensaje.

Primero creamos una enumeracion, la cual contiene los tres tipos de mensajes:

Private Enum TipoMensaje
eerror = 1
correcto = 2
advertencia = 3
End Enum

Luego, creamos un procedimiento el cual se encargara de mostrar el mensaje, y definir el estilo q se aplicará. Este procedimiento recibirara dos parametros, el mensaje para el usuario y el tipo del mensaje (el cual sera sesgado por la enumeracion creadada). Dentro de la funcion definimos los estilos para cada mensaje dependiendo del tipo de mensaje recibido.

Private Sub mostrarmensaje(ByVal mensaje As String, ByVal Tipo As TipoMensaje)
Select Case CInt(Tipo)
Case 1
pnlMensaje.CssClass = "CajaDialogoError"
mensajeheaderPanel.CssClass = "MensajeHeaderError"
Case 2
pnlMensaje.CssClass = "CajaDialogoCorrecto"
mensajeheaderPanel.CssClass = "MensajeHeaderCorrecto"
Case 3
pnlMensaje.CssClass = "CajaDialogoAdvertencia"
mensajeheaderPanel.CssClass = "MensajeHeaderAdvertencia"
End Select
mensajeLabel.Text = mensaje
mpeMensaje.Show()
End Sub

y listo... ya tenemos para nuestro sitio tres tipos de mensajes... cualquier duda o comentario julito_gtu@hotmail.com

Puedes descargar el ejemplo aquí !!