Compartir a través de


Tutorial: Agregar datos dinámicos a un sitio web existente

Actualización: Julio de 2008

Este tutorial muestra cómo modificar un sitio web ASP.NET existente para incluir las características del marco de trabajo de datos dinámicos. Además, muestra maneras de personalizar un sitio web de datos dinámicos. Al final del tutorial tendrá un sitio web funcional que utiliza el modelo de datos para interactuar con la base de datos. Asimismo, tendrá plantillas de campo personalizadas que definen cómo se representan los campos de datos para su presentación y modificación.

Uno de los aspectos que definen los datos dinámicos de ASP.NET es su capacidad de deducir en tiempo de ejecución el aspecto y el comportamiento de los campos de datos a partir del modelo de datos que representa la base de datos. A continuación, esta información se utiliza en los controles de datos, respaldados por las plantillas de campo, a fin de eliminar la necesidad de repetir el código una y otra vez en la capa de la presentación.

Este tutorial muestra cómo hacer lo siguiente con una cantidad mínima de código:

  • Interactuar con el modelo de datos. Los datos dinámicos incorporan características que le ayudan a crear una aplicación controlada por datos que puede realizar operaciones de creación, lectura, actualización y eliminación (CRUD).

  • Personalizar cómo los usuarios ven y modifican los campos de datos creando plantillas de campo. Los datos dinámicos seleccionan las plantillas de campo adecuadas en función de la información que se deduce a partir del modelo de datos.

Realizará los pasos siguientes:

  • Crear un sitio web y, a continuación, modificarlo para que admita datos dinámicos. El objetivo principal de esta tarea es crear el modelo de datos que los datos dinámicos utilizarán para interactuar con la base de datos.

  • Crear plantillas de campo. Las plantillas de campo son controles de usuario que definen la interfaz de usuario que especifica cómo se muestran y modifican los datos.

  • Crear una página personalizada para mostrar una tabla. Esta página muestra cómo los datos dinámicos interactúan con la base de datos; comprobará que únicamente se necesita una cantidad de código mínima para esta tarea.

  • Probar la integración de los datos dinámicos. Permite asegurarse de que las capacidades de datos dinámicos se han integrado en el sitio web. Puede interactuar con el modelo de datos y comprobar que la aplicación funciona conforme a lo esperado. Como parte de este proceso, generará y administrará errores.

Requisitos previos

Para poder completar los ejemplos de este tema, se necesita lo siguiente:

  • Microsoft Visual Studio 2008 Service Pack 1 o Visual Web Developer 2008 Express Service Pack 1.

  • La base de datos de ejemplo AdventureWorksLT. Para obtener información sobre la forma de descargar e instalar la base de datos de ejemplo de SQL Server, vea Microsoft SQL Server Product Samples: Database en el sitio CodePlex. Asegúrese de que instala la versión correcta de la base de datos de ejemplo para la versión de SQL Server que esté ejecutando (Microsoft SQL Server 2005 o Microsoft SQL Server 2008).

Crear un sitio web de datos dinámicos

En esta sección creará un sitio web de datos dinámicos en Visual Studio. Comenzará por un sitio web ASP.NET estándar y, a continuación, lo transformará en un sitio que admita las características de datos dinámicos. Para ello, haga lo siguiente:

  • Cree un sitio web ASP.NET.

  • Conecte el sitio a una base de datos. Esta base de datos contiene la tabla a cuyas columnas (campos de datos) se tendrá acceso para la presentación y modificación personalizadas.

  • Configure el sitio de modo que utilice los controles de datos dinámicos. Esto habilita la integración de las características de datos dinámicos en el sitio web.

A continuación, creará y configurará el modelo de datos con el que va a trabajar. Para ello, hará lo siguiente:

  • Crear clases de modelo de datos basadas en una base de datos de SQL Server. .

  • Agregar metadatos al modelo de datos para habilitar la validación personalizada de los datos proporcionados por el usuario y, posteriormente, permitir que un control Calendar modifique los campos de datos.

Preparar un sitio web para datos dinámicos

En esta sección se muestra cómo crear un sitio web ASP.NET, cómo agregar una base de datos y cómo configurar el sitio web para integrar las características de datos dinámicos.

