Exportar (0) Imprimir
Expandir todo
Expandir Minimizar

ADO .NET 2.0 – Usando el Control SqlDataSource y el Control GridView

Por Ronald Noé Saavedra Bances

Contenido

 Introducción
 Nuevos Controles para Acceder a Datos
 Los Controles de Enlace a Datos
 Los Controles SqlDataSource y GridView
 DEMO. Utilizando el Control SqlDataSource y el Control GridView

Introducción

ASP .NET 2.0 introduce controles de Origen de Datos (Data Source) para de alguna manera hacer un puente entre los Almacenes de Datos y los Controles de Servidor a tu disposición. Estos nuevos Controles de Acceso a Datos no sólo te permiten recuperar data desde varias fuentes de datos, sino que también  te permiten manipular fácilmente la data cuando es enlazada a los Controles del Servidor (paginación, ordenación, edición, eliminación, filtraciones).

Nuevos Controles para Acceder a Datos

ASP .NET 2.0 ha introducido seis nuevos Controles de Origen de Datos (Data Source) para proporcionar una manera declarativa de conectar con las fuentes de datos y recuperar datos específicos. El trabajo con los nuevos controles de Acceso a Datos es considerablemente más fácil que cualquier método anterior. En la mayoría de los casos,  necesitaremos una sola línea de código para recuperar los datos que necesitemos y, en algunos casos, cero líneas de código para realizar la misma tarea.

Los nuevos Controles para Acceder a Datos incluyen un diseño especializado para trabajar con Microsoft SQL Server, Microsoft Access, y otros tipos de motores de base datos. La siguiente tabla detalla los nuevos controles de Acceso a Datos disponibles en ASP .NET 2.0.:

Control Data Source Descripción
SqlDataSource Permite trabajar con cualquiera de las bases de datos basadas en SQL, tales como Microsoft SQL Server u Oracle.
AccessDataSource Permite trabajar con archivos de Microsoft Access (.mdb).
ObjectDataSource Permite trabajar con objetos de negocio o Visual Studio 2005 Data Component.
SiteMapDataSource Permite trabajar con datos jerárquicos en el archivo site map (.sitemap).
XmlDataSource Permite trabajar con información de un archivo o de una fuente de XML.
DataSetDataSource Permite trabajar con datos que se representan en un objeto DataSet.

Los Controles de Enlace a Datos

ASP .NET 2.0 proporciona una gran colección de nuevos controles del servidor que se pueden utilizar conjuntamente con los nuevos controles de acceso a datos para exhibir datos recuperados en el navegador. Aunque reconoces probablemente muchos controles de ASP .NET 1.0/1.1, también encontrarás algunos nuevos controles del servidor, tales como el control GridView.

Los Controles de Enlace a Datos en ASP .NET 2.0 incluyen los Siguientes:

  • <asp:GridView>

  • <asp:DataGrid>

  • <asp:DetailsView>

  • <asp:TreeView>

  • <asp:Menu> (*) 

  • <asp:DataList>

  • <asp:Repeater>

  • <asp:DropDownList>

  • <asp:BulletedList>

  • <asp:CheckBoxList>

  • <asp:RadioButtonList>

  • <asp:ListBox>

  • <asp:AdRotator>

(*) El Control <asp:Menu> no existirá en el siguiente release de Visual Studio .NET 2005.

Los Controles SqlDataSource y GridView

El Control de SqlDataSource se puede utilizar con uno de los nuevos Controles de Enlace a Datos en ASP .NET 2.0 que es el control GridView. El control de SqlDataSource no solamente es utilizado con Microsoft SQL Server, sino que también se puede utilizar con cualquier servidor SQL. Por ejemplo, puedes utilizar este control de acceso a datos para conectarte con cualquier OLEDB ó ODBC - y más aún se podría utilizar para trabajar sobre Oracle.

DEMO. Utilizando el Control SqlDataSource y el Control GridView

Para este demo vamos a recuperar datos desde Microsoft SQL Server; en este caso utilizaremos como base de datos de ejemplo ‘Northwind’ (Ver Figura 1):

Bb972199.art198-img01-570x493(es-es,MSDN.10).jpg
Figura 1. Volver al texto.

Para iniciar vamos a crear un nuevo website en el directorio C:\RSAAVEDRA\DEMOS-MSDNOnline. Tal como se muestra a continuación.

Luego crea un nuevo WebForm llamado Clientes, una vez creado este WebForm agrega a tu página el control GridView.

