Procedura: personalizzare la visualizzazione dei campi dati nel modello di dati

Articolo
10/22/2014

Aggiornamento: novembre 2007

In questo argomento viene descritto come personalizzare la visualizzazione di un campo dati (colonna di tabella) in ASP.NET Dynamic Data mediante la creazione di un modello di campo personalizzato. Le attività descritte in questo argomento sono le seguenti:

Creazione di un modello di campo personalizzato per personalizzare la visualizzazione del campo dati.

Associazione del modello di campo personalizzato al campo dati. Questa attività stabilisce la connessione del modello di dati tra il campo dati e il modello di campo personalizzato per la gestione della visualizzazione.

Nota:
Quando si personalizza la visualizzazione di un campo dati mediante il modello di dati, la personalizzazione si applica all'intero sito Web. In altre parole, Dynamic Data utilizza il modello di campo personalizzato anziché il modello predefinito (selezionato in base al tipo di campo dati) per visualizzare il campo dati.

Per creare un modello di campo personalizzato

In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella DynamicData/FieldTemplates, quindi scegliere Aggiungi nuovo elemento.
In Modelli installati fare clic su Modello di campo.

Nella casella Nome immettere il nome del controllo. È possibile utilizzare qualsiasi nome. Assicurarsi di selezionare la casella Inserisci codice in file separato.
Passare al file del controllo utente appena creato oppure aprirlo.

Nella direttiva @ Control, aggiungere un attributo CodeFile che fa riferimento al file code-behind e un attributo Inherits che fa riferimento alla classe del controllo.

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

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

Creare il markup di cui verrà eseguito il rendering per visualizzare i dati.

Nell'esempio riportato di seguito viene illustrato un controllo Label la cui proprietà Text è impostata sulla stringa di valore del campo corrente e la cui proprietà OnDataBinding è impostata su un gestore eventi personalizzato.
```
<asp:Label id="TextLabel1"  
  OnDataBinding="DataBindingHandler" 
  Text='<%# FieldValueString %>'>
</asp:Label> 
```
Salvare e chiudere il file del controllo utente.
Aprire il file code-behind del controllo utente.
Aggiungere la direttiva dello spazio dei nomi che fa riferimento a System.Web.DynamicData mediante la parola chiave Imports in Visual Basic o la parola chiave using in Visual C#.
```
using System.Web.DynamicData;
```
```
Imports System.Web.DynamicData
```

Derivare la classe parziale del controllo utente dalla classe FieldTemplateUserControl, come mostrato di seguito.

partial class MyCustomControl: FieldTemplateUserControl

{ }

Public Partial Class MyCustomControl Inherits _ FieldTemplateUserControl

End Class

Per personalizzare la modalità di visualizzazione del campo dati nel controllo, gestire l'evento OnDataBinding del controllo utente. Nel gestore è possibile ottenere il valore del campo dati corrente dalla proprietà FieldValue del controllo e personalizzare la visualizzazione di conseguenza.

Nell'esempio riportato di seguito viene illustrato come gestire l'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

Chiudere il file code-behind del controllo utente. È stato così creato un modello di campo personalizzato.

Per associare un modello di campo personalizzato a un campo dati

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

Nella casella Nome immettere il nome della tabella di database che contiene i dati relativi al modello di campo personalizzato da visualizzare.

Ad esempio, se nel controllo personalizzato verranno visualizzati i dati della tabella Products, il nome di file sarà Products.cs o Product.vb e il nome della classe sarà Product. Questo file conterrà anche una classe ausiliaria che consente di personalizzare la visualizzazione del campo dati.
Passare al file della classe appena creato oppure aprirlo.
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.
Aggiungere la direttiva dello spazio dei nomi che fa riferimento a System.Web.DynamicData e System.ComponentModel.DataAnnotations mediante la parola chiave Imports in Visual Basic o la parola chiave using in Visual C#.
```
using System.Web.DynamicData;
using System.ComponentModel.DataAnnotations;
```
```
Imports System.Web.DynamicData
Imports System.ComponentModel.DataAnnotations 
```
Aggiungere l'attributo MetadataTypeAttribute alla definizione della classe parziale. Il parametro dell'attributo rappresenta il nome della classe di metadati ausiliaria che verrà creata per gestire la personalizzazione della visualizzazione del campo dati.
```
[MetadataType(typeof(ProductMetadata))]
public partial class Product {

}
```
```
<MetadataType(GetType(ProductMetadata))> _
Public Partial Class Product 

End Class
```
Creare una classe che funga da classe di metadati ausiliaria. È possibile utilizzare qualsiasi nome per la classe, ma tale nome deve corrispondere a quello a cui si è fatto riferimento nell'attributo MetadataTypeAttribute del passaggio precedente.
Nella classe di metadati creare un campo il cui nome corrisponda al campo dati da visualizzare. Contrassegnare il campo mediante l'attributo UIHintAttribute, specificando il nome del modello di campo personalizzato utilizzato per la visualizzazione.

L'unico scopo della classe ausiliaria consiste nel fornire una posizione per definire l'attributo UIHintAttribute, in modo da non dover aggiungere altro codice alla classe.

Nell'esempio riportato di seguito viene illustrata una definizione completa per la classe di metadati che include un singolo campo (con l'attributo UIHintAttribute) in cui viene definita la visualizzazione personalizzata per il campo UnitsInStock.
```
public class ProductMetadata
  [UIHint("UnitsInStock")]
  public object UnitsInStock;
}
```
```
Public Class ProductMetadata 
  <UIHint("UnitsInStock")> _
  Public UnitsInStock As Object
End Class
```

Esempio

Nell'esempio riportato di seguito viene illustrato un modello di campo personalizzato che controlla il livello di scorte dei prodotti. Se il livello di scorte di un prodotto è insufficiente, nel modello di campo il valore viene visualizzato mediante il rosso come colore di primo piano.

<%@ Control Language="VB" CodeFile="UnitsInStock.ascx.vb" 
Inherits="DynamicData_FieldTemplates_UnitsInStock" %>

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

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

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

Imports System.Web.DynamicData

Partial Public Class DynamicData_FieldTemplates_UnitsInStock
    Inherits FieldTemplateUserControl
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

    End Sub

    ' DataBinding event handler.
    Public Sub DataBindingHandler(ByVal sender As Object, _
                                  ByVal e As EventArgs)
        ' Define product 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
            ' The product is understocked, set its 
            ' foreground color to red.
            TextLabel1.ForeColor = System.Drawing.Color.Red
        End If
    End Sub

End Class

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;
        }
    }

}

Compilazione del codice

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 Dynamic Data, che consente di creare un contesto dati per il database nonché la classe che contiene il campo dati da personalizzare e i metodi di cui eseguire l'override. Tale sito crea inoltre l'ambiente in cui utilizzare la pagina descritta in precedenza. Per ulteriori informazioni, vedere la classe Procedura dettagliata: creazione di un nuovo sito Web Dynamic Data utilizzando le pagine di supporto temporaneo..