Para crear un sitio web ASP.NET

  1. Inicie Visual Studio.

  2. En el menú Archivo, haga clic en Nuevo y, a continuación, haga clic en Sitio web.

    Aparece el cuadro de diálogo Nuevo sitio Web.

  3. En Plantillas instaladas de Visual Studio, seleccione Sitio Web de ASP.NET.

  4. Junto a Ubicación, seleccione Sistema de archivos y, en el segundo cuadro, escriba el nombre de la carpeta donde desea conservar las páginas del sitio web. Por ejemplo, escriba el nombre de carpeta C:\WebSites\DynamicDataWebSite.

  5. En la lista Lenguaje, seleccione el lenguaje de programación con el que prefiera trabajar.

  6. Haga clic en Aceptar.

    Visual Studio crea las carpetas y los archivos correspondientes a un sitio web ASP.NET.

El paso siguiente consiste en agregar una base de datos al sitio. Esta base de datos contiene la tabla a cuyas columnas (campos de datos) se tendrá acceso para su presentación y modificación.

Para agregar la base de datos al sitio web

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Data y después haga clic en Agregar elemento existente.

  2. En el cuadro de diálogo Agregar elemento existente, escriba la ubicación donde instaló el archivo de la base de datos AdventureWorksLT (AdventureWorksLT.mdf); a continuación, haga clic en Agregar.

    Con ello se crea una copia del archivo de base de datos en el proyecto.

Ahora, puede configurar el sitio web para integrar las características de datos dinámicos.

Para configurar el sitio web

  1. En el Explorador de soluciones, abra el archivo Web.config.

  2. Agregue las referencias de ensamblado correspondientes a los ensamblados siguientes:

    • System.Web.Routing

    • System.Web.DynamicData

    • System.ComponentModel.DataAnnotations

    En el siguiente ejemplo se muestra cómo agregar los ensamblados. Asegúrese de utilizar las versiones de los ensamblados correctas.

    <system.web>
      <compilation>
        <assemblies>
    
          <add assembly="System.Web.Routing, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.Web.DynamicData, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.ComponentModel.DataAnnotations,            Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </assemblies>
      </compilation>
    
  3. Configure el prefijo de etiqueta asp de modo que haga referencia al espacio de nombres System.Web.DynamicData, como se muestra en el ejemplo siguiente:

    <system.web>
      <pages>
        <controls>
    
          <add tagPrefix="asp" namespace="System.Web.DynamicData"          assembly="System.Web.DynamicData, Version=3.5.0.0,          Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </controls>
      </pages>
    </system.web>
    
  4. Guarde y cierre el archivo Web.config.

Establecer el modelo de datos

En esta sección se muestra cómo crear el modelo de datos que es un componente clave para lograr el comportamiento dinámico del sitio web. En este tutorial utilizará un modelo de datos LINQ to SQL. Sin embargo, en su lugar puede utilizar un modelo de datos del marco de entidades ADO.NET. En esta sección también se muestra cómo agregar información de metadatos al modelo de datos.

Para crear el modelo de datos

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto, seleccione Agregar carpeta ASP.NET y haga clic en App_Code.

  2. Haga clic con el botón secundario del mouse en la carpeta App_Code y, a continuación, haga clic en Agregar nuevo elemento.

  3. En Plantillas instaladas de Visual Studio, haga clic en Clases de LINQ to SQL.

  4. En el cuadro Nombre, escriba el nombre AdventureWorksLT.dbml para el modelo de base de datos.

  5. Haga clic en Add.

    Se muestra el Diseñador relacional de objetos. Para obtener más información, vea Diseñador relacional de objetos (Diseñador R/O).

  6. En el Diseñador relacional de objetos, haga clic en el vínculo Explorador de servidores.

  7. En el Explorador de servidores, en Conexiones de datos, expanda el nodo AdventureWorksLT_Data.mdf y, a continuación, expanda el nodo Tablas.

  8. Arrastre la tabla Customer a la ventana del Diseñador relacional de objetos.

  9. Guarde y cierre el archivo AdventureWorksLT.dbml.

    Ha creado el modelo de datos que representa la base de datos AdventureWorksLT.

