Filtro master/dettaglio con un elenco a discesa e un oggetto DataList (VB)

Articolo
2024-08-10

In questa esercitazione viene illustrato come visualizzare i report master/dettagli in una singola pagina Web usando DropDownLists per visualizzare i record "master" e un oggetto DataList per visualizzare i "dettagli".

Introduzione

Il report master/dettaglio, creato per la prima volta usando gridView nell'esercitazione precedente filtro master/dettaglio con un elenco a discesa , inizia mostrando alcuni set di record "master". L'utente può quindi eseguire il drill-down in uno dei record master, visualizzando così i "dettagli" del record master. I report master/dettagli sono una scelta ideale per la visualizzazione di relazioni uno-a-molti e per la visualizzazione di informazioni dettagliate da tabelle particolarmente "wide" (quelle con molte colonne). È stato illustrato come implementare report master/dettagli usando i controlli GridView e DetailsView nelle esercitazioni precedenti. In questa esercitazione e nei due successivi verranno rieseminati questi concetti, ma ci si concentrerà sull'uso dei controlli DataList e Repeater.

In questa esercitazione si esaminerà l'uso di un elenco a discesa per contenere i record "master", con i record "dettagli" visualizzati in un oggetto DataList.

Passaggio 1: Aggiunta delle pagine Web dell'esercitazione master/dettaglio

Prima di iniziare questa esercitazione, è necessario prima di tutto aggiungere la cartella e le pagine ASP.NET necessarie per questa esercitazione e le due relazioni master/dettaglio successive che usano i controlli DataList e Repeater. Per iniziare, creare una nuova cartella nel progetto denominato DataListRepeaterFiltering. Aggiungere quindi le cinque pagine ASP.NET seguenti a questa cartella, con tutte le pagine configurate per l'uso della pagina Site.mastermaster :

Default.aspx
FilterByDropDownList.aspx
CategoryListMaster.aspx
ProductsForCategoryDetails.aspx
CategoriesAndProducts.aspx

Creare una cartella DataListRepeaterFiltering e aggiungere l'esercitazione ASP.NET pagine

Figura 1: Creare una DataListRepeaterFiltering cartella e aggiungere l'esercitazione ASP.NET pagine

Aprire quindi la Default.aspx pagina e trascinare il SectionLevelTutorialListing.ascx controllo utente dalla UserControls cartella nell'area di progettazione. Questo controllo utente, creato nell'esercitazione Pagine master e navigazione sito, enumera la mappa del sito e visualizza le esercitazioni della sezione corrente in un elenco puntato.

