Condividi tramite

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

  • Articolo

Aggiornamento: Luglio 2008

In questa procedura dettagliata viene illustrato come modificare un sito Web ASP.NET esistente in modo da includere le funzionalità del framework Dynamic Data. Inoltre, vengono illustrate le modalità con cui è possibile personalizzare un sito Web Dynamic Data. Al termine della procedura dettagliata si disporrà di un sito Web funzionale che utilizza il modello di dati per interagire con il database. Si disporrà inoltre di modelli di campo personalizzati che definiscono come viene eseguito il rendering dei campi dati per la visualizzazione e la modifica.

Un aspetto importante di ASP.NET Dynamic Data consiste nella capacità di dedurre in fase di esecuzione l'aspetto e il comportamento dei campi dati dal modello di dati che rappresenta il database. Queste informazioni vengono quindi utilizzate nei controlli dati, con il supporto dei modelli di campo, per eliminare la necessità di codice ripetitivo nel livello di presentazione.

In questa procedura dettagliata viene illustrato come effettuare le seguenti operazioni con una quantità minima di codice:

  • Interazione con il modello di dati. Dynamic Data incorpora funzionalità che consentono di creare un'applicazione basata sui dati in grado di eseguire operazioni di creazione, lettura, aggiornamento ed eliminazione (CRUD, Create, Read, Update and Delete).

  • Personalizzazione della modalità con cui gli utenti visualizzano e modificano i campi dati mediante la creazione di modelli di campo. Dynamic Data seleziona i modelli di campo appropriati in base alle informazioni dedotte dal modello di dati.

Verranno effettuate le seguenti operazioni:

  • Creazione e modifica di un sito Web per il supporto di Dynamic Data. L'obiettivo principale di questa attività consiste nel creare il modello di dati che verrà utilizzato da Dynamic Data per interagire con il database.

  • Creazione di modelli di campo. Tali modelli rappresentano controlli utente che definiscono l'interfaccia utente relativa alle modalità di visualizzazione e di modifica dei dati.

  • Creazione di una pagina personalizzata per la visualizzazione di una tabella. In questa pagina viene illustrato il modo in cui Dynamic Data interagisce con il database e viene mostrato come sia necessaria solo una quantità minima di codice per questa attività.

  • Test dell'integrazione di Dynamic Data. Mediante questa operazione è possibile assicurarsi che le funzionalità di Dynamic Data siano state integrate nel sito Web. È possibile interagire con il modello di dati e verificare che l'applicazione funzioni come previsto. Nell'ambito di questo processo, verranno generati e gestiti errori.

Prerequisiti

Per completare gli esempi contenuti in questo argomento, è 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).

Creazione di un sito Web Dynamic Data

In questa sezione verrà creato un sito Web Dynamic Data in Visual Studio. Si inizierà con un sito Web ASP.NET standard, quindi°lo si trasformerà in un sito che supporti le funzionalità°di°Dynamic Data. A tale scopo, verranno effettuate le seguenti operazioni:

  • Creazione di un sito Web ASP.NET.

  • Connessione del sito a un database. Questo database contiene la tabella alle cui colonne (campi dati) verrà effettuato l'accesso per la visualizzazione e la modifica personalizzate.

  • Configurazione del sito per l'utilizzo dei controlli Dynamic Data. Questa operazione consente l'integrazione delle funzionalità di Dynamic Data nel sito Web.

Verrà quindi creato e configurato il modello di dati da utilizzare e verranno effettuare le seguenti operazioni:

  • Creazione di classi del modello di dati in base a un database SQL Server. .

  • Aggiunta di metadati al modello di dati per consentire la convalida personalizzata dell'input dell'utente e per consentire successivamente a un controllo Calendar di modificare i campi dati.

Preparazione di un sito Web per Dynamic Data

In questa sezione viene illustrato come creare un sito Web ASP.NET, aggiungere un database e configurare il sito Web per integrare le funzionalità di Dynamic Data.

