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

di Scott Mitchell

Scarica il PDF

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 un controllo 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 "ampie" (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 esaminati di nuovo questi concetti, ma ci si concentrerà sull'uso dei controlli DataList e Repeater.

In questa esercitazione si esaminerà l'uso di un oggetto DropDownList 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 aggiungere la cartella e ASP.NET pagine necessarie per questa esercitazione e le due operazioni successive con i report master/dettagli usando i controlli DataList e Repeater. Per iniziare, creare una nuova cartella nel progetto denominato DataListRepeaterFiltering. Aggiungere quindi le cinque pagine di 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

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 dei 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>

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 su IDCategories. 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 in DropDownList e quale deve essere associato come valore per ogni elemento dell'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 usi 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 eseguiti in circa sei secondi). La figura 6 mostra lo stato di avanzamento finora visualizzato tramite un browser.

Figura 6: Un Drop-Down Elenchi categorie correnti (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 2: Aggiunta di Products DataList

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 ObjectDataSource denominato ProductsByCategoryDataSource. Chiedere al controllo di recuperare i ProductsByCategoryDataSource 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 l'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 articolo. Userò da ItemTemplate un esempio nell'esercitazione Displaying Data with the DataList and Repeater Controls (Visualizzazione di dati con i controlli DataList e Repeater ), ma è possibile usare qualsiasi markup del modello che trovi più visivamente interessante.

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>

Prenditi un attimo per controllare lo stato di avanzamento in un browser. Quando si visita per la prima volta la pagina, i prodotti appartenenti alla categoria selezionata (Bevande) vengono visualizzati (come illustrato nella figura 9), ma la modifica di DropDownList non aggiorna i dati. Ciò è dovuto al fatto che un postback deve essere eseguito per l'aggiornamento di DataList. A tale scopo, è possibile impostare la proprietà dropDownList su AutoPostBacktrue o aggiungere un controllo Web Button alla pagina. Per questa esercitazione è stato scelto di impostare la proprietà dropDownList su AutoPostBacktrue.

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

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

Figura 10: La selezione di un nuovo prodotto (produce) causa automaticamente un postback, l'aggiornamento dell'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 FilterByDropDownList.aspx pagina, la prima voce di elenco dropDownList (Bevande) viene selezionata per impostazione predefinita, visualizzando i prodotti di bevande in DataList. Nell'esercitazione Filtro master/dettagli con un elenco a discesa è stata aggiunta un'opzione "-- Scegliere una categoria --" all'elenco a discesa selezionato per impostazione predefinita e, quando selezionato, sono visualizzati tutti i prodotti nel database. Un approccio di questo tipo è stato gestibile quando si elencano i prodotti in un controllo GridView, poiché ogni riga di prodotto ha assunto una piccola quantità di spazio sullo schermo. Con DataList, tuttavia, le informazioni di ogni prodotto utilizzano un blocco molto più grande dello schermo. Aggiungere comunque un'opzione "-- Scegliere una categoria --" e selezionarla per impostazione predefinita, ma invece di visualizzare tutti i prodotti quando è selezionata, configurarla in modo che non mostri prodotti.

Per aggiungere una nuova voce di elenco a DropDownList, 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 .Value0

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

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

<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 DropDownList su AppendDataBoundItemstrue perché, se è impostato su false (impostazione predefinita), quando le categorie sono associate a DropDownList da ObjectDataSource sovrascriveranno eventuali elementi di elenco aggiunti manualmente.

Figura 12: Impostare la AppendDataBoundItems proprietà su True

Il motivo per cui è stato scelto il valore 0 per l'elemento di elenco "-- Scegliere una categoria --" è perché nel sistema non sono presenti categorie con un valore 0, pertanto non verrà restituito alcun record di prodotto quando viene selezionata l'opzione "-- Scegliere una categoria --". Per confermarlo, 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 si seleziona l'opzione "-- Scegliere una categoria --", usare invece un valore -1 . Il lettore astuto ricorderà che di nuovo nell'esercitazione Filtro master/dettagli con un oggetto DropDownList è stato aggiornato il ProductsBLL metodo della GetProductsByCategoryID(categoryID) classe in modo che, se è stato passato un categoryID valore di -1 , tutti i record del prodotto sono stati restituiti.

Riepilogo

Quando si visualizzano dati correlati in modo gerarchico, spesso è utile presentare i dati usando report master/dettagli, da cui l'utente può iniziare a usare i dati dall'inizio 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 oggetto DropDownList per l'elenco di categorie e un oggetto DataList per i prodotti appartenenti alla categoria selezionata.

Nell'esercitazione successiva verrà esaminata la separazione dei record master e dei dettagli tra 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, lavora con le tecnologie Web Microsoft dal 1998. Scott lavora come consulente indipendente, allenatore e scrittore. Il suo ultimo libro è Sams Teach Yourself ASP.NET 2,0 in 24 Ore. Può essere raggiunto a mitchell@4GuysFromRolla.com. o tramite il suo blog, che può essere trovato in http://ScottOnWriting.NET.

Grazie speciali a...

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

Avanti