Procedura dettagliata: creazione di pagine Web Master-Details in Visual Studio
Aggiornamento: novembre 2007
In molte pagine Web i dati vengono visualizzati in più modi, spesso mediante l'utilizzo di tabelle correlate. In questa procedura dettagliata vengono illustrati i modi in cui è possibile gestire i dati presenti in più controlli e provenienti da più tabelle, inclusi quelli che dispongono di una relazione Master-Details. Di seguito sono elencate le attività illustrate nella procedura dettagliata:
Compilazione di un elenco a discesa con dati di database.
Creazione di filtri: istruzioni SQL con una clausola WHERE (query con parametri).
Visualizzazione di dati filtrati in base alla selezione dell'utente in un elenco a discesa.
Visualizzazione di dettagli relativi a un record selezionato mediante il controllo DetailsView.
Selezione di un record in una pagina e visualizzazione di un record correlato in un'altra pagina.
Prerequisiti
Per completare questa procedura dettagliata è necessario:
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.
.gif "Nota")
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, potrebbe essere necessario aggiornare la versione di MDAC già installata nel computer. Per ulteriori informazioni, vedere l'articolo " Microsoft Data Access Components (MDAC) Installation" in MSDN Library(informazioni in lingua inglese).
Creazione del sito Web
Se in Visual Web Developer è già stato creato un sito Web (ad esempio, seguendo le procedure indicate in Procedura dettagliata: creazione di una pagina Web di base in Visual Web Developer o Procedura dettagliata: accesso ai dati di base nelle pagine Web), è possibile utilizzare quel sito Web e passare alla sezione successiva. In caso contrario, creare un sito e una pagina Web nuovi attenendosi alla procedura riportata di seguito.
Per creare un sito Web di file system
Aprire Visual Web Developer.
Scegliere Nuovosito Web dal menu File.
Viene visualizzata la finestra di dialogo Nuovo sito Web.
In Modelli Visual Studio installati, fare clic su Sito Web ASP.NET.
Nella casella Percorso, immettere il nome della cartella in cui salvare le pagine del sito Web.
Digitare, ad esempio, il nome cartella C:\WebSites.
Nell'elenco Linguaggio scegliere il linguaggio di programmazione con cui lavorare.
Scegliere OK.
La cartella viene creata insieme a una nuova pagina chiamata Default.aspx.
Connessione a SQL Server
Per utilizzare i dati, è necessario stabilire una connessione a un database. In questa procedura dettagliata, verrà creata una connessione indipendentemente dall'utilizzo delle pagine Web o dei controlli.
Per creare una connessione a SQL Server
Premere CTRL+ALT+S per visualizzare Esplora database. In Esplora database, fare clic con il pulsante destro del mouse su Connessioni dati e scegliere Aggiungi connessione.
Viene visualizzata la finestra di dialogo Modifica origine dati.
Nella finestra di dialogo Modifica origine dati selezionare Microsoft SQL Server, quindi scegliere OK.
Nella finestra di dialogo Aggiungi connessione, effettuare le seguenti operazioni:
Immettere o selezionare il nome del computer su cui è installato SQL Server. Per un server installato nel computer in uso, immettere (local).
Selezionare Usa autenticazione di SQL Server.
Immettere un nome utente e una password.
Selezionare Salva password.
Scegliere Northwind come database.
Fare clic su Test connessione e, dopo avere verificato il funzionamento della connessione, scegliere OK.
La connessione viene aggiunta a Esplora server.
Utilizzo di un elenco a discesa come master
In questa parte della procedura dettagliata, alla pagina verrà aggiunto un elenco a discesa che sarà compilato con un elenco di categorie dalla tabella Northwind. Quando l'utente seleziona una categoria, nella pagina verranno visualizzati i prodotti per quella categoria.
Per creare e compilare un elenco a discesa
Passare alla pagina Default.aspx oppure aprirla. In caso di utilizzo di un sito Web già creato, aggiungere o aprire una pagina da utilizzare in questa procedura dettagliata.
Passare alla visualizzazione Progettazione.
Digitare Select Products By Category nella pagina e formattare il testo come intestazione mediante l'elenco a discesa Formato blocco al di sopra della Casella degli strumenti.
Dal gruppo Standard della Casella degli strumenti, trascinare un controllo DropDownList nella pagina.
In Attività DropDownList, selezionare la casella di controlloAttiva AutoPostBack.
Mediante questa opzione il controllo viene configurato in modo da eseguire il postback della pagina al server ogni volta che si effettua una selezione dall'elenco, piuttosto che attendere il clic dell'utente su un pulsante.
In Attività DropDownList, selezionare Scegli origine dati.
Viene avviata la procedura guidata Scegli origine dati.
Scegliere <Nuova origine dati> dall'elenco Selezionare un'origine dati.
Verrà visualizzata la finestra di dialogo Configurazione guidata origine dati.
Selezionare Database.
Viene specificato che si desidera ottenere dati da un database che supporta le istruzioni SQL inclusi i database di SQL Server e altri database compatibili con OLE-DB.
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.
Scegliere OK.
Nella configurazione guidata Configura origine dati - SqlDataSource1 viene visualizzata una pagina in cui è possibile scegliere una connessione dati.
Dall'elenco a discesa, selezionare la connessione Northwind creata precedentemente nella procedura dettagliata.
Fare clic su Avanti.
Nella procedura guidata viene visualizzata una pagina in cui è possibile scegliere di memorizzare la stringa di connessione nel file di configurazione.
Accertarsi che sia stata selezionata la casella di controllo Sì, salva la connessione con nome e scegliere Avanti. È possibile lasciare il nome predefinito della stringa di connessione.
Nella procedura guidata viene visualizzata una pagina in cui è possibile specificare i dati da recuperare dal database.
Dall'elenco Nome in Opzioni tabella o visualizzazione, scegliere Categorie.
Nella casella Colonne, selezionare CategoryID e CategoryName.
Fare clic su Avanti.
Fare clic su Test query per accertarsi di ottenere i dati desiderati.
Fare clic su Fine.
Viene visualizzata la Configurazione guidata origine dati con il nome del controllo origine dati configurato in precedenza.
Dall'elenco Selezionare un campo dati da visualizzare in DropDownList, fare clic su CategoryName.
Nota:Se nell'elenco non viene visualizzato alcun elemento, fare clic sul collegamento Aggiorna schema.
In questo modo viene specificato che il valore del campo CategoryName sarà visualizzato come testo dell'elemento nell'elenco a discesa.
Dall'elenco Selezionare un campo dati da cui ottenere il valore di DropDownList, selezionare CategoryID.
In questo modo viene specificato che, quando si seleziona un elemento, il campo CategoryID sarà restituito come valore dell'elemento.
Scegliere OK.
Prima di procedere, eseguire il test dell'elenco a discesa.
Per eseguire il test dell'elenco a discesa
Premere CTRL+F5 per eseguire la pagina.
Quando viene visualizzata la pagina, esaminare l'elenco a discesa.
Selezionare una categoria per accertarsi che nell'elenco sia eseguita un'operazione di postback.
È ora possibile visualizzare i prodotti della categoria selezionata nell'elenco a discesa.
Utilizzo di una griglia per visualizzare informazioni dettagliate
È ora possibile estendere la pagina in modo da includere una griglia. Quando l'utente esegue una selezione dall'elenco a discesa delle categorie, nella griglia vengono visualizzati i prodotti per quella categoria.
Per utilizzare una griglia per visualizzare informazioni dettagliate
Passare alla pagina Default.aspx oppure aprirla (o la pagina che si sta utilizzando) e passare alla visualizzazione Progettazione.
Dal gruppo Dati della Casella degli strumenti, trascinare un controllo GridView nella pagina.
Dal menu Attività GridView, nell'elenco Scegli origine dati, selezionare <Nuova origine dati>.
Verrà avviata la Configurazione guidata origine dati.
Selezionare Database.
Nella casella Specificare un ID per l'origine dati viene visualizzato un nome di controllo origine dati predefinito, vale a dire SqlDataSource2. È possibile lasciare inalterato il nome.
Scegliere OK.
Nella procedura guidata viene visualizzata una pagina in cui è possibile selezionare una connessione.
Dall'elenco a discesa delle connessioni, selezionare la connessione creata e memorizzata precedentemente nella procedura dettagliata, vale a dire NorthwindConnectionString.
Fare clic su Avanti.
Nella configurazione guidata Configura origine dati - SqlDataSource2 viene visualizzata una pagina in cui è possibile creare un'istruzione SQL.
Dall'elenco Nome, selezionare Products.
Nella casella Colonne, selezionare ProductID, ProductName e CategoryID.
Fare clic su WHERE.
Viene visualizzata la finestra di dialogo Aggiungi clausola WHERE.
Dall'elenco Colonna, selezionare CategoryID.
Dall'elenco Operatore, selezionare =.
Dall'elenco Origine, selezionare Controllo.
In Proprietà parametro, scegliere DropDownList1 dall'elenco Control ID.
Nei due passaggi precedenti, specificare che la query consentirà di ottenere un valore di ricerca per l'ID categoria dal controllo DropDownList aggiunto in precedenza.
Fare clic su Aggiungi.
Scegliere OK per chiudere la finestra di dialogo Aggiungi clausola WHERE.
Fare clic su Avanti.
Nella pagina Anteprima, fare clic su Test query.
Nella procedura guidata viene visualizzata una finestra di dialogo in cui è richiesto un valore da utilizzare nella clausola WHERE.
Digitare 4 nella casella e scegliere OK.
Vengono visualizzati i record dei prodotti per la categoria 4.
Scegliere Fine per uscire dalla procedura guidata.
È ora possibile eseguire il test della visualizzazione Master-Details.
Per eseguire il test della pagina
Premere CTRL+F5 per eseguire la pagina.
Quando la pagina viene visualizzata, vengono visualizzati anche i prodotti della prima voce dell'elenco a discesa.
Selezionare una categoria dall'elenco e confermare che i prodotti corrispondenti sono stati visualizzati all'interno della griglia.
Visualizzazione di dati Master-Details nella stessa pagina
In questa parte della procedura dettagliata, i dati di tabelle correlate verranno visualizzati in un'unica pagina. I dati della tabella master vengono visualizzati in una griglia in cui gli utenti possono selezionare singole righe. In questo caso, uno o più record dei dettagli vengono visualizzati in un controllo con capacità di scorrimento in un altro punto della pagina. A titolo esemplificativo, la tabella Categories di Northwind verrà utilizzata nella tabella master, mentre la tabella Products sarà utilizzata come tabella dei dettagli.
Per visualizzare record master
Aggiungere una nuova pagina al sito Web e denominarla MasterDetails2.aspx.
Passare alla visualizzazione Progettazione.
Digitare Master/Detail Page nella pagina e formattare il testo come intestazione.
Dal gruppo Dati della Casella degli strumenti, trascinare un controllo GridView nella pagina.
Dal menu Attività GridView, nell'elenco Scegli origine dati, fare clic su <Nuova origine dati> e utilizzare la procedura indicata di seguito per configurare un'origine dati per il controllo GridView:
Selezionare Database.
Scegliere OK.
Dall'elenco a discesa delle connessioni, selezionare la connessione creata e memorizzata precedentemente nella procedura dettagliata, vale a dire NorthwindConnectionString.
Fare clic su Avanti.
Dall'elenco Nome, selezionare Categorie.
Nella casella Colonne, selezionare CategoryID e CategoryName.
Fare clic su Avanti e quindi su Fine.
Selezionare il controllo GridView e nel menu Attività GridView scegliere Modifica colonne.
Verrà visualizzata la finestra di dialogo Campi.
In Campi disponibili, aprire il nodo Command Field, scegliere Seleziona e fare clic su Aggiungi per aggiungerlo all'elenco Campi selezionati.
Nell'elenco Campi selezionati, scegliere Seleziona, quindi nella griglia della proprietà CommandField impostare la proprietà SelectText su Details.
Scegliere OK per chiudere la finestra di dialogo Campi.
Alla griglia viene aggiunta una nuova colonna con un collegamento ipertestuale Details.
Selezionare il controllo GridView e nella finestra Proprietà, accertarsi che la proprietà DataKeyNames sia impostata su CategoryID.
In questo modo viene specificato che quando si seleziona una riga della griglia, in ASP.NET è possibile trovare la chiave del record Categories visualizzato correntemente in un percorso noto.
La griglia consente di selezionare una singola categoria. Il passaggio successivo consiste nell'aggiungere il controllo DetailsView nel quale saranno visualizzati i record di dettaglio, vale a dire i prodotti associati alla categoria selezionata. Nel controllo DetailsView verrà utilizzata una query SQL diversa per ottenere i dati, per cui sarà necessario un altro controllo origine dati.
Per configurare una query in modo da visualizzare i record correlati
Premere INVIO per creare uno spazio vuoto al di sotto del controllo SqlDataSource1 nella pagina MasterDetails2.aspx nella visualizzazione Dettagli.
Dal gruppo Dati della Casella degli strumenti, trascinare un controllo DetailsView nella pagina.
Configurare il controllo per l'utilizzo di un altro controllo origine dati mediante la procedura indicata di seguito:
Scegliere <Nuova origine dati> dall'elenco Scegli origine dati.
Selezionare Database.
Scegliere OK.
Dall'elenco a discesa delle connessioni, selezionare la connessione creata e memorizzata precedentemente nella procedura dettagliata.
Fare clic su Avanti.
Dall'elenco Nome in Opzioni tabella o visualizzazione, scegliere Products.
Nella casella Colonne, selezionare ProductID, ProductName e CategoryID.
Fare clic su WHERE.
Viene visualizzata la finestra di dialogo Aggiungi clausola WHERE.
Dall'elenco Colonna, selezionare CategoryID.
Dall'elenco Operatore, selezionare =.
Dall'elenco Origine, selezionare Controllo.
In Proprietà parametro, scegliere GridView1 dall'elenco Control ID. La query per la seconda griglia otterrà il relativo valore di parametro dalla selezione nella prima griglia.
Fare clic su Aggiungi e scegliere OK chiudere la finestra di dialogo Aggiungi clausola WHERE.
Fare clic su Avanti.
Nella pagina Anteprima, fare clic su Test query.
Nella procedura guidata viene visualizzata una finestra di dialogo in cui è richiesto un valore da utilizzare nella clausola WHERE.
Digitare 4 nella casella e scegliere OK.
Vengono visualizzati i record dei prodotti per la categoria 4.
Fare clic su Fine.
Scegliere Attiva paging dal menu Attività DetailsView.
In tal modo sarà possibile scorrere i singoli record di prodotto.
A scelta, nella finestra Proprietà, aprire il nodo PagerSettings e selezionare un valore Mode diverso.
Per impostazione predefinita, il paging tra i record viene effettuato facendo clic su un numero di pagina; tuttavia, è possibile selezionare le opzioni per l'utilizzo di collegamenti successivi e precedenti.
È ora possibile eseguire il test della combinazione della griglia master e della visualizzazione dei dettagli.
Per eseguire il test della pagina
Premere CTRL+F5 per eseguire la pagina.
Nella griglia, selezionare una categoria.
Mediante il controllo DetailsView viene visualizzato un prodotto associato alla categoria.
Utilizzare i collegamenti del controllo di spostamento DetailsView per passare agli altri prodotti della stessa categoria.
Nella griglia, selezionare una categoria diversa.
Rivedere i prodotti per quella categoria nel controllo DetailsView.
Visualizzazione di dati Master-Details in pagine separate
Nella parte finale della procedura dettagliata, sarà creata un'altra variante: la visualizzazione di record master e dettagli in pagine separate. Anche in questo caso i record master sono visualizzati in una griglia contenente un collegamento ipertestuale per ciascun record. Quando l'utente fa clic sul collegamento ipertestuale, passa a un'altra pagina in cui è possibile visualizzare i record dei dettagli in un controllo DetailsView che consente di visualizzare tutto il record Products.
Per visualizzare record master
Aggiungere una nuova pagina al sito Web e denominarla MasterCustomers.aspx.
Passare alla visualizzazione Progettazione.
Digitare Customers nella pagina e formattare il testo come intestazione.
Dalla cartella Dati della Casella degli strumenti, trascinare un controllo GridView nella pagina.
Dal menu Attività GridView del controllo, scegliere <Nuova origine dati> nell'elenco Scegli origine dati e utilizzare la procedura guidata per effettuare le seguenti operazioni:
Fare clic su Database.
Connettersi al database Northwind (connessione NorthwindConnectionString).
Recuperare le colonne CustomerID, CompanyName e City dalla tabella Customers.
A scelta, nel menu Attività GridView, selezionare la casella di controllo Attiva paging.
Scegliere Modifica colonne dal menu Attività GridView.
Verrà visualizzata la finestra di dialogo Campi.
Selezionare la casella di controllo Genera campi automaticamente.
In Campi disponibili, scegliere HyperLink Field, fare clic su Aggiungi e impostare le seguenti proprietà:
Proprietà
Valore
Text
Details
DatahrefFields
CustomerID
In questo modo si indica che il valore del collegamento ipertestuale viene ottenuto dalla colonna CustomerID.
DatahrefFormatString
DetailsOrders.aspx?custid={0}
Viene creato un collegamento a livello di codice per passare alla pagina DetailsOrders.aspx. Il collegamento passa anche una variabile di stringa di query denominata custid il cui valore sarà inserito mediante la colonna alla quale si fa riferimento nella proprietà DatahrefFields.
Scegliere OK per chiudere la finestra di dialogo Campi.
È ora possibile creare la pagina dei dettagli in cui viene accettato un valore della pagina master.
Per creare la pagina dei dettagli
Aggiungere una nuova pagina al sito Web e denominarla DetailsOrders.aspx.
Passare alla visualizzazione Progettazione.
Digitare Orders nella pagina e formattare il testo come intestazione.
Dalla cartella Dati della Casella degli strumenti, trascinare un controllo GridView nella pagina.
Dal menu Attività GridView del controllo, selezionare <Nuova origine dati>, dall'elenco Scegli origine dati.
Nell'elenco di origini dati, fare clic su Database e scegliere OK.
Dall'elenco delle connessioni, selezionare la connessione creata e memorizzata precedentemente nella procedura dettagliata, vale a dire NorthwindConnectionString.
Fare clic su Avanti.
Nella procedura guidata viene visualizzata una pagina in cui è possibile creare un'istruzione SQL.
Dall'elenco Nome, selezionare Orders.
Nella casella Colonne, selezionare OrderID, CustomerID e OrderDate.
Fare clic su WHERE.
Dall'elenco Colonne, selezionare CustomerID.
Dall'elenco Operatore, selezionare =.
Dall'elenco Origine, selezionare QueryString.
In tal modo si specifica che la query selezionerà i record in base al valore passato nella pagina con la stringa di query.
In Proprietà parametro, nella casella di campo QueryString, digitare custid.
La query otterrà il valore ID cliente dalla stringa di query che viene creata quando si fa clic su un collegamento Details nella pagina MasterCustomers.aspx.
Fare clic su Aggiungi.
Scegliere OK per chiudere la finestra di dialogo Aggiungi clausola WHERE.
Fare clic su Avanti, quindi su Fine per chiudere la procedura guidata.
Dal nodo Standard della Casella degli strumenti, trascinare un controllo Hyperlink nella pagina. Impostarne la proprietà Text su Return to Customers e la proprietà href su MasterCustomers.aspx.
È ora possibile eseguire il test delle pagine Master-Details correlate.
Per eseguire il test delle pagine
Passare alla pagina MasterCustomers.aspx.
Premere CTRL+F5 per eseguire la pagina.
Fare clic sul collegamento Details relativo a un cliente.
Nel browser viene visualizzata la pagina DetailsOrders.aspx con l'ordine relativo al cliente selezionato. Notare che l'URL nella casella dell'indirizzo del browser è:
DetailsOrder.aspx?custid=xdove x è l'ID del cliente selezionato.
Fare clic sul collegamento Return to Customers, selezionare un cliente diverso e fare nuovamente clic sul collegamento Details per verificare che sia possibile visualizzare gli origini per qualunque cliente.
Passaggi successivi
In questa procedura dettagliata sono stati illustrati diversi modi per visualizzare i dati di tabelle correlate. Tutti gli scenari hanno in comune le seguenti caratteristiche: si basano su una query con parametri e i valori del parametro possono essere passati alla query in modo automatico in fase di esecuzione. È possibile sperimentare altri metodi di utilizzo di dati correlati. Può, ad esempio, essere necessario:
Sperimentare parametri che ottengono i relativi valori da altre origini, ad esempio una variabile di sessione o un cookie. Per ulteriori informazioni, vedere Utilizzo di parametri con controlli origine dati.
Aumentare il numero di operazioni possibili con il controllo DetailsView con la seconda parte della procedura dettagliata. Ad esempio, è possibile configurare il controllo in modo da consentire agli utenti di modificare i record di dettaglio. Per informazioni, vedere Procedura dettagliata: modifica e inserimento di dati nelle pagine Web con il controllo server Web DetailsView.