viernes, septiembre 17, 2021

Como utilizar el control ListBox con Ajax y ASP.NET

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="&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.

Descargar ejemplo ListBoxWithAjax.rar




Roy Rojashttp://www.dotnetcr.com
Con más de 20 años de experiencia en programación, experto en lenguajes .NET, VB, C#, ASP.NET, Xamarin, XCode, DBA en SQL Server. Creador de dotnetcr.com, sitio web para programadores en español. royrojas.com | dotnetcr.com | GitHub

Redes Sociales

2,736FansMe gusta
326SeguidoresSeguir

Popular esta semana

SQL Server - Merge

MERGE en SQL Server para Insert, Delete y Update con dos tablas

Ejemplo práctico usando MERGE para sincronizar dos tablas, Insert, Update y Delete en un solo query. Válido para SQL SERVER 2008 o superior.

Calcular la distancia entre dos puntos geográficos en SQL Server

En este ejemplo mostramos como calcular la distancia en metros o kilómetros entre dos puntos geográficos, por latitud y longitud. El resultado lo obtenemos en metros o kilómetros.

DELETE con subconsulta o INNER JOIN

En el siguiente ejemplo se explica la forma en que se pueden eliminar registros en nuestras tablas con instrucciones DELETE más complejas que las...

Últimos artículos

Flutter - Instagram Clone App

Instagram Clone App con Flutter

Marvin Stanley Valenzuela nos comparte un reto y genialidad a la vez, excelente práctica de la que podemos aprender mucho, diseñó en...

¿Cómo agregar una IP adicional en una VM Ubuntu en Azure?

Lo más común al momento de crear y configurar un nuevo servidor es que a este le asigne un solo IP, pero...
flutter one year

Después de un año con Flutter, esto es lo que aprendí

La historia comenzó cuando un día desperté pensando en tener un nuevo proyecto personal. Me dije a mí misma que hay muchas...
promocionar app

Cómo promocionar gratis tu app usando tappx

Como todos los que me siguen y mis redes sociales sabrán, recientemente lancé mi primera aplicación, pero más allá del desafío tecnológico de...