Llenar inputs según lista ASP [SOLUCIONADO]

Llenar campos de texto automáticamente en ASP.NET puede ser una tarea bastante común, sobre todo cuando estamos desarrollando aplicaciones que requieren alta interactividad con el usuario. Para ejemplificar cómo llevar a cabo esta acción, partiremos de un escenario donde disponemos de una lista y queremos que al seleccionar un ítem en esta lista, los datos se coloquen automáticamente en campos de formulario.

**Implementación básica para asignar datos a inputs:**
Para comenzar, es esencial mirar una formación HTML donde configuraremos nuestro formulario y su respectivo botón para la acción de copiado de código:

<label for="listaItems">Seleccione un ítem:</label>
<select id="listaItems" onchange="rellenarInputs()">
    <!-- Opciones de la lista -->
</select>

<label for="inputNombre">Nombre:</label>
<input type="text" id="inputNombre" />

<label for="inputDetalle">Detalle:</label>
<input type="text" id="inputDetalle" />

<script>
function rellenarInputs() {
    // Código para rellenar inputs
}
</script>

Copiar

Dentro de la función `rellenarInputs()`, se deberá escribir el cómputo que, tras la selección del usuario, coloque los datos correspondientes en los controles de texto. Usando **JavaScript** junto con **ASP.NET**, se puede lograr algo así:

<script>
function rellenarInputs() {
    var lista = document.getElementById("listaItems");
    var nombre = document.getElementById("inputNombre");
    var detalle = document.getElementById("inputDetalle");

    var selectedItem = lista.options[lista.selectedIndex].text;
    
    // Aquí la lógica para encontrar los datos asociados al ítem seleccionado
    // Por ejemplo, puede ser una búsqueda en un array de objetos JavaScript:
    var datos = [
        {nombre: 'Ítem 1', detalle: 'Detalle del ítem 1'},
        {nombre: 'Ítem 2', detalle: 'Detalle del ítem 2'},
        // Más ítems...
    ];
    
    var datosItemSeleccionado = datos.find(function(item) {
        return item.nombre === selectedItem;
    });
    
    nombre.value = datosItemSeleccionado.nombre;
    detalle.value = datosItemSeleccionado.detalle;
}
</script>

Copiar

**Trabajando con ASP.NET para gestionar la lista:**
ASP.NET proporciona mecanismos para el manejo de estados de los controles de servidor durante los **postback**. A fin de poder alimentar los inputs con datos desde el servidor, podemos hacer uso de los **Web Forms**. Veamos un ejemplo con el uso de **DropDownList** y **TextBox**:

<asp:DropDownList ID="DropDownListItems" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownListItems_SelectedIndexChanged">
    <!-- Opciones generadas en el servidor -->
</asp:DropDownList>

<asp:TextBox ID="TextBoxNombre" runat="server"></asp:TextBox>
<asp:TextBox ID="TextBoxDetalle" runat="server"></asp:TextBox>

Copiar

El código del servidor que manejaría el evento sería parecido a esto:

protected void DropDownListItems_SelectedIndexChanged(object sender, EventArgs e)
{
    string selectedItem = DropDownListItems.SelectedItem.Text;
    
    // Lógica para recuperar datos asociados al ítem seleccionado
    // Puede ser una llamada a una base de datos, por ejemplo:
    
    TextBoxNombre.Text = ObtenerNombre(selectedItem);
    TextBoxDetalle.Text = ObtenerDetalle(selectedItem);
}

private string ObtenerNombre(string item)
{
    // Lógica para obtener el nombre    
    return "Nombre obtenido para " + item;
}

private string ObtenerDetalle(string item)
{
    // Lógica para obtener el detalle    
    return "Detalle obtenido para " + item;
}

Copiar

Esta configuración permite que, al elegir un ítem de la lista, se ejecute un **postback** y se actualicen los **TextBox** según la información que se haya recuperado en el código de servidor.