Master/Detail con un GridView master selezionabile e un DetailView (VB)

di Scott Mitchell

Scarica PDF

Questa esercitazione avrà un GridView nelle cui righe ci sono 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: Creare un GridView selezionabile

Ricorda che nel report master/dettaglio a due pagine, ogni record master includeva un collegamento ipertestuale alla quale fare clic invia l'utente alla pagina dei dettagli passando nel querystring il valore della SupplierID della riga selezionata. Tale collegamento ipertestuale è stato aggiunto a ogni riga gridView usando un oggetto HyperLinkField. Per il report master/dettagli di una sola pagina, sarà necessario un Pulsante per ogni riga GridView che, quando si clicca, mostra i dettagli. Il controllo GridView può essere configurato per includere un pulsante Seleziona per ogni riga che causa un postback e contrassegna quella riga come SelectedRow del 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 oggettoDataSource denominato AllProductsDataSource (fare clic per visualizzare l'immagine a dimensione intera)

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

Figura 4: Configurare ObjectDataSource per richiamare il GetProducts() metodo (Fare clic per visualizzare l'immagine a dimensione intera)

Modificare i campi nella GridView rimuovendo tutti tranne i ProductName e UnitPrice BoundFields. Inoltre, è possibile personalizzare questi BoundField in base alle esigenze, ad esempio formattando il UnitPrice BoundField come valuta e modificando le proprietà dei HeaderText BoundFields. Questi passaggi possono essere eseguiti graficamente, facendo clic sul collegamento Modifica colonne dallo smart tag gridView o configurando manualmente la sintassi dichiarativa.

Figura 5: Rimuovi tutto tranne i campi delimitati ProductNameUnitPrice (fare clic per visualizzare l'immagine a grandezza naturale)

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 del GridView.

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

Se si seleziona l'opzione Abilita 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, i pulsanti Seleziona vengono visualizzati come LinkButton, ma è possibile utilizzare Button o ImageButton tramite la proprietà del 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 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 utilizzata per associare uno o più valori di campo dati a ogni riga e viene comunemente usata per attribuire informazioni di identificazione univoca dei dati sottostanti a ogni riga gridView. La SelectedValue proprietà restituisce il valore del primo DataKeyNames campo dati per la riga selezionata, in cui la SelectedDataKey proprietà restituisce l'oggetto della DataKey riga selezionata, che contiene tutti i valori per i campi della chiave dati specificati per tale riga.

La proprietà DataKeyNames viene impostata automaticamente sul campo univocamente identificativo 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 si esaminerà l'inserimento, l'aggiornamento e l'eliminazione, la DataKeyNames proprietà deve essere impostata correttamente. Prenditi un momento per assicurarti che la proprietà del tuo 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 e include un pulsante di selezione 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 pulsante 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, verrà evidenziata 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 pertanto una nuova classe CSS in Styles.css denominata SelectedRowStyle.

.SelectedRowStyle
{
    background-color: Yellow;
}

Per applicare questa classe CSS alla SelectedRowStyle proprietà di tutti i GridView nella nostra serie di tutorial, modificare lo skin GridView.skin nel tema DataWebControls per includere le impostazioni SelectedRowStyle come mostrato 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 di tipo DetailsView

Con la ProductsGrid GridView completata, ciò che resta è aggiungere un controllo DetailsView che visualizza informazioni sul particolare prodotto 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 il ProductDetailsDataSource per utilizzare il metodo GetProductByProductID(productID) della classe ProductsBLL.

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

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

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

productDetailsDataSource Dopo che ObjectDataSource è stato configurato 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, viene eseguito un postback e il DetailsView viene aggiornato. Questa volta che la proprietà di SelectedValue GridView restituisce l'oggetto ProductID della riga selezionata, il GetProductByProductID(productID) metodo restituisce un ProductsDataTable oggetto 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 questo e nelle tre esercitazioni precedenti sono stati illustrati diversi metodi 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 dettaglio in un altro.

Questa esercitazione conclude la nostra analisi dei report principale/dettaglio. A partire dall'esercitazione successiva verrà avviata l'esplorazione della formattazione personalizzata con GridView, DetailsView e FormView. Si vedrà 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, 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 diversi revisori validi. Il revisore principale per questa esercitazione era Hilton Giesenow. Si è interessati a esaminare i prossimi articoli MSDN? In tal caso, mandami un messaggio a mitchell@4GuysFromRolla.com.