Cómo: Personalizar la visualización de campos de datos en el modelo de datos

Visual Studio 2010

Actualización: noviembre 2007

En este tema se describe cómo personalizar la presentación de un campo de datos (columna de tabla) en los datos dinámicos de ASP.NET creando su propia plantilla de campo. En este tema se describen las siguientes tareas:

  • Crear una plantilla de campo personalizada para personalizar la presentación del campo de datos.

  • Asociar la plantilla de campo personalizada al campo de datos. Esto establece la conexión del modelo de datos entre el campo de datos y la plantilla de campo personalizada para controlar la presentación.

    Cc488522.alert_note(es-es,VS.100).gifNota:

    Al personalizar la presentación de un campo de datos utilizando el modelo de datos, la personalización se aplica a todo el sitio web. Esto significa que los datos dinámicos utilizan la plantilla de campo personalizada en lugar de la plantilla predeterminada (que se selecciona según el tipo de campo de datos) para mostrar el campo de datos.

Para crear una plantilla de campo personalizada

  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, haga clic en Plantilla de campo.

    En el cuadro Nombre, escriba el nombre del control; puede utilizar cualquier nombre. Asegúrese de que activa la casilla Colocar el código en un archivo independiente.

  3. Pase, o abra, al archivo de control de usuario que acaba de crear.

  4. En la directiva @ Control, agregue un atributo CodeFile que haga referencia al archivo de código subyacente y un atributo Inherits que haga referencia a la clase de control.

    <%@ Control Language="C#" 
      CodeFile=MyCustomControl.ascx.cs"
      Inherits="MyCustomControl" %>
    

    <%@ Control Language="VB" 
      CodeFile=MyCustomControl.ascx.cs"
      Inherits="MyCustomControl" %>
    
  5. Cree el marcado que se representará para mostrar los datos.

    En el ejemplo siguiente se muestra un control Label cuya propiedad Text está establecida en la cadena del valor de campo actual y cuya propiedad OnDataBinding está establecida en un controlador de eventos personalizado.

    <asp:Label id="TextLabel1" runat="server" 
      OnDataBinding="DataBindingHandler" 
      Text='<%# FieldValueString %>'>
    </asp:Label> 
    
  6. Guarde y cierre el archivo del control de usuario.

  7. Abra el archivo de código subyacente del control de usuario.

  8. Agregue la directiva de espacio de nombres que hace referencia al espacio de nombres System.Web.DynamicData utilizando la palabra clave Imports de Visual Basic o la palabra clave using de Visual C#.

    using System.Web.DynamicData;
    

    Imports System.Web.DynamicData
    
  9. Obtenga la clase parcial del control de usuario de la clase FieldTemplateUserControl como se muestra a continuación.

    partial class MyCustomControl: FieldTemplateUserControl
    

    { }

    Public Partial Class MyCustomControl Inherits _ FieldTemplateUserControl
        
    End Class 
    
  10. Para personalizar cómo muestra el control el campo de datos, controle el evento OnDataBinding del control de usuario. En el controlador, puede obtener el valor del campo de datos actual de la propiedad FieldValue del control y personalizar la presentación en consecuencia.

    En el ejemplo siguiente se muestra cómo controlar el evento OnDataBinding.

    public void DataBindingHandler(object sender, EventArgs e)
    {
      // Define the understocked threshold.
      short underStockedThreshold = 150;
      // Get the current number of items in stock.
      short currentValue = (short)FieldValue;
      // Check product stock. 
      if (currentValue < underStockedThreshold)
      {
          // Customize display here. For example you show the data with      
         //a red background.
      }
    }
    

    Public Sub DataBindingHandler(ByVal sender As Object, _
    ByVal e As EventArgs)
      ' Define the understocked threshold.
      Dim underStockedThreshold As Short = 150
      ' Get the current number of items in stock.
        Dim currentValue As Short = DirectCast(FieldValue, Short)
        ' Check product stock. 
        If currentValue < underStockedThreshold Then
            'Customize display here. For example you show the data with      
           'a red background.
        End If
    End Sub
    
  11. Cierre el archivo de código subyacente del control de usuario. Ahora ha creado una plantilla de campo personalizada.

