Cómo: Dar formato a datos y el identificador de valores Null en un control DataGrid Web Control

Resumen

En este artículo se muestra cómo crear un control DataGrid Web, para enlazarlo a una base de datos para controlar los valores null y dar formato a los valores.

Mostrar datos en una tabla mediante HTML "plain" puede ser código tedioso y difícil de mantener. ASP.NET proporciona un control DataGrid Web que se puede enlazar a un origen de datos y personalizar para proporcionar una forma rápida y flexible de mostrar una gran cantidad de información.

Volver al principio

Requisitos

La lista siguiente describe el hardware recomendado, software, infraestructura de red y service packs que se necesitan:
  • Microsoft Windows 2000 Professional, Microsoft Windows 2000 Server, Microsoft Windows 2000 Advanced Server o Microsoft Windows XP Professional
  • Microsoft.NET Framework
  • Microsoft Visual Studio .NET
  • Microsoft Internet Information Services (IIS) 5.0
  • Microsoft SQL Server 2000
En este artículo se supone que está familiarizado con los temas siguientes:
  • Aplicaciones Web
  • ASP.NET
  • Microsoft Visual Basic .NET
Volver al principio

Utilizando el Control Web DataGrid

ASP.NET proporciona un control DataGrid Web que se puede enlazar a varios orígenes de datos. Se puede personalizar para proporcionar una forma rápida y flexible de mostrar una gran cantidad de información. El control DataGrid Web genera el código HTML necesario en el cliente para generar una tabla personalizada para mostrar datos. En este artículo se muestra cómo crear un control DataGrid Web, para enlazarlo a un origen de datos para controlar valores null en un origen de datos que se va a cargar en la cuadrícula y para dar formato a los campos de datos que se muestran en el explorador.

Volver al principio

Utilizar el Control DataGrid Web (parte 1)

Estos pasos crean un control DataGrid Web y enlazar el control DataGrid Web a un origen de datos:
  1. Inicie Visual Studio. NET.
  2. Crear un nuevo proyecto de aplicación Web de ASP.NET mediante Visual Basic .NET. Nombre del nuevo proyecto DataGridControlExample.
  3. En la vista HTML de WebForm1.aspx, pegue el código siguiente entre las etiquetas form de apertura y cierre. Esto crea un control DataGrid Web en el formulario que se puede obtener acceso al código en el servidor:
    <asp:DataGrid id="DataGrid1" runat="server"></asp:DataGrid>
  4. Cambie a la ventana de código haciendo clic en la ventana y, a continuación, haga clic en Ver código.
  5. Importar el espacio de nombres System.Data.SqlClient. Coloque la siguiente línea de código en la parte superior del archivo de código antes de la declaración de clase:
    Imports System.Data.SqlClient
  6. Pegue el código siguiente justo debajo de la instrucción INHERITS en la clase WebForm1 (a menos que este código ya se ha agregado automáticamente):
    Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid
  7. Pegue el código siguiente en el procedimiento de evento Page_Load en la clase WebForm1 . En este caso, se establece una conexión a la base de datos Pubs. Un objeto DataSet se rellena de la tabla Titles utilizando el objeto SQLDataAdapter. La propiedad DataSource del objeto DataGrid se establece para especificar el origen de la información que se mostrará en el control. A continuación, el objeto de conjunto de datos resultante enlazado al control DataGrid1 y mostrar utilizando la vista predeterminada que está asociada a la tabla. La instrucción SELECT del origen de datos también modifica valores null de precios. En lugar de un valor nulo, el código devuelve un precio de 0 (cero):

    Nota: Debe cambiar User ID = < username > y la contraseña = < contraseña segura > a los valores correctos antes de ejecutar este código. Asegúrese de que el identificador de usuario tiene los permisos apropiados para realizar esta operación en la base de datos.
    Dim myConnString As StringmyConnString = "Initial Catalog=pubs;server=localhost;User ID=<username>;Password=<strong password>;"
    Dim myConnection As SqlConnection = New SqlConnection(myConnString)
    Dim myCommand As SqlCommand = New SqlCommand _
    ("SELECT title, ISNULL(price, 0) AS price, pubdate" & _
    " FROM titles", MyConnection)
    Dim myAdapter As SqlDataAdapter = New SqlDataAdapter()

    myAdapter.SelectCommand = myCommand
    myConnection.Open()

    Dim myDataset As DataSet = New DataSet()
    myAdapter.Fill(myDataset, "Titles")

    myConnection.Close()

    DataGrid1.DataSource = myDataset.Tables("Titles").DefaultView
    DataGrid1.DataBind()

    Nota: Asegúrese de modificar la cadena de conexión para utilizar el ID de usuario de SQL Server y la contraseña. Además, para que funcione el código, asegúrese de que la autenticación se establece en SQL Server y Windows en la sección de seguridad de las propiedades de SQL Server. Para ver o modificar las propiedades, inicie el Administrador corporativo de SQL Server, haga clic derecho en el servidor SQL en la raíz de consola y, a continuación, haga clic en Propiedades.

  8. En el menú archivo , haga clic en Guardar todo.
  9. En el menú Depurar , haga clic en Inicio para generar y ejecutar la aplicación. WebForm1 se muestra. Se muestra una tabla que contiene el contenido de la tabla de base de datos de títulos. Todos los encabezados de columna se rellenan automáticamente con los nombres de campo. Los campos aparecen en el orden en que aparecen en la tabla. No hay valores de columna de precio están en blanco. En su lugar, se muestra un valor de 0 (cero). Todos los demás datos se muestra sin ningún formato especial.
