Compartilhar via

Como: Personalizar dados campo aparência e o comportamento no modelo de dados

  • Artigo

Dados dinâmicos do ASP.NET inclui modelos de campo que processam a interface do usuário para exibir e editar campos de dados.Você pode personalizar a interface do usuário alterando modelos de campo existentes e criando novos modelos de campo personalizado.

Este tópico descreve como personalizar a aparência do campo de dados e o comportamento seguindo essas etapas:

  • Aplicando o UIHintAttribute o atributo a um campo de dados no modelo de dados. Isso instrui dados dinâmicos para usar modelos de campo personalizado específico para processar um campo de dados.

  • Criando os modelos de campo personalizado correspondente para processar a interface do usuário para exibir e editar um campo de dados.

Ao personalizar um campo de dados na camada de dados, sistema autônomo mostrado neste tópico, a personalização se aplica globalmente a um site da Web.Dados dinâmicos usa os modelos de campo personalizado em vez dos modelos internos (que são selecionados com base no tipo intrínseco do campo de dados) para exibir e modificar o campo de dados.

Como alternativa, você pode limitar a personalização para uma única página.Para obter mais informações, consulte Como: Personalizar o layout de uma tabela individual usando um modelo de página personalizado.

Personalizar um campo de dados na camada de dados requer várias etapas.Os procedimentos neste tópico abordam cada etapa do processo.

Executar um exemplo desse recurso online.

Especificação de modelos de campo personalizados no modelo de dados

Esta seção descreve as etapas para associar modelos de campo personalizado um campo de dados.

Para aplicar um atributo a um campo de dados

  1. In O gerenciador de soluções, clicar com o botão direito do mouse na posta App_Code pasta e, em seguida, clique em Adicionar novo item.

  2. Under Visual Studio installedtemplates, click Class.

  3. No Nome caixa, digite o nome da tabela de banco de dados (sistema autônomo definido no modelo de dados) que contém sistema autônomo dados para o modelo de campo personalizado exibir.

    O nome de arquivo deve ser o nome de classe de entidade que representa a tabela.Por exemplo, se o modelo de campo personalizado irá exibir dados da tabela SalesOrderDetail, você nomeie o arquivo SalesOrderDetail.cs ou SalesOrderDetail.vb e você nomeia a classe SalesOrderDetail. O arquivo de classe que você criar irá conter também uma classe associada que permite aplicar atributos a campos de dados.

  4. Adicionar o Partial palavra-chave em Visual Basic ou o partial palavra-chave em Visual C# a definição de classe para torná-lo em uma classe parcial. Se você estiver trabalhando em Visual C#, exclua o construtor padrão.

  5. Importar o System.Web.DynamicData e System.ComponentModel.DataAnnotations espaços para nome usando o Imports palavra-chave em Visual Basic ou o using palavra-chave em Visual C#, conforme mostrado no exemplo a seguir:

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

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

  6. No arquivo de classe que você criou sistema autônomo etapas 1 a 3, crie outra classe parcial que atuará sistema autônomo a classe de metadados associados.Você pode usar qualquer nome para a classe.

    O exemplo a seguir mostra como criar uma classe de metadados associados para o SalesOrderDetail campo.

    public partial class SalesOrderDetailMetadata
{

}

    Partial Public Class SalesOrderDetailMetadata

End Class

  7. Adicionar o MetadataTypeAttribute o atributo à definição de classe parcial para a tabela de dados. O atributo do parâmetro, especifique o nome da classe metadados que você criou na etapa anterior.

    O exemplo a seguir mostra como aplicar o atributo para se conectar a parcialSalesOrderDetail classe à classe seu metadados associados.

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

}

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

End Class

  8. Na classe metadados associados, criar uma propriedade pública que possui um nome que corresponde ao campo de dados que você deseja personalizar.

  9. Aplicar o UIHintAttribute atributo para a propriedade, especificando o nome do modelo a ser usado para exibição e edição de campo personalizado

    The Object tipo é usado sistema autônomo um tipo de espaço reservado da classe de metadados para representar o campo de dados. Dados dinâmicos infere o tipo real do modelo de dados em time de execução.

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

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

  10. Salve e feche o arquivo de classe.

Criando modelos de campo personalizado

Modelos de campo são controles de usuário que usa dados dinâmicos para processar a interface do usuário para exibir e editar campos de dados.Esta seção descreve as etapas para criar um modelo de campo personalizado para processar a interface do usuário para exibir um campo de dados.