Después que el GridView se encuentre sobre la página, cámbiale el estilo del formato haciéndo clic sobre el vínculo Auto Format que muestra el Smart Tag que aparece por defecto al arrastrar el control a la página y luego escoge el estilo Rainy Day.

Luego arrastra el control SqlDataSource a la página y observarás que el control no es visual, solamente aparece como una caja gris simple. Luego de arrastrarlo a la página aparecerá el cuadro del Smart Tag, hazle clic en Configure Data Source (configurar origen de datos),  luego haz clic en el botón New para que aparezca la pantalla Connection Properties donde le darás los siguientes valores.

  • Server Name: Localhost

  • Tipo de Seguridad: Use Windows NT Integrated Security

  • DataBase Name: Northwind

Haz clic en Test Connection y aparecerá un mensaje indicando que la conexión ha sido satisfactoria.

Luego haz clic sobre Next a todas las ventanas que aparecen en el asistente.

Para enlazar el GridView con el SqlDataSource solamente le asignamos la propiedad DataSourceID del control GridView y en seguida desplegamos la lista y seleccionamos el nombre del SqlDataSource llamado SqlDataSource1, y eso es todo.

Para probar la página solamente haciendo clic derecho sobre el WebForm Clientes en el Solution Explorer y la opción View in browser.

Mostrará lo siguiente. (Ver Figura 2):

Bb972199.art198-img02-570x473(es-es,MSDN.10).jpg
Figura 2. Volver al texto.

Parte del código que se muestra en la Sección Source:

<%@ Page Language ="C#" CompileWith ="Clientes.aspx.cs" ClassName ="Clientes_aspx" %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head runat ="server">
    <title>Listado de Clientes</title>
</ head >
< body >
    < form id ="form1" runat ="server">
    < div >
        &nbsp;
        < asp : GridView ID ="GridView1" Runat ="server" BorderWidth ="1px" BackColor ="White" GridLines
 ="Vertical"
            CellPadding ="3" BorderStyle ="None" BorderColor ="#999999" Width ="294px" Height ="152px"
            DataSourceID ="SqlDataSource1" DataKeyNames ="CustomerID" AutoGenerateColumns ="False">
            < FooterStyle ForeColor ="Black" BackColor ="#CCCCCC"></ FooterStyle > 
            < PagerStyle ForeColor ="Black" HorizontalAlign ="Center" BackColor ="#999999"></ PagerStyle >
            < HeaderStyle ForeColor ="White" Font-Bold ="True" BackColor ="#000084"></ HeaderStyle > 
            < AlternatingRowStyle BackColor ="#DCDCDC"></ AlternatingRowStyle >
< SelectedRowStyle ForeColor ="White" Font-Bold ="True" BackColor ="#008A8C"></ SelectedRowStyle >
            < RowStyle ForeColor ="Black" BackColor ="#EEEEEE"></ RowStyle >
        </ asp : GridView >
        < asp : SqlDataSource ID ="SqlDataSource1" Runat ="server" SelectCommand ="SELECT * FROM [Customers]"
            ConnectionString ="<%$ ConnectionStrings:AppConnectionString1 %>">
        </ asp : SqlDataSource >
    </ div > 
    </ form >
</ body >
</ html >

El tag <Columns> es código omitido por la Extensión del Contenido.

Aplicando Paginación en el GridView

Con ASP .NET 2.0, el nuevo control GridView se hace más fácil trabajar aplicando Paginación a los Datos.

Simplemente aplícale paginación al GridView, usa el atributo AllowPaging y asígnale True. Por defecto el valor es False.

<Asp:GridView ID=”GridView1” Runat=”server” DataSourceId=”SqlDataSource1”
BackColor=”White” GridLines=”Vertical” AllowPaging=”True” BorderStyle=”Solid” CellPadding=” 3” ForeColor=”Black”
BorderColor=”#999999” BorderWidth=”1px”> ...
<PagerStyle ForeColor=”Black” HorizontalAlign=”Center” BackColor=”#999999”>
</PagerStyle>
...
</asp:GridView>

El GridView tiene una colección de atributos que inicia con el término PagerSettings-; el atributo PagerSettings-mode, por ejemplo, puede tomar los posibles valores NextPrevious, NextPreviousFirtsLast, Numeric ó NumericFirstLast. El valor por defecto es Numeric.

NextPreviousNextPreviousFirstLast
art198-img03-156x84.jpg
art198-img04-156x81.jpg