Per creare un sito Web ASP.NET

  1. Avviare Visual Studio.

  2. Scegliere Nuovo dal menu File, quindi fare clic su Sito Web.

    Viene visualizzata la finestra di dialogo Nuovo sito Web.

  3. In Modelli Visual Studio installati fare clic su Sito Web ASP.NET.

  4. Accanto a Percorso selezionare File system e, nella seconda casella, immettere il nome della cartella in cui si desidera conservare le pagine del sito Web. Ad esempio, immettere il nome di cartella C:\WebSites\DynamicDataWebSite.

  5. Nell'elenco Linguaggio selezionare il linguaggio di programmazione da utilizzare.

  6. Scegliere OK.

    In Visual Studio vengono create le cartelle e i file per un sito Web ASP.NET.

Il passaggio successivo consiste nell'aggiunta di un database al sito. Questo database contiene la tabella alle cui colonne (campi dati) verrà effettuato l'accesso per la visualizzazione e la modifica.

Per aggiungere il database al sito Web

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

  2. Nella finestra di dialogo Aggiungi elemento esistente immettere il percorso in cui è stato installato il file del database AdventureWorksLT (AdventureWorksLT.mdf), quindi scegliere Aggiungi.

    Questa operazione consente la creazione di una copia del file di database nel progetto.

A questo punto è possibile configurare il sito Web per integrare le funzionalità di Dynamic Data.

Per configurare il sito Web

  1. In Esplora soluzioni aprire il file Web.config.

  2. Aggiungere i riferimenti ad assembly per i seguenti assembly:

    • System.Web.Routing

    • System.Web.DynamicData

    • System.ComponentModel.DataAnnotations

    Nell'esempio riportato di seguito viene illustrato come aggiungere gli assembly. Assicurarsi di utilizzare le versioni di assembly corrette.

    <system.web>
  <compilation>
    <assemblies>

      <add assembly="System.Web.Routing, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.Web.DynamicData, Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>      <add assembly="System.ComponentModel.DataAnnotations,            Version=3.5.0.0,            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </assemblies>
  </compilation>

  3. Configurare il prefisso di tag asp per fare riferimento allo spazio dei nomi System.Web.DynamicData, come illustrato nell'esempio seguente:

    <system.web>
  <pages>
    <controls>

      <add tagPrefix="asp" namespace="System.Web.DynamicData"          assembly="System.Web.DynamicData, Version=3.5.0.0,          Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
    </controls>
  </pages>
</system.web>

  4. Salvare e chiudere il file Web.config.

Impostazione del modello di dati

In questa sezione viene illustrato come creare il modello di dati che rappresenta un componente chiave nella realizzazione del comportamento dinamico del sito Web. In questa procedura dettagliata verrà utilizzato un modello di dati LINQ to SQL. Tuttavia, è possibile utilizzare in alternativa un modello di dati ADO.NET Entity Framework. In questa sezione viene illustrato anche come aggiungere informazioni sui metadati al modello di dati.

Per creare il modello di dati

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto, scegliere Aggiungi cartella ASP.NET, quindi App_Code.

  2. Fare clic con il pulsante destro del mouse sulla cartella App_Code, quindi scegliere Aggiungi nuovo elemento.

  3. In Modelli Visual Studio installati fare clic su Classi LINQ to SQL.

  4. Nella casella Nome immettere il nome AdventureWorksLT.dbml per il modello di database.

  5. Scegliere Aggiungi.

    Verrà visualizzata la finestra Progettazione relazionale oggetti. Per ulteriori informazioni, vedere la classe Progettazione relazionale oggetti.

  6. In Progettazione relazionale oggetti fare clic sul collegamento Esplora server.

  7. In Connessioni dati all'interno di Esplora server espandere il nodo AdventureWorksLT_Data.mdf e il nodo Tabelle.

  8. Trascinare la tabella Customer nella finestra Progettazione relazionale oggetti.

  9. Salvare e chiudere il file AdventureWorksLT.dbml.

    È stato creato il modello di dati che rappresenta il database AdventureWorksLT.

