Exportar (0) Imprimir
Expandir todo
Expandir Minimizar

Llenando un DropDownList mediante Columnas Computadas en ASP .NET

Por Guillermo González Arroyave

Bb972207.downlanim(es-es,MSDN.10).gifDescargar ejemplos de este artículo (9 KB).

Contenido

 Introducción
 Creación del proyecto Web
 Llenando el DropDownList de la manera tradicional
 Primera Solución - Utilizando Columnas Computadas en la sentencia SQL
 Segunda Solución - Utilizando Columnas Computadas por medio de un DataTable
 Conclusión

Introducción

De toda la gama de controles que nos brinda ASP .NET, el control DropDownList es uno de los controles más utilizados al momento de desarrollar una aplicación Web, por su facilidad de implementación y la sencillez que le brinda al usuario en su utilización. Existen varias formas de agregar elementos (ítems) a un DropDownList (se asume que ya está creado con el ID ddlComputedColumns):

Por medio de un elemento ListItem en la vista HTML como se aprecia en las siguientes líneas de código:

                  <asp:dropdownlist id ="ddlComputedColumns" runat ="server">
                  < asp:listitem value ="1"> Juan Valdez </ asp:listitem >
                  </ asp:dropdownlist >

Agregando Ítems de manera programática

// Crea un nuevo Item
ListItem oItem = new ListItem("Juan Valdes","1");
// Lo agrega a la colección de Items del DropDownList
ddlComputedColumns.Items.Add(oItem);

Enlazando el control a una fuente de datos y utilizando el método DataBind

// Hace el enlace al DataTable contenido en el DataSet
ddlComputedColumns.DataSource = miDataSet.Tables[0].DefaultView;
// Hace el enlace del campo au_id para el valor
ddlComputedColumns.DataValueField = "au_id";
// Hace el enlace del campo au_fname para el texto
ddlComputedColumns.DataTextField = "au_fname";
// Llena el DropDownList con los datos de la fuente de datos
ddlComputedColumns.DataBind();

Este último caso es el que nos interesa en el desarrollo de este articulo, asumiendo que se está conectando a la tabla Authors de la base de datos Pubs, el DropDownList desplegaría el primer nombre en el texto y la identificación como el valor de cada una de las opciones. Pero, ¿Qué sucedería si necesitáramos mostrar tanto el primer nombre como el segundo nombre en el texto del DropDownList? ¿O si tuviéramos que crear el valor de la opción de cada autor utilizando la composición de datos de diferentes columnas de la tabla? Aquí tendríamos un problema serio, pues las propiedades DataValueField y DataTextField solo nos permiten poner el nombre de una sola columna y no de varias columnas compuestas (o también llamadas computadas).

El objetivo de este artículo es ver dos formas en las cuales le podemos dar solución a este problema. Durante la ejecución de este artículo utilizaremos lenguaje C#.

Creación del proyecto Web

Para la realización de los ejemplos de este artículo, necesitamos crear un nuevo proyecto Web utilizando el lenguaje C#, en este proyecto vamos a utilizar nuestro control compuesto desarrollado durante todo el articulo; lo puedes llamar computedColumns (Ver Figura 1):

Bb972207.art211-img01-324x253(es-es,MSDN.10).jpg
Figura 1. Volver al texto.

El proyecto por defecto crea un WebForm con el nombre WebForm1.aspx, si deseas lo puedes eliminar y crear uno nuevo con el nombre webComputedColumns.aspx.

Nota: No olvides asignarle a tu nuevo WebForm la opción Set As Start Page para que el proyecto inicie con este formulario al momento de ejecutarlo.

Situados en el WebForm procedemos a arrastrar un control DropDownList del ToolBox, y procedemos luego a cambiarle el ID que tiene (que debe ser DropDownList1 ) y lo denominaremos ddlComputedColumns .

Los datos que deseamos mostrar los vamos a tomar de los campos au_fname y au_lname la tabla Authors ubicados en la base de datos de ejemplo Pubs.

Debemos establecer la conexión a la base de datos para mostrar los datos de los campos en nuestro control DropDownList (ddlComputedColumns).

A continuación, vamos a utilizar algunos componentes de ADO .NET para realizar la conexión, ejecución y adquisición de los datos.

Nota: Se asume que el lector esta familiarizado con los conceptos básicos de ADO .NET, pues no se entrará en detalle sobre este tema.

Llenando el DropDownList de la manera tradicional

