Carga y selección de datos en tablas relacionadas empleando AJAX DropDownExtender y SqlDataSource (I)

Creación de la lista desplegable y carga de datos

En un artículo anterior hicimos una introducción básica al control DropDownExtender del Ajax Control Toolkit, comentando sus funcionalidades principales, las cuales ilustrábamos mediante un sencillo ejemplo basado en una lista desplegable, cuyos elementos se disponían en orientación horizontal.

Sin embargo, un control de tales características suele ser alimentado, habitualmente, con valores procedentes de un origen de datos, y también es muy posible que la selección de un elemento de la lista desencadene la búsqueda y obtención de otro registro existente en una tabla relacionada.

Teniendo en cuenta las anteriores premisas, en este artículo que dividiremos en varias entregas, vamos a desarrollar un ejemplo con dicha funcionalidad. Llenaremos la lista desplegable con información de la base de datos AdventureWorksDW de SQL Server 2005, en concreto la tabla DimProductSubcategory, de forma que al seleccionar uno de sus elementos, accederemos a la tabla relacionada DimProductCategory y obtendremos el registro dependiente.

Como ya explicamos en el anterior artículo, para crear una lista desplegable mediante un DropDownExtender necesitamos, además de este último control, un par de controles más que actúen como lista de elementos y apertura de la misma. En nuestro ejemplo usaremos un control Panel para la lista de valores y un TextBox en el que alojaremos el elemento de la lista seleccionado por el usuario. También añadiremos al diseñador del WebForm un ScriptManager que nos permita habilitar las características de AJAX en nuestra página.

En el apartado de datos emplearemos un componente SqlDataSource como origen de datos. Dado que el control DropDownExtender carece de una propiedad DataSourceID para poder realizar un enlace automático de datos, puede parecer que su uso no resulta del todo apropiado en este contexto, pero enseguida veremos cómo podemos utilizarlo de una forma muy sencilla para recorrer la tabla, alimentando la lista con sus registros. El código de la página sería el siguiente.

<form id=»form2″ runat=»server»>

<asp:ScriptManager ID=»ScriptManager1″ runat=»server» />

<asp:SqlDataSource ID=»dsrDimProductSubcategory» runat=»server»
    ConnectionString=»Data Source=localhost;Initial Catalog=AdventureWorksDW;Persist Security Info=True;User ID=sa;Password=123sa456;»

    SelectCommand=»SELECT * FROM DimProductSubcategory» />

<div>

    <asp:TextBox ID=»txtTituloLista» runat=»server» Text=»Seleccionar artículo» Width=»200px» />

    <br />

    <asp:Panel ID=»pnlElementosLista» runat=»server» Width=»200px» />

    <cc1:DropDownExtender ID=»DropDownExtender1″ runat=»server» DropDownControlID=»pnlElementosLista»

        TargetControlID=»txtTituloLista» />

</div>

</form>

El modo de creación de los elementos de la lista así como su selección, lo desarrollaremos en el codebehind de la página. En primer lugar necesitamos acceder a los registros de la consulta definida en el SqlDataSource, y la forma de conseguirlo es utilizando su método Select, el cual devuelve un objeto DataView, cuyas filas recorreremos, creando un objeto LinkButton para cada elemento de la lista, que al ser pulsado ejecutará el manipulador correspondiente al evento Click, donde asignaremos el literal del elemento de la lista al TextBox que usamos para desplegarla.

Debido a lo «artesanal» del proceso de creación de la lista, para evitar que sus elementos se dispongan concatenados, después de crear cada uno de los LinkButton, agregaremos una etiqueta <br> al panel de la lista, para que el contenido de esta se muestre adecuadamente en vertical.

protected void Page_Load(object sender, EventArgs e)

{

    // obtener las filas de la fuente de datos

    DataView dvDimProductSubcategory =

        (DataView)this.dsrDimProductSubcategory.Select(new DataSourceSelectArguments());

    DataRowView oDataRowView;

    LinkButton oLinkButton;
    // recorrer las filas de datos…

    for (int nIndice = 0; nIndice < dvDimProductSubcategory.Count; nIndice++)

    {

        // …para cada registro

        // crear un elemento en la lista desplegable (panel de lista)

        oDataRowView = dvDimProductSubcategory[nIndice];
        // cada elemento de la lista desplegable será un control LinkButton

        oLinkButton = new LinkButton();

        oLinkButton.ID = «lnk_» + (int)oDataRowView[«ProductSubcategoryKey»];

        oLinkButton.Text = (string)oDataRowView[«SpanishProductSubcategoryName»];

        oLinkButton.Click += new EventHandler(LinkButton_Click);
        // añadir el control al panel de lista de elementos

        this.pnlElementosLista.Controls.Add(oLinkButton);
        // mediante una etiqueta <br> separamos los elementos

        this.pnlElementosLista.Controls.Add(new LiteralControl(«<br />»));

    }

}
protected void LinkButton_Click(object sender, EventArgs e)

{

    // al hacer clic en un elemento de la lista

    // mostrar el texto del elemento

    // en el TextBox que sirve para desplegarla

    LinkButton oLinkButton = ((LinkButton)sender);

    this.txtTituloLista.Text = oLinkButton.Text;

}

Ejecutando la aplicación en su estado actual conseguiremos una parte de la funcionalidad perseguida: la lista desplegable contiene los elementos obtenidos de la base de datos, y al seleccionar uno de ellos pasamos su valor al TextBox. Sin embargo todavía se produce en el navegador el efecto de recarga completa de la página, punto este que solucionaremos añadiendo al diseñador del WebForm un control UpdatePanel de AJAX, en cuyo interior situaremos los controles que componen la lista.

….

….

<asp:UpdatePanel ID=»pnlUpdatePanel» runat=»server»>

    <ContentTemplate>

        <asp:TextBox ID=»txtTituloLista» runat=»server» Text=»Seleccionar artículo» Width=»200px» />

        <br />

        <asp:Panel ID=»pnlElementosLista» runat=»server» Width=»200px» />

        <cc1:DropDownExtender ID=»DropDownExtender1″ runat=»server» DropDownControlID=»pnlElementosLista»

            TargetControlID=»txtTituloLista» />

    </ContentTemplate>

</asp:UpdatePanel>

….

….

Con esta modificación conseguiremos evitar el desagradable efecto de recarga completa de página.

Aunque el funcionamiento de la lista ya es el correcto, estamos de acuerdo en que la parte visual deja mucho que desear, siendo este un aspecto que abordaremos en la próxima entrega del artículo. El código fuente del ejemplo realizado hasta el momento puede descargarse en el siguiente enlace.

Un saludo.