Nella procedura successiva viene illustrato come aggiungere la convalida personalizzata dell'input dell'utente. Viene inoltre illustrato come utilizzare un controllo Calendar per eseguire il rendering dell'interfaccia utente relativa alla visualizzazione e alla modifica dei campi dati DateTime

Per aggiungere la convalida e i metadati personalizzati al modello di 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. Per questa procedura dettagliata verrà utilizzata la classe Customer. Di conseguenza, creare un file di classe denominato Customer.cs o Customer.vb. Questo file conterrà anche una classe associata che verrà creata in un secondo momento per 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°Customer per renderla una classe parziale.

  5. Se si crea la classe in Visual C#, eliminare il costruttore predefinito.

    Nell'esempio riportato di seguito viene illustrata la dichiarazione di classe aggiornata.

    public partial class Customer {

}

    Partial Public Class Customer

End Class

  6. Aggiungere riferimenti agli spazi dei nomi System.Web.DynamicData e System.ComponentModel.DataAnnotations utilizzando 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

  7. Nello stesso file creare un'altra classe parziale che fungerà da classe di metadati associata. È possibile utilizzare qualsiasi nome per la classe. Per questa procedura dettagliata assegnare alla classe il nome CustomerMetadata, come illustrato nell'esempio seguente:

    public partial class CustomerMetadata
{

}

    Partial Public Class CustomerMetadata

End Class

  8. Applicare l'attributo MetadataTypeAttribute alla classe parziale Customer. Come parametro dell'attributo specificare CustomerMetadata, che rappresenta il nome della classe di metadati associata creata nel passaggio precedente.

    Nell'esempio riportato di seguito viene illustrata la classe parziale Customer a cui è stato applicato l'attributo.

    [MetadataType(typeof(CustomerMetadata))]
public partial class Customer {

}

    <MetadataType(GetType(CustomerMetadata))> _
Partial Public Class Customer

End Class

  9. Nella classe di metadati creare un campo pubblico denominato ModifiedDate, tipizzato come Object.

    Nella classe di metadati viene creato un campo per ogni campo dati di cui si desidera personalizzare il comportamento di visualizzazione e di modifica. Come nome di campo nella classe di metadati viene utilizzato un nome identico a quello del campo dati che si desidera modificare.

  10. Applicare l'attributo UIHintAttribute al campo ModifiedDate. Come parametro specificare "DateCalendar", che rappresenta il nome di un modello di campo che verrà creato in un secondo momento.

    Nota:

    L'oggetto Object viene utilizzato come indicatore nel tipo di metadati per rappresentare il campo dati. In Dynamic Data il tipo effettivo viene dedotto dal modello di dati.

    Nell'esempio riportato di seguito viene illustrata l'applicazione dell'attributo UIHintAttribute.

    public partial class CustomerMetadata
{
    [UIHint("DateCalendar")]
    public object ModifiedDate;
}

    Partial Public Class CustomerMetadata
    <UIHint("DateCalendar")> _
    Public ModifiedDate As Object