Vamos a la vista de code-behind de la página webComputedColumns.aspx, donde agregaremos los elementos de ADO .NET necesarios para llenar nuestro DropDownList con datos, normalmente la página donde esta el code-behind lleva el mismo nombre de la página más la extensión .cs (en nuestro caso que vamos a trabajar con C#).

Para este artículo trabajaremos con la base de datos SQL Server 2000, los que nos indica que debemos trabajar con los namespaces System.Data.SqlClient y System.Data.

Agregamos los namespaces mencionados anteriormente al encabezado del code-behind:

using System;
...
using System.Data;
using System.Data.SqlClient;
...

Luego en el método Page_Load, procedemos a establecer la conexión con la base de datos y la consulta para llenar el DropDownList:

...
private void Page_Load(object sender, System.EventArgs e)
{
// Establece el string de conexión
string cadenaConexion = "Data Source=(local);" +
                     "Initial Catalog=Pubs; Integrated Security=SSPI ";
// Establece la consulta SQL a ejecutar
string consulta = "SELECT au_id, au_fname, au_lname FROM Authors";
// Crea un DataAdapter que será el encargado de ejecutar la consulta
// y Posteriormente ingresar los datos a un DataSet
SqlDataAdapter daAutores = new SqlDataAdapter(consulta, cadenaConexion);
// Crea el DataSet
DataSet dsAutores = new DataSet();
// Llena el DataSet con la información de la base de datos
daAutores.Fill(dsAutores, "Authors");
// Pone el DataTable Authors como fuente de datos para el DropDownList
ddlComputedColumns.DataSource = dsAutores.Tables["Authors"].DefaultView;
// Asigna el valor a mostrar en el DropDownList
ddlComputedColumns.DataTextField = "au_fname + ' ' + au_lname";
// Asigna el valor del value en el DropDownList
ddlComputedColumns.DataValueField = "au_id";
// Llena el DropDownList con los datos
ddlComputedColumns.DataBind();
}
... 

Procedemos a ejecutar la página (Presionando F5) para ver los autores en el DropDownList ddlComputedColumns y se genera el siguiente mensaje de error (Ver Figura 2):

Bb972207.art211-img02-570x293(es-es,MSDN.10).jpg
Figura 2. Volver al texto.

Me imagino que te estarás preguntando: ¿Por qué está presentando un mensaje de error si la compilación fue satisfactoria? La respuesta según lo describe el mensaje, es que el control DropDownList no está preparado para recibir en su propiedad DataTextField más de un campo, en nuestro ejemplo le hemos enviado dos, para que nos funcione bien solo le debemos pasar el campo au_lname ó au_fname.

Recordemos que lo que queremos hacer es mostrar el nombre completo en el DropDownList, veamos la primera solución a este problema.

Para esto plantearemos dos soluciones, la primera utilizando columnas computadas en la sentencia SQL y la segunda utilizando columnas computadas en el DataTable creado al ejecutar la consulta.

Primera Solución - Utilizando Columnas Computadas en la sentencia SQL

Esta solución es muy fácil de aplicar, solo basta con computar las dos columnas de la sentencia SQL de manera que se genere una columna renombrada con los campos; de este modo, los campos concatenados serán vistos por el control DropDownList como un solo campo, lo que nos permite trabajarlo sin problemas.

Procedemos a cambiar la sentencia SQL para que nos regrese dos columnas, una con la identificación del autor (au_id) y otra con el nombre completo del autor (au_fname + au_lname).

// Establece la consulta SQL a ejecutar (modificada)
string consulta = "SELECT au_id, au_fname + ' ' + au_lname AS name " +
                  "FROM Authors";

Y cambiamos la propiedad DataTextField para que reciba el campo name, que viene como resultado de la concatenación de au_fname y au_lname.

// Asigno el valor a mostrar en el DropDownList (modificada)
ddlComputedColumns.DataTextField = "name";

Procedemos a ejecutar la página (Presionando F5) para ver los autores en el DropDownList ddlComputedColumns y esta vez, ejecuta sin error alguno y podemos observar los Autores con nombre (au_fname) y apellido (au_lname). (Ver Figura 3):

Bb972207.art211-img03-163x104(es-es,MSDN.10).jpg
Figura 3. Volver al texto.

Esta es una solución muy práctica, pues el impacto de su implementación en el código ya existente no es muy traumático, y no se necesita ser un experto para ponerla en funcionamiento. Pero, en algunas ocasiones tenemos la facilidad de poder manipular el código SQL con la consulta que deseamos mostrar. Que tal si en vez de entregarnos una sentencia SQL, nos dan un procedimiento almacenado, que como es muy común, generalmente no se puede modificar, pues hay otras aplicaciones que lo pueden estar utilizando y cambiarlo produciría un gran impacto en estas aplicaciones; en este momento, la solución dada anteriormente no nos serviría de nada y volvemos a quedar como estábamos al inicio del artículo.

Afortunadamente, si no podemos modificar los datos desde la fuente, entonces hagámoslo una vez recuperados ¿Donde? Utilizando el DataTable en el cual quedan almacenados los datos después de hecha la ejecución del procedimiento almacenado.

A continuación vamos a ver la segunda solución planteada en este artículo para este problema.

Segunda Solución - Utilizando Columnas Computadas por medio de un DataTable

Esta solución requiere un poco más de conocimientos de ADO .NET, pues vamos a utilizar el DataTable generado al ejecutar la sentencia, y hacer algunas modificaciones para que nuestro DropDownList lo pueda consumir de la forma que queremos. Para hacer la similitud con la solución anterior, debemos crear un nuevo DataColumn que se calculará con el contenido de las otras DataColumns existentes, a este nuevo DataColumn le daremos el nombre name y será de tipo string.

Creamos entonces un nuevo procedimiento almacenado en la base de datos Pubs llamado GetAuthors, tal como se muestra a continuación:

CREATE PROCEDURE dbo.GetAuthors AS
SET NOCOUNT ON
// Retorna el Id, nombre y apellido de los autores
SELECT au_id, au_fname, au_lname FROM Authors
RETURN

Modificamos el código existente para que se prepare para ejecutar un procedimiento almacenado, hacemos referencia al DataTable obtenido con la ejecución de la consulta, y procedemos a crear el DataColumn, que tendrá el valor calculado de concatenar la columna au_fname y au_lname, y que posteriormente se agrega a la colección de DataColumns tal como lo muestra el siguiente código:

...
      private void Page_Load(object sender, System.EventArgs e)
{
      // Establece el string de conexión
      string cadenaConexion = "Data Source=(local);" +
      "Initial Catalog=Pubs;Integrated Security=SSPI";
      // Establece la consulta SQL a ejecutar
      string consulta = "GetAuthors";
      // Crea un DataAdapter que sera el encargado de ejecutar la consulta
      // y Posteriormente ingresar los datos a un DataSet
      SqlDataAdapter daAutores = new SqlDataAdapter(consulta, cadenaConexion);
      // Crea el DataSet
      DataSet dsAutores = new DataSet();
      // Define el tipo de ejecución como procedimiento almacenado
      daAutores.SelectCommand.CommandType = CommandType.StoredProcedure;
      // Llena el DataSet con la información de la base de datos
      daAutores.Fill(dsAutores, "Authors");
      // Hace referencia al DataTable obtenido
      DataTable dtAutores = dsAutores.Tables["Authors"];
      // Crea la nueva DataColumn
      DataColumn dcNombre = new DataColumn("name", Type.GetType("System.String"));
      // Establece la sentencia a calcular con las columnas existentes
      dcNombre.Expression = "au_fname + ' ' + au_lname";
      // Agrega la nueva columna al DataTable
      dtAutores.Columns.Add(dcNombre);
      // Asigna el DataTable Autores como fuente de datos para el DropDownList
      ddlComputedColumns.DataSource = dtAutores.DefaultView;
      // Asigno el valor a mostrar en el DropDownList
      ddlComputedColumns.DataTextField = "name";
      // Asigno el valor del value en el DropDownList
      ddlComputedColumns.DataValueField = "au_id";
      // Llena el DropDownList con los datos
      ddlComputedColumns.DataBind();
}
...

Procedemos a ejecutar la página (Presionando F5) para ver los autores en el DropDownList ddlComputedColumns y esta vez, ejecuta sin error alguno y utilizando la segunda solución, podemos observar los Autores con nombre (au_fname) y apellido (au_lname). (Ver Figura 4):

Bb972207.art211-img04-163x104(es-es,MSDN.10).jpg
Figura 4. Volver al texto.

Conclusión

En este artículo hemos visto los pasos para llenar un DropDownList de la manera tradicional, es decir, cuando se dispone de una columna para el DataTextField y otra para el DataValueField. Se exponen también dos formas alternas para llenar el control cuando se quiere mostrar más de una columna en el contenido del texto (DataTextField) o valor (DataValueField) del DropDownList.

Bb972207.guillermo_gonzalez_arroyave(es-es,MSDN.10).jpgGuillermo González Arroyave es Ingeniero en Sistemas de la Universidad de Medellín, Colombia. Trabaja como Ingeniero de Desarrollo Senior y ha estado trabajando con la plataforma .net desde hace más de 2 años. Posee 7 años de experiencia en el desarrollo de aplicaciones Web. Cuenta con la certificación MCP en desarrollo de aplicaciones Web con C#. Ha obtenido la 4a. Estrella del programa Desarrollador Cinco Estrellas de Microsoft MSDN.
Mostrar:
© 2014 Microsoft