En el procedimiento siguiente se muestra cómo agregar la validación personalizada de los datos proporcionados por el usuario. También se muestra cómo utilizar un control Calendar para representar la interfaz de usuario a fin de presentar y modificar los campos de datos DateTime

Para agregar la validación personalizada y los metadatos al modelo de datos

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta App_Code y, a continuación, haga clic en Agregar nuevo elemento.

  2. En Plantillas instaladas de Visual Studio, haga clic en Clase.

  3. En el cuadro Nombre, escriba el nombre de la tabla de base de datos (tal y como se define en el modelo de datos) que contiene los datos que se mostrarán en la plantilla de campo personalizada. Para este tutorial, trabajará con la clase Customer. Así pues, cree un archivo de clase denominado Customer.cs o Customer.vb. Este archivo contendrá asimismo una clase asociada que creará más adelante para aplicar atributos a los campos de datos.

  4. Agregue la palabra clave Partial de Visual Basic o la palabra clave partial en Visual C# a la definición de la clase Customer para convertirla en una clase parcial.

  5. Si está creando la clase en Visual C#, elimine el constructor predeterminado.

    En el ejemplo siguiente se muestra la declaración de clase actualizada.

    public partial class Customer {
    
    }
    
    Partial Public Class Customer
    
    End Class
    
  6. Agregue referencias a los espacios de nombres System.Web.DynamicData y System.ComponentModel.DataAnnotations utilizando la palabra clave Imports de Visual Basic o la palabra clave using de Visual C#, tal y como se muestra en el siguiente ejemplo:

    using System.Web.DynamicData;
    using System.ComponentModel.DataAnnotations;
    
    Imports System.Web.DynamicData
    Imports System.ComponentModel.DataAnnotations 
    
  7. En el mismo archivo, cree otra clase parcial que actuará como la clase de metadatos asociada. Puede utilizar cualquier nombre para la clase. Para este tutorial, dé a la clase el nombre CustomerMetadata, como se muestra en el ejemplo siguiente:

    public partial class CustomerMetadata
    {
    
    }
    
    Partial Public Class CustomerMetadata
    
    End Class 
    
  8. Aplique el atributo MetadataTypeAttribute a la clase parcial Customer. Como parámetro del atributo, especifique CustomerMetadata, que es el nombre de la clase de metadatos asociada que creó en el paso anterior.

    En el ejemplo siguiente se muestra la clase parcial Customer con el atributo aplicado.

    [MetadataType(typeof(CustomerMetadata))]
    public partial class Customer {
    
    }
    
    <MetadataType(GetType(CustomerMetadata))> _
    Partial Public Class Customer
    
    End Class
    
  9. En la clase de metadatos, cree un campo público denominado ModifiedDate cuyo tipo sea Object.

    En la clase de metadatos, se crea un campo para cada campo de datos cuyo comportamiento de presentación y modificación se desea personalizar. Para el nombre de campo en la clase de metadatos, debe utilizar el mismo nombre del campo de datos que desea modificar.

  10. Aplique el atributo UIHintAttribute al campo ModifiedDate. Como parámetro, especifique "DateCalendar". Se trata del nombre de una plantilla de campo que creará más adelante.

    Nota:

    Object se utiliza como marcador en el tipo de metadatos para representar el campo de datos. Los datos dinámicos deducen el tipo real a partir del modelo de datos.

    En el ejemplo siguiente se muestra el atributo UIHintAttribute aplicado.

    public partial class CustomerMetadata
    {
        [UIHint("DateCalendar")]
        public object ModifiedDate;
    }
    
    Partial Public Class CustomerMetadata
        <UIHint("DateCalendar")> _
        Public ModifiedDate As Object
    End Class 
    
  11. En la clase de metadatos, cree campos públicos para las propiedades LastName y FirstName.

  12. Aplique el atributo RegularExpressionAttribute a los campos de datos FirstName y LastName. Especifique un modelo de expresión regular que permita únicamente caracteres alfabéticos, espacios y guiones, y que limite el nombre a 40 caracteres. Incluya un mensaje de error personalizado que deberá mostrarse si se produce un error en la validación.

    En el ejemplo siguiente se muestran los campos FirstName y LastName con el atributo aplicado.

    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",     ErrorMessage="Entered characters are not allowed.")]
    public object FirstName;
    
    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",    ErrorMessage = "Entered characters are not allowed.")]
    public object LastName; 
    
    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
    Public FirstName As Object
    
    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
    Public LastName As Object
    

    Observe que los campos de datos coinciden con las columnas de la tabla Customer definidas en el modelo de datos. Únicamente se utilizan para agregar la información de metadatos que los datos dinámicos usan al representar estos campos de datos.

    El modelo de expresión regular permite hasta 40 caracteres en mayúscula y en minúscula, así como varios caracteres especiales que son comunes a los nombres en inglés.

  13. Guarde y cierre el archivo de clase.

