Como utilizar el control ListBox con Ajax y ASP.NET

Descargar solución ListBoxWithAjax

Como primer paso vamos a crear el ambiente de trabajo, se agregan los dos Listbox a una página nueva y dos botones para pasar o quitar datos de un control al otro. Al final debería de quedar algo así:

Es importante hacer notar que los controles Listbox deben llevar a propiedad Selection Mode en Multiple, por lo menos el segundo ListBox si es requerido.

Ahora vamos a cargar de datos el primer ListBox. En el CodeBehind vamos a agregar lo siguiente:

Ahora que ya tenemos la primera parte finalizada al ejecutar el sitio este se debería de ver con el primer Listbox lleno de datos:

El siguiente paso va a ser agregar el código AJAX en nuestra página web.

Al lado izquierdo tenemos el ToolBox, donde vamos a buscar la sección de Ajax llamada “AJAX Extensions”

El código de arriba, donde esta la tabla, los ListBox y los botones va a quedar contenido dentro del Update Panel.

Seleccionamos ScriptManager y lo agregamos en nuestro codigo, debe estar arriba de todos los controles AJAX, en este ejemplo lo vamos a colocar arriba de la tabla que contiene los controles.

Seguido a esto le agregamos UpdatePanel, lo seleccionamos y lo colocamos debajo del código de ScriptManager, seguido a esto le agregamos las etiquetas <ContentTemplate> y </ContentTemplate>, el resultado final sería algo así:

Ahora dentro de las etiquetas de <ContentTemplate> vamos a poner el código de la tabla que creamos en el punto 1.

El siguiente paso es agregarle la funcionalidad a los botones para pasar los datos del ListBox1 al ListBox2 o eliminar los datos en el ListBox2.

En el CodeBehind agregamos los eventos de los dos botones.

Ya en este punto estamos listo para compilar la aplicación y probarla, podemos ver que al pasar datos del ListBox1 al ListBox2, la pagina no se carga nuevamente.

Descargar solución ListBoxWithAjax

4 comments

  1. Anónimo - January 28, 2010 11:02 pm

    deberian poner mas ejemplos con ajax, aumentando la complejidad.
    igual, gracias por este ejemplo, esta muy bueno

    Reply
  2. Anónimo - May 19, 2010 8:34 pm

    pronto tendremos ejemplos mas complejos.

    Reply
  3. Anónimo - June 7, 2012 7:35 am

    Gracias, me sirvió

    Reply
  4. Anónimo - July 21, 2012 1:47 am

    Hi everyone,I have a simliar problem, but inside a user control.Pratically I have a user control (ascx) with a tabcontainer, when I put the user control in a web page I have the error: Could not find any resources appropriate for the specified culture or the neutral culture. Make sure AjaxControlToolkit.Properties.Resources.resources was correctly embedded or linked into assembly AjaxControlToolkit at compile time, or that all the satellite assemblies required are loadable and fully signed. I followed your suggestions but it doesn’t work, besides I noticed that I have this problem just with tabcontainer control, and not with others toolkit controls.Any idea.thanks a lot in advance

    Reply

Have your say