End Class

  11. Nella classe di metadati creare campi pubblici per le proprietà FirstName e LastName.

  12. Applicare l'attributo RegularExpressionAttribute ai campi dati FirstName e LastName. Specificare un criterio di espressione regolare che consenta solo caratteri alfabetici, spazi e trattini e che limiti il nome a 40 caratteri. Includere un messaggio di errore personalizzato da visualizzare in caso di esito negativo della convalida.

    Nell'esempio riportato di seguito vengono illustrati i campi FirstName e LastName a cui è stato applicato l'attributo.

    [RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",     ErrorMessage="Entered characters are not allowed.")]
public object FirstName;

[RegularExpression(@"^[a-zA-Z''-'\s]{1,40}$",    ErrorMessage = "Entered characters are not allowed.")]
public object LastName; 

    <RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
Public FirstName As Object

<RegularExpression("^[a-zA-Z''-'\s]{1,40}$", _    ErrorMessage:="Entered characters are not allowed.")> _
Public LastName As Object

    Si noti che i campi dati corrispondono alle colonne della tabella Customer definite nel modello di dati. Questi campi dati vengono utilizzati solo per aggiungere le informazioni sui metadati che Dynamic Data utilizza durante il rendering di tali campi.

    Il criterio di espressione regolare consente un limite massimo di 40 caratteri maiuscoli e minuscoli e diversi caratteri speciali comuni ai nomi in inglese.

  13. Salvare e chiudere il file di classe.

A questo punto è possibile registrare il contesto del modello di dati in modo che Dynamic Data possa accedere alle informazioni sui metadati.

Per registrare il contesto del modello di dati

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto, quindi scegliere Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati selezionare Classe di applicazione globale, quindi scegliere Aggiungi.

    In tal modo viene aggiunto un file Global.asax al sito.

  3. Aggiungere una direttiva @ Import con un attributo Namespace che fa riferimento allo spazio dei nomi System.Web.DynamicData, come illustrato nell'esempio seguente:

    <%@ Import Namespace="System.Web.DynamicData" %>

  4. Nel metodo Application_Start registrare il contesto dati con l'opzione delle pagine di supporto temporaneo disattivata, come illustrato nell'esempio riportato di seguito.

    Questa registrazione indica a Dynamic Data il modello di dati da utilizzare e avvisa inoltre di non consentire la visibilità delle tabelle per le pagine di supporto temporaneo. Quest'ultimo passaggio non è necessario, ma viene utilizzato in questo contesto per evidenziare che il sito Web non utilizza pagine di supporto temporaneo.

    MetaModel model = new MetaModel();
model.RegisterContext(typeof(AdventureWorksLTDataContext), 
new ContextConfiguration() {ScaffoldAllTables = false });

    Dim model As MetaModel = New MetaModel()
model.RegisterContext(GetType( _
    AdventureWorksLTDataContext), _
    New ContextConfiguration() With { _
    .ScaffoldAllTables = False})

  5. Salvare e chiudere il file Global.asax.

Creazione dei modelli di campo

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. Dynamic Data richiede l'esistenza di modelli di campo per ogni tipo di campo dati rappresentato nel contesto dati (se non esiste alcun modello di campo per uno specifico tipo di campo dati e non è reperibile mediante le regole di fallback, in Dynamic Data viene generata un'eccezione).

Se si crea un sito Web Dynamic Data, in tale sito viene incluso un insieme di modelli di campo che rappresentano tipi di dati tipici di un database. Questi tipi di dati vengono creati insieme ai modelli di pagina, a una pagina master e ai file del foglio di stile CSS. Tuttavia, in questa procedura dettagliata viene illustrato come aggiungere le funzionalità di Dynamic Data a un sito esistente e pertanto si presuppone di non disporre dell'accesso ai modelli di campo predefiniti.

I modelli di campo creati in questa procedura dettagliata saranno simili ai modelli predefiniti di un sito Web Dynamic Data. Per ulteriori informazioni, vedere la classe Cenni preliminari sui modelli di campo di ASP.NET Dynamic Data. È possibile visualizzare i modelli di campo predefiniti generati quando si crea un sito Web che utilizza pagine di supporto temporaneo. Per ulteriori informazioni, vedere la classe Procedura dettagliata: creazione di un nuovo sito Web Dynamic Data utilizzando le pagine di supporto temporaneo..

In questa sezione viene illustrato come creare i seguenti modelli:

  • Modelli di campo che eseguono il rendering dell'interfaccia utente per la visualizzazione e la modifica dei campi dati di tipo String.

  • Modelli di campo che eseguono il rendering dell'interfaccia utente per la visualizzazione e la modifica dei campi dati di tipo DateTime.

Creazione dei modelli di campo per i dati String

In questa sezione viene illustrato come creare modelli di campo per eseguire il rendering dell'interfaccia utente per la visualizzazione e la modifica dei campi dati String.

