Descargar ejemplo ListBoxWithAjax.rar
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í:
<table> <tr> <td> <asp:ListBox ID="ListBox1" runat="server" SelectionMode="Multiple" Width="100"> </asp:ListBox> </td> <td> <asp:Button ID="btnAdd" runat="server" Text=">" /> <br /> <asp:Button ID="btnDel" runat="server" Text="<" /> </td> <td> <asp:ListBox ID="ListBox2" runat="server" SelectionMode="Multiple" Width="100"> </asp:ListBox> </td> </tr> </table>
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:
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
CargaDatos()
End If
End Sub
'Esta funcion solamente sirve para agregar los datos en el ListBox
'deberia ser reemplazada para la consulta real o la consulta a la base de datos
Private Function GeneraDataTable() As Data.DataTable
Dim dt As New Data.DataTable
dt.Columns.Add(New Data.DataColumn("valor", GetType(Integer)))
dt.Columns.Add(New Data.DataColumn("descripcion", GetType(String)))
Dim dr As Data.DataRow
dr = dt.NewRow
dr("valor") = 1
dr("descripcion") = "Primer Valor"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("valor") = 2
dr("descripcion") = "Segundo"
dt.Rows.Add(dr)
dr = dt.NewRow
dr("valor") = 3
dr("descripcion") = "Tercer Valor"
dt.Rows.Add(dr)
Return dt
End Function
'Se agregan los datos en el Listbox 1, el que tiene los datos originales
Private Sub CargaDatos()
Me.ListBox1.DataSource = GeneraDataTable()
Me.ListBox1.DataValueField = "valor"
Me.ListBox1.DataTextField = "descripcion"
Me.ListBox1.DataBind()
End Sub
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í:
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> </ContentTemplate> </asp:UpdatePanel>
Ahora dentro de las etiquetas de <ContentTemplate> vamos a poner el código de la tabla que creamos en el punto 1.
<asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <table> <tr> <td> <asp:ListBox ID="ListBox1" runat="server" Width="100" SelectionMode="Multiple"> </asp:ListBox> </td> <td> <asp:Button ID="btnAdd" runat="server" Text=">" /> <br /> <asp:Button ID="btnDel" runat="server" Text="<" /></td> <td> <asp:ListBox ID="ListBox2" runat="server" Width="100" SelectionMode="Multiple"> </asp:ListBox> </td> </tr> </table> </ContentTemplate> </asp:UpdatePanel>
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.
Protected Sub btnAdd_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnAdd.Click If Not Page.IsPostBack Then Exit Sub For Each i As ListItem In Me.ListBox1.Items If i.Selected Then Me.ListBox2.Items.Add(i) End If Next End Sub Protected Sub btnDel_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnDel.Click If Not Page.IsPostBack Then Exit Sub For Each i As Integer In Me.ListBox2.GetSelectedIndices Me.ListBox2.Items.RemoveAt(i) Next End Sub
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 ejemplo ListBoxWithAjax.rar