Volver al principio

Utilizar el Control DataGrid Web (parte 2)

Aunque es fácil de codificar y poner en práctica el control DataGrid, este método realiza sólo básicos de formato de los datos. Puede utilizar la clase DataBinder para enlazar las propiedades del control DataGrid1 a una columna de origen de datos en tiempo de ejecución y aplicar formato a los datos antes de que se muestra en el explorador. En el ejemplo siguiente, la clase DataBinder se usa formato el precio y los valores de campo pubdate antes de resultado en el explorador:
  1. En la vista HTML de WebForm1.aspx, reemplace el código entre las etiquetas de formulario con el siguiente código HTML. Esto crea un control DataGrid que no genera las columnas y encabezados automáticamente desde el origen de datos. En su lugar, algunos de los campos del origen de datos están enlazados al control. Los campos precio y pubdate tienen el formato en tiempo de ejecución mediante la clase TemplateColumn . La clase de controles TemplateColumns contiene un control label que utiliza el método Eval de la clase DataBinder para dar formato a su contenido mediante una expresión de enlace de datos y una cadena de formato. El método DataBinder.Eval acepta el contenedor, expresión de enlace de datos y una cadena de formato:
    <asp:DataGrid id="DataGrid1" runat="server" AutoGenerateColumns="False">
    <Columns>
    <asp:boundcolumn headertext="Title" datafield="title"/>
    <asp:TemplateColumn>
    <HeaderTemplate>
    Price
    </HeaderTemplate>
    <ItemTemplate>
    <asp:Label ID="Label2" runat="server"
    Text='<%# DataBinder.Eval(Container.DataItem, _
    "price", "{0:c}")%>'/>
    </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn>
    <HeaderTemplate>
    Publish Date
    </HeaderTemplate>
    <ItemTemplate>
    <asp:Label ID="Label1" runat="server"
    Text='<%# DataBinder.Eval(Container.DataItem, _
    "pubdate", "{0:d}")%>'/>
    </ItemTemplate>
    </asp:TemplateColumn>
    </Columns>
    </asp:DataGrid>

  2. En el menú archivo , haga clic en Guardar todo.
  3. En el menú Depurar , haga clic en Inicio para generar y ejecutar la aplicación. WebForm1 se muestra. Se muestra una tabla que contiene el título, precio y valor pubdate para cada elemento de la tabla Titles. Los encabezados de columna se muestran como "Título", "Precio" y "Fecha de publicación." La columna del campo Precio con el formato de moneda. Los precios nulos se reemplazan con "0,00$". Los valores de pubdate se formatean utilizando un formato de fecha larga.
  4. Cierre el explorador web.