Per creare modelli di campo per la visualizzazione e la modifica dei campi dati String

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto, quindi scegliere Nuova cartella.

  2. Rinominare la nuova cartella DynamicData.

    Nota:

    È necessario utilizzare i nomi di cartella descritti in questa procedura, poiché i nomi presentano un significato speciale in Dynamic Data.

  3. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla cartella DynamicData, quindi scegliere Nuova cartella.

  4. Rinominare la nuova cartella FieldTemplates.

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

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

  7. Nella casella Nome immettere Text.ascx. Assicurarsi di selezionare Inserisci codice in file separato.

  8. Scegliere Aggiungi.

    Vengono creati due modelli di campo denominati Text.ascx e Text_Edit.ascx. Il primo controllo esegue il rendering dell'interfaccia utente per la visualizzazione dei campi dati String. Il secondo controllo esegue il rendering dell'interfaccia utente per la modifica dei campi dati String.

  9. Aprire il file Text_Edit.ascx e nella direttiva @ Control impostare l'attributo AutoEventWireup su true.

  10. Salvare e chiudere i file dei controlli utente.

    Sono stati così creati i modelli di campo che eseguono il rendering dell'interfaccia utente per la visualizzazione e la modifica dei campi dati String.

Creazione dei modelli di campo DateTime

In questa sezione viene illustrato come creare modelli di campo per eseguire il rendering dell'interfaccia utente per la visualizzazione e la modifica dei campi dati DateTime. Il modello di campo per la visualizzazione utilizza una rappresentazione di data breve che esclude l'ora. Il modello di campo per la modifica utilizza il controllo Calendar per consentire all'utente di immettere un nuovo valore.

Per creare un modello di campo per la visualizzazione e la modifica dei campi dati DateTime

  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 DateCalendar.ascx. Assicurarsi di selezionare Inserisci codice in file separato.

  4. Scegliere Aggiungi.

    Vengono creati due modelli di campo denominati DateCalendar.ascx e DateCalendar_Edit.ascx. Il primo controllo esegue il rendering dell'interfaccia utente per la visualizzazione dei campi dati DateTime. Il secondo controllo esegue il rendering dell'interfaccia utente per la modifica dei campi dati DateTime.

  5. Aprire il file DateCalendar.ascx.

  6. Nel controllo Literal eliminare l'assegnazione di FieldValueString all'attributo Text, come illustrato nell'esempio riportato di seguito.

    <asp:Literal ID="Literal1" />

  7. Salvare e chiudere il file del controllo utente.

  8. Aprire il file code-behind del modello di campo DateCalendar.ascx.vb o DateCalendar.ascx.cs.

  9. Eseguire l'override del metodo OnDataBinding del controllo utente per formattare il valore DateTime in modo da visualizzarlo senza l'ora, come illustrato nell'esempio riportato di seguito. Il valore del campo è disponibile in FieldValue.

    protected override void OnDataBinding(EventArgs e)
{
  base.OnDataBinding(e);
  string shortDate = string.Empty;
  if (FieldValue != null)
  {
    DateTime dt = (DateTime)FieldValue;
    shortDate = dt.ToShortDateString();
  }
  Literal1.Text = shortDate;
}

    Protected Overloads Overrides Sub OnDataBinding( _
    ByVal e As EventArgs)
    MyBase.OnDataBinding(e)
    Dim shortDate As String = String.Empty
    If FieldValue IsNot Nothing Then
      Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
      shortDate = dt.ToShortDateString()
    End If
    Literal1.Text = shortDate
End Sub

  10. Salvare e chiudere il file code-behind.

  11. Aprire il file DateCalendar_Edit.ascx.

  12. Nella direttiva @ Control impostare l'attributo AutoEventWireup su true.

  13. Nel controllo TextBox sostituire l'espressione FieldValueString nell'attributo Text con il metodo GetDateString() personalizzato, come illustrato nell'esempio riportato di seguito.

    <asp:TextBox ID="TextBox1"  
  Text='<%# GetDateString() %>' >