Puede registrar ahora el contexto del modelo de datos para que los datos dinámicos puedan tener acceso a información de metadatos.

Para registrar el contexto del modelo de datos

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del proyecto y, a continuación, haga clic en Agregar nuevo elemento.

  2. En Plantillas instaladas de Visual Studio, seleccione Clase de aplicación global y, a continuación, haga clic en Agregar.

    Se agrega un archivo Global.asax al sitio.

  3. Agregue una directiva @ Import con un atributo Namespace que haga referencia al espacio de nombres System.Web.DynamicData, como se muestra en el ejemplo siguiente:

    <%@ Import Namespace="System.Web.DynamicData" %>
    
  4. En el método Application_Start, registre el contexto de datos con la opción scaffolding deshabilitada, como se muestra en el ejemplo siguiente.

    Este registro indica a los datos dinámicos qué modelo de datos se debe utilizar. También indica a los datos dinámicos que no se deben habilitar las tablas visibles para la técnica de scaffolding. Este último paso no es necesario, pero se usa aquí para hacer hincapié en el hecho de que el sitio web no utiliza scaffolding.

    MetaModel model = new MetaModel();
    model.RegisterContext(typeof(AdventureWorksLTDataContext), 
    new ContextConfiguration() {ScaffoldAllTables = false });
    
    Dim model As MetaModel = New MetaModel()
    model.RegisterContext(GetType( _
        AdventureWorksLTDataContext), _
        New ContextConfiguration() With { _
        .ScaffoldAllTables = False})
    
  5. Guarde y cierre el archivo Global.asax.

Crear las plantillas de campo

Las plantillas de campo son controles de usuario que los datos dinámicos utilizan para representar la interfaz de usuario a fin de mostrar y modificar los campos de datos. Los datos dinámicos necesitan que existan plantillas de campo para cada campo de datos representado en el contexto de datos. (Si no existe ninguna plantilla de campo para un tipo de campo de datos concreto, ni se encuentra ninguna plantilla de campo mediante las reglas de reserva, los datos dinámicos inician una excepción.)

Si crea un sitio web de datos dinámicos, el sitio incluirá un conjunto de plantillas de campo que representan los tipos de datos típicos de la base de datos. Éstos se crean junto con las plantillas de página, una página maestra y los archivos de hojas de estilos en cascada. Sin embargo, en este tutorial, se trata de aprender a agregar las capacidades de datos dinámicos a un sitio existente. Por consiguiente, se supone que no tiene acceso a las plantillas de campo predeterminadas.

Las plantillas de campo que se crean en este tutorial se parecerán las plantillas predeterminadas de un sitio web de datos dinámicos. Para obtener más información, vea Información general sobre las plantillas de campos de datos dinámicos de ASP.NET. Puede ver las plantillas de campo predeterminadas que se generan al crear un sitio web que utiliza scaffolding. Para obtener más información, vea Tutorial: Crear un nuevo sitio web de datos dinámicos con la técnica scaffolding.

En esta sección se muestra cómo crear las plantillas siguientes:

  • Plantillas de campo que representan la interfaz de usuario para mostrar y modificar los campos de datos de tipo String.

  • Plantillas de campo que representan la interfaz de usuario para mostrar y modificar los campos de datos de tipo DateTime.

Crear plantillas de campo para datos de tipo String