El PagerSettings-PageButtonCount es un interesante atributo que se puede utilizar con los dos ajustes numéricos para el atributo del PagerSettings-Modo (una de las cuales es el Numeric, que es la opción por defecto). Este atributo toma un valor numérico entero y, cuando se fija este valor, sólo el número especificado de las opciones de página en la lista de páginas se demuestra (Ver Figura 5):

Bb972199.art198-img05-168x72(es-es,MSDN.10).jpg
Figura 5. Volver al texto.

<asp:GridView ID=”GridView1” Runat=”server” DataSourceId=”SqlDataSource1”
BackColor=”White” GridLines=”Vertical” AllowPaging=”True”
PagerSettings-Mode=”Numeric” PagerSettings-PageButtonCount=” 3”
BorderStyle=”Solid” CellPadding=” 3” ForeColor=”Black”
BorderColor=”#999999” BorderWidth=”1px”>
...
<PagerStyle ForeColor=”Black” HorizontalAlign=”Center” BackColor=”#999999”>
</PagerStyle>
...
</asp:GridView>

Aplicando Ordenación en el GridView

Usando el mismo GridView del ejemplo anterior, hacemos uso de la habilitación al usuario final para permitirle la ordenación de filas.

Para aplicar ordenamiento de filas al GridView solamente es cuestión de cambiar un solo atributo, así como se muestra en el siguiente código:

< asp : GridView ID ="GridView1" Runat ="server" BorderWidth ="1px" BackColor ="White" GridLines
 ="Vertical" 
AllowSorting ="True" CellPadding ="3" BorderStyle ="None" BorderColor ="#999999" Width ="294px" Height ="152px" 
            DataSourceID ="SqlDataSource1" DataKeyNames ="CustomerID" AutoGenerateColumns ="False" AllowPaging
 ="True" > 
.... 
</asp:GridView> <!—Ordenación de Forma Ascendente por el Campo CompanyName --> 


Bb972199.art198-img06-570x301(es-es,MSDN.10).jpg
Figura 6.

Definiendo Columnas Enlazadas en el GridView

En muchos casos, deseamos mostrar solamente columnas selectas de la tabla de los datos que son recuperados. Una forma para hacer esto es modificar la Sentencia del Select de modo que recupere solamente las columnas que deseamos mostrar. Por ejemplo, la declaración del Select puede ser la siguiente:

Select CustomerId , CompanyName From Customers

En este código se determina que solamente estas dos columnas están exhibidas en el control de GridView. Ocasionalmente, puedes desear recuperar ciertas columnas para actuar sobre la información que contienen, pero no exhibir estas columnas al usuario final. Por ejemplo, puedes desear recuperar la columna de CustomerId de la tabla Customers, pero no mostrar esta columna al usuario final.

<asp:GridView ID="GridView1" Runat="server" BorderWidth="1px" BackColor="White" GridLines="Vertical"
 CellPadding="3" BorderStyle="None" BorderColor="#999999" Width="294px" Height="152px"
            DataSourceID ="SqlDataSource1" DataKeyNames ="CustomerID" AutoGenerateColumns ="False" >
            < Columns >
                < asp : BoundField ReadOnly ="True" Visible ="False" HeaderText ="CustomerID" DataField
 ="CustomerID" SortExpression ="CustomerID"></ asp : BoundField >
                < asp : BoundField HeaderText ="CompanyName" DataField ="CompanyName" SortExpression
 ="Compañia"></ asp : BoundField >
                 < asp : BoundField HeaderText ="Contacto" DataField ="ContactName" SortExpression
 ="ContactName"></ asp : BoundField >
            </ Columns >
...
</asp:GridView>


Bb972199.art198-img07-200x327(es-es,MSDN.10).jpg
Figura 7.

Trabajando con Valores NULL en una Columna del GridView

<asp:BoundField HeaderText="Region" DataField="Region" SortExpression="Region" NullDisplayText="POR DEFINIR">
</asp:BoundField>

Para este ejemplo, agrega un elemento para mostrar la columna de la región de la tabla Customers. Visualiza los datos del Campo Region en la base de datos, nota que no cada fila tiene un valor en ella. Qué si no quisieras que una caja en blanco mostrara un valor vacío, sino deseamos mostrar un poco de texto en lugar de mostrar el Campo Region vacío. Para hacer esto, utilizaremos el atributo NullDisplayText. El valor de la secuencia que proporciona se utiliza para cada fila que no tenga un valor en el Campo Región (Ver Figura 8):

Bb972199.art198-img08-320x344(es-es,MSDN.10).jpg
Figura 8. Volver al texto.

