Procedura dettagliata: visualizzazione e formattazione di dati con il controllo server Web DataList

Aggiornamento: novembre 2007

Un'attività comune nelle pagine Web consiste nella visualizzazione dei dati per creare report di dati. In questa procedura dettagliata si utilizzerà il controllo DataList, che consente di creare layout in formato libero per i record visualizzati in una pagina Web ASP.NET.

In particolare, vengono illustrate le seguenti operazioni:

• Aggiunta di un controllo DataList e utilizzo di modelli per il layout dei dati visualizzati mediante il controlloDataList.

• Associazione di un controllo DataList a un'origine dati.

• Aggiunta di un controllo dati figlio e di alcune righe di codice al controllo DataList per visualizzare i dati in una relazione Master-Details.

Prerequisiti

Per completare questa procedura dettagliata è necessario:

• Microsoft Visual Web Developer (Visual Studio).

• Accesso al database Northwind di SQL Server. Per informazioni su come scaricare e installare il database di esempio Northwind di SQL Server, vedere Installazione dei database di esempio nel sito Web di Microsoft SQL Server.

  Nota:
  Per ulteriori informazioni sulle modalità di accesso a un computer sul quale è in esecuzione SQL Server, contattare l'amministratore del server.

• Microsoft Data Access Components (MDAC) 2.7 o versione successiva.

  Se si utilizza Microsoft Windows XP o Windows Server 2003, si dispone già di MDAC 2.7. Tuttavia, se si utilizza Microsoft Windows 2000, può essere necessario aggiornare la versione di MDAC già installata nel computer. Per ulteriori informazioni, vedere l'argomento "Microsoft Data Access Components (MDAC) Installation" in MSDN Library.

Creazione del sito Web

Creare un sito e una pagina Web nuovi mediante la procedura indicata di seguito.

Per creare un sito Web di file system

1. Aprire Visual Web Developer.

2. Scegliere Nuovo dal menu File, quindi fare clic su Sito Web. Se si utilizza Visual Web Developer Express scegliere Nuovosito Web dal menu File.

   Viene visualizzata la finestra di dialogo Nuovo sito Web.

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

4. Nella casella Percorso, selezionare File System e immettere il nome della cartella in cui salvare le pagine del sito Web.

   Ad esempio, digitare il nome cartella C:\WebSites\FormatDataList.

5. Nell'elenco Linguaggio scegliere il linguaggio di programmazione con cui lavorare.

   Il linguaggio di programmazione scelto sarà il linguaggio predefinito per il sito Web; tuttavia, è possibile impostare il linguaggio di programmazione per ogni singola pagina.

6. Scegliere OK.

   La cartella viene creata insieme a una nuova pagina chiamata Default.aspx.

Aggiunta di un controllo DataList

Nella prima parte di questa procedura dettagliata, verrà aggiunto un controllo DataList e ne sarà configurata la relativa origine dati.

Per aggiungere e configurare un controllo DataList in modo da visualizzare i dati in una griglia

1. Passare alla visualizzazione Progettazione.

2. Trascinare un controllo DataList dal gruppo Dati della Casella degli strumenti alla pagina.

3. Fare clic con il pulsante destro del mouse sul controllo DataList e scegliere Mostra smart tag.

4. Dal menu Attività DataList, nell'elenco Scegli origine dati, fare clic su Nuova origine dati.

   Viene visualizzata la procedura guidata Configura origine dati.

5. Fare clic su Database.

   Viene specificata la richiesta di ottenere dati da un database che supporti le istruzioni SQL, inclusi i database di SQL Server e altri database compatibili con OLE-DB.

6. Nella casella Specificare un ID per l'origine dati viene visualizzato un nome di controllo origine dati predefinito, vale a dire SqlDataSource1. È possibile lasciare inalterato il nome.

7. Scegliere OK.

   Nella procedura guidata Configura origine dati viene visualizzata una pagina in cui è possibile creare una connessione.

8. Fare clic su Nuova connessione.

   • Se viene visualizzata la pagina Scegli origine dati, selezionare il tipo di origine dati da utilizzare nell'elenco Origine dati. Per questa procedura dettagliata il tipo di origine dati è Microsoft SQL Server. Nell'elenco Provider di dati, fare clic su Provider di dati .NET Framework per SQL Server, quindi scegliere Continua.

   Verrà visualizzata la pagina Aggiungi connessione.

9. Nella casella di testo Nome server nella pagina Aggiungi connessione, digitare il nome del computer su cui è in esecuzione il database di SQL Server.

10. Per le credenziali di accesso, selezionare l'opzione appropriata per accedere al computer su cui è in esecuzione il database di SQL Server (sicurezza integrata oppure una password e un ID specifici) e, se richiesto, immettere un nome utente e una password.

11. Selezionare la casella di controllo Salva password.

12. Fare clic sul pulsante Seleziona o immetti nome di database, quindi immettere Northwind.

13. Fare clic su Test connessione e, dopo avere verificato il funzionamento della connessione, scegliere OK.

    La procedura guidata Configura origine dati viene visualizzata con le informazioni relative alla connessione inserite.

14. Scegliere Avanti.

    Nella procedura guidata Configura origine dati viene visualizzata una pagina in cui è possibile scegliere di memorizzare la stringa di connessione in un file di configurazione. La memorizzazione della stringa di connessione nel file di configurazione comporta due vantaggi:

    • Maggiore sicurezza rispetto alla memorizzazione nella pagina.

    • Possibilità di riutilizzare la stessa stringa di connessione in più pagine.

15. Accertarsi che la casella di controllo Sì, salva la connessione con nome sia selezionata, quindi scegliere Avanti. È possibile lasciare il nome della stringa di connessione predefinito.

    Nella procedura guidata Configura origine dati viene visualizzata una pagina in cui è possibile specificare i dati da recuperare dal database.

16. Accertarsi che l'opzione Specificare le colonne di una tabella o visualizzazione sia selezionata.

17. Nell'elenco Nome, fare clic su Categorie.

18. In Colonne, selezionare le caselle di controllo CategoryID e CategoryName.

    Nella procedura guidata Configura origine dati l'istruzione SQL in fase di creazione viene visualizzata in una casella nella parte inferiore della pagina.

    Nota:
    La procedura guidata Configura origine dati consente di specificare i criteri di selezione (una clausola WHERE) e altre opzioni per le query SQL. Per questa parte della procedura dettagliata, sarà creata un'istruzione semplice senza opzioni di selezione o di ordinamento.

19. Scegliere Avanti.

20. Fare clic su Test query per accertarsi di ottenere i dati desiderati.

21. Fare clic su Fine.

    La procedura guidata Configura origine dati viene chiusa e si ritorna al controllo SqlDataSource. Se si visualizzano le proprietà per il controllo SqlDataSource, è possibile osservare che mediante la procedura guidata Configura origine dati sono stati creati i valori per le proprietà ConnectionString e SelectQuery. Sebbene in Proprietà di Visual Web Developer venga visualizzata la stringa di connessione completa, nella pagina viene salvato solo l'identificatore della stringa di connessione (in questo caso, NorthwindConnectionString).

Formattazione del layout del controllo DataList

A questo punto, nella pagina si dispone di un controllo DataList e di un layout predefinito per le informazioni della tabella Categorie. Il vantaggio del controllo DataList consiste nella possibilità di creare un layout in formato libero per i dati. In questa sezione, sarà utilizzato un modello che verrà configurato con testo e controlli in modo da personalizzare la visualizzazione dei dati.

Per formattare il layout nel controllo DataList

1. Fare clic con il pulsante destro del mouse sul controllo DataList, scegliere Modifica modello, quindi fare clic su Modelli di elementi.

   Il controllo DataList passa alla modalità di modifica dei modelli e consente di visualizzare le caselle relative ai seguenti modelli:

   • ItemTemplate, in cui sono contenuti i testi e i controlli visualizzati per impostazione predefinita nel controllo DataList.

   • AlternatingItemTemplate, un modello facoltativo in cui è possibile creare un layout che viene utilizzato per qualsiasi altro record di dati. In genere, la proprietà AlternatingItemTemplate è simile alla proprietà ItemTemplate, tuttavia nella proprietà AlternatingItemTemplate si utilizza un colore di sfondo diverso per un effetto a bande.

   • SelectedItemTemplate, che consente di definire il layout per un record di dati selezionato in modo esplicito facendo clic su un pulsante o mediante un'altra operazione. Di solito questo modello viene utilizzato per fornire una visualizzazione estesa di un record di dati oppure come record master per una relazione Master-Details. Per consentire l'utilizzo di una modalità selezionata per un record, è necessario scrivere il codice. Tuttavia tale operazione non sarà eseguita in questa procedura dettagliata. Per ulteriori informazioni, vedere Procedura: consentire agli utenti la selezione di elementi nei controlli server Web DataList e Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio.

   • EditItemTemplate, che consente di definire il layout della modalità di modifica per un record di dati. In genere, la proprietà EditItemTemplate include controlli modificabili, quali i controlli TextBox e CheckBox in cui gli utenti possono modificare il record di dati. Per consentire l'utilizzo della modalità di modifica per un record e per gestire il salvataggio del record una volta completate le modifiche, è necessario scrivere il codice. Tuttavia tale operazione non sarà eseguita in questa procedura dettagliata. Per informazioni sulla scrittura del codice per la modifica dei record, vedere Procedura: consentire agli utenti la modifica di elementi nei controlli server Web DataList.

   Per impostazione predefinita, in Visual Web Developer il modello di elemento viene compilato con un controllo con associazione a dati Label per ciascuna colonna di dati nell'origine dati. Inoltre, in Visual Web Developer viene generato un testo statico per ciascuna etichetta in modo che funzioni da didascalia.

2. Trascinare il quadratino di ridimensionamento di destra in modo da allargare il controllo DataList fino a occupare la maggior parte della larghezza della pagina.

3. Modificare il modello di elemento ridisponendo i controlli Label e creando una nuova didascalia in modo che l'aspetto del contenuto del modello sia simile all'esempio di codice riportato di seguito.

   Name: [CategoryNameLabel] (ID: [CategoryIDLabel])
   

4. Fare clic sul controllo CategoryNameLabel. In Proprietà, espandere il nodo Tipo di carattere, quindi impostare la proprietà Bold su true.

5. Nella visualizzazione Progettazione, fare clic con il pulsante destro del mouse sulla barra del titolo nel controllo DataList, scegliere Modifica modello e fare clic su Modello di separatore.

   Il modello di separatore consente di specificare il testo o gli altri elementi visualizzati da due record di dati.

6. Dal gruppo HTML della Casella degli strumenti, trascinare un elemento Righello orizzontale nel modello di separatore.

7. Fare clic con il pulsante destro del mouse sulla barra del titolo nel controllo DataList e scegliere Termina modifica modello.

Esecuzione del test del controllo DataList

A questo punto è possibile eseguire il test del creato.

Per eseguire il test del controllo DataList

• Premere CTRL+F5 per eseguire la pagina.

  Nella pagina viene visualizzato un elenco di nomi di categoria e di ID, con una linea tra un record e l'altro.

Visualizzazione di informazioni correlate all'interno del controllo DataList

Nel DataList attualmente in uso, sono visualizzati singoli record di categoria, mediante il layout personalizzato definito in precedenza. Sebbene il layout sia stato modificato solo in minima parte, come si può osservare, utilizzando il modello è possibile disporre il testo e i controlli, formattare il contenuto nonché modificare in altri modi la visualizzazione dei record di dati.

Il layout può includere il record corrente e anche i record correlati. In questa parte della procedura dettagliata, è possibile modificare il layout in modo che in ogni riga venga visualizzata una categoria insieme ai prodotti di quella categoria. In effetti, verrà visualizzata una relazione Master-Details all'interno di ciascuna riga del controllo DataList. Per attivare questo scenario, sarà necessario scrivere una piccola porzione di codice.

Per visualizzare le informazioni correlate all'interno del controllo DataList

1. Fare clic con il pulsante destro del mouse sul controllo DataList, scegliere Modifica modelli, quindi fare clic su Modelli di elementi.

2. Dal gruppo Standard della Casella degli strumenti, trascinare un controllo BulletedList nel modello di elemento, quindi rilasciarlo nelle informazioni relative alla categoria.

   Il controllo BulletedList consente di visualizzare i dati con una colonna di dati per punto elenco.

3. Fare clic con il pulsante destro del mouse sul controllo BulletedList e scegliere Mostra smart tag.

4. Fare clic su Scegli origine dati.

   Verrà creata un altro controllo origine dati per la lettura dei record correlati.

5. Dall'elenco Selezionare un'origine dati nella finestra di dialogo Scegli origine dati, fare clic su Nuova origine dati.

6. Fare clic su Database.

7. Nella casella Specificare l'ID dell'origine dati, digitare bulletedListDataSource.

   Sebbene in genere sia possibile lasciare invariato il nome predefinito per l'origine dati, in questo caso è utile assegnare a tale origine un nome specifico prevedibile al quale fare riferimento successivamente all'interno del codice.

8. Scegliere OK.

   Viene visualizzata la procedura guidata Configura origine dati.

9. Nell'elenco Specificare la connessione dati che deve essere utilizzata dall'applicazione per connettersi al database, fare clic sul nome della connessione creata in precedenza nella procedura dettagliata, quindi scegliere Avanti.

   Nella procedura guidata Configura origine dati viene visualizzata una pagina in cui è possibile creare un'istruzione SQL.

10. Nella casellaNome di Specificare le colonne di una tabella o visualizzazione, fare clic su Products.

11. Nella casella Colonne, selezionare la casella ProductName.

    Nel controllo BulletedList viene visualizzata una sola colonna.

12. Fare clic sul pulsante WHERE.

    Verrà visualizzata la finestra di dialogo Aggiungi clausola WHERE.

13. Nell'elenco Colonna fare clic su CategoryID.

14. Nell'elenco Operatore fare clic su =.

15. Nell'elenco Origine fare clic su Nessuna.

    In tal modo si indica che il valore della colonna CategoryID sarà fornito in una variabile.

16. Fare clic su Aggiungi, quindi su OK, scegliere Avanti e fare clic su Fine.

    L'esecuzione della query non funzionerà con la variabile.

17. Nell'elenco Selezionare un campo dati da visualizzare in BulletedList, fare clic su ProductName. Scegliere OK.

18. Fare clic con il pulsante destro del mouse sulla barra del titolo nel controllo DataList e scegliere Termina modifica modello.

Scrittura del codice per impostare l'ID di categoria

L'aspetto dell'istruzione SQL creata per il controllo bulletedListDataSource è simile al codice riportato di seguito:

SELECT [ProductName] FROM [Products] WHERE ([CategoryID] = @CategoryID)

In fase di esecuzione, nel controllo DataList viene visualizzato un elenco di record di categoria, in cui sono inclusi il nome e l'ID della categoria. Nella sezione precedente, è stato aggiunto un controllo BulletedList che consentirà di visualizzare tutti i prodotti di ciascuna categoria. Nel momento in cui ogni record di categoria, il controllo DataList esegue una query per ottenere i prodotti di quella categoria utilizzando la query precedente.