En esta sección se muestra cómo crear plantillas de campo para representar la interfaz de usuario a fin de mostrar y modificar los campos de datos de tipo String.

Para crear las plantillas de campo que se utilizan para mostrar y modificar campos de datos de tipo String

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nombre del proyecto y seleccione Nueva carpeta.

  2. Cambie el nombre de la nueva carpeta por el de DynamicData.

    Nota:

    Debe utilizar los nombres de carpeta que se describen en este procedimiento, porque los nombres tienen un significado especial en los datos dinámicos.

  3. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta DynamicData y seleccione Nueva carpeta.

  4. Cambie el nombre de la nueva carpeta por el de FieldTemplates.

  5. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta FieldTemplates y, a continuación, haga clic en Agregar nuevo elemento.

  6. En Plantillas instaladas de Visual Studio, haga clic en Campo de datos dinámicos.

  7. En el cuadro Nombre, escriba Text.ascx. Asegúrese de activar Colocar el código en un archivo independiente.

  8. Haga clic en Add.

    Se crean dos plantillas de campo denominadas Text.ascx y Text_Edit.ascx. El primer control representa la interfaz de usuario para mostrar los campos de datos de tipo String. El segundo control representa la interfaz de usuario para editar los campos de datos de tipo String.

  9. Abra el archivo Text_Edit.ascx. En la directiva @ Control, establezca el atributo AutoEventWireup en true.

  10. Guarde y cierre los archivos del control de usuario.

    Ya ha creado las plantillas de campo que representan la interfaz de usuario para mostrar y modificar los campos de datos de tipo String.

Crear plantillas de campo de tipo DateTime

En esta sección se muestra cómo crear plantillas de campo para representar la interfaz de usuario a fin de mostrar y modificar los campos de datos de tipo DateTime. La plantilla de campo de presentación utiliza una representación de la fecha corta que excluye la hora. La plantilla de campo de modificación utiliza el control Calendar para permitir al usuario especificar un nuevo valor.

