Trabajar sin Ajax en ASP:NET es una mala practica; ya que ; es muy complicado tratar los eventos de AutoPostBack que genera nuestros controles. Muchos opinarán y por que no usar JavaScript, Jquery o otras librerías que nos facilitan la tarea del lado clientes pues claro es lo mas idóneo desde luego.
Sin embargo me he puesto a jugar un poco con los AutoPostBack que generan los controles ASP y les presento como sincronizar estos para que se encuentren en el mismo index de los items.
Primero creamos un proyecto ASP.NET con el nombre WebLisbox (opcional claro) y dentro del Default.aspx compiemos nuestro codigo HTML para que genere los controles.
ahora copiemos el código HTML en las etiquetas correspondientes o reemplazamos todo con el que dejo a continuación
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebLisbox.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
Seleccion Sincronizada<br />
<asp:ListBox ID="ListProductos" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListProductos_SelectedIndexChanged">
<asp:ListItem>Arroz</asp:ListItem>
<asp:ListItem>Azucar</asp:ListItem>
<asp:ListItem>Papa</asp:ListItem>
<asp:ListItem>Lentejas</asp:ListItem>
<asp:ListItem>Café</asp:ListItem>
</asp:ListBox>
<asp:ListBox ID="ListPunit" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListPunit_SelectedIndexChanged">
<asp:ListItem>2.30</asp:ListItem>
<asp:ListItem>1.80</asp:ListItem>
<asp:ListItem>2.00</asp:ListItem>
<asp:ListItem>3.50</asp:ListItem>
</asp:ListBox>
<asp:ListBox ID="ListCant" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListCant_SelectedIndexChanged">
<asp:ListItem>1 KG</asp:ListItem>
<asp:ListItem>1 KG</asp:ListItem>
<asp:ListItem>2.5 KG</asp:ListItem>
<asp:ListItem>1 KG</asp:ListItem>
</asp:ListBox>
<asp:ListBox ID="ListPtotal" runat="server" AutoPostBack="True" OnSelectedIndexChanged="ListPtotal_SelectedIndexChanged">
<asp:ListItem>2.30</asp:ListItem>
<asp:ListItem>1.80</asp:ListItem>
<asp:ListItem>5.00</asp:ListItem>
<asp:ListItem>3.50</asp:ListItem>
</asp:ListBox>
</div>
</form>
</body>
</html>
ahora si pulsamos en diseño veremos nuestros Listbox como se muestra en la imagen
y en nuestro codeBegin o código de C# o VB sea el caso
escribimos lo siguiente
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebLisbox
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void
ListProductos_SelectedIndexChanged(object sender, EventArgs e)
{
ListPunit.AutoPostBack = false;
ListCant.AutoPostBack = false;
ListPtotal.AutoPostBack = false;
ListPunit.SelectedIndex =
ListProductos.SelectedIndex;
ListCant.SelectedIndex =
ListProductos.SelectedIndex;
ListPtotal.SelectedIndex =
ListProductos.SelectedIndex;
ListPunit.AutoPostBack = true;
ListCant.AutoPostBack = true;
ListPtotal.AutoPostBack = true;
}
protected void ListPunit_SelectedIndexChanged(object sender, EventArgs e)
{
ListProductos.AutoPostBack = false;
ListCant.AutoPostBack = false;
ListPtotal.AutoPostBack = false;
ListProductos.SelectedIndex =
ListPunit.SelectedIndex;
ListCant.SelectedIndex =
ListPunit.SelectedIndex;
ListPtotal.SelectedIndex =
ListPunit.SelectedIndex;
ListProductos.AutoPostBack = true;
ListCant.AutoPostBack = true;
ListPtotal.AutoPostBack = true;
}
protected void ListCant_SelectedIndexChanged(object sender, EventArgs e)
{
ListProductos.AutoPostBack = false;
ListPunit.AutoPostBack = false;
ListPtotal.AutoPostBack = false;
ListProductos.SelectedIndex =
ListCant.SelectedIndex;
ListPunit.SelectedIndex =
ListCant.SelectedIndex;
ListPtotal.SelectedIndex =
ListCant.SelectedIndex;
ListProductos.AutoPostBack = true;
ListPunit.AutoPostBack = true;
ListPtotal.AutoPostBack = true;
}
protected void ListPtotal_SelectedIndexChanged(object sender, EventArgs e)
{
ListProductos.AutoPostBack = false;
ListPunit.AutoPostBack = false;
ListCant.AutoPostBack = false;
ListPunit.SelectedIndex =
ListPtotal.SelectedIndex;
ListCant.SelectedIndex =
ListPtotal.SelectedIndex;
ListProductos.SelectedIndex =
ListPtotal.SelectedIndex;
ListProductos.AutoPostBack = true;
ListPunit.AutoPostBack = true;
ListCant.AutoPostBack = true;
}
}
}
Y finalmente pulsamos ejecutar para visualizar nuestra pagina y poder probar los listbox.
espero les halla servido. Saludos
