Condividi tramite

Procedura: personalizzare l'aspetto e il comportamento dei campi dati nel modello di dati

  • Articolo

Aggiornamento: novembre 2007

ASP.NET Dynamic Data include modelli di campo che eseguono il rendering dell'interfaccia utente per la visualizzazione e la modifica dei campi dati. È possibile personalizzare l'interfaccia utente modificando i modelli di campo esistenti e creando nuovi modelli di campo personalizzati.

In questo argomento viene descritto come personalizzare l'aspetto e il comportamento dei campi dati attenendosi a questa procedura:

  • Applicazione dell'attributo UIHintAttribute a un campo dati nel modello di dati. In tal modo viene indicato a Dynamic Data di utilizzare specifici modelli di campo personalizzati per elaborare un campo dati.

  • Creazione dei corrispondenti modelli di campo personalizzati per eseguire il rendering dell'interfaccia utente per la visualizzazione e la modifica di un campo dati.

Quando si personalizza un campo dati nel livello di dati, come illustrato in questo argomento, la personalizzazione si applica a un sito Web a livello globale. Dynamic Data utilizza i modelli di campo personalizzati anziché i modelli incorporati (selezionati in base al tipo intrinseco di campo dati) per visualizzare e modificare il campo dati.

In alternativa, è possibile limitare la personalizzazione a una singola pagina. Per ulteriori informazioni, vedere la classe Procedura: personalizzare il layout di una singola tabella mediante un modello di pagina personalizzato.

La personalizzazione di un campo dati nel livello di dati richiede diversi passaggi. Nelle procedure contenute in questo argomento viene illustrato ogni passaggio del processo.

Eseguire un esempio in linea di questa funzionalità.

Specifica di modelli di campo personalizzati nel modello di dati

In questa sezione vengono descritti i passaggi per associare modelli di campo personalizzati a un campo dati.

Per applicare un attributo a un campo dati

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella App_Code, quindi scegliere Aggiungi nuovo elemento.

  2. In ModelliVisual Studio installati fare clic su Classe.

  3. Nella casella Nome immettere il nome della tabella di database (come definito nel modello di dati) che contiene i dati relativi al modello di campo personalizzato da visualizzare.

    Il nome del file deve rappresentare il nome della classe di entità che rappresenta la tabella. Ad esempio, se nel modello di campo personalizzato verranno visualizzati i dati della tabella SalesOrderDetail, il file verrà denominato SalesOrderDetail.cs o SalesOrderDetail.vb e la classe verrà denominata SalesOrderDetail. Il file di classe creato conterrà anche una classe associata che consente di applicare attributi ai campi dati.

  4. Aggiungere la parola chiave Partial in Visual Basic o la parola chiave partial in Visual C# alla definizione della classe per renderla una classe parziale. Se si opera in Visual C#,°eliminare il costruttore predefinito.

  5. Importare gli spazi dei nomi System.Web.DynamicData e System.ComponentModel.DataAnnotations mediante la parola chiave Imports in Visual Basic o la parola chiave using in Visual C#, come illustrato nell'esempio seguente:

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

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

  6. Nel file di classe creato nei passaggi da 1 a 3, creare un'altra classe parziale che fungerà da classe di metadati associata. È possibile utilizzare qualsiasi nome per la classe.

    Nell'esempio riportato di seguito viene illustrato come creare una classe di metadati associata per il campo SalesOrderDetail.

    public partial class SalesOrderDetailMetadata
{

}

    Partial Public Class SalesOrderDetailMetadata

End Class

  7. Aggiungere l'attributo MetadataTypeAttribute alla definizione della classe parziale per la tabella dati. Come parametro dell'attributo, specificare il nome della classe di metadati creata nel passaggio precedente.

    Nell'esempio riportato di seguito viene illustrato come applicare l'attributo per connettere la classe SalesOrderDetail parziale alla relativa classe di metadati associata.

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

}

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

End Class

  8. Nella classe di metadati associata creare una proprietà pubblica con un nome che corrisponde al campo dati che si desidera personalizzare.

  9. Applicare l'attributo UIHintAttribute alla proprietà, specificando il nome del modello di campo personalizzato da utilizzare per la visualizzazione e la modifica.

    Il tipo Object viene utilizzato come tipo di segnaposto nella classe di metadati per rappresentare il campo dati. In Dynamic Data il tipo effettivo viene dedotto dal modello di dati in fase di esecuzione.

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

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

  10. Salvare e chiudere il file di classe.

Creazione di modelli di campo personalizzati

I modelli di campo rappresentano controlli utente utilizzati da Dynamic Data per eseguire il rendering dell'interfaccia utente relativa alla visualizzazione e alla modifica dei campi dati. In questa sezione vengono descritti i passaggi per la creazione di un modello di campo personalizzato per eseguire il rendering dell'interfaccia utente relativa alla visualizzazione di un campo dati.