Para crear una plantilla de campo que muestre y permita modificar campos de datos de tipo DateTime

  1. En el Explorador de soluciones, haga clic con el botón secundario en la carpeta DynamicData/FieldTemplates y, a continuación, haga clic en Agregar nuevo elemento.

  2. En Plantillas instaladas de Visual Studio, haga clic en Campo de datos dinámicos.

  3. En el cuadro Nombre, escriba DateCalendar.ascx. Asegúrese de activar Colocar el código en un archivo independiente.

  4. Haga clic en Add.

    Se crean dos plantillas de campo denominadas DateCalendar.ascx y DateCalendar_Edit.ascx. El primer control representa la interfaz de usuario para mostrar los campos de datos de tipo DateTime. El segundo control representa la interfaz de usuario para editar los campos de datos de tipo DateTime.

  5. Abra el archivo DateCalendar.ascx.

  6. En el control Literal, elimine la asignación de FieldValueString al atributo Text, como se muestra en el ejemplo siguiente:

    <asp:Literal ID="Literal1" />
    
  7. Guarde y cierre el archivo del control de usuario.

  8. Abra el archivo de código subyacente de la plantilla de campo DateCalendar.ascx.vb o DateCalendar.ascx.cs.

  9. Invalide el método OnDataBinding del control de usuario para dar formato al valor DateTime de modo que se presente sin indicar la hora, como se muestra en el ejemplo siguiente. El valor del campo está disponible en FieldValue.

    protected override void OnDataBinding(EventArgs e)
    {
      base.OnDataBinding(e);
      string shortDate = string.Empty;
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        shortDate = dt.ToShortDateString();
      }
      Literal1.Text = shortDate;
    }
    
    Protected Overloads Overrides Sub OnDataBinding( _
        ByVal e As EventArgs)
        MyBase.OnDataBinding(e)
        Dim shortDate As String = String.Empty
        If FieldValue IsNot Nothing Then
          Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
          shortDate = dt.ToShortDateString()
        End If
        Literal1.Text = shortDate
    End Sub  
    
  10. Guarde y cierre el archivo de código subyacente.

  11. Abra el archivo DateCalendar_Edit.ascx.

  12. En la directiva @ Control, establezca el atributo AutoEventWireup en true.

  13. En el control TextBox, reemplace la expresión FieldValueString del atributo Text por el método personalizado GetDateString(), como se muestra en el ejemplo siguiente.

    <asp:TextBox ID="TextBox1"  
      Text='<%# GetDateString() %>' >
    </asp:TextBox>
    
  14. Agregue el marcado siguiente al archivo para definir el control Calendar que representa la interfaz de usuario a fin de habilitar un modo alternativo de modificar las fechas.

    <asp:Calendar ID="Calendar1"  
      VisibleDate=
        '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
      SelectedDate=
        '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
      OnSelectionChanged="Calendar1_SelectionChanged" />
    
    <asp:Calendar ID="Calendar1"  
      VisibleDate=
      '<%# If(FieldValue,DateTime.Now)%>'
      SelectedDate=
      '<%# If(FieldValue,DateTime.Now) %>'
      OnSelectionChanged="Calendar1_SelectionChanged" /> 
    
  15. Guarde y cierre el archivo de la plantilla de campo.

  16. Abra el archivo de código subyacente DateCalendar_Edit.ascx.vb o DateCalendar_Edit.ascx.cs.

  17. Agregue un método GetDateString. En el método, procese los datos proporcionados por el usuario a medida que se especifican mediante el control TextBox. El método da formato a la fecha utilizando un formato de fecha corta que excluye la hora.

    En el ejemplo siguiente se muestra cómo hacerlo.

    protected string GetDateString()
    {
      if (FieldValue != null)
      {
        DateTime dt = (DateTime)FieldValue;
        return dt.ToShortDateString();
      }
      else
        return string.Empty;
    }
    
    Protected Function GetDateString() As String
      If FieldValue <> Nothing Then
        Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
          Return dt.ToShortDateString()
      Else
        Return String.Empty
      End If
    End Function
    
  18. Agregue un controlador de eventos para el evento SelectionChanged del control Calendar.

  19. En el controlador, establezca la propiedad Text del control TextBox en una versión con formato de la fecha seleccionada del calendario. Esto muestra la selección actual del usuario en el cuadro de texto.

    En el ejemplo siguiente se muestra el controlador.

    protected void Calendar1_SelectionChanged(
      object sender, EventArgs e)
    {
      // Display value using the short date format.
      TextBox1.Text = 
      Calendar1.SelectedDate.ToString("d");
    }
    
    Protected Sub Calendar1_SelectionChanged( _
        ByVal sender As Object, ByVal e As EventArgs)
        ' Display value using the short date format.
        TextBox1.Text = Calendar1.SelectedDate.ToString("d")
    End Sub
    
  20. Guarde y cierre los archivos de plantilla de campo.

    Ya ha creado las plantillas de campo que representan la interfaz de usuario para mostrar y modificar los campos de datos de tipo DateTime. Las plantillas de campo indican a los datos dinámicos que apliquen el formato y la validación adecuados. Si se produce un error en la validación, las plantillas de campo también generan los mensajes de error adecuados.

Crear una página personalizada para mostrar la tabla Customer

En esta sección se muestra cómo crear una página personalizada que muestra la tabla Customer utilizando un control GridView con comportamiento dinámico.

El comportamiento dinámico del control se establece de la manera siguiente:

La tabla de la base de datos contiene los tipos de campos de datos DateTime y String. Por consiguiente, cuando utilice el control GridView con comportamiento dinámico para mostrar los datos de la tabla, los datos dinámicos utilizarán las plantillas de campo personalizadas que ha creado.

