Como utilizar el control ListBox con Ajax y ASP.NET

Roy Rojas

22 noviembre, 2009

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="&gt;" />
            <br />
            <asp:Button ID="btnDel" runat="server" Text="&lt;" />
        </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.