Edición de Data en el GridView

Los Desarrolladores desean no solamente mostrar datos tabulares dentro de un navegador, también desean dar a usuarios finales la capacidad para editar y para enviar los cambios realizados de nuevo a la base de datos.

El nuevo control GridView de ASP .NET 2.0 permite editar fácilmente el contenido que contiene la tabla Customers.

<%@ Page Language ="C#" CompileWith ="Clientes.aspx.cs" ClassName ="Clientes_aspx" %> 
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
< html xmlns ="http://www.w3.org/1999/xhtml" > 
< head runat ="server"> 
    <title>Listado de Clientes</title> 
</ head > 
< body > 
    < form id ="form1" runat ="server"> 
    < div > 
        &nbsp; 
        < asp : GridView ID ="GridView1" Runat ="server" BorderWidth ="1px" BackColor ="White" GridLines
 ="Vertical" CellPadding ="3" BorderStyle ="None" BorderColor ="#999999" Width ="510px" Height ="152px" 
            DataSourceID ="SqlDataSource1" DataKeyNames ="CustomerID" AutoGenerateColumns ="False" > 
            < FooterStyle ForeColor ="Black" BackColor ="#CCCCCC"></ FooterStyle > 
            < PagerStyle ForeColor ="Black" HorizontalAlign ="Center" BackColor ="#999999"></ PagerStyle > 
            < HeaderStyle ForeColor ="White" Font-Bold ="True" BackColor ="#000084"></ HeaderStyle > 
            < PagerSettings PageButtonCount ="3"></ PagerSettings > 
            < AlternatingRowStyle BackColor ="Gainsboro"></ AlternatingRowStyle > 
            < Columns > 
                < asp : CommandField ButtonType ="Button" ShowEditButton ="True" ></ asp : CommandField >  
                <!—En Atributo ReadOnly hace que al momento de Editar el Campo CustomerID este de solo Lectura
 para no poder editar su Contenido à 
                < asp : BoundField ReadOnly ="True" HeaderText ="CustomerID" DataField ="CustomerID"
 SortExpression ="CustomerID"></ asp : BoundField > 
                < asp : BoundField HeaderText ="CompanyName" DataField ="CompanyName" SortExpression
 ="CompanyName"></ asp : BoundField > 
                < asp : BoundField HeaderText ="ContactName" DataField ="ContactName" SortExpression
 ="ContactName"></ asp : BoundField > 
                < asp : BoundField HeaderText ="Country" DataField ="Country" SortExpression
 ="Country"></ asp : BoundField > 
                < asp : BoundField HeaderText ="Region" DataField ="Region" SortExpression
 ="Region" NullDisplayText ="POR DEFINIR"></ asp : BoundField > 
            </ Columns > 
            < SelectedRowStyle ForeColor ="White" Font-Bold ="True" BackColor ="#008A8C"></ SelectedRowStyle > 
            < RowStyle ForeColor ="Black" BackColor ="#EEEEEE"></ RowStyle > 
        </ asp : GridView > 
        < asp : SqlDataSource ID ="SqlDataSource1" Runat ="server" SelectCommand ="SELECT [CustomerID],
 [CompanyName], [ContactName], [Country], [Region] FROM [Customers]" 
            ConnectionString ="<%$ ConnectionStrings:AppConnectionString1 %>" UpdateCommand ="UPDATE [Customers]
 SET [CompanyName] = @CompanyName, [ContactName] = @ContactName, [Country] = @Country, [Region] = @Region WHERE
 [CustomerID] = @original_CustomerID"> 
            < UpdateParameters > 
                < asp : Parameter Type ="String" Name ="CompanyName"></ asp : Parameter > 
                < asp : Parameter Type ="String" Name ="ContactName"></ asp : Parameter > 
                 < asp : Parameter Type ="String" Name ="Country"></ asp : Parameter > 
                < asp : Parameter Type ="String" Name ="Region"></ asp : Parameter > 
                < asp : Parameter Type ="String" Name ="CustomerID"></ asp : Parameter > 
            </ UpdateParameters > 
        </ asp : SqlDataSource >       
    </ div > 
    </ form > 
</ body > 
</ html >


Bb972199.art198-img09-570x411(es-es,MSDN.10).jpg

Figura 9.

Mira el código en este ejemplo, observa que has escogido las columnas de la tabla de los clientes que se exhibirá. En este caso, las columnas exhibidas son las columnas de CustomerID, CompanyName, Country, y Región. En los listados contenidos dentro de la sección <Colums> del GridView, nota que la columna del extremo izquierdo en el GridView es el acoplamiento del Botón Editar, que permite al usuario final Editar una fila seleccionada.

