Visualizzazione di informazioni di riepilogo nel piè di pagina del controllo GridView (VB)
Le informazioni di riepilogo vengono spesso visualizzate nella parte inferiore del report in una riga di riepilogo. Il controllo GridView può includere una riga del piè di pagina nelle cui celle è possibile inserire dati aggregati a livello di codice. In questa esercitazione verrà illustrato come visualizzare i dati aggregati in questa riga del piè di pagina.
Introduzione
Oltre a visualizzare i prezzi dei prodotti, le unità in magazzino, le unità in ordine e i livelli di riordinamento, un utente potrebbe anche essere interessato a informazioni aggregate, ad esempio il prezzo medio, il numero totale di unità in magazzino e così via. Tali informazioni di riepilogo vengono spesso visualizzate nella parte inferiore del report in una riga di riepilogo. Il controllo GridView può includere una riga del piè di pagina nelle cui celle è possibile inserire dati aggregati a livello di codice.
Questa attività presenta tre sfide:
- Configurazione di GridView per visualizzare la riga del piè di pagina
- Determinazione dei dati di riepilogo; cioè, come si calcola il prezzo medio o il totale delle unità in magazzino?
- Inserimento dei dati di riepilogo nelle celle appropriate della riga del piè di pagina
In questa esercitazione verrà illustrato come superare queste sfide. In particolare, verrà creata una pagina che elenca le categorie in un elenco a discesa con i prodotti della categoria selezionata visualizzati in un controllo GridView. GridView includerà una riga del piè di pagina che mostra il prezzo medio e il numero totale di unità in magazzino e l'ordine dei prodotti in tale categoria.
Figura 1: Le informazioni di riepilogo vengono visualizzate nella riga piè di pagina di GridView (fare clic per visualizzare l'immagine a dimensione intera)
Questa esercitazione, con la relativa categoria all'interfaccia master/dettagli dei prodotti, si basa sui concetti illustrati nell'esercitazione precedente Filtro master/dettaglio con un elenco a discesa . Se non è stata ancora eseguita l'esercitazione precedente, eseguire questa operazione prima di continuare con questa esercitazione.
Passaggio 1: Aggiunta di Elenchi a discesa categorie e Prodotti GridView
Prima di poter aggiungere informazioni di riepilogo al piè di pagina di GridView, è sufficiente creare il report master/dettaglio. Dopo aver completato questo primo passaggio, si esaminerà come includere i dati di riepilogo.
Per iniziare, aprire la SummaryDataInFooter.aspx pagina nella CustomFormatting cartella . Aggiungere un controllo DropDownList e impostarlo ID su Categories. Fare quindi clic sul collegamento Scegli origine dati dallo smart tag dropDownList e scegliere di aggiungere un nuovo ObjectDataSource denominato CategoriesDataSource che richiama il CategoriesBLL metodo della GetCategories() classe.
Figura 2: Aggiungere un nuovo oggettoDataSource denominato CategoriesDataSource (fare clic per visualizzare l'immagine a dimensione intera)
Figura 3: Fare clic su ObjectDataSource Invoke sul metodo della GetCategories() classe (fare clic per visualizzare l'immagineCategoriesBLL a dimensione intera)
Dopo aver configurato ObjectDataSource, la procedura guidata viene restituita alla configurazione guidata origine dati di DropDownList da cui è necessario specificare il valore del campo dati da visualizzare e quale deve corrispondere al valore dell'oggetto ListItem DropDownList. Visualizzare il CategoryName campo e usare CategoryID come valore .
Figura 4: Usare i CategoryName campi e rispettivamente come Text e CategoryIDValue per gli ListItem oggetti (fare clic per visualizzare l'immagine a dimensione intera)
A questo punto è disponibile un elenco DropDownList (Categories) che elenca le categorie nel sistema. È ora necessario aggiungere un controllo GridView che elenca i prodotti che appartengono alla categoria selezionata. Prima di procedere, tuttavia, selezionare la casella di controllo Enable AutoPostBack (Abilita AutoPostBack) nello smart tag dropDownList. Come illustrato nell'esercitazione Filtro master/dettaglio con un oggetto DropDownList, impostando la proprietà True dropDownList AutoPostBack sulla pagina verrà pubblicato di nuovo ogni volta che il valore DropDownList viene modificato. In questo modo gridView verrà aggiornato, mostrando i prodotti per la categoria appena selezionata. Se la AutoPostBack proprietà è impostata su False (impostazione predefinita), la modifica della categoria non causerà un postback e pertanto non aggiornerà i prodotti elencati.
Figura 5: Selezionare la casella di controllo Abilita autoPostBack nello smart tag dropDownList (fare clic per visualizzare l'immagine a dimensione intera)
Aggiungere un controllo GridView alla pagina per visualizzare i prodotti per la categoria selezionata. Impostare gridView su IDProductsInCategory e associarlo a un nuovo ObjectDataSource denominato ProductsInCategoryDataSource.
Figura 6: Aggiungere un nuovo oggettoDataSource denominato ProductsInCategoryDataSource (fare clic per visualizzare l'immagine a dimensione intera)
Configurare ObjectDataSource in modo che richiami il ProductsBLL metodo della GetProductsByCategoryID(categoryID) classe.
Figura 7: Fare clic su ObjectDataSource Invoke sul metodo (fare clic per visualizzare l'immagineGetProductsByCategoryID(categoryID) a dimensione intera)
Poiché il GetProductsByCategoryID(categoryID) metodo accetta un parametro di input, nel passaggio finale della procedura guidata è possibile specificare l'origine del valore del parametro. Per visualizzare tali prodotti dalla categoria selezionata, fare in modo che il parametro venga estratto da Categories DropDownList.
Figura 8: Ottenere il valore del categoryID parametro dall'elenco a discesa Categorie selezionate (fare clic per visualizzare l'immagine a dimensione intera)
Dopo aver completato la procedura guidata, GridView avrà un BoundField per ognuna delle proprietà del prodotto. Eseguire la pulizia di questi BoundFields in modo che vengano visualizzati solo i ProductNamecampi , UnitPrice, UnitsInStocke UnitsOnOrder BoundField. È possibile aggiungere eventuali impostazioni a livello di campo agli altri BoundFields, ad esempio la formattazione UnitPrice di come valuta. Dopo aver apportato queste modifiche, il markup dichiarativo di GridView dovrebbe essere simile al seguente:
<asp:GridView ID="ProductsInCategory" runat="server" AutoGenerateColumns="False"
DataKeyNames="ProductID" DataSourceID="ProductsInCategoryDataSource"
EnableViewState="False">
<Columns>
<asp:BoundField DataField="ProductName" HeaderText="Product"
SortExpression="ProductName" />
<asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
HeaderText="Price"
HtmlEncode="False" SortExpression="UnitPrice">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="UnitsInStock"
HeaderText="Units In Stock" SortExpression="UnitsInStock">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
<asp:BoundField DataField="UnitsOnOrder"
HeaderText="Units On Order" SortExpression="UnitsOnOrder">
<ItemStyle HorizontalAlign="Right" />
</asp:BoundField>
</Columns>
</asp:GridView>
A questo punto è disponibile un report master/dettaglio completamente funzionante che mostra il nome, il prezzo unitario, le unità in magazzino e le unità in ordine per i prodotti che appartengono alla categoria selezionata.
Figura 9: Ottenere il valore del categoryID parametro dall'elenco a discesa Categorie selezionate (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 2: Visualizzazione di un piè di pagina in GridView
Il controllo GridView può visualizzare sia un'intestazione che una riga del piè di pagina. Queste righe vengono visualizzate a seconda dei valori delle ShowHeader proprietà e ShowFooter , rispettivamente, con ShowHeader l'impostazione predefinita True su e ShowFooter su False. Per includere un piè di pagina in GridView, è sufficiente impostarne la ShowFooter proprietà su True.
Figura 10: Impostare la proprietà di ShowFooter GridView su True (fare clic per visualizzare l'immagine a dimensione intera)
La riga del piè di pagina ha una cella per ognuno dei campi definiti in GridView; Tuttavia, queste celle sono vuote per impostazione predefinita. Dedicare qualche minuto a visualizzare lo stato di avanzamento in un browser. Con la ShowFooter proprietà ora impostata su True, GridView include una riga di piè di pagina vuota.
Figura 11: GridView include ora una riga piè di pagina (fare clic per visualizzare l'immagine a dimensione intera)
La riga del piè di pagina nella figura 11 non si distingue, perché ha uno sfondo bianco. Creare una FooterStyle classe CSS in Styles.css che specifica uno sfondo rosso scuro e quindi configurare il GridView.skin file Skin nel DataWebControls tema per assegnare questa classe CSS alla proprietà di FooterStyleCssClass GridView. Se è necessario eseguire il pennello su Interfacce e temi, fare riferimento all'esercitazione Visualizzazione dei dati con ObjectDataSource .
Per iniziare, aggiungere la classe CSS seguente a Styles.css:
.FooterStyle
{
background-color: #a33;
color: White;
text-align: right;
}
La FooterStyle classe CSS è simile allo stile della HeaderStyle classe, anche se il HeaderStylecolore di sfondo è più scuro e il testo viene visualizzato in grassetto. Inoltre, il testo nel piè di pagina è allineato a destra, mentre il testo dell'intestazione è centrato.
Successivamente, per associare questa classe CSS a ogni piè di pagina di GridView, aprire il GridView.skin file nel DataWebControls tema e impostare la FooterStyleproprietà di CssClass . Dopo questa aggiunta, il markup del file sarà simile al seguente:
<asp:GridView runat="server" CssClass="DataWebControlStyle">
<AlternatingRowStyle CssClass="AlternatingRowStyle" />
<RowStyle CssClass="RowStyle" />
<HeaderStyle CssClass="HeaderStyle" />
<FooterStyle CssClass="FooterStyle" />
<SelectedRowStyle CssClass="SelectedRowStyle" />
</asp:GridView>
Come illustrato nella schermata seguente, questa modifica rende il piè di pagina più chiaro.
Figura 12: La riga piè di pagina di GridView ha ora un colore di sfondo rossastro (fare clic per visualizzare l'immagine a dimensione intera)
Passaggio 3: Calcolo dei dati di riepilogo
Con il piè di pagina di GridView visualizzato, la sfida successiva è come calcolare i dati di riepilogo. Esistono due modi per calcolare queste informazioni di aggregazione:
Tramite una query SQL è possibile eseguire una query aggiuntiva al database per calcolare i dati di riepilogo per una determinata categoria. SQL include una serie di funzioni di aggregazione insieme a una
GROUP BYclausola per specificare i dati su cui devono essere riepilogati i dati. La query SQL seguente restituisce le informazioni necessarie:SELECT CategoryID, AVG(UnitPrice), SUM(UnitsInStock), SUM(UnitsOnOrder) FROM Products WHERE CategoryID = categoryID GROUP BY CategoryIDNaturalmente, non si vuole eseguire questa query direttamente dalla
SummaryDataInFooter.aspxpagina, ma piuttosto creando un metodo inProductsTableAdaptere .ProductsBLLCalcolare queste informazioni man mano che vengono aggiunte a GridView, come illustrato nell'esercitazione Formattazione personalizzata basata sui dati , il gestore eventi di
RowDataBoundGridView viene generato una volta per ogni riga aggiunta a GridView dopo il relativo databound. Creando un gestore eventi per questo evento, è possibile mantenere un totale in esecuzione dei valori da aggregare. Dopo che l'ultima riga di dati è stata associata a GridView, sono disponibili i totali e le informazioni necessarie per calcolare la media.
In genere si usa il secondo approccio perché salva un viaggio nel database e il lavoro necessario per implementare la funzionalità di riepilogo nel livello di accesso ai dati e nel livello della logica di business, ma sarebbe sufficiente entrambi gli approcci. Per questa esercitazione si userà la seconda opzione e si tenga traccia del totale in esecuzione usando il RowDataBound gestore eventi.
Creare un RowDataBound gestore eventi per GridView selezionando GridView nel Designer, facendo clic sull'icona a forma di fulmine dal Finestra Proprietà e facendo doppio clic sull'eventoRowDataBound. In alternativa, è possibile selezionare GridView e il relativo evento RowDataBound negli elenchi a discesa nella parte superiore del file di classe code-behind ASP.NET. Verrà creato un nuovo gestore eventi denominato ProductsInCategory_RowDataBound nella SummaryDataInFooter.aspx classe code-behind della pagina.
Protected Sub ProductsInCategory_RowDataBound _
(sender As Object, e As GridViewRowEventArgs) _
Handles ProductsInCategory.RowDataBound
End Sub
Per mantenere un totale in esecuzione, è necessario definire variabili all'esterno dell'ambito del gestore eventi. Creare le quattro variabili a livello di pagina seguenti:
_totalUnitPrice, di tipoDecimal_totalNonNullUnitPriceCount, di tipoInteger_totalUnitsInStock, di tipoInteger_totalUnitsOnOrder, di tipoInteger
Scrivere quindi il codice per incrementare queste tre variabili per ogni riga di dati rilevata nel RowDataBound gestore eventi.
Dim _totalUnitPrice As Decimal = 0
Dim _totalNonNullUnitPriceCount As Integer = 0
Dim _totalUnitsInStock As Integer = 0
Dim _totalUnitsOnOrder As Integer = 0
Protected Sub ProductsInCategory_RowDataBound _
(sender As Object, e As GridViewRowEventArgs) _
Handles ProductsInCategory.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
Dim product As Northwind.ProductsRow = _
CType(CType(e.Row.DataItem, DataRowView).Row, Northwind.ProductsRow)
If Not product.IsUnitPriceNull() Then
_totalUnitPrice += product.UnitPrice
_totalNonNullUnitPriceCount += 1
End If
If Not product.IsUnitsInStockNull() Then
_totalUnitsInStock += product.UnitsInStock
End If
If Not product.IsUnitsOnOrderNull() Then
_totalUnitsOnOrder += product.UnitsOnOrder
End If
ElseIf e.Row.RowType = DataControlRowType.Footer Then
Dim avgUnitPrice As Decimal = _
_totalUnitPrice / CType(_totalNonNullUnitPriceCount, Decimal)
e.Row.Cells(1).Text = "Avg.: " & avgUnitPrice.ToString("c")
e.Row.Cells(2).Text = "Total: " & _totalUnitsInStock.ToString()
e.Row.Cells(3).Text = "Total: " & _totalUnitsOnOrder.ToString()
End If
End Sub
Il RowDataBound gestore eventi inizia assicurandosi che si tratti di un datarow. Una volta stabilita l'istanza appena associata all'oggetto GridViewRow in e.Row viene Northwind.ProductsRow archiviata nella variabile product. Successivamente, l'esecuzione di variabili totali viene incrementata dai valori corrispondenti del prodotto corrente (presupponendo che non contengano un valore del database NULL ). Tenere traccia del totale in esecuzione UnitPrice e del numero di record nonNULLUnitPrice registrati perché il prezzo medio è il quoziente di questi due numeri.
Passaggio 4: Visualizzazione dei dati di riepilogo nel piè di pagina
Con i dati di riepilogo totali, l'ultimo passaggio consiste nel visualizzarlo nella riga del piè di pagina di GridView. Anche questa attività può essere eseguita a livello di codice tramite il RowDataBound gestore eventi. Si ricordi che il RowDataBound gestore eventi viene generato per ogni riga associata a GridView, inclusa la riga del piè di pagina. Pertanto, è possibile aumentare il gestore eventi per visualizzare i dati nella riga del piè di pagina usando il codice seguente:
Protected Sub ProductsInCategory_RowDataBound _
(sender As Object, e As GridViewRowEventArgs) _
Handles ProductsInCategory.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
... Increment the running totals ...
ElseIf e.Row.RowType = DataControlRowType.Footer
... Display the summary data in the footer ...
End If
End Sub
Poiché la riga piè di pagina viene aggiunta a GridView dopo l'aggiunta di tutte le righe di dati, è possibile assicurarsi che entro il momento in cui si è pronti a visualizzare i dati di riepilogo nel piè di pagina verranno completati i calcoli totali in esecuzione. L'ultimo passaggio, quindi, consiste nell'impostare questi valori nelle celle del piè di pagina.
Per visualizzare il testo in una determinata cella piè di pagina, usare e.Row.Cells(index).Text = value, dove l'indicizzazione Cells inizia a 0. Il codice seguente calcola il prezzo medio (il prezzo totale diviso per il numero di prodotti) e lo visualizza insieme al numero totale di unità in magazzino e unità in ordine nelle celle piè di pagina appropriate di GridView.
Protected Sub ProductsInCategory_RowDataBound _
(sender As Object, e As GridViewRowEventArgs) _
Handles ProductsInCategory.RowDataBound
If e.Row.RowType = DataControlRowType.DataRow Then
... <i>Increment the running totals</i> ...
ElseIf e.Row.RowType = DataControlRowType.Footer
Dim avgUnitPrice As Decimal = _
_totalUnitPrice / CType(_totalNonNullUnitPriceCount, Decimal)
e.Row.Cells(1).Text = "Avg.: " & avgUnitPrice.ToString("c")
e.Row.Cells(2).Text = "Total: " & _totalUnitsInStock.ToString()
e.Row.Cells(3).Text = "Total: " & _totalUnitsOnOrder.ToString()
End If
End Sub
La figura 13 mostra il report dopo l'aggiunta di questo codice. Si noti in che modo le ToString("c") informazioni di riepilogo medio dei prezzi vengono formattate come una valuta.
Figura 13: La riga piè di pagina di GridView ha ora un colore di sfondo rossastro (fare clic per visualizzare l'immagine a dimensioni complete)
Riepilogo
La visualizzazione dei dati di riepilogo è un requisito comune del report e il controllo GridView semplifica l'inclusione di tali informazioni nella riga del piè di pagina. La riga del piè di pagina viene visualizzata quando la proprietà gridView è impostata su True e può avere il testo nelle celle impostate a livello di ShowFooter codice tramite il RowDataBound gestore eventi. Il calcolo dei dati di riepilogo può essere eseguito nuovamente eseguendo query sul database o usando il codice nella classe code-behind della pagina di ASP.NET per calcolare i dati di riepilogo a livello di codice.
Questa esercitazione conclude l'esame della formattazione personalizzata con i controlli GridView, DetailsView e FormView. L'esercitazione successiva avvia l'esplorazione dell'inserimento, dell'aggiornamento e dell'eliminazione dei dati usando questi stessi controlli.
Programmazione felice!
Informazioni sull'autore
Scott Mitchell, autore di sette libri ASP/ASP.NET e fondatore di 4GuysFromRolla.com, ha lavorato con le tecnologie Microsoft Web 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.
Commenti e suggerimenti
Presto disponibile: Nel corso del 2024 verranno gradualmente disattivati i problemi di GitHub come meccanismo di feedback per il contenuto e ciò verrà sostituito con un nuovo sistema di feedback. Per altre informazioni, vedere https://aka.ms/ContentUserFeedback.
Invia e visualizza il feedback per