Vision AG

blog visionag = new blog(post);

Datalist Anidados con Ajax ASP.NET 2.0

Posted by Vision AG en junio , 2008

Estaba realizando un sitio un web cuando me tope con esta situación, se trataba de un calendario donde se agregaban eventos por un mes determinado, y un mes puede tener varios eventos, y el cliente queria que se muestre por cada mes todos eventos, de forma desplegable.Lo que plantee fue usar datalist anidados por cada mes con ajax, y bueno algo salió, les muestro lo que hice.

1) Lo primero que necesitamos es tener instalado AjaxToolKit, no voy a explicar como intalarlo ya que aqui puede encontrar mucha info de ese tema..

2) Creamos un nuevo proyecto web, agregaremos una pagina en donde pondremos los siguientes controles:
* ToolScriptManager de barra de herramientas
* Datalist (datalist1) a nuestra pagina
* Datasource el cual traera los datos del datalist.

En mi base de datos tengo una tabla Eventos que tiene esto campos
IdEvento
Comienzo
Fin
Mes
Resumen

Luego enlazamos el datalist1 con el sqldatasource:
datalist_ajax1
En la imagen superior vemos un ejemplo, en mi caso se trata de un datalist1 que trae todos los meses (en los que exista un evento), simple…

3) Ahora ingresamos a la edición del template del datalist1:
datalist_ajax2
Ahora vamos a agregar el texto que se visualizara en la cabecera, que es el mes, para esto agregamos un label lblMes (lo ponemos dentro de un panel “panel1”), hacemos click en las tareas de label, y luego se abrira el databinding del label, en donde agregaremos la expresion Eval(“mes”). Esta expresion se debe corresponder con el campo que trae el datasource en la consulta.

En imagenes se entiende bastante creo:
datalist_ajax3 datalist_ajax4

4)Sin salir de la edición del template del datalist1, agregamos un control datalist2 adentro con su respectivo datasource (sql_evento), todo esto dentro de un panel “panel2”.También agregamos un control ajax “CollapsiblePanelExtender”, este me permite que el “panel2” se expanda y se contraiga al hacer click en el mes que esta en el “panel1″, para ello en propiedades del mismo en TargetControlID:”Panel2”
datalist_ajax6
El sql_evento debe recibir como parametro el mes
SELECT blabla,mes…
FROM BO_Evento
WHERE (mesevento = @mes) datalist_ajax5
En la imagen podemos ver como enlazamos como parametro el control lblMes de datalist1 en el sql_evento(datasource del datalist2), esto lo hacemos al configurar el origen de datos

5)Ahora ingresamos a la edicion del template del datalist2 en donde agregamos el campo/s que se van a mostrar por cada mes.datalist_ajax7
En la imagen vemos que agregue el label “lblResumen” el cual esta enlazado con el campo resumen.
Si seleccionamos el “panel2” y miramos sus propiedades, veremos algunas muy particulares donde podremos manipular varias propiedades relacionadas con el control ajax, por ejemplo si queremos que aparezca expandido al iniciarse, etc

datalist_ajax9

6)Despues podemos jugar un poco con los estilos para darle una terminacion mas bonita y por ultimo terminamos de editar los templates de los distintos datalist, bueno ahora le damos play y vemos que tal quedo, acá les dejo un link de la pagina donde implemente esto

Anuncios

Una respuesta to “Datalist Anidados con Ajax ASP.NET 2.0”

  1. Remember in Dinner Impossible, when the one guy bought the shrimp and had to spend all that time cleaning them? Who was that? He hasn’t been back, rig Click https://zhoutest.wordpress.com/

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: