Condividi tramite

Procedura dettagliata: creazione di un controllo GridView nidificato

  • Articolo

Aggiornamento: novembre 2007

Nel controllo GridView le righe di dati sono visualizzate in una griglia (una tabella HTML), in cui ogni riga di dati corrisponde a una riga della griglia. In questa procedura dettagliata viene illustrato come estendere la funzionalità del controllo GridView, affinché le singole righe della griglia possano visualizzare i dati provenienti da una tabella di dati correlati. Verranno quindi mostrati i dati correlati in un controllo GridView nidificato, ovvero il controllo GridView all'interno della riga della griglia del controllo padre GridView.

Un esempio di dati nidificati potrebbe essere un controllo GridView nel quale è visualizzato un elenco di clienti e dove in ogni riga è incluso un ulteriore controllo GridView nel quale sono visualizzati gli ordini relativi al cliente stesso.

In questa procedura dettagliata, entrambi i controlli GridView utilizzano i controlli SqlDataSource per recuperare i dati dall'origine dati.

Nella procedura vengono illustrate le seguenti operazioni:

  • Connessione a un database SQL Server in Microsoft Visual Web Developer.

  • Utilizzo del controllo SqlDataSource per gestire l'accesso e l'associazione ai dati.

  • Visualizzazione dei dati restituiti dal database nel controllo GridView.

  • Creazione di una classe TemplateField con controlli nidificati da visualizzare nel controllo GridView.

  • Personalizzazione dinamica della visualizzazione di ogni riga in base alle condizioni in fase di esecuzione.

  • Memorizzazione dei dati nella cache del controllo SqlDataSource per ridurre le richieste al database (facoltativo).

Prerequisiti

Per completare questa procedura dettagliata, è necessario disporre dei seguenti elementi:

  • Visual Web Developer (Visual Studio).

  • 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.

  • 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.

Creazione del sito Web

Se è già stato creato un sito Web in Visual Web Developer completando la Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer, è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla seguente procedura.

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. Scegliere Sito Web ASP.NET in Modelli Visual Studio installati.

  4. Nella casella Percorso, selezionare File system; nella seconda, immettere il nome della cartella in cui salvare le pagine del sito Web.

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

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

  6. Scegliere OK.

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

Aggiunta di un'origine dati per il controllo GridView

Per visualizzare i dati in una pagina Web ASP.NET, è necessario disporre degli elementi riportati di seguito.

  • Connessione a un'origine dati (ad esempio, un database). Nella procedura riportata di seguito, verrà creata una connessione al database SQL Server Northwind.

  • Un controllo nella pagina per visualizzare i dati.

Nella procedura riportata di seguito, verranno visualizzati i dati in un controllo GridView. Il controllo GridView ottiene i relativi dati dal controllo SqlDataSource.

Per aggiungere un'origine dati per il controllo GridView

  1. Aprire la pagina Default.aspx oppure passare a questa pagina.

  2. Passare alla visualizzazione Progettazione.

  3. Dal gruppo Dati della Casella degli strumenti trascinare un controllo SqlDataSource nella pagina.

    Se lo smart tag Attività SqlDataSource non viene visualizzato, fare clic con il pulsante destro del mouse sul controllo SqlDataSource, quindi scegliere Mostra smart tag.

  4. Scegliere Configura origine dati dal pannello Attività SqlDataSource.

    Viene visualizzata la procedura guidata Configura origine dati.

  5. Fare clic su Nuova connessione.

    Verrà visualizzata la finestra di dialogo Aggiungi connessione.

    • Se nell'elenco Origine dati non è visualizzato Microsoft SQL Server (SqlClient), fare clic su Cambia e nella finestra di dialogo Modifica origine dati selezionare Microsoft SQL Server.

    • Se viene visualizzata la finestra di dialogo Scegli origine dati invece della finestra di dialogo Proprietà di connessione, 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 su Continua.

  6. Nella casella di testo Nome server della pagina Aggiungi connessione digitare il nome del computer su cui è in esecuzione il database Northwind di SQL Server.

  7. Per la sezione Accesso al server selezionare l'opzione appropriata per accedere al database di SQL Server in esecuzione (sicurezza integrata o password e ID specifici). Se necessario, immettere un nome utente e una password.

  8. Se è stata immessa una password, selezionare la casella di controllo Salva password.

  9. Fare clic su Seleziona o immetti nome di database, quindi immettere Northwind.

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

  11. Nella procedura guidata Configura origine dati fare clic su Avanti.

  12. Verificare che la casella di controllo Sì, salva la connessione con nome sia selezionata.

  13. Assegnare alla connessione il nome StringaConnessioneNorthwind, quindi fare clic su Avanti.

  14. Nel passaggio della procedura guidata Configura istruzione Select selezionare Specificare le colonne di una tabella o vista.

  15. Nella casella di riepilogo Nome selezionare Customers.

  16. Nel riquadro Colonne, selezionare CustomerID e CompanyName.

  17. Scegliere Avanti.

  18. Scegliere Fine.

Aggiunta di un controllo GridView per la visualizzazione dei dati

Dopo aver configurato un'origine dati dalla quale recuperare i dati, è necessario aggiungere un controllo nella pagina per visualizzare i dati.

Nella procedura riportata di seguito, verranno visualizzati i dati in un controllo GridView. Il controllo GridView ottiene i relativi dati dal controllo SqlDataSource aggiunto in precedenza.

Per aggiungere e configurare un controllo GridView per la visualizzazione dei dati

  1. Verificare di essere in visualizzazione Progettazione nella pagina Default.aspx.

  2. Trascinare un controllo GridView dal gruppo Dati della Casella degli strumenti nella pagina.

  3. Selezionare il controllo SqlDataSource aggiunto precedentemente, ovvero SqlDataSource1, nella casella di riepilogo Scegli origine dati del menu GridView Tasks.

  4. Selezionare la casella di controllo Attiva paging.

  5. Nella finestra Proprietà, espandere la proprietà RowStyle per il controllo GridView, quindi impostare la proprietà VerticalAlign su Top. Questa operazione consente di allineare il testo della riga della griglia in cima alle celle, visto che nella griglia nidificata verranno visualizzate più righe.

Aggiunta di un controllo GridView nidificato per la visualizzazione di dati correlati

A questo punto è necessario creare un'origine dati e un controllo GridView nidificati per visualizzare i dati correlati in ogni riga. A tale scopo, verranno effettuate le seguenti operazioni:

Per aggiungere e configurare un controllo GridView nidificato per la visualizzazione dei dati

  1. Verificare di essere in visualizzazione Progettazione nella pagina Default.aspx.

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

  3. Fare clic su Modifica colonne.

    Viene visualizzata la finestra di dialogo Campi.

  4. Nel riquadro Campi disponibili, selezionare TemplateField, quindi fare clic su Aggiungi.

  5. Nel pannello proprietà di TemplateField impostare HeaderText su Orders.

  6. Scegliere OK.

  7. Selezionare Modifica modelli nel pannello GridView Tasks.

  8. Selezionare ItemTemplate dalla casella di riepilogo Visualizzazione nel pannello Modalità di modifica modelli.

  9. Dal gruppo Dati della Casella degli strumenti trascinare un controllo SqlDataSource nell'area modificabile della proprietà ItemTemplate.

    Se lo smart tag Attività SqlDataSource non viene visualizzato, fare clic con il pulsante destro del mouse sul controllo SqlDataSource, quindi scegliere Mostra smart tag.

  10. Scegliere Configura origine dati nello smart tag Attività SqlDataSource.

    Viene visualizzata la procedura guidata Configura origine dati.

  11. Nel passaggio Seleziona connessione dati selezionare la connessione StringaConnessioneNorthwind creata in precedenza, quindi scegliere Avanti.

  12. Nel passaggio della procedura guidata Configura istruzione Select selezionare Specificare le colonne di una tabella o vista.

  13. Selezionare Orders dall'elenco Nome.

  14. Nel riquadro Colonne, selezionare OrderID e OrderDate.

  15. Fare clic su WHERE per aggiungere un parametro per l'istruzione SELECT.

  16. Nella finestra Aggiungi clausola WHERE, selezionare CustomerID nella casella di riepilogo Colonna.

  17. Nella casella di riepilogo Origine selezionare Nessuna.

  18. Fare clic su Aggiungi.

    In questo modo si crea un parametro di selezione che deve essere impostato sul valore CustomerID in ogni riga associata al controllo GridView padre.

  19. Scegliere OK.

  20. Scegliere Avanti.

  21. Scegliere Fine.

  22. Dal gruppo Dati della Casella degli strumenti trascinare un controllo GridView nell'area modificabile della proprietà ItemTemplate.

    Se lo smart tag GridView Tasks non viene visualizzato, fare clic con il pulsante destro del mouse sul controllo GridView, quindi scegliere Mostra smart tag.

  23. Nella casella di riepilogo Scegli origine dati dello smart tag GridView Tasks selezionare il nome del controllo SqlDataSource nidificato, ovvero SqlDataSource2.

  24. Fare clic con il pulsante destro del mouse sul controllo GridView padre, ovvero GridView1, quindi scegliere Mostra smart tag.

  25. Selezionare Termina modifica modello dal pannello GridView Tasks.

    Nota:

    Il controllo GridView nidificato non è visualizzato nella visualizzazione Progettazione.

  26. Nel pannello Proprietà del controllo GridView1 fare clic sul pulsante Eventi.

  27. Nel campo RowDataBound digitare GridView1_RowDataBound e premere INVIO.

    Viene creato un gestore eventi per l'evento RowDataBound del controllo GridView. L'aspetto del codice sarà quello illustrato nell'esempio riportato di seguito.

    Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

End Sub

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

  28. Aggiungere il codice seguente alla procedura:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.SelectParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.SelectParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    Il valore CustomerID della riga corrente viene recuperato dal codice e impostato come valore del parametro di selezione per il controllo SqlDataSource nidificato, ovvero SqlDataSource2.

  29. Salvare le modifiche ai file.

Test della pagina

È ora possibile eseguire la pagina.

Per procedere alla verifica della pagina

  1. Premere CTRL+F5 per eseguire la pagina.

    Nel controllo GridView sono visualizzate, per ciascun cliente nidificato in ogni riga, le righe di dati della tabella Customers di Northwind con i dati della tabella Orders recuperati dallo stesso database.

  2. Chiudere il browser.

Utilizzo della cache con un controllo GridView nidificato

Arrivati a questo punto della procedura dettagliata, si dispone di una pagina con controlli GridView nidificati. Come appena descritto, la pagina interroga il database una volta per il controllo GridView padre e successivamente per ogni controllo GridView nidificato.

Per ridurre il caricamento del database è possibile modificare la query nidificata affinché, una volta restituite tutte le righe, i risultati vengano memorizzati nella cache e filtrati per per ogni controllo GridView nidificato.

Nota:

Se si utilizzano database di grandi dimensioni, questa soluzione non è pratica. Se i dati vengono recuperati da un database di grandi dimensioni, generare un oggetto dati per recuperare solo le righe necessarie ed eseguire l'associazione utilizzando il controllo ObjectDataSource. Per ulteriori informazioni, vedere Cenni preliminari sul controllo server Web ObjectDataSource.