Para crear una página personalizada para mostrar la tabla Customers

  1. En el Explorador de soluciones, haga clic con el botón secundario del mouse en el nombre del proyecto y, a continuación, haga clic en Agregar nuevo elemento.

  2. En Plantillas instaladas de Visual Studio, seleccione Web Forms.

    En el cuadro Nombre, escriba Customers.aspx. Asegúrese de activar Colocar el código en un archivo independiente.

  3. En la directiva @ Page, establezca el atributo AutoEventWireup en true.

  4. En la vista Código fuente, agregue un control DynamicDataManager al cuerpo de la página, como se muestra en el ejemplo siguiente:

    <body>
    
        <asp:DynamicDataManager ID="DynamicDataManager1"      />
    
    </body>
    

    El control DynamicDataManager indica a los datos dinámicos que administren los controles de datos de la página como controles dinámicos.

  5. Agregue a la página un control LinqDataSource desde la ficha Datos del Cuadro de herramientas.

  6. Establezca la propiedad EnableUpdate del control LinqDataSource en true.

    Con ello se habilitan las operaciones de actualización para el control de datos.

  7. Establezca la propiedad TableName del control LinqDataSource en la tabla que desea utilizar (Customers).

  8. Establezca la propiedad ContextTypeName en la clase de contexto de datos (AdventureWorksLTDataContext), como se muestra en el ejemplo siguiente:

    <asp:LinqDataSource ID="LinqDataSource1"  
      TableName="Customers"  ContextTypeName="AdventureWorksLTDataContext"  EnableUpdate="true">
    </asp:LinqDataSource>
    
  9. Agregue a la página un control GridView desde la ficha Datos del Cuadro de herramientas.

    Este control se utilizará para mostrar y modificar los campos de datos.

  10. Establezca la propiedad DataSourceID del control GridView en el identificador del control LinqDataSource, como se muestra en el ejemplo siguiente:

    <form ID="Form1"  >
    
        <asp:GridView ID="GridView1"   
          DataSourceID="LinqDataSource1" >
        </asp:GridView>
    </form>
    
  11. Establezca la propiedad AutoGenerateColumns del control GridView en false y establezca la propiedad AutoGenerateEditButton en true, como se muestra en el ejemplo siguiente:

    <asp:GridView ID="GridView1"   
      AutoGenerateEditButton="true"  AutoGenerateColumns="false" >
    </asp:GridView>
    

    Con ello se habilita la operación de modificación y se deshabilita la generación automática de columnas basadas en la tabla de la base de datos. En lugar de ello, utilizará un control DynamicField para rellenar el control GridView.

  12. Establezca las propiedades AllowPaging y AllowSorting del control GridView en true, como se muestra en el ejemplo siguiente:

    <asp:GridView ID="GridView1"   
    
      AllowPaging="true"  AllowSorting="true" >
    </asp:GridView>
    
  13. Agregue tres controles DynamicField a la propiedad Columns y establezca sus propiedades DataField() en "FirstName", "LastName" y "ModifiedDate".

    Los controles DynamicField utilizan datos dinámicos de ASP.NET para leer los datos del modelo de datos y darles formato utilizando la plantilla de campo adecuada. Tenga en cuenta que no tiene que incluir ninguna información en los controles DynamicField sobre cómo leer o dar formato a los datos. Los datos dinámicos se encargan automáticamente de estas tareas.

    En el ejemplo siguiente se muestra el marcado para el control GridView después de agregar los controles DynamicField.

    <asp:GridView ID="GridView1"
     >
    
      <Columns>    <asp:DynamicField DataField="FirstName" />    <asp:DynamicField DataField="LastName" />    <asp:DynamicField DataField="ModifiedDate" />  </Columns>
    </asp:GridView>
    
    Nota:

    El control DynamicField no se encuentra en el Cuadro de herramientas. Por consiguiente, debe agregarlo como marcado en la vista Código fuente.

  14. Guarde y cierre el archivo Customers.aspx.

    Ya ha creado la página personalizada que permite tener acceso a la tabla Customers.

  15. Abra el archivo de código subyacente Customers.aspx.cs o Customers.aspx.vb.

  16. Agregue una referencia al espacio de nombres System.Web.DynamicData utilizando la palabra clave Imports de Visual Basic o la palabra clave using de Visual C#, como se muestra en el ejemplo siguiente:

    using System.Web.DynamicData;
    
    Imports System.Web.DynamicData
    
  17. Cree un método Page_Init, como se indica en el ejemplo siguiente:

    protected void Page_Init(object sender, 
    EventArgs e)
    {    }
    
    Protected Sub Page_Init(ByVal sender As Object, _
    ByVal e As EventArgs)
    
    End Sub
    
  18. En el método Page_Init, registre el control GridView con DynamicDataManager para habilitar el comportamiento dinámico.

    En el ejemplo siguiente se muestra cómo hacerlo.

    protected void Page_Init(object sender, 
    EventArgs e)
    {
        DynamicDataManager1.RegisterControl(GridView1);
    }
    
    Protected Sub Page_Init(ByVal sender As Object, _
        ByVal e As EventArgs)
        DynamicDataManager1.RegisterControl(GridView1)
    End Sub
    
  19. Cierre el archivo de código subyacente.