</asp:TextBox>

  14. Aggiungere al file il markup riportato di seguito per definire il controllo Calendar che esegue il rendering dell'interfaccia utente in modo da consentire un metodo alternativo di modifica delle date.

    <asp:Calendar ID="Calendar1"  
  VisibleDate=
    '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  SelectedDate=
    '<%# (FieldValue != null) ? FieldValue : DateTime.Now %>'
  OnSelectionChanged="Calendar1_SelectionChanged" />

    <asp:Calendar ID="Calendar1"  
  VisibleDate=
  '<%# If(FieldValue,DateTime.Now)%>'
  SelectedDate=
  '<%# If(FieldValue,DateTime.Now) %>'
  OnSelectionChanged="Calendar1_SelectionChanged" />

  15. Salvare e chiudere il file dei modelli di campo.

  16. Aprire il file code-behind DateCalendar_Edit.ascx.vb o DateCalendar_Edit.ascx.cs.

  17. Aggiungere un metodo GetDateString. Nel metodo elaborare l'input dell'utente come immesso tramite il controllo TextBox. Il metodo formatta la data mediante un formato di data breve che esclude l'ora.

    Nell'esempio seguente viene illustrato come effettuare questa operazione.

    protected string GetDateString()
{
  if (FieldValue != null)
  {
    DateTime dt = (DateTime)FieldValue;
    return dt.ToShortDateString();
  }
  else
    return string.Empty;
}

    Protected Function GetDateString() As String
  If FieldValue <> Nothing Then
    Dim dt As DateTime = Format(CType(FieldValue, DateTime), "d")
      Return dt.ToShortDateString()
  Else
    Return String.Empty
  End If
End Function

  18. Aggiungere un gestore per l'evento SelectionChanged del controllo Calendar.

  19. Nel gestore impostare la proprietà Text del controllo TextBox su una versione formattata della data selezionata dal calendario. In tal modo viene visualizzata la selezione corrente dell'utente nella casella di testo.

    Nell'esempio riportato di seguito viene illustrato il gestore.

    protected void Calendar1_SelectionChanged(
  object sender, EventArgs e)
{
  // Display value using the short date format.
  TextBox1.Text = 
  Calendar1.SelectedDate.ToString("d");
}

    Protected Sub Calendar1_SelectionChanged( _
    ByVal sender As Object, ByVal e As EventArgs)
    ' Display value using the short date format.
    TextBox1.Text = Calendar1.SelectedDate.ToString("d")
End Sub

  20. Salvare e chiudere i file dei modelli di campo.

    Sono stati così creati i modelli di campo che eseguono il rendering dell'interfaccia utente per la visualizzazione e la modifica dei tipi di campo dati DateTime. I modelli di campo indicano a Dynamic Data di applicare la formattazione e la convalida appropriate. Se la convalida ha esito negativo, i modelli di campo generano anche i messaggi di errore appropriati.

Creazione di una pagina personalizzata per visualizzare la tabella Customer

In questa sezione viene illustrato come creare una pagina personalizzata che visualizzi la tabella Customer mediante un controllo GridView con comportamento dinamico.

Il comportamento dinamico del controllo viene stabilito effettuando le seguenti operazioni:

La tabella di database contiene i tipi di campo dati String e DateTime. Pertanto, quando si utilizza il controllo GridView con comportamento dinamico per visualizzare i dati della tabella, Dynamic Data utilizzerà i modelli di campo personalizzati creati.

Per creare una pagina personalizzata per la visualizzazione della tabella Customers

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sul nome del progetto, quindi selezionare Aggiungi nuovo elemento.

  2. In Modelli Visual Studio installati selezionare Web Form.

    Nella casella Nome immettere Customers.aspx. Assicurarsi di selezionare Inserisci codice in file separato.

  3. Nella direttiva @ Page impostare l'attributo AutoEventWireup su true.

  4. Nella visualizzazione Origine aggiungere un controllo DynamicDataManager al corpo della pagina, come illustrato nell'esempio seguente:

    <body>

    <asp:DynamicDataManager ID="DynamicDataManager1"      />