Per configurare un controllo SqlDataSource nidificato in modo che memorizzi nella cache i risultati delle query

  1. Verificare di essere in modalità Progettazione nella pagina Default.aspx.

  2. Fare clic con il pulsante destro del mouse sul controllo GridView padre, ovvero GridView1, quindi scegliere Modifica modello.

  3. Nella proprietà ItemTemplate della colonna Orders, selezionare il controllo SqlDataSource nidificato, ovvero SqlDataSource2.

  4. Nella finestra Proprietà impostare la proprietà EnableCaching su true.

  5. Impostare la proprietà FilterExpression su CustomerID='{0}'.

  6. Fare clic sul pulsante con i puntini di sospensione () nella proprietà FilterParameters per aprire l'Editor dell'insieme Parameter.

  7. Scegliere Aggiungi parametro nella finestra Editor dell'insieme Parameter.

  8. Immettere CustomerID nella casella Nome.

  9. Scegliere OK.

  10. Fare clic con il pulsante destro del mouse sul controllo SqlDataSource nidificato, ovvero SqlDataSource2, quindi selezionare Mostra smart tag.

  11. Fare clic su Configura origine dati.

  12. Non modificare i dati relativi alla connessione e fare clic su Avanti.

  13. Selezionare Specificare le colonne di una tabella o vista nel passaggio Configura istruzione Select.

  14. Selezionare Orders dalla casella di riepilogo Nome.

  15. Nella sezione Colonne, controllare le colonne OrderID, CustomerID e OrderDate, quindi fare clic su Avanti.

  16. Scegliere Fine.

  17. Quando viene richiesto di aggiornare i campi e le chiavi per il controllo GridView nidificato, ovvero GridView2, scegliere No.

    Le colonne visualizzate dal controllo GridView nidificato non verranno modificate.

    Il controllo SqlDataSource nidificato, ovvero SqlDataSource2, è stato configurato in modo da recuperare tutti i dati dell'ordine dal database e memorizzarli nella cache in locale. Quando il controllo GridView nidificato è associato ai dati, veiene applicato un filtro che consente di visualizzare solo gli ordini relativi al valore CustomerID della riga corrente.

  18. Se si utilizza una pagina code-behind, fare clic con il pulsante destro del mouse su un'area vuota della pagina, quindi fare clic su Visualizza codice.

  19. Modificare il codice per il gestore eventi RowDataBound in modo che corrisponda a quanto riportato di seguito:

    If e.Row.RowType = DataControlRowType.DataRow Then
    Dim s As SqlDataSource = CType(e.Row.FindControl("SqlDataSource2"), SqlDataSource)
    s.FilterParameters(0).DefaultValue = e.Row.Cells(0).Text
End If

    if (e.Row.RowType == DataControlRowType.DataRow)
{
    SqlDataSource s = (SqlDataSource)e.Row.FindControl("SqlDataSource2");
    s.FilterParameters[0].DefaultValue = e.Row.Cells[0].Text;
}

    In questa versione, il valore non viene impostato nell'insieme SelectParameters del controllo SqlDataSource, bensì nell'insieme FilterParameters.

  20. Salvare il file.

Test della pagina

È ora possibile eseguire la pagina.

Per procedere alla verifica della pagina

  1. Premere CTRL+F5 per eseguire la pagina.

    Nel controllo GridView sono visualizzate, per ciascun cliente nidificato in ogni riga, le righe di dati della tabella Customers di Northwind con i dati della tabella Orders recuperati dallo stesso database. Tuttavia, tutti i dati associati al controllo GridView saranno richiesti una volta sola, quando la prima riga è associata ai dati. I dati vengono memorizzati nella cache per essere utilizzati con le righe rimanenti del controllo GridView.

  2. Chiudere il browser.

Passaggi successivi

In questa procedura dettagliata è stato illustrato come è possibile estendere la funzionalità del controllo GridView per visualizzare dati correlati tramite controlli GridView nidificati in una pagina Web ASP.NET. È inoltre possibile estendere le funzionalità dell'applicazione per aggiornare ed eliminare i dati oppure per inserire nuovi record utilizzando un controllo DetailsView o FormView. È inoltre possibile utilizzare controlli diversi da TextBox, ad esempio il controllo DropDownList, per modificare un valore. Per ulteriori informazioni, vedere i seguenti argomenti:

Vedere anche

Attività

Procedura: proteggere le stringhe di connessione durante l'utilizzo dei controlli origine dati

Procedura dettagliata: visualizzazione di un elenco a discesa durante la modifica nel controllo server Web GridView

Procedura dettagliata: accesso ai dati di base nelle pagine Web