Report master o di dettaglio con un controllo GridView master selezionabile e un controllo DetailView per i dettagli (VB)

Articolo
03/05/2024

Questa esercitazione avrà un controllo GridView le cui righe includono il nome e il prezzo di ogni prodotto insieme a un pulsante Seleziona. Facendo clic sul pulsante Seleziona per un determinato prodotto, i dettagli completi verranno visualizzati in un controllo DetailsView nella stessa pagina.

Introduzione

Nell'esercitazione precedente è stato illustrato come creare un report master/dettaglio usando due pagine Web: una pagina Web "master", da cui è stato visualizzato l'elenco dei fornitori; e una pagina Web "dettagli" che elenca i prodotti forniti dal fornitore selezionato. Questo formato di report di due pagine può essere condensato in una sola pagina. Questa esercitazione avrà un controllo GridView le cui righe includono il nome e il prezzo di ogni prodotto insieme a un pulsante Seleziona. Facendo clic sul pulsante Seleziona per un determinato prodotto, i dettagli completi verranno visualizzati in un controllo DetailsView nella stessa pagina.

Figura 1: Facendo clic sul pulsante Seleziona vengono visualizzati i dettagli del prodotto (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 1: Creazione di un controllo GridView selezionabile

Tenere presente che nel report master/dettaglio a due pagine che ogni record master includeva un collegamento ipertestuale che, quando si fa clic, ha inviato l'utente alla pagina dei dettagli passando il valore della SupplierID riga selezionata nella querystring. Tale collegamento ipertestuale è stato aggiunto a ogni riga gridView usando un HyperLinkField. Per il report master/dettagli a pagina singola, sarà necessario un pulsante per ogni riga gridView che, quando si fa clic, mostra i dettagli. Il controllo GridView può essere configurato per includere un pulsante Seleziona per ogni riga che causa un postback e contrassegna tale riga come SelectedRow di GridView.

Per iniziare, aggiungere un controllo GridView alla DetailsBySelecting.aspx pagina nella Filtering cartella, impostandone la ID proprietà su ProductsGrid. Aggiungere quindi un nuovo ObjectDataSource denominato AllProductsDataSource che richiama il ProductsBLL metodo della GetProducts() classe.

Figura 2: Creare un oggetto ObjectDataSource denominato AllProductsDataSource (fare clic per visualizzare l'immagine a dimensione intera)

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

Figura 4: Configurare ObjectDataSource per richiamare il metodo (fare clic per visualizzare l'immagineGetProducts() a dimensione intera)

Modificare i campi di GridView rimuovendo tutti gli elementi e ProductName BoundFields UnitPrice . Inoltre, è possibile personalizzare questi BoundField in base alle esigenze, ad esempio la formattazione di UnitPrice BoundField come valuta e la modifica delle HeaderText proprietà di BoundFields. Questi passaggi possono essere eseguiti graficamente facendo clic sul collegamento Modifica colonne dallo smart tag di GridView o configurando manualmente la sintassi dichiarativa.

Figura 5: Rimuovi tutti i campi tranne e UnitPrice BoundFields (fare clic per visualizzare l'immagineProductName a dimensione intera)

Il markup finale per GridView è:

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:BoundField DataField="ProductName"
         HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
            DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Successivamente, è necessario contrassegnare GridView come selezionabile, che aggiungerà un pulsante Seleziona a ogni riga. A tale scopo, selezionare semplicemente la casella di controllo Abilita selezione nello smart tag di GridView.

Figura 6: Rendere selezionabili le righe di GridView (fare clic per visualizzare l'immagine a dimensione intera)

Selezionando l'opzione Abilitazione selezione viene aggiunto un oggetto CommandField a ProductsGrid GridView con la relativa ShowSelectButton proprietà impostata su True. Viene restituito un pulsante Seleziona per ogni riga di GridView, come illustrato nella figura 6. Per impostazione predefinita, il rendering dei pulsanti Select viene eseguito come LinkButtons, ma è possibile usare Buttons o ImageButtons tramite la proprietà CommandField ButtonType .

<asp:GridView ID="ProductsGrid" runat="server"
  AutoGenerateColumns="False" DataKeyNames="ProductID"
    DataSourceID="AllProductsDataSource" EnableViewState="False">
    <Columns>
        <asp:CommandField ShowSelectButton="True" />
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice"
          DataFormatString="{0:c}" HeaderText="Unit Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

Quando si fa clic sul pulsante Seleziona di una riga di GridView viene eseguito un postback e la proprietà di SelectedRow GridView viene aggiornata. Oltre alla SelectedRow proprietà, GridView fornisce le proprietà SelectedIndex, SelectedValue e SelectedDataKey . La SelectedIndex proprietà restituisce l'indice della riga selezionata, mentre le SelectedValue proprietà e SelectedDataKey restituiscono valori in base alla proprietà DataKeyNames di GridView.

La DataKeyNames proprietà viene usata per associare uno o più valori di campo dati a ogni riga e viene comunemente usata per attribuire informazioni di identificazione univoca dai dati sottostanti a ogni riga gridView. La SelectedValue proprietà restituisce il valore del primo DataKeyNames campo dati per la riga selezionata, dove come SelectedDataKey proprietà restituisce l'oggetto della DataKey riga selezionata, che contiene tutti i valori per i campi chiave dati specificati per tale riga.

La DataKeyNames proprietà viene impostata automaticamente sui campi dati che identificano in modo univoco uno o più campi dati quando si associa un'origine dati a un controllo GridView, DetailsView o FormView tramite il Designer. Anche se questa proprietà è stata impostata automaticamente nelle esercitazioni precedenti, gli esempi avrebbero funzionato senza la DataKeyNames proprietà specificata. Tuttavia, per GridView selezionabile in questa esercitazione, nonché per le esercitazioni future in cui verranno esaminati l'inserimento, l'aggiornamento e l'eliminazione, la DataKeyNames proprietà deve essere impostata correttamente. Assicurarsi che la proprietà di DataKeyNames GridView sia impostata su ProductID.

Vediamo i nostri progressi fino a questo punto attraverso un browser. Si noti che GridView elenca il nome e il prezzo per tutti i prodotti insieme a un controllo Select LinkButton. Facendo clic sul pulsante Seleziona viene generato un postback. Nel passaggio 2 verrà illustrato come fare in modo che detailsView risponda a questo postback visualizzando i dettagli per il prodotto selezionato.

Figura 7: Ogni riga del prodotto contiene un controllo Select LinkButton (Fare clic per visualizzare l'immagine a dimensione intera)

Evidenziazione della riga selezionata

ProductsGrid GridView ha una SelectedRowStyle proprietà che può essere usata per dettare lo stile di visualizzazione per la riga selezionata. Usato correttamente, questo può migliorare l'esperienza dell'utente mostrando più chiaramente quale riga di GridView è attualmente selezionata. Per questa esercitazione, è possibile evidenziare la riga selezionata con uno sfondo giallo.

Come per le esercitazioni precedenti, cerchiamo di mantenere le impostazioni relative all'estetica definite come classi CSS. Creare quindi una nuova classe CSS in Styles.css denominata SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Per applicare questa classe CSS alla SelectedRowStyle proprietà di tutte le visualizzazioni GridView della serie di esercitazioni, modificare l'interfaccia GridView.skin nel DataWebControls tema per includere le SelectedRowStyle impostazioni come illustrato di seguito:

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>

Con questa aggiunta, la riga GridView selezionata è ora evidenziata con un colore di sfondo giallo.

Figura 8: Personalizzare l'aspetto della riga selezionata usando la proprietà di SelectedRowStyle GridView (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 2: Visualizzazione dei dettagli del prodotto selezionato in un controllo DetailsView

Al termine di GridView, tutto ciò che rimane consiste nell'aggiungere ProductsGrid un controllo DetailsView che visualizza informazioni sul prodotto specifico selezionato. Aggiungere un controllo DetailsView sopra GridView e creare un nuovo ObjectDataSource denominato ProductDetailsDataSource. Poiché si vuole che questo controllo DetailsView visualizzi informazioni specifiche sul prodotto selezionato, configurare per ProductDetailsDataSource l'uso del ProductsBLL metodo della GetProductByProductID(productID) classe.

Figura 9: Richiamare il metodo della GetProductByProductID(productID) classe (fare clic per visualizzare l'immagineProductsBLL a dimensione intera)

Impostare il productID valore del parametro ottenuto dalla proprietà del SelectedValue controllo GridView. Come illustrato in precedenza, la proprietà di SelectedValue GridView restituisce il primo valore della chiave dati per la riga selezionata. Pertanto, è fondamentale che la proprietà gridView DataKeyNames sia impostata su ProductID, in modo che il valore della ProductID riga selezionata venga restituito da SelectedValue.

Figura 10: Impostare il parametro sulla productID proprietà di SelectedValue GridView (fare clic per visualizzare l'immagine a dimensione intera)

productDetailsDataSource Dopo aver configurato ObjectDataSource correttamente e associato a DetailsView, questa esercitazione è stata completata. Quando la pagina viene visitata per la prima volta, non viene selezionata alcuna riga, quindi la proprietà di SelectedValue GridView restituisce Nothing. Poiché non sono presenti prodotti con un NULLProductID valore, nessun record viene restituito dal GetProductByProductID(productID) metodo , vale a dire che DetailsView non viene visualizzato (vedere la figura 11). Quando si fa clic sul pulsante Seleziona di una riga gridView, si verifica un postback e detailsView viene aggiornato. Questa volta la proprietà di SelectedValue GridView restituisce l'oggetto ProductID della riga selezionata, il GetProductByProductID(productID) metodo restituisce un oggetto ProductsDataTable con informazioni su quel particolare prodotto e DetailsView mostra questi dettagli (vedere la figura 12).

Figura 11: Quando viene visitato per la prima volta, viene visualizzato solo GridView (fare clic per visualizzare l'immagine a dimensione intera)

Figura 12: Quando si seleziona una riga, vengono visualizzati i dettagli del prodotto (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

In questa e nelle tre esercitazioni precedenti sono stati illustrate diverse tecniche per la visualizzazione di report master/dettagli. In questa esercitazione è stato esaminato l'uso di un controllo GridView selezionabile per ospitare i record master e un controllo DetailsView per visualizzare i dettagli relativi al record master selezionato nella stessa pagina. Nelle esercitazioni precedenti è stato illustrato come visualizzare report master/dettagli usando DropDownLists e visualizzare record master in una pagina Web e record di dettagli in un altro.

Questa esercitazione conclude l'esame dei report master/dettagli. A partire dall'esercitazione successiva verrà avviata l'esplorazione della formattazione personalizzata con GridView, DetailsView e FormView. Verrà illustrato come personalizzare l'aspetto di questi controlli in base ai dati associati, come riepilogare i dati nel piè di pagina di GridView e come usare i modelli per ottenere un maggiore grado di controllo sul layout.

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 speciali

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

Indietro

Condividi tramite