Filtro master/dettaglio tra due pagine con un controllo GridView (VB)

di Scott Mitchell

Scarica il PDF

In questa esercitazione verrà implementato questo modello usando un controllo GridView per elencare i fornitori nel database. Ogni riga del fornitore in GridView conterrà un collegamento Visualizza prodotti che, quando si fa clic, porterà l'utente a una pagina separata in cui sono elencati i prodotti per il fornitore selezionato.

Introduzione

Nelle due esercitazioni precedenti è stato illustrato come visualizzare i report master/dettagli in una singola pagina Web usando DropDownLists per visualizzare i record "master" e un controllo GridView o DetailsView per visualizzare i "dettagli". Un altro modello comune usato per i report master/dettagli consiste nell'avere i record master in una pagina Web e i dettagli visualizzati in un altro. Un sito Web del forum, come i forum ASP.NET, è un ottimo esempio di questo modello in pratica. I forum ASP.NET sono costituiti da un'ampia gamma di forum Introduzione, Web Forms, controlli presentazione dati e così via. Ogni forum è composto da molti thread e ogni thread è composto da un numero di post. Nella home page dei forum ASP.NET sono elencati i forum. Facendo clic su un forum si fa clic su una ShowForum.aspx pagina, che elenca i thread per il forum. Analogamente, facendo clic su un thread si passa a ShowPost.aspx, che visualizza i post per il thread su cui è stato fatto clic.

In questa esercitazione verrà implementato questo modello usando un controllo GridView per elencare i fornitori nel database. Ogni riga del fornitore in GridView conterrà un collegamento Visualizza prodotti che, quando si fa clic, porterà l'utente a una pagina separata in cui sono elencati i prodotti per il fornitore selezionato.

Passaggio 1: AggiuntaSupplierListMaster.aspxdi pagine eProductsForSupplierDetails.aspxallaFilteringcartella

Quando si definisce il layout di pagina nella terza esercitazione è stata aggiunta una serie di pagine "iniziali" nelle BasicReportingcartelle , Filteringe CustomFormatting . Tuttavia, non è stata aggiunta una pagina iniziale per questa esercitazione in quel momento, quindi è necessario dedicare qualche minuto per aggiungere due nuove pagine alla Filtering cartella: SupplierListMaster.aspx e ProductsForSupplierDetails.aspx. SupplierListMaster.aspx verranno elencati i record "master" (i fornitori) mentre ProductsForSupplierDetails.aspx visualizzeranno i prodotti per il fornitore selezionato.

Quando si creano queste due nuove pagine, è necessario associarle alla Site.master pagina master.

Figura 1: Aggiungere le SupplierListMaster.aspx pagine e ProductsForSupplierDetails.aspx alla Filtering cartella

Inoltre, quando si aggiungono nuove pagine al progetto, assicurarsi di aggiornare il file della mappa del sito, Web.sitemap, di conseguenza. Per questa esercitazione è sufficiente aggiungere la SupplierListMaster.aspx pagina alla mappa del sito usando il contenuto XML seguente come elemento figlio dell'elemento Filtering Reports <siteMapNode> :

<siteMapNode url="~/Filtering/SupplierListMaster.aspx"
  title="Master/Detail Across Two Pages"
  description="Master records on one page, detail records on another." />

Passaggio 2: Visualizzazione dell'elenco fornitori inSupplierListMaster.aspx

Con le SupplierListMaster.aspx pagine e ProductsForSupplierDetails.aspx create, il passaggio successivo consiste nel creare gridView dei fornitori in SupplierListMaster.aspx. Aggiungere un controllo GridView alla pagina e associarlo a un nuovo ObjectDataSource. Questo ObjectDataSource deve usare il SuppliersBLL metodo della GetSuppliers() classe per restituire tutti i fornitori.

Figura 2: Selezionare la classe (fare clic per visualizzare l'immagineSuppliersBLL a dimensione intera)

Figura 3: Configurare ObjectDataSource per l'uso del metodo (fare clic per visualizzare l'immagineGetSuppliers() a dimensione intera)

È necessario includere un collegamento denominato Visualizza prodotti in ogni riga di GridView che, quando si fa clic, porta l'utente a ProductsForSupplierDetails.aspx passare il valore della SupplierID riga selezionata tramite la stringa di query. Ad esempio, se l'utente fa clic sul collegamento Visualizza prodotti per il fornitore di Tokyo Traders (che ha un SupplierID valore pari a 4), deve essere inviato a ProductsForSupplierDetails.aspx?SupplierID=4.