Probar los datos dinámicos

En esta sección se muestra cómo asegurarse de que las capacidades de datos dinámicos se han integrado en el sitio web. Puede interactuar con la base de datos a través del modelo de datos y comprobar que la integración funciona. Al modificar los datos, comprobará que, si proporciona valores no válidos, los datos dinámicos generarán mensajes de error basándose en la información deducida a partir de la base de datos.

Para probar si se han integrado las capacidades de datos dinámicos

  1. En el Explorador de soluciones, haga clic con el botón secundario en la página Customers.aspx y seleccione Ver en el explorador.

    En el explorador aparece una página que muestra la tabla Customers con las columnas seleccionadas.

  2. En cualquier fila, haga clic en Editar y borre el nombre.

  3. En la misma fila, haga clic en Actualizar.

    Los datos dinámicos muestran un mensaje de error que advierte que no se permite una cadena vacía para el campo de datos FirstName.

  4. En la misma fila, haga clic en Cancelar.

  5. En cualquier fila, haga clic en Editar y modifique el apellido.

  6. En la misma fila, haga clic en Actualizar.

    Los datos dinámicos actualizan la base de datos. Dado que escribió un valor válido para el apellido, los datos superan el control de validación que forma parte de la plantilla de campo que generó anteriormente.

  7. En cualquier fila, haga clic en Editar y escriba caracteres no alfabéticos para el nombre o el apellido.

  8. En la misma fila, haga clic en Actualizar.

    Los datos dinámicos muestran el mensaje de error personalizado que especificó con la expresión regular; este mensaje advierte que ha escrito caracteres que no se permiten.

  9. En la misma fila, haga clic en Cancelar.

  10. En cualquier fila, haga clic en Editar y borre la fecha.

  11. En la misma fila, haga clic en Actualizar.

    Los datos dinámicos muestran un mensaje de error que advierte que no se permite una cadena vacía para el campo de datos ModifiedDate.

  12. En la misma fila, haga clic en Cancelar.

  13. En cualquier fila, haga clic en Editar y cambie la fecha mediante el control Calendar.

  14. En la misma fila, haga clic en Actualizar.

    Los datos dinámicos actualizan la base de datos. Dado que escribió un valor permitido para la fecha, los datos superan el control de validación que forma parte de la plantilla de campo que generó anteriormente.

Pasos siguientes

En este tutorial le hemos mostrado los principios básicos de los datos dinámicos de ASP.NET y cómo agregar características de datos dinámicos a un sitio web ASP.NET existente. Al integrar características de datos dinámicos en un sitio web ASP.NET existente, puede hacer lo siguiente:

  • Interactuar con la base de datos subyacente. Los datos dinámicos incorporan características clave para una aplicación controlada por datos, como las operaciones de creación, lectura, actualización y eliminación (CRUD).

  • Mostrar y modificar campos de datos, porque los datos dinámicos seleccionan la plantilla de campo adecuada basándose en la información deducida a partir de la base de datos.

Es posible que desee probar otras características. Las sugerencias para la exploración adicional incluyen lo siguiente:

Para obtener información general, puede interesarle:

Vea también

Conceptos

Información general sobre el modelo de datos dinámicos de ASP.NET

Información general sobre las plantillas de campos de datos dinámicos de ASP.NET

Información general sobre la plantilla de página y la técnica scaffolding de datos dinámicos de ASP.NET

Información general sobre los datos dinámicos de ASP.NET

Historial de cambios

Fecha

Historial

Motivo

Julio de 2008

Se ha agregado un tema.

Cambio de características de SP1.