Filtro master/dettaglio tra due pagine con GridView (C#)

di Scott Mitchell

Scaricare il PDF

In questa esercitazione verrà implementato questo modello usando 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 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 Introduttivi, Web Form, 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 viene portati a una pagina ShowForum.aspx, che elenca le discussioni per quel 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 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: AggiungereSupplierListMaster.aspxeProductsForSupplierDetails.aspxPagine allaFilteringcartella

Quando si definisce il layout di pagina nella terza esercitazione, sono state aggiunte alcune pagine "iniziali" nelle cartelle BasicReporting, Filtering e CustomFormatting. Tuttavia, non è stata aggiunta una pagina iniziale per questa esercitazione in quel momento, quindi prendere un momento 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 verranno visualizzati 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."
/>

Annotazioni

È possibile automatizzare il processo di aggiornamento del file della mappa del sito quando si aggiungono nuove pagine ASP.NET usando la macro gratuita della mappa del sito di Visual Studio di Scott Allen.

Passaggio 2: Visualizzazione dell'elenco dei fornitori inSupplierListMaster.aspx

Con le pagine SupplierListMaster.aspx e ProductsForSupplierDetails.aspx create, il passaggio successivo consiste nel creare la GridView dei fornitori in SupplierListMaster.aspx. Aggiungi 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'immagine SuppliersBLLa dimensione intera)

Figura 3: Configurare ObjectDataSource per l'uso del metodo (GetSuppliers() a dimensione intera)

È necessario includere un collegamento titolato Visualizza Prodotti in ogni riga GridView che, quando cliccato, porta l'utente a ProductsForSupplierDetails.aspx passando il valore della SupplierID della riga selezionata tramite la stringa query. Ad esempio, se l'utente fa clic sul collegamento Visualizza prodotti per il fornitore Tokyo Traders (con valore SupplierID 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 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 oggetto 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 gridView oppure basare questi valori sui valori di dati associati a ogni riga specifica. Per specificare un valore statico in tutte le righe, utilizzare le proprietà Text o NavigateUrl di 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 Text HyperLinkField su 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 eseguire il pull dei 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 qui 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 l'indicatore {0} nel punto in cui si desidera che appaia il valore del campo specificato nelle proprietà DataTextField o DataNavigateUrlFields. Se la DataNavigateUrlFields proprietà ha 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 SupplierID (fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver aggiunto HyperLinkField, è possibile personalizzare e riordinare i campi di GridView. Il markup seguente mostra GridView dopo aver apportato alcune piccole personalizzazioni 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 istante 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 verrai indirizzato a ProductsForSupplierDetails.aspx, trasmettendo il SupplierID del 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 pagina SupplierListMaster.aspx invia gli utenti a ProductsForSupplierDetails.aspx, passando la stringa di query del fornitore selezionato SupplierID. Il passaggio finale dell'esercitazione consiste nel visualizzare i prodotti in un controllo GridView in ProductsForSupplierDetails.aspx, il cui SupplierID è uguale al valore di SupplierID passato tramite la querystring. 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 oggettoDataSource denominato ProductsBySupplierDataSource (fare clic per visualizzare l'immagine a dimensione intera)

Figura 9: Selezionare la classe (ProductsBLL a dimensione intera)

Figura 10: fare in modo che ObjectDataSource richiami il metodo (GetProductsBySupplierID(supplierID) a dimensione intera)

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

Figura 11: Popolare il valore del parametro da quello della querystring (supplierID)

Ecco fatto! La figura 12 mostra la ProductsForSupplierDetails.aspx pagina quando viene visitata facendo clic sul collegamento Tokyo Traders da SupplierListMaster.aspx.

Figura 12: I prodotti forniti da Tokyo Traders sono visualizzati (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. Qualora qualcuno fosse inviato direttamente a questa pagina, non saprebbe che 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 (SuppliersBLL a dimensione intera)

Figura 14: Impostare ObjectDataSource per invocare il metodo GetSupplierBySupplierID(supplierID) (Fare clic per visualizzare l'immagine a dimensione intera)

Come con ProductsBySupplierDataSource, al parametro supplierID è assegnato il valore del querystring SupplierID.

Figura 15: Popolare il valore del parametro dal valore di querystring supplierID (SupplierID)

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

Dopo queste modifiche, 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 pagina ProductsForSupplierDetails.aspx dopo che sono state incluse le informazioni sopra riportate.

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

Applicazione dei ritocchi finali all'interfaccia utente

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 nuovamente a SupplierListMaster.aspx, fornendo un altro modo per consentire all'utente di tornare all'elenco master.

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

Se l'utente fa clic sul collegamento Visualizza prodotti per un fornitore che non dispone di alcun prodotto, ProductsBySupplierDataSource ObjectDataSource in ProductsForSupplierDetails.aspx non restituirà alcun risultato. GridView associato all'oggetto 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 "Non ci sono prodotti forniti da questo fornitore'"

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 Nouveaux non sia più associato ad alcun prodotto. La figura 18 mostra la pagina dei dettagli per Escargots Nouveaux 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)

Riassunto

I report master/dettaglio possono mostrare sia i record master che quelli di dettaglio in una singola pagina. Tuttavia, in molti siti web, vengono separati e distribuiti su due pagine web. In questa esercitazione è stato illustrato come implementare un report master/dettaglio di questo tipo con i fornitori elencati in gridView nella pagina Web "master" e i prodotti associati elencati nella pagina "dettagli". Ogni riga del fornitore nella pagina web principale conteneva un collegamento alla pagina dei dettagli che trasmetteva il valore della riga SupplierID. Tali collegamenti specifici di riga possono essere aggiunti facilmente usando 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 querystring come origine del parametro. Abbiamo anche esaminato come visualizzare i dettagli del fornitore nella pagina dei dettagli usando un controllo di tipo FormView.

L'esercitazione successiva è quella finale sui 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, ha lavorato 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 a mitchell@4GuysFromRolla.com.

Grazie speciale a

Questa serie di esercitazioni è stata esaminata da molti revisori competenti. Il revisore principale per questo tutorial è stato Hilton Giesenow. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, mandami un messaggio a mitchell@4GuysFromRolla.com.

PrecedenteAvanti