Per creare un modello di campo personalizzato per la visualizzazione

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella DynamicData\FieldTemplates, quindi scegliere Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati, fare clic su Campo Dynamic Data.

  3. Nella casella Nome immettere un nome per il modello di campo personalizzato. È possibile utilizzare qualsiasi nome, purché non sia già utilizzato. Assicurarsi di selezionare la casella Inserisci codice in file separato.

  4. Scegliere Aggiungi.

    In Visual Studio vengono creati due modelli di campo, uno per la visualizzazione e uno per la modifica. Ad esempio, se il nome immesso è CustomFieldTemplate.ascx, in Visual Studio vengono creati CustomFieldTemplate.ascx e CustomFieldTemplate_Edit.ascx. Il primo modello esegue il rendering dell'interfaccia utente per la visualizzazione del campo dati e il secondo modello esegue la stessa operazione per la modifica del campo dati.

  5. Se si desidera personalizzare la visualizzazione di un campo dati, aprire il file del controllo utente per la visualizzazione e aggiungere la personalizzazione.

    Nell'esempio riportato di seguito viene illustrato un modello di campo personalizzato per la visualizzazione dei dati. Nell'esempio il controllo Literal, fornito per impostazione predefinita nel modello Campo Dynamic Data, viene sostituito con un controllo Label la cui proprietà Text è impostata sulla stringa di valore del campo corrente. È possibile accedere al valore del campo dati mediante la proprietà FieldValueString.

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

  6. Se necessario per la personalizzazione, aprire il file code-behind relativo al modello di campo per la visualizzazione e aggiungere le personalizzazioni.

    Nell'esempio riportato di seguito viene illustrato come sincronizzare il codice con le modifiche apportate nel markup mostrato nel passaggio precedente. Nel codice l'identificatore Literal1 viene sostituito con l'identificatore Label1 per supportare la personalizzazione dell'interfaccia utente per la visualizzazione.

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

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

  7. Eseguire l'override del metodo OnDataBinding del modello di campo e aggiungere codice per personalizzare la visualizzazione del campo dati.

    Nel metodo è possibile ottenere il valore del campo dati corrente dalla proprietà FieldValue del controllo e personalizzare la visualizzazione, come illustrato nell'esempio riportato di seguito.

    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

Nella procedura successiva vengono descritti i passaggi per la creazione di un modello di campo personalizzato per eseguire il rendering dell'interfaccia utente relativa alla modifica di un campo dati.

Per creare un modello di campo personalizzato per la modifica

  1. Aprire il modello di campo personalizzato il cui nome termina con il suffisso _Edit, quindi aggiungere le personalizzazioni.

    Nell'esempio riportato di seguito viene illustrato il markup che aggiunge un Controllo CustomValidator (riferimento generale) per visualizzare messaggi di avviso personalizzati se i dati immessi dall'utente non sono validi. Ad esempio, viene visualizzato un messaggio se il valore del campo dati è al di fuori di determinati limiti definiti nel modello di campo. Nell'esempio la proprietà Display della convalida viene impostata su "Dynamic" in modo che il controllo di convalida venga visualizzato solo se la convalida ha esito negativo. Nel codice l'attributo ControlToValidate viene impostato sull'ID del controllo da convalidare. Inoltre l'attributo OnServerValidate viene impostato sul nome di un gestore dell'evento di convalida.

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

  2. Salvare e chiudere il file del controllo utente.

  3. Se necessario per la personalizzazione, aprire il file code-behind relativo al modello di campo per la modifica e aggiungere le personalizzazioni.

    Nell'esempio riportato di seguito viene illustrato come creare codice server per un controllo CustomValidator. Nel codice il valore immesso dall'utente viene confrontato con alcuni valori soglia e viene visualizzato un messaggio di errore se i dati non rientrano nell'intervallo consentito.

    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

Esempio

Nell'esempio viene illustrato come utilizzare il modello di dati per personalizzare l'interfaccia utente di cui viene eseguito il rendering per visualizzare e modificare il campo dati OrderQty della tabella SalesOrderDetail.

Nel modello di campo CustomFieldTemplate.ascx la quantità di ordini viene visualizzata mediante il rosso come colore di primo piano se il valore è inferiore alla soglia di avviso minima, mentre viene visualizzata mediante il blu come colore di primo piano se il valore è superiore a tale soglia.

Nel modello di campo CustomFieldTemplate_Edit.ascx viene controllato il valore OrderQty immesso dall'utente rispetto ai limiti dell'intervallo. Se il valore immesso dall'utente non rientra nell'intervallo consentito, viene visualizzato un messaggio di errore personalizzato.

<%@ 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");

    }
}

Compilazione del codice

Per compilare il codice di esempio, è necessario quanto segue:

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

  • Database di esempio AdventureWorksLT. Per informazioni su come scaricare e installare il database di esempio di SQL Server, vedere Microsoft SQL Server Product Samples: Database (informazioni in lingua inglese) nel sito Web CodePlex. Assicurarsi di installare la versione del database di esempio appropriata per la versione di SQL Server in esecuzione (Microsoft SQL Server 2005 o Microsoft SQL Server 2008).

  • Sito Web basato su dati dinamici. Tale sito consente di creare un contesto dati per il database e la classe che contiene il campo dati da personalizzare. Per ulteriori informazioni, vedere la classe Walkthrough: Creating a New Dynamic Data Web Site using Scaffolding.

Vedere anche

Attività

Procedura dettagliata: aggiunta di Dynamic Data a un sito Web esistente

Concetti

Cenni preliminari sui modelli di campo di ASP.NET Dynamic Data

Cenni preliminari sul modello di ASP.NET Dynamic Data

Cenni preliminari su ASP.NET Dynamic Data

Riferimenti

FieldTemplateUserControl