Figura 2: Aggiungere il SectionLevelTutorialListing.ascx controllo utente a Default.aspx (fare clic per visualizzare l'immagine a dimensione intera)

Per fare in modo che l'elenco puntato visualizzi le esercitazioni master/dettagli che verranno create, è necessario aggiungerle alla mappa del sito. Aprire il Web.sitemap file e aggiungere il markup seguente dopo il markup del nodo della mappa del sito "Visualizzazione di dati con DataList e Repeater":

<siteMapNode
    title="Master/Detail Reports with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterFiltering/Default.aspx">
 
    <siteMapNode
        title="Filter by Drop-Down List"
        description="Filter results using a drop-down list."
        url="~/DataListRepeaterFiltering/FilterByDropDownList.aspx" />
 
    <siteMapNode
        title="Master/Detail Across Two Pages"
        description="Master records on one page, detail records on another."
        url="~/DataListRepeaterFiltering/CategoryListMaster.aspx" />
 
    <siteMapNode
        title="Maser/Detail on One Page"
        description="Master records in the left column, details on the right,
                     both on the same page."
        url="~/DataListRepeaterFiltering/CategoriesAndProducts.aspx" />
 
</siteMapNode>

Aggiornare la mappa del sito per includere le nuove pagine di ASP.NET

Figura 3: Aggiornare la mappa del sito per includere le nuove pagine di ASP.NET

Passaggio 2: Visualizzazione delle categorie in un elenco a discesa

Il report master/dettaglio elenca le categorie in un elenco a discesa, con i prodotti dell'elemento di elenco selezionati visualizzati più avanti nella pagina di un oggetto DataList. La prima attività davanti a noi, quindi, consiste nell'avere le categorie visualizzate in un elenco a discesa. Per iniziare, aprire la FilterByDropDownList.aspx pagina nella DataListRepeaterFiltering cartella e trascinare dropDownList dalla casella degli strumenti nella finestra di progettazione della pagina. Impostare quindi la proprietà dropDownList ID su Categories. Fare clic sul collegamento Choose Data Source (Scegli origine dati) dallo smart tag dropDownList e creare un nuovo ObjectDataSource denominato CategoriesDataSource.

Figura 4: Aggiungere un nuovo oggettoDataSource denominato CategoriesDataSource (fare clic per visualizzare l'immagine a dimensione intera)

Configurare il nuovo ObjectDataSource in modo che richiami il CategoriesBLL metodo della GetCategories() classe. Dopo aver configurato ObjectDataSource, è comunque necessario specificare il campo dell'origine dati da visualizzare nell'elenco a discesa e quale campo deve essere associato come valore per ogni voce di elenco. Fare in modo che il CategoryName campo sia visualizzato e CategoryID come valore per ogni voce di elenco.

Figura 5: Fare in modo che l'elenco a discesa visualizzi il CategoryName campo e usa CategoryID come valore (fare clic per visualizzare l'immagine a dimensione intera)

A questo punto è disponibile un controllo DropDownList popolato con i record della Categories tabella (tutti realizzati in circa sei secondi). La figura 6 mostra i progressi finora visualizzati tramite un browser.

Figura 6: Elenco a discesa Elenca le categorie correnti (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 2: Aggiunta dell'elenco dati prodotti

L'ultimo passaggio del report master/dettaglio consiste nell'elencare i prodotti associati alla categoria selezionata. A tale scopo, aggiungere un oggetto DataList alla pagina e creare un nuovo OggettoDataSource denominato ProductsByCategoryDataSource. Fare in modo che il ProductsByCategoryDataSource controllo recuperi i dati dal ProductsBLL metodo della GetProductsByCategoryID(categoryID) classe. Poiché questo report master/dettaglio è di sola lettura, scegliere l'opzione (Nessuno) nelle schede INSERT, UPDATE e DELETE.

Figura 7: Selezionare il GetProductsByCategoryID(categoryID) metodo (fare clic per visualizzare l'immagine a dimensione intera)

Dopo aver fatto clic su Avanti, la procedura guidata ObjectDataSource richiede l'origine del valore per il GetProductsByCategoryID(categoryID) parametro del categoryID metodo. Per usare il valore dell'elemento DropDownList selezionato categories , impostare Origine parametro su Control e ControlID su Categories.

Figura 8: Impostare il categoryID parametro sul valore dell'elenco Categories a discesa (fare clic per visualizzare l'immagine a dimensione intera)

Al termine della procedura guidata Configura origine dati, Visual Studio genererà automaticamente un ItemTemplate oggetto per DataList che visualizza il nome e il valore di ogni campo dati. È possibile migliorare DataList per usare invece un oggetto ItemTemplate che visualizza solo il nome, la categoria, il fornitore, la quantità per unità e il prezzo insieme a un SeparatorTemplate elemento che inserisce un <hr> elemento tra ogni elemento. Userò da ItemTemplate un esempio nell'esercitazione Visualizzazione dei dati con l'esercitazione Controlli DataList e Repeater, ma è possibile usare qualsiasi markup del modello che trovi più accattivante visivamente.

Dopo aver apportato queste modifiche, il markup di DataList e objectDataSource dovrebbe essere simile al seguente:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ProductsByCategoryDataSource" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label ID="ProductNameLabel" runat="server"
                Text='<%# Eval("ProductName") %>' />
        </h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
    <SeparatorTemplate>
        <hr />
    </SeparatorTemplate>
</asp:DataList>
 
<asp:ObjectDataSource ID="ProductsByCategoryDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsByCategoryID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Categories" Name="categoryID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

Dedicare un attimo a controllare lo stato di avanzamento in un browser. Quando si visita la pagina per la prima volta, i prodotti appartenenti alla categoria selezionata (Bevande) vengono visualizzati (come illustrato nella figura 9), ma la modifica dell'elenco a discesa non aggiorna i dati. Ciò è dovuto al fatto che deve verificarsi un postback affinché DataList venga aggiornato. A tale scopo, è possibile impostare la proprietà di DropDownList AutoPostBack su true o aggiungere un controllo Web Button alla pagina. Per questa esercitazione si è scelto di impostare la proprietà dropDownList AutoPostBack su true.

Le figure 9 e 10 illustrano il report master/dettaglio in azione.

Figura 9: Quando si visita la pagina, vengono visualizzati i prodotti per bevande (fare clic per visualizzare l'immagine a dimensione intera)

Figura 10: La selezione di un nuovo prodotto (produce) causa automaticamente un postback, aggiornando l'elenco dati (fare clic per visualizzare l'immagine a dimensione intera)

Aggiunta di un elemento elenco "-- Scegliere una categoria --"

Quando si visita per la prima volta la pagina, FilterByDropDownList.aspx la prima voce dell'elenco DropDownList (Bevande) viene selezionata per impostazione predefinita, mostrando i prodotti per le bevande in DataList. Nell'esercitazione Filtro master/dettaglio con un elenco a discesa è stata aggiunta un'opzione "-- Scegliere una categoria --" all'elenco a discesa selezionato per impostazione predefinita e, quando selezionato, visualizzati tutti i prodotti nel database. Tale approccio è stato gestibile quando si elencano i prodotti in un controllo GridView, poiché ogni riga di prodotto ha richiesto una piccola quantità di spazio sullo schermo. Con DataList, tuttavia, le informazioni di ogni prodotto utilizzano un blocco molto più grande dello schermo. Aggiungiamo comunque un'opzione "-- Scegli una categoria --" e l'opzione è selezionata per impostazione predefinita, ma invece di visualizzare tutti i prodotti quando selezionata, è possibile configurarla in modo che non mostri prodotti.

Per aggiungere una nuova voce di elenco all'elenco a discesa, passare alla Finestra Proprietà e fare clic sui puntini di sospensione nella Items proprietà . Aggiungere una nuova voce di elenco con "Text-- Scegliere una categoria --" e .Value 0

Aggiungi un

Figura 11: Aggiungere un elemento elenco "-- Scegliere una categoria --"

In alternativa, è possibile aggiungere la voce di elenco aggiungendo il markup seguente all'elenco a discesa:

<asp:DropDownList ID="categories" runat="server" AutoPostBack="True"
    DataSourceID="CategoriesDataSource" DataTextField="CategoryName"
    DataValueField="CategoryID" EnableViewState="False">
 
    <asp:ListItem Value="0">-- Choose a Category --</asp:ListItem>
 
</asp:DropDownList>

Inoltre, è necessario impostare il controllo AppendDataBoundItems DropDownList su true perché se è impostato su false (impostazione predefinita), quando le categorie sono associate all'oggetto DropDownList da ObjectDataSource sovrascriveranno eventuali elementi di elenco aggiunti manualmente.

Impostare la proprietà AppendDataBoundItems su True

Figura 12: Impostare la AppendDataBoundItems proprietà su True

Il motivo per cui è stato scelto il valore per l'elemento di elenco "-- Scegliere una categoria --" è dovuto al fatto che non sono presenti categorie nel sistema con un valore 0 0, quindi non verrà restituito alcun record di prodotto quando viene selezionato l'elemento di elenco "-- Scegliere una categoria --". Per confermare questo problema, visitare la pagina tramite un browser. Come illustrato nella figura 13, quando si visualizza inizialmente la pagina, la voce di elenco "-- Scegliere una categoria --" è selezionata e non vengono visualizzati prodotti.

Figura 13: Quando l'elemento elenco "-- Scegliere una categoria --" è selezionato, non viene visualizzato alcun prodotto (fare clic per visualizzare l'immagine a dimensione intera)

Se si preferisce visualizzare tutti i prodotti quando è selezionata l'opzione "-- Scegliere una categoria --", usare invece un valore .-1 Il lettore astuto ricorderà che di nuovo nell'esercitazione Master/Detail Filtering With a DropDownList è stato aggiornato il ProductsBLL metodo della GetProductsByCategoryID(categoryID) classe in modo che, se è stato passato un categoryID valore di -1 , tutti i record di prodotto sono stati restituiti.

Riepilogo

Quando si visualizzano dati gerarchici, spesso è utile presentare i dati usando report master/dettagli, da cui l'utente può iniziare a usare i dati dalla parte superiore della gerarchia ed eseguire il drill-down nei dettagli. In questa esercitazione è stata esaminata la creazione di un semplice report master/dettagli che mostra i prodotti di una categoria selezionata. Questa operazione è stata eseguita usando un elenco a discesa per l'elenco di categorie e un oggetto DataList per i prodotti appartenenti alla categoria selezionata.

Nell'esercitazione successiva si esaminerà la separazione dei record master e dei dettagli in due pagine. Nella prima pagina verrà visualizzato un elenco di record "master", con un collegamento per visualizzare i dettagli. Facendo clic sul collegamento, l'utente verrà portato alla seconda pagina, che visualizzerà i dettagli per il record master selezionato.

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 all'indirizzo mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato all'indirizzo http://ScottOnWriting.NET.

Grazie speciali a...

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

Precedente Successivo

Condividi tramite