Para crear la columna de Edición en la tabla utiliza el elemento <asp:CommandField>, el cual te permite poner acciones tales como Cancel, Delete, Edit, Add, y Select como botones en tus tablas. En este caso, muestras el botón del Editar fijando el atributo de ShowEditButton en True.

< asp : CommandField ButtonType ="Button" ShowEditButton ="True">
</ asp : CommandField >

Necesitamos la tabla Customers no solamente para visualizar Datos (usando el atributo SelectCommand), sino que también necesitamos la sentencia Update para poder actualizar la base de datos. Ahora necesitamos agregar el atributo UpdateCommand  en el control SqlDataSource.

El SqlDataSource tiene la propiedad UpdateQuery donde podemos armar la sentencia Update y así evitar escribir todo el código mediante HTML.

asp:SqlDataSource ID="SqlDataSource1" Runat="server" SelectCommand="SELECT [CustomerID], [CompanyName],
 [ContactName], [Country], [Region] FROM [Customers]" ConnectionString="<%$
 ConnectionStrings:AppConnectionString1 %>" UpdateCommand="UPDATE [Customers] SET [CompanyName] = @CompanyName,
 [ContactName] = @ContactName, [Country] = @Country, [Region] = @Region WHERE [CustomerID] =
 @original_CustomerID">

El Atributo del UpdateCommand toma un valor string, que es el comando SQL que actualiza la base de datos. Un número de parámetros nombrados, tales como @CompanyName, @Country, @Region, y @CustomerID, son placeholders para la información correspondiente que va a venir de la fila seleccionada.

< UpdateParameters >
< asp : Parameter Type ="String" Name ="CompanyName"></ asp : Parameter >
< asp : Parameter Type ="String" Name ="ContactName"></ asp : Parameter >
< asp : Parameter Type ="String" Name ="Country"></ asp : Parameter >
< asp : Parameter Type ="String" Name ="Region"></ asp : Parameter >
< asp : Parameter Type ="String" Name ="CustomerID"></ asp : Parameter >
</ UpdateParameters >

Eliminación de datos en el GridView

Eliminar datos de la tabla producida por el GridView es incluso más fácil que editarlos. Apenas algunas adiciones al código te permiten suprimir una fila entera de datos de la tabla. Como has visto en el ejemplo anterior, agregas simplemente el botón de Eliminación (Delete) <asp:CommandField> al elemento del GridView fijando el valor del atributo de ShowDeleteButton en True.

< asp : SqlDataSource ID ="SqlDataSource1" Runat ="server" SelectCommand ="SELECT * FROM [Customers]"
            ConnectionString ="<%$ ConnectionStrings:AppConnectionString1 %>"
            UpdateCommand ="UPDATE [Customers] SET [CompanyName] = @CompanyName, [ContactName] = @ContactName,
            [Country] = @Country, [Region] = @Region WHERE [CustomerID] = @original_CustomerID"
            DeleteCommand ="DELETE FROM [Customers] WHERE [CustomerID] = @original_CustomerID"

Además de los atributos de SelectCommand y de UpdateCommand, también tenemos que agregar el atributo de DeleteCommand al control del servidor de SqlDataSource y proporcionar el comando del SQL que elimina la fila especificada. Justo como el Atributo de UpdateCommand, el Atributo DeleteCommand utiliza un parámetro nombrado. Debido a esto, define cuál es este parámetro dentro del control de SqlDataSource. Para hacer esto, agrega una sección al control de SqlDataSource.

< DeleteParameters >
< asp : Parameter Type ="String" Name ="CustomerID"></ asp : Parameter >
</ DeleteParameters >

Esta es la única definición del parámetro que se necesita para la sección porque el comando del SQL para esta operación requiere solamente el CustomerID de la fila que se desea eliminar.

Ronald Noé Saavedra Bances es estudiante de la Organización San Ignacio de Loyola. Trabaja como Desarrollador de Aplicaciones .net. Cuenta con las certificaciones MCP, MCAD, MCSD en .net. Expone en eventos técnicos y conferencias a nivel nacional. Su trabajo se centra en este momento en el desarrollo de aplicaciones distribuidas, implementaciones de servicios Web, XML y la implementación y el uso de patrones UML para el desarrollo de aplicaciones .net usando Building Blocks, UML y RUP.

Mostrar:
© 2014 Microsoft