Per ogni record visualizzato, è necessario fornire l'ID di categoria alla query. Tale operazione può essere eseguita scrivendo una piccola porzione di codice che ottenga l'ID di categoria del record visualizzato correntemente e lo passi come parametro alla query nel controllo bulletedListDataSource.

Per scrivere il codice per impostare l'ID di categoria

1. Fare clic sul controllo DataList, quindi sulla barra degli strumenti di Proprietà, fare clic su Eventi.

2. Fare doppio clic su ItemDataBound per creare un gestore eventi per quell'evento.

3. Copiare il seguente codice nel gestore.

   If e.Item.ItemType = ListItemType.Item Or _
       e.Item.ItemType = ListItemType.AlternatingItem Then
     Dim ds As SqlDataSource
     ds = CType(e.Item.FindControl("bulletedListDataSource"), _
         SqlDataSource)
     Dim categoryID As String
     categoryID = DataBinder.Eval(e.Item.DataItem, _
         "categoryid").ToString()
     ds.SelectParameters("CategoryID").DefaultValue = _
         categoryID
   End If
   

   if (e.Item.ItemType == ListItemType.Item ||
       e.Item.ItemType == ListItemType.AlternatingItem)
   {
     SqlDataSource ds;
     ds = e.Item.FindControl("bulletedListDataSource")
         as SqlDataSource;
     ds.SelectParameters["CategoryID"].DefaultValue =
         DataBinder.Eval(e.Item.DataItem,
         "categoryid").ToString();
   }
   

   Per ogni record di dati visualizzato, viene generato un evento ItemDataBound e viene fornita l'opportunità di leggere oppure di modificare i dati. Il codice consente di effettuare le seguenti operazioni:

   1. Accertarsi che l'evento si verifichi in associazione a un oggetto ItemTemplate o AlternatingItemTemplate (non a un oggettoSeparatorTemplate oppure a un altro tipo di modello).

   2. Utilizzare il metodo FindControl per ottenere un riferimento all'istanza del controllo SqlDataSource creata all'interno di ciascun modello di elemento.

   3. Ottenere il valore della colonna di dati CategoryID data mediante la valutazione della proprietà DataItem corrente.

   4. Impostare la variabile CategoryID della query con parametri mediante l'impostazione della relativa proprietà DefaultValue nell'insieme SelectParameters.

Esecuzione del test del codice

È ora possibile eseguire il test del codice.

Per eseguire il test del codice per impostare l'ID di categoria

• Premere CTRL+F5 per eseguire la pagina.

  Nel controllo DataList vengono visualizzati tutti i record di ciascuna categoria e per ogni record vengono anche visualizzati i prodotti appartenenti alla categoria in un elenco puntato.

Passaggi successivi

In questa procedura dettagliata è stato illustrato uno scenario semplice e tuttavia completo relativo alla visualizzazione e alla formattazione dei dati con il controllo server Web DataList. Le tecniche e i controlli illustrati nella procedura dettagliata consentono di creare pagine e applicazioni basate sui dati più sofisticate. Può, ad esempio, essere necessario:

• Scrivere il codice che consenta agli utenti di selezionare elementi nel controllo server Web DataList. Per ulteriori informazioni, vedere Procedura: consentire agli utenti la selezione di elementi nei controlli server Web DataList.

• Creare un record master per una relazione Master-Details. Per ulteriori informazioni, vedere Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio.

• Apprendere le modalità di utilizzo della funzione di inserimento degli output nella cache nelle applicazioni di dati utilizzate al fine di migliorare le prestazioni. Per ulteriori informazioni, vedere Procedura dettagliata: utilizzo della memorizzazione nella cache dell'output per migliorare le prestazioni di un sito Web.

Vedere anche

Attività

Procedura: consentire agli utenti la selezione di elementi nei controlli server Web DataList

Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio

Riferimenti

DataList