</body>

    Il controllo DynamicDataManager indica a Dynamic Data di gestire i controlli dati nella pagina come controlli dinamici.

  5. Dalla scheda Dati della Casella degli strumenti aggiungere un controllo LinqDataSource alla pagina.

  6. Impostare la proprietà EnableUpdate del controllo LinqDataSource su true.

    In tal modo vengono attivate le operazioni Update per il controllo dati.

  7. Impostare la proprietà TableName del controllo LinqDataSource sulla tabella che si desidera utilizzare (Customers).

  8. Impostare la proprietà ContextTypeName sulla classe del contesto dati (AdventureWorksLTDataContext), come illustrato nell'esempio seguente:

    <asp:LinqDataSource ID="LinqDataSource1"  
  TableName="Customers"  ContextTypeName="AdventureWorksLTDataContext"  EnableUpdate="true">
</asp:LinqDataSource>

  9. Dalla scheda Dati della Casella degli strumenti aggiungere un controllo GridView alla pagina.

    Questo controllo verrà utilizzato per visualizzare e modificare i campi dati.

  10. Impostare la proprietà DataSourceID del controllo GridView sull'ID del controllo LinqDataSource, come illustrato nell'esempio seguente:

    <form ID="Form1"  >

    <asp:GridView ID="GridView1"   
      DataSourceID="LinqDataSource1" >
    </asp:GridView>
</form>

  11. Impostare la proprietà AutoGenerateColumns del controllo GridView su false e la proprietà AutoGenerateEditButton su true, come illustrato nell'esempio seguente:

    <asp:GridView ID="GridView1"   
  AutoGenerateEditButton="true"  AutoGenerateColumns="false" >
</asp:GridView>

    In tal modo viene attivata l'operazione di modifica e disattivata la generazione automatica delle colonne basate sulla tabella di database. In alternativa verranno utilizzati i controlli DynamicField per popolare il controllo GridView.

  12. Impostare le proprietà AllowPaging e AllowSorting del controllo GridView su true, come illustrato nell'esempio seguente:

    <asp:GridView ID="GridView1"   

  AllowPaging="true"  AllowSorting="true" >
</asp:GridView>

  13. Aggiungere tre controlli DynamicField alla proprietà Columns e impostarne le proprietà DataField() su "FirstName", "LastName" e "ModifiedDate".

    I controlli DynamicField utilizzano ASP.NET Dynamic Data per leggere i dati del modello di dati e per formattarli mediante il modello di campo appropriato. Non è necessario includere nei controlli DynamicField eventuali informazioni su come leggere o formattare i dati. Queste attività vengono gestite automaticamente da Dynamic Data.

    Nell'esempio riportato di seguito viene illustrato il markup del controllo GridView dopo l'aggiunta dei controlli DynamicField.

    <asp:GridView ID="GridView1"
 >

  <Columns>    <asp:DynamicField DataField="FirstName" />    <asp:DynamicField DataField="LastName" />    <asp:DynamicField DataField="ModifiedDate" />  </Columns>
</asp:GridView>
    Nota:

    Il controllo DynamicField non si trova nella Casella degli strumenti. Pertanto, è necessario aggiungerlo come markup nella visualizzazione Origine.

  14. Salvare e chiudere il file Customers.aspx.

    È stata così creata la pagina personalizzata per accedere alla tabella Customers.

  15. Aprire il file code-behind Customers.aspx.cs o Customers.aspx.vb.

  16. Aggiungere un riferimento allo spazio dei nomi System.Web.DynamicData 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;

    Imports System.Web.DynamicData

  17. Creare un metodo Page_Init, come illustrato nell'esempio seguente:

    protected void Page_Init(object sender, 
EventArgs e)
{    }

    Protected Sub Page_Init(ByVal sender As Object, _
ByVal e As EventArgs)

End Sub

  18. Nel metodo Page_Init registrare il controllo GridView con l'oggetto DynamicDataManager per attivare il comportamento dinamico.

    Nell'esempio seguente viene illustrato come effettuare questa operazione.

    protected void Page_Init(object sender, 
EventArgs e)
{
    DynamicDataManager1.RegisterControl(GridView1);
}

    Protected Sub Page_Init(ByVal sender As Object, _
    ByVal e As EventArgs)
    DynamicDataManager1.RegisterControl(GridView1)