Volver al principio

Lista de código completa

Lista de código de la parte 1

Este es el código para el archivo de código subyacente WebForm1.aspx.vb:

Nota: Debe cambiar User ID = < username > y la contraseña = < contraseña segura > a los valores correctos antes de ejecutar este código. Asegúrese de que el identificador de usuario tiene los permisos apropiados para realizar esta operación en la base de datos.
Imports System.Data.SqlClient
Public Class WebForm1
Inherits System.Web.UI.Page

Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid

#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub

Private Sub Page_Init(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region

Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
Dim myConnString As String
myConnString = "Initial Catalog=pubs;server=localhost;User ID=<username>;Password=<strong password>;"
Dim myConnection As SqlConnection = _
New SqlConnection(myConnString)
Dim myCommand As SqlCommand = New SqlCommand _
("SELECT title, ISNULL(price, 0) AS price, pubdate" & _
" FROM titles", MyConnection)
Dim myAdapter As SqlDataAdapter = New SqlDataAdapter()

myAdapter.SelectCommand = myCommand
myConnection.Open()

Dim myDataset As DataSet = New DataSet()
myAdapter.Fill(myDataset, "Titles")

myConnection.Close()

DataGrid1.DataSource = myDataset.Tables("Titles").DefaultView
DataGrid1.DataBind()
End Sub
End Class

Este es el código del archivo WebForm1.aspx:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="DataGridControlExample.WebForm1"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>

<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" runat="server"></asp:DataGrid>
</form>
</body>
</HTML>

Volver al principio

Lista de código para la parte 2

Este es el código para el archivo de código subyacente WebForm1.aspx.vb:
Nota: Debe cambiar User ID = < username > y la contraseña = < contraseña segura > a los valores correctos antes de ejecutar este código. Asegúrese de que el identificador de usuario tiene los permisos apropiados para realizar esta operación en la base de datos.
Imports System.Data.SqlClient
Public Class WebForm1
Inherits System.Web.UI.Page

Protected WithEvents DataGrid1 As System.Web.UI.WebControls.DataGrid

#Region " Web Form Designer Generated Code "
'This call is required by the Web Form Designer.
<System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
End Sub

Private Sub Page_Init(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Init
'CODEGEN: This method call is required by the Web Form Designer
'Do not modify it using the code editor.
InitializeComponent()
End Sub
#End Region

Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
Dim myConnString As String
myConnString="Initial Catalog=pubs;server=localhost;User ID=<username>;Password=<strong password>;"
Dim myConnection As SqlConnection = _
New SqlConnection(myConnString)
Dim myCommand As SqlCommand = New SqlCommand _
("SELECT title, ISNULL(price, 0) AS price, pubdate" & _
" FROM titles", MyConnection)
Dim myAdapter As SqlDataAdapter = New SqlDataAdapter()

myAdapter.SelectCommand = myCommand
myConnection.Open()

Dim myDataset As DataSet = New DataSet()
myAdapter.Fill(myDataset, "Titles")

myConnection.Close()

DataGrid1.DataSource = myDataset.Tables("Titles").DefaultView
DataGrid1.DataBind()
End Sub
End Class

Este es el código del archivo WebForm1.aspx:
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="DataGridControlExample.WebForm1"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<asp:DataGrid id="DataGrid1" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:boundcolumn headertext="Title" datafield="title"/>
<asp:TemplateColumn>
<HeaderTemplate>
Price
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, _
"price", "{0:c}")%>'/>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<HeaderTemplate>
Publish Date
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, _
"pubdate", "{0:d}")%>'/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
</form>
</body>
</HTML>

Volver al principio

Referencias

Para obtener información adicional, haga clic en el número de artículo siguiente para verlo en Microsoft Knowledge Base:
307860 INFO: Introducción al enlace de datos de ASP.NET
Para obtener información adicional, visite los siguientes sitios Web de MSDN:Volver al principio
Propiedades

Id. de artículo: 316672 - Última revisión: 17 ene. 2017 - Revisión: 1

Comentarios