Compartir a través de

Cómo: Personalizar la apariencia y el comportamiento de los campos de datos en el modelo de datos

  • Artículo

Actualización: noviembre 2007

El marco de datos dinámicos de ASP.NET incluye plantillas de campo que representan la interfaz de usuario para mostrar y modificar campos de datos. Puede personalizar la interfaz de usuario cambiando las plantillas de campo existentes y creando nuevas plantillas de campo personalizadas.

En este tema se describe cómo personalizar el aspecto y comportamiento de un campo de datos siguiendo estos pasos:

  • Aplicar el atributo UIHintAttribute a un campo de datos del modelo de datos. Esto indica al marco de datos dinámicos que utilice plantillas de campo personalizadas específicas para procesar un campo de datos.

  • Crear las plantillas de campo personalizadas correspondientes para representar la interfaz de usuario a fin de mostrar y modificar un campo de datos.

Al personalizar un campo de datos en la capa de los datos, como se explica en este tema, la personalización se aplica globalmente a un sitio web. Los datos dinámicos utilizan las plantillas de campo personalizadas en lugar de las plantillas integradas (que se seleccionan según el tipo de campo de datos intrínseco) para mostrar y modificar el campo de datos.

También puede limitar la personalización a una sola página. Para obtener más información, vea Cómo: Personalizar el diseño de una tabla individual mediante una plantilla de página personalizada.

Personalizar un campo de datos en la capa de los datos requiere varios pasos. Los procedimientos de este tema tratan cada paso del proceso.

Ejecute un ejemplo en línea de esta característica.

Especificar plantillas de campo personalizadas en el modelo de datos

En esta sección se describen los pasos necesarios para asociar plantillas de campo personalizadas a un campo de datos.

Para aplicar un atributo 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 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.

    El nombre de archivo debe ser el nombre de la clase de entidad que representa la tabla. Por ejemplo, si la plantilla de campo personalizada va a mostrar datos de la tabla SalesOrderDetail, denomine al archivo como SalesOrderDetail.cs o SalesOrderDetail.vb, y la clase como SalesOrderDetail. Este archivo de clase que crea contendrá asimismo una clase asociada que permite aplicar atributos a los campos de datos.

  4. Agregue a la definición de clase la palabra clave Partial de Visual Basic o la palabra clave partial de Visual C# para convertirla en una clase parcial. Si está trabajando en Visual C#, elimine el constructor predeterminado.

  5. Importe los espacios de nombres System.ComponentModel.DataAnnotations y System.Web.DynamicData usando la palabra clave Imports en using o la palabra clave Visual Basic en Visual C#, como se muestra en el siguiente ejemplo:

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

    Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations

  6. En el archivo de clase que creó en los pasos 1 a 3, cree otra clase parcial que actuará como la clase de metadatos asociada. Puede utilizar cualquier nombre para la clase.

    En el ejemplo siguiente se muestra cómo crear una clase de metadatos asociada para el campo SalesOrderDetail.

    public partial class SalesOrderDetailMetadata
{

}

    Partial Public Class SalesOrderDetailMetadata

End Class

  7. Agregue el atributo MetadataTypeAttribute a la definición de clase parcial de la tabla de datos. Para el parámetro del atributo, especifique el nombre de la clase de metadatos que creó en el paso anterior.

    En el ejemplo siguiente se muestra cómo aplicar el atributo para conectar la clase SalesOrderDetail parcial a su clase de metadatos asociada.

    [MetadataType(typeof(SalesOrderDetailMetadata))]
public partial class SalesOrderDetail 
{

}

    <MetadataType(GetType(SalesOrderDetailMetadata))> _
Partial Public Class SalesOrderDetail 

End Class

  8. En la clase de metadatos asociada, cree una propiedad pública que tenga un nombre que coincida con el campo de datos que desea personalizar.

  9. Aplique el atributo UIHintAttribute a la propiedad, especificando el nombre de la plantilla de campo personalizada que desea utilizar para mostrar y modificar datos

    El tipo Object se utiliza como un tipo de marcador de posición en la clase de metadatos para representar el campo de datos. Los datos dinámicos deducen el tipo real del modelo de datos en tiempo de ejecución.

    public partial class SalesOrderDetailMetadata
{    
    [UIHint("CustomFieldTemplate")]
    public object OrderQty;
}

    Partial Public Class SalesOrderDetailMetadata
    <UIHint("CustomFieldTemplate")> _
    Public OrderQty As Object
End Class

  10. Guarde y cierre el archivo de clase.

Crear plantillas de campo personalizadas

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 campos de datos. En esta sección se describen los pasos necesarios para crear una plantilla de campo personalizada con objeto de representar la interfaz de usuario y mostrar un campo de datos.