End Sub

  19. Chiudere il file code-behind.

Test di Dynamic Data

In questa sezione viene illustrato come assicurarsi che le funzionalità di Dynamic Data siano state integrate nel sito Web. È possibile interagire con il database tramite il modello di dati e verificare che l'integrazione funzioni. Si noterà che, se si forniscono valori non validi durante la modifica dei dati, verranno generati messaggi di errore da Dynamic Data in base alle informazioni dedotte dal database.

Per testare l'integrazione delle funzionalità di Dynamic Data

  1. In Esplora soluzioni fare clic con il pulsante destro del mouse sulla pagina Customers.aspx, quindi selezionare Visualizza nel browser.

    Nel browser viene mostrata una pagina che visualizza la tabella Customers con le colonne selezionate.

  2. In una riga qualsiasi fare clic su Modifica e cancellare il nome.

  3. Nella stessa riga fare clic su Aggiorna.

    In Dynamic Data viene visualizzato un messaggio di errore che avvisa che non è consentita una stringa vuota per il campo dati FirstName.

  4. Nella stessa riga fare clic su Annulla.

  5. In una riga qualsiasi fare clic su Modifica, quindi modificare il cognome.

  6. Nella stessa riga fare clic su Aggiorna.

    Dynamic Data aggiorna il database. Poiché è stato immesso un valore valido per il cognome, i dati superano il controllo di convalida che fa parte del modello di campo compilato in precedenza.

  7. In una riga qualsiasi fare clic su Modifica e immettere caratteri non alfabetici per il nome o il cognome.

  8. Nella stessa riga fare clic su Aggiorna.

    In Dynamic Data viene visualizzato il messaggio di errore personalizzato specificato con l'espressione regolare, che avvisa che sono stati immessi caratteri non consentiti.

  9. Nella stessa riga fare clic su Annulla.

  10. In una riga qualsiasi fare clic su Modifica e cancellare la data.

  11. Nella stessa riga fare clic su Aggiorna.

    In Dynamic Data viene visualizzato un messaggio di errore che avvisa che non è consentita una stringa vuota per il campo dati ModifiedDate.

  12. Nella stessa riga fare clic su Annulla.

  13. In una riga qualsiasi fare clic su Modifica, quindi modificare la data mediante il controllo Calendar.

  14. Nella stessa riga fare clic su Aggiorna.

    Dynamic Data aggiorna il database. Poiché è stato immesso un valore consentito per la data, i dati superano il controllo di convalida che fa parte del modello di campo compilato in precedenza.

Passaggi successivi

In questa procedura dettagliata sono stati illustrati i principi di base di ASP.NET Dynamic Data e come aggiungere le funzionalità di Dynamic Data a un sito Web ASP.NET esistente. Quando si integrano le funzionalità di Dynamic Data in un sito Web ASP.NET esistente, è possibile effettuare le seguenti operazioni:

  • Interazione con il database sottostante. Dynamic Data incorpora funzionalità chiave per un'applicazione basata sui dati, quali le operazioni CRUD.

  • Visualizzazione e modifica dei campi dati, poiché Dynamic Data seleziona il modello di campo appropriato in base alle informazioni dedotte dal database.

È possibile sperimentare anche altre funzionalità. Di seguito sono riportati alcuni suggerimenti per ulteriori esplorazioni:

Per informazioni generali, è possibile effettuare quanto segue:

Vedere anche

Concetti

Cenni preliminari sul modello di ASP.NET Dynamic Data

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

Cenni preliminari sulle pagine di supporto temporaneo e sui modelli di pagina di ASP.NET Dynamic Data

Cenni preliminari su ASP.NET Dynamic Data

Cronologia delle modifiche

Date

History

Motivo

Luglio 2008

Argomento aggiunto.

Modifica di funzionalità in SP1.