A tale scopo, aggiungere un oggetto HyperLinkField a GridView, che aggiunge un collegamento ipertestuale a ogni riga gridView. Per iniziare, fare clic sul collegamento Modifica colonne dallo smart tag di GridView. Selezionare quindi HyperLinkField nell'elenco in alto a sinistra e fare clic su Aggiungi per includere HyperLinkField nell'elenco dei campi di GridView.

Figura 4: Aggiungere un hyperLinkField a GridView (fare clic per visualizzare l'immagine a dimensione intera)

HyperLinkField può essere configurato in modo da usare gli stessi valori di testo o URL del collegamento in ogni riga di GridView oppure basare questi valori sui valori dei dati associati a ogni riga specifica. Per specificare un valore statico in tutte le righe, utilizzare le proprietà o NavigateUrl di Text HyperLinkField. Poiché si vuole che il testo del collegamento sia lo stesso per tutte le righe, impostare la proprietà HyperLinkField Text su Visualizza prodotti.

Figura 5: Impostare la proprietà di HyperLinkField su Text Visualizza prodotti (fare clic per visualizzare l'immagine a dimensione intera)

Per impostare i valori di testo o URL in base ai dati sottostanti associati alla riga GridView, specificare i campi dati da cui devono essere estratti i valori di testo o URL nelle DataTextField proprietà o DataNavigateUrlFields . DataTextField può essere impostato solo su un singolo campo dati; DataNavigateUrlFields, tuttavia, può essere impostato su un elenco delimitato da virgole di campi dati. Spesso è necessario basare il testo o l'URL su una combinazione del valore del campo dati della riga corrente e di un markup statico. In questa esercitazione, ad esempio, si vuole che l'URL dei collegamenti di HyperLinkField sia ProductsForSupplierDetails.aspx?SupplierID=supplierID, dove supplierID è il valore di ogni riga di SupplierID GridView. Si noti che in questo caso sono necessari valori statici e basati sui dati: la ProductsForSupplierDetails.aspx?SupplierID= parte dell'URL del collegamento è statica, mentre la supplierID parte è basata sui dati perché il relativo valore è il valore di SupplierID ogni riga.

Per indicare una combinazione di valori statici e basati sui dati, usare le DataTextFormatString proprietà e DataNavigateUrlFormatString . In queste proprietà immettere il markup statico in base alle esigenze e quindi usare il marcatore {0} in cui si vuole visualizzare il valore del campo specificato nelle DataTextField proprietà o DataNavigateUrlFields . Se la DataNavigateUrlFields proprietà include più campi specificati, utilizzare {0} dove si desidera inserire il primo valore del campo, {1} per il secondo valore del campo e così via.

Applicando questa operazione all'esercitazione, è necessario impostare la DataNavigateUrlFields proprietà su SupplierID, poiché si tratta del campo dati il cui valore è necessario personalizzare per riga e la DataNavigateUrlFormatString proprietà su ProductsForSupplierDetails.aspx?SupplierID={0}.

Figura 6: Configurare HyperLinkField per includere l'URL di collegamento appropriato in base a (fare clic per visualizzare l'immagineSupplierID a dimensione intera)

Dopo aver aggiunto HyperLinkField, è possibile personalizzare e riordinare i campi di GridView. Il markup seguente mostra GridView dopo aver apportato alcune personalizzazioni secondarie a livello di campo.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="SupplierID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <asp:HyperLinkField DataNavigateUrlFields="SupplierID"
          DataNavigateUrlFormatString=
          "ProductsForSupplierDetails.aspx?SupplierID={0}"
            Text="View Products" />
        <asp:BoundField DataField="CompanyName"
            HeaderText="Company" SortExpression="CompanyName" />
        <asp:BoundField DataField="City" HeaderText="City"
            SortExpression="City" />
        <asp:BoundField DataField="Country"
            HeaderText="Country" SortExpression="Country" />
    </Columns>
</asp:GridView>

Dedicare qualche minuto alla visualizzazione della SupplierListMaster.aspx pagina tramite un browser. Come illustrato nella figura 7, la pagina elenca attualmente tutti i fornitori, incluso un collegamento Visualizza prodotti. Facendo clic sul collegamento Visualizza prodotti si passerà a ProductsForSupplierDetails.aspx, passando l'oggetto del SupplierID fornitore nella stringa di query.

Figura 7: Ogni riga fornitore contiene un collegamento Visualizza prodotti (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 3: Presentazione dei prodotti del fornitore inProductsForSupplierDetails.aspx

A questo punto la SupplierListMaster.aspx pagina invia utenti a ProductsForSupplierDetails.aspx, passando il fornitore SupplierID selezionato nella stringa di query. Il passaggio finale dell'esercitazione consiste nel visualizzare i prodotti in un controllo GridView il ProductsForSupplierDetails.aspx cui SupplierID valore è uguale a SupplierID passato tramite la stringa di query. A tale scopo, aggiungere un controllo GridView alla ProductsForSupplierDetails.aspx pagina usando un nuovo controllo ObjectDataSource denominato ProductsBySupplierDataSource che richiama il GetProductsBySupplierID(supplierID) metodo dalla ProductsBLL classe .

Figura 8: Aggiungere un nuovo objectDataSource denominato ProductsBySupplierDataSource (fare clic per visualizzare l'immagine a dimensione intera)

Figura 9: Selezionare la classe (fare clic per visualizzare l'immagineProductsBLL a dimensione intera)

Figura 10: Fare clic su ObjectDataSource Invoke sul metodo (fare clic per visualizzare l'immagineGetProductsBySupplierID(supplierID) a dimensione intera)

Il passaggio finale della procedura guidata Configura origine dati richiede di specificare l'origine del GetProductsBySupplierID(supplierID) parametro del supplierID metodo. Per usare il valore querystring, impostare Origine parametro su QueryString e immettere il nome del valore querystring da usare nella casella di testo QueryStringField (SupplierID).

Figura 11: Popolare il valore del supplierID parametro dal SupplierID valore querystring (fare clic per visualizzare l'immagine a dimensione intera)

Questo è tutto ciò che occorre fare. La figura 12 mostra la ProductsForSupplierDetails.aspx pagina quando viene visitata facendo clic sul collegamento Tokyo Traders da SupplierListMaster.aspx.

Figura 12: Vengono visualizzati i prodotti forniti da Tokyo Traders (fare clic per visualizzare l'immagine a dimensione intera)

Visualizzazione delle informazioni sui fornitori inProductsForSupplierDetails.aspx

Come illustrato nella figura 12, la ProductsForSupplierDetails.aspx pagina elenca semplicemente i prodotti forniti dall'oggetto SupplierID specificato nella stringa di query. Qualcuno inviato direttamente a questa pagina, tuttavia, non saprebbe che la figura 12 mostra i prodotti di Tokyo Traders. Per risolvere questo problema, è possibile visualizzare anche le informazioni sui fornitori in questa pagina.

Per iniziare, aggiungere un controllo FormView sopra i prodotti GridView. Creare un nuovo controllo ObjectDataSource denominato SuppliersDataSource che richiama il SuppliersBLL metodo della GetSupplierBySupplierID(supplierID) classe.

Figura 13: Selezionare la classe (fare clic per visualizzare l'immagineSuppliersBLL a dimensione intera)

Figura 14: Fare clic su ObjectDataSource Invoke sul metodo (fare clic per visualizzare l'immagineGetSupplierBySupplierID(supplierID) a dimensione intera)

Come per ProductsBySupplierDataSource, al supplierID parametro è assegnato il valore della SupplierID stringa di query.

Figura 15: Popolare il valore del supplierID parametro dal SupplierID valore querystring (fare clic per visualizzare l'immagine a dimensione intera)

Quando si associa FormView a ObjectDataSource nella visualizzazione Progettazione, Visual Studio creerà automaticamente i controlli Web , InsertItemTemplatee EditItemTemplate di ItemTemplateFormView con i controlli Web Label e TextBox per ognuno dei campi dati restituiti da ObjectDataSource. Poiché vogliamo solo visualizzare le informazioni sui fornitori, è possibile rimuovere e InsertItemTemplateEditItemTemplate. Modificare quindi ItemTemplate in modo che visualizzi il nome della società del fornitore in un <h3> elemento e l'indirizzo, la città, il paese e il numero di telefono sotto il nome della società. In alternativa, è possibile impostare manualmente il controllo FormView DataSourceID e creare il ItemTemplate markup, come è stato fatto nell'esercitazione "Visualizzazione dei dati con ObjectDataSource".

Dopo aver modificato il markup dichiarativo di FormView, dovrebbe essere simile al seguente:

<asp:FormView ID="FormView1" runat="server" DataKeyNames="SupplierID"
    DataSourceID="suppliersDataSource" EnableViewState="False">
    <ItemTemplate>
        <h3><%# Eval("CompanyName") %></h3>
        <p>
            <asp:Label ID="AddressLabel" runat="server"
                Text='<%# Bind("Address") %>'></asp:Label><br />
            <asp:Label ID="CityLabel" runat="server"
                Text='<%# Bind("City") %>'></asp:Label>,
            <asp:Label ID="CountryLabel" runat="server"
                Text='<%# Bind("Country") %>'></asp:Label><br />
            Phone:
            <asp:Label ID="PhoneLabel" runat="server"
                Text='<%# Bind("Phone") %>'></asp:Label>
        </p>
    </ItemTemplate>
</asp:FormView>

La figura 16 mostra una schermata della ProductsForSupplierDetails.aspx pagina dopo l'inserimento delle informazioni sul fornitore descritte in precedenza.

Figura 16: L'elenco dei prodotti include un riepilogo sul fornitore (fare clic per visualizzare l'immagine a dimensione intera)

Applicazione dei tocco finali per l'interfacciaProductsForSupplierDetails.aspxutente

Per migliorare l'esperienza utente per questo report, è necessario apportare alcune aggiunte alla ProductsForSupplierDetails.aspx pagina. Attualmente l'unico modo in cui un utente può tornare dalla ProductsForSupplierDetails.aspx pagina all'elenco dei fornitori consiste nel fare clic sul pulsante Indietro del browser. Aggiungere ora un controllo HyperLink alla ProductsForSupplierDetails.aspx pagina che si collega a SupplierListMaster.aspx, offrendo un altro modo per consentire all'utente di tornare all'elenco master.

Figura 17: Aggiungere un controllo HyperLink a cui ripristinare SupplierListMaster.aspx l'utente (fare clic per visualizzare l'immagine a dimensione intera)

Se l'utente fa clic sul collegamento Visualizza prodotti per un fornitore che non ha prodotti, ProductsBySupplierDataSource ObjectDataSource in ProductsForSupplierDetails.aspx non restituirà alcun risultato. Il controllo GridView associato a ObjectDataSource non eseguirà il rendering di alcun markup, generando un'area vuota nella pagina nel browser dell'utente. Per comunicare più chiaramente all'utente che non ci sono prodotti associati al fornitore selezionato, è possibile impostare la proprietà di EmptyDataText GridView sul messaggio che si desidera visualizzare quando si verifica una situazione di questo tipo. Ho impostato questa proprietà su "There are no products provided by this supplier'"

Per impostazione predefinita, tutti i fornitori nel database Northwinds forniscono almeno un prodotto. Tuttavia, per questa esercitazione ho modificato manualmente la Products tabella in modo che il fornitore Escargots Libertyx non sia più associato ad alcun prodotto. La figura 18 mostra la pagina dei dettagli per Escargots Libertyx dopo aver apportato questa modifica.

Figura 18: Gli utenti sono informati che il fornitore non fornisce prodotti (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

Anche se i report master/dettagli possono visualizzare sia i record master che i record di dettaglio in una singola pagina, in molti siti Web sono separati tra due pagine Web. In questa esercitazione è stato illustrato come implementare un report master/dettaglio di questo tipo con i fornitori elencati in un controllo GridView nella pagina Web "master" e i prodotti associati elencati nella pagina "dettagli". Ogni riga del fornitore nella pagina Web master contiene un collegamento alla pagina dei dettagli passata lungo il valore della SupplierID riga. Tali collegamenti specifici di riga possono essere facilmente aggiunti usando l'HyperLinkField di GridView.

Nella pagina dei dettagli il recupero di tali prodotti per il fornitore specificato è stato eseguito richiamando il ProductsBLL metodo della GetProductsBySupplierID(supplierID) classe. Il valore del supplierID parametro è stato specificato in modo dichiarativo usando la stringa di query come origine del parametro. Abbiamo anche esaminato come visualizzare i dettagli del fornitore nella pagina dei dettagli usando un controllo FormView.

La prossima esercitazione è quella finale per i report master/dettagli. Verrà illustrato come visualizzare un elenco di prodotti in un controllo GridView in cui ogni riga ha un pulsante Seleziona. Facendo clic sul pulsante Seleziona verranno visualizzati i dettagli del prodotto in un controllo DetailsView nella stessa pagina.

Buon programmatori!

Informazioni sull'autore

Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, lavora con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, formatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2.0 in 24 ore. Può essere raggiunto all'indirizzo mitchell@4GuysFromRolla.com. o tramite il suo blog, disponibile all'indirizzo http://ScottOnWriting.NET.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori utili. Il revisore principale di questa esercitazione era Hilton Giesenow. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, rilasciami una riga in mitchell@4GuysFromRolla.com.