Para crear una plantilla de campo personalizada para presentación

  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 un nombre para la plantilla de campo personalizada. Puede utilizar cualquier nombre que aún no esté en uso. Asegúrese de activar la casilla Colocar el código en un archivo independiente.

  4. Haga clic en Agregar.

    Visual Studio crea dos plantillas de campo, una para presentación y otra para edición. Por ejemplo, si el nombre que escribió fue CustomFieldTemplate.ascx, Visual Studio crea CustomFieldTemplate.ascx y CustomFieldTemplate_Edit.ascx. La primera plantilla representa la interfaz de usuario para mostrar el campo de datos y la segunda plantilla representa la interfaz de usuario para modificarlo.

  5. Si desea personalizar la presentación de un campo de datos, abra el archivo de control de usuario de presentación y agregue su personalización.

    En el ejemplo siguiente se muestra una plantilla de campo personalizada para mostrar datos. En el ejemplo, el control Literal, que se proporciona de forma predeterminada en la plantilla Campo de datos dinámicos, se reemplaza por un control Label cuya propiedad Text está establecida en la cadena del valor de campo actual. Puede tener acceso al valor del campo de datos mediante la propiedad FieldValueString.

    <asp:Label id="Label1"  
  Text='<%# FieldValueString %>'>
</asp:Label>

  6. Si es necesario para la personalización, abra el archivo de código subyacente de la plantilla de campo de presentación y agregue sus personalizaciones.

    En el ejemplo siguiente se muestra cómo sincronizar el código con los cambios realizados en el marcado mostrado en el paso anterior. En el código, el identificador Literal1 se reemplaza por el identificador Label1 para admitir la personalización de la interfaz de usuario para la presentación.

    public override Control DataControl {
  get {return Label1;}
}

    Public Overrides ReadOnly Property DataControl() As Control
  Get
    Return Label1
  End Get
End Property

  7. Invalide el método OnDataBinding de la plantilla de campo y agregue código para personalizar la presentación del campo de datos.

    En el método, puede obtener el valor del campo de datos actual a partir de la propiedad FieldValue del control y, a continuación, personalizar la presentación, como se muestra en el ejemplo siguiente.

    protected override void OnDataBinding(EventArgs e)
{

    if (currentQty < min)
    {
      Label1.ForeColor = System.Drawing.Color.Red;
      Label1.Font.Bold = true;
    }
    else
      if (currentQty > max)
      {
        Label1.ForeColor = System.Drawing.Color.Blue;
        Label1.Font.Bold = true;
       }
    }
  }

    Protected Overloads Overrides Sub OnDataBinding( _
ByVal e As EventArgs)

    If currentQty < min Then
      Label1.ForeColor = System.Drawing.Color.Red
      Label1.Font.Bold = True
    ElseIf currentQty > max Then
      Label1.ForeColor = System.Drawing.Color.Blue
      Label1.Font.Bold = True
    End If
  End If
End Sub

El procedimiento siguiente describe los pasos necesarios para crear una plantilla de campo personalizada para representar la interfaz de usuario a fin de editar un campo de datos.

Para crear una plantilla de campo personalizada para edición

  1. Abra la plantilla de campo personalizada cuyo nombre termina con el sufijo _Edit y, a continuación, agregue sus personalizaciones.

    El ejemplo siguiente muestra marcado que agrega un control CustomValidator (Control, referencia general) para mostrar mensajes de advertencia personalizados si los datos especificados por el usuario no son válidos. Por ejemplo, se muestra un mensaje si el valor del campo de datos queda fuera de ciertos límites que se definen en la plantilla de campo. En el ejemplo se establece la propiedad Display del validador en "Dynamic" para que solo se muestre el control de validación si se produce un error en la validación. El código establece el atributo ControlToValidate en el identificador del control que se desea validar. También establece el atributo OnServerValidate en el nombre de un controlador para el evento de validación.

    <asp:CustomValidator id="CustomValidator1"  
  ControlToValidate="TextBox1" Display="Dynamic"
  OnServerValidate="CustomValidation" />

  2. Guarde y cierre el archivo del control de usuario.

  3. Si es necesario para la personalización, abra el archivo de código subyacente de la plantilla de campo de edición y agregue sus personalizaciones.

    En el ejemplo siguiente se muestra cómo crear código de servidor para un control CustomValidator. El código compara el valor especificado por el usuario con algunos valores de umbral y muestra un mensaje de error si los datos no están dentro del intervalo permitido.

    protected void CustomValidation(object source, 
   ServerValidateEventArgs args)
{
    // Check if the input is in the allowed range.
    bool result = CheckRange(intUnits);
    // Return result.    
    args.IsValid = result;
}

    Protected Sub CustomValidation( _
  ByVal source As Object, ByVal args As ServerValidateEventArgs)

    'Check if the value is in the allowed range.
     Dim result As Boolean = CheckRange(intUnits)
     'Return result.    
     args.IsValid = result
End Sub

Ejemplo

En el ejemplo se muestra cómo usar el modelo de datos para personalizar la interfaz de usuario que se representa con objeto de mostrar y modificar el campo de datos OrderQty de la tabla SalesOrderDetail.

La plantilla de campo CustomFieldTemplate.ascx muestra la cantidad de pedidos usando un color de primer plano rojo si el valor es menor que el umbral de advertencia mínimo. Muestra la cantidad de pedidos utilizando un color de primer plano azul si el valor es mayor que el umbral de advertencia máximo.

La plantilla de campo CustomFieldTemplate_Edit.ascx comprueba el valor de OrderQty especificado por el usuario respecto a los límites del intervalo. Se muestra un mensaje de error personalizado si el valor especificado por el usuario no está dentro del intervalo permitido.

<%@ Page Language="VB" 
AutoEventWireup="true" CodeFile="CustomAppearanceBehavior.aspx.vb" 
Inherits="CustomAppearanceBehavior" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title></title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h2>Example: <%=Title%></h2>

     <!-- Enable dynamic behavior. The GridView must be 
     registered with the manager. See code-behind file. -->
    <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />


    <form id="form1" >

        <!-- Capture validation exceptions -->
        <asp:DynamicValidator ID="ValidatorID" ControlToValidate="GridView1" 
             /> 

        <asp:GridView ID="GridView1" 
             
            DataSourceID="GridDataSource" 
            AutoGenerateColumns="false"  
            AutoGenerateEditButton="true"
            AllowPaging="true"
            PageSize="10"
            AllowSorting="true">
            <Columns>
                <asp:DynamicField DataField="OrderQty" />
                <asp:DynamicField DataField="UnitPrice" />
                <asp:DynamicField DataField="ModifiedDate" />
            </Columns>
            <EmptyDataTemplate>
                There are currently no items in this table.
            </EmptyDataTemplate>
       </asp:GridView>
    </form>

    <!-- Connect to the database -->
    <asp:LinqDataSource ID="GridDataSource"   
        TableName="SalesOrderDetails" EnableUpdate="true"
        ContextTypeName="AdventureWorksLTDataContext">
    </asp:LinqDataSource>
</body>
</html>

<%@ Page Language="C#" 
AutoEventWireup="true" CodeFile="CustomAppearanceBehavior.aspx.cs" 
Inherits="CustomAppearanceBehavior" %>


<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" >
    <title></title>
    <link href="~/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
     <h2>Example: <%=Title%></h2>

     <!-- Enable dynamic behavior. The GridView must be 
     registered with the manager. See code-behind file. -->
    <asp:DynamicDataManager ID="DynamicDataManager1" 
        AutoLoadForeignKeys="true" />


    <form id="form1" >

        <!-- Capture validation exceptions -->
        <asp:DynamicValidator ID="ValidatorID" ControlToValidate="GridView1" 
             /> 

        <asp:GridView ID="GridView1" 
             
            DataSourceID="GridDataSource" 
            AutoGenerateColumns="false"  
            AutoGenerateEditButton="true"
            AllowPaging="true"
            PageSize="10"
            AllowSorting="true">
            <Columns>
                <asp:DynamicField DataField="OrderQty" />
                <asp:DynamicField DataField="UnitPrice" />
                <asp:DynamicField DataField="ModifiedDate" />
            </Columns>
            <EmptyDataTemplate>
                There are currently no items in this table.
            </EmptyDataTemplate>
       </asp:GridView>
    </form>

    <!-- Connect to the database -->
    <asp:LinqDataSource ID="GridDataSource"   
        TableName="SalesOrderDetails" EnableUpdate="true"
        ContextTypeName="AdventureWorksLTDataContext">
    </asp:LinqDataSource>
</body>
</html>

Imports System
Imports System.Collections
Imports System.Configuration
Imports System.Web.DynamicData

Partial Public Class CustomAppearanceBehavior
    Inherits System.Web.UI.Page
    Protected _table As MetaTable

    Protected Sub Page_Init(ByVal sender As Object, ByVal e As EventArgs)
        ' Register control with the data manager.
        DynamicDataManager1.RegisterControl(GridView1)
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        ' Get the table entity.
        _table = GridDataSource.GetTable()

        ' Assign title dynamically.
        Title = String.Concat( _
        "Customize Appearance and Behavior of the ", _
        _table.Columns(2).DisplayName, " Data Field")
    End Sub
End Class

using System;
using System.Collections;
using System.Configuration;
using System.Web.DynamicData;

public partial class CustomAppearanceBehavior : System.Web.UI.Page
{
    protected MetaTable _table;

    protected void Page_Init(object sender, EventArgs e)
    {
        // Register control with the data manager.
        DynamicDataManager1.RegisterControl(GridView1);
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        // Get the table entity.
        _table = GridDataSource.GetTable();

        // Assign title dynamically.

        Title = string.Concat("Customize Appearance and Behavior of the ",
            _table.Columns[2].DisplayName, " Data Field");

    }
}

Compilar el código

Para compilar el código de ejemplo, necesita:

  • 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 dinámico controlado por datos. De este modo, puede crearse un contexto de datos para la base de datos, así como la clase que contiene el campo de datos que se va a personalizar. Para obtener más información, vea Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding.

Vea también

Tareas

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

Conceptos

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

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

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

Referencia

FieldTemplateUserControl