Para criar um modelo de campo personalizado para exibição

  1. In O gerenciador de soluções, clicar com o botão direito do mouse na pasta DynamicData\FieldTemplates e, em seguida, clique em Adicionar novo item.

  2. Em O Visual Studio installed templates, clicar Campo de dados dinâmicos.

  3. No Nome, digite um nome para o modelo de campo personalizado.Você pode usar qualquer nome que não ainda esteja em uso.Certifique-se de selecionar o Coloque o código no arquivo separado box.

  4. Clique em Adicionar.

    O Visual Studio cria campo dois modelos, uma para exibição e outra para edição.Por exemplo, se o nome que você digitou era CustomFieldTemplate.ascx, Visual Studio cria CustomFieldTemplate.ascx e CustomFieldTemplate_Edit.ascx. O primeiro modelo processa a interface do usuário para exibir o campo de dados e o segundo modelo renderiza a interface do usuário para editar o campo de dados.

  5. Se você quiser personalizar a exibição de um campo de dados, em aberto o usuário exibir arquivo de controle e adicione sua personalização.

    O exemplo a seguir mostra um modelo de campo personalizado para exibir dados.No exemplo, a Literal controle, que é fornecida por padrão no modelo de campo de dados dinâmica, é substituído por um Label controlar cujos Text propriedade é definida para a seqüência de valor do campo corrente. Você pode acessar o valor do campo de dados usando o FieldValueString propriedade.

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

  6. Se for necessário para personalização, em aberto code-behind de arquivos para o modelo de campo de exibição e adicionar suas personalizações.

    O exemplo a seguir mostra como sincronizar o código com as alterações feitas na marcação mostrada na etapa anterior.No código, a Literal1 identificador é substituído pelo Label1 identificador para dar suporte à personalização de UI para exibição.

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

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

  7. Substituir OnDataBinding método e adicione código para personalizar a exibição do campo de dados.

    No método, você pode obter o valor do campo de dados corrente de FieldValue propriedade e, em seguida, personalize a exibição, conforme mostrado no exemplo a seguir.

    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

O procedimento a seguir descreve as etapas para criar um modelo de campo personalizado para processar a interface do usuário para editar um campo de dados.

Para criar um modelo de campo personalizado para edição

  1. em aberto personalizado modelo cujo nome termina com o sufixo _Edit de campo e, em seguida, adicione suas personalizações.

    O exemplo a seguir mostra a marcação que adiciona um Controlarar CustomValidator (referência geral) controle para exibir mensagens de aviso personalizado se os dados inseridos pelo usuário for inválidos. Por exemplo, é exibida uma mensagem se o valor do campo de dados estiver fora de certos limites definidos no modelo de campo.O exemplo define Displaypropriedade como"Dynamic" para que o controle de validação seja exibido somente se a validação falhar. O código define o ControlToValidate o atributo para a ID do controle para validar. Ele também define o OnServerValidate o atributo para o nome de um manipulador para o evento de validação.

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

  2. salvar e fechar o arquivo de controle de usuário.

  3. Se necessário para personalização, abra o arquivo code-behind para o modelo de campo de edição e adicionar suas personalizações.

    O exemplo a seguir mostra como criar código do servidor para um CustomValidator controle. O código compara o valor inserido pelo usuário, alguns valores de limite e exibirá uma mensagem de erro se os dados não estiverem no 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

Exemplo

O exemplo mostra como usar o modelo de dados para personalizar a interface do usuário que é renderizado para exibir e edição o campo de dados OrderQty da tabela SalesOrderDetail.

O modelo de campo CustomFieldTemplate.ascx exibe a quantidade da ordem usando primeiro plano vermelho se o valor for menor do que o limite mínimo de aviso.Ele exibe a quantidade da ordem usando azul em primeiro plano se o valor for maior que o limite máximo de aviso.

O modelo de campo CustomFieldTemplate_Edit.ascx verifica o valor OrderQty inserido pelo usuário em relação a limites de intervalo.Uma mensagem de erro personalizada será exibida se o valor inserido pelo usuário não está no 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");

    }
}

Compilando o código

Para compilar o código de exemplo, você precisa do seguinte:

  • Microsoft Visual Studio 2008 serviço empacotar 1 ou Visual Web Developer 2008 Express Edition serviço empacotar 1.

  • O banco de dados de exemplo AdventureWorksLT.Para obter informações sobre como baixar e instalar o banco de dados de exemplo do SQL servidor, consulte Exemplos de produtos do Microsoft SQL servidor: Banco de dados no site da CodePlex.Certifique-se de instalar a versão correta do banco de dados de exemplo para a versão do SQL servidor que você está executando (Microsoft SQL Server 2005 ou Microsoft SQL Server 2008).

  • Um orientados por dados site dinâmico.Isso permite que você criar um contexto de dados para o banco de dados e criar a classe que contém o campo de dados para personalizar.Para obter mais informações, consulte Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding.

Consulte também

Tarefas

Demonstra Passo a passo: Adicionando dados dinâmicos a um site existente

Conceitos

Visão geral do ASP.NET dinâmico dados campo modelos

Visão geral de modelo Dados Dinâmicos ASP.NET

Visão geral de dados dinâmicos do ASP.NET

Referência

FieldTemplateUserControl