Para asociar una plantilla de campo personalizada a un campo 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, haga clic en Clase.

    En el cuadro Nombre, escriba el nombre de la tabla de base de datos que contiene los datos de la plantilla de campo personalizada que se desea mostrar.

    Por ejemplo, si el control personalizado va a mostrar datos de la tabla Products, el nombre de archivo es Products.cs o Product.vb y el nombre de clase es Product. Este archivo también contendrá una clase auxiliar que le permite personalizar la presentación del campo de datos.

  3. Pase, o abra, al archivo de clase que acaba de crear.

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

  5. Agregue la directiva de espacio de nombres que hace referencia 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#.

    using System.Web.DynamicData;
    using System.ComponentModel.DataAnnotations;
    

    Imports System.Web.DynamicData
    Imports System.ComponentModel.DataAnnotations 
    
  6. Agregue el atributo MetadataTypeAttribute a la definición de clase parcial. El parámetro del atributo es el nombre de la clase de metadatos auxiliar que creará para controlar la personalización de la presentación del campo de datos.

    [MetadataType(typeof(ProductMetadata))]
    public partial class Product {
        
    }
    

    <MetadataType(GetType(ProductMetadata))> _
    Public Partial Class Product 
        
    End Class
    
  7. Cree una clase que actuará como la clase de metadatos auxiliar. Puede utilizar cualquier nombre para la clase, pero éste debe coincidir con el nombre al que hizo referencia en el atributo MetadataTypeAttribute en el paso anterior.

  8. En la clase de metadatos, cree un campo cuyo nombre corresponda al campo de datos que desea mostrar. Marque el campo utilizando el atributo UIHintAttribute, especificando el nombre de la plantilla de campo personalizada que se utiliza para la presentación.

    El único propósito de la clase auxiliar es proporcionar un lugar para definir el atributo UIHintAttribute, para que no tenga que agregar ningún otro código a la clase.

    El ejemplo siguiente muestra una definición completa de la clase de metadatos que incluye un campo único (con el atributo UIHintAttribute) que define la presentación personalizada del campo UnitsInStock.

    public class ProductMetadata
      [UIHint("UnitsInStock")]
      public object UnitsInStock;
    }
    

    Public Class ProductMetadata 
      <UIHint("UnitsInStock")> _
      Public UnitsInStock As Object
    End Class
    

En el ejemplo siguiente se muestra una plantilla de campo personalizada que comprueba el nivel de existencias de un producto. Si hay pocas existencias de un producto, la plantilla de campo muestra el valor utilizando un color de primer plano rojo.


<%@ Control Language="C#" CodeFile="UnitsInStock.ascx.cs" 
Inherits="DynamicData_FieldTemplates_UnitsInStock" %>

<asp:Label id="TextLabel1" OnDataBinding="DataBindingHandler"
Text='<%# FieldValueString %>' runat="server"></asp:Label>



using System.Web.DynamicData;

public partial class DynamicData_FieldTemplates_UnitsInStock :  FieldTemplateUserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }

    // DataBinding event handler.
    public void DataBindingHandler(object sender, EventArgs e)
    {
        // Define product understocked threshold.
        short underStockedThreshold = 150;

        // Get the current number of items in stock.
        short currentValue = (short)FieldValue;

        // Check product stock. 
        if (currentValue < underStockedThreshold)
        {
            // The product is understocked, set its 
            // foreground color to red.
            TextLabel1.ForeColor = System.Drawing.Color.Red;
        }
    }

}


  • 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).

  • Un sitio web de datos dinámicos. De este modo, se puede crear un contexto de datos para la base de datos y la clase que contiene el campo de datos que se va a personalizar y los métodos que se van a invalidar. Además, se crea el entorno en el que se va a usar la página descrita anteriormente. Para obtener más información, vea Tutorial: Crear un nuevo sitio web de datos dinámicos con la técnica scaffolding.

Adiciones de comunidad

AGREGAR
Mostrar: