Formattazione personalizzata in base ai dati (VB)

di Scott Mitchell

Scarica il PDF

La modifica del formato di GridView, DetailsView o FormView in base ai dati associati può essere eseguita in più modi. In questa esercitazione verrà illustrato come eseguire la formattazione dei dati associata tramite l'uso dei gestori eventi DataBound e RowDataBound.

Introduzione

L'aspetto dei controlli GridView, DetailsView e FormView può essere personalizzato tramite una miriade di proprietà correlate allo stile. Proprietà come CssClass, BorderStyleBorderWidthBorderColorFontWidthe Height, tra le altre, determinano l'aspetto generale del controllo di cui è stato eseguito il rendering. Le proprietà, tra cui HeaderStyle, RowStyle, AlternatingRowStylee altre consentono di applicare queste stesse impostazioni di stile a sezioni specifiche. Analogamente, queste impostazioni di stile possono essere applicate a livello di campo.

In molti scenari, tuttavia, i requisiti di formattazione dipendono dal valore dei dati visualizzati. Ad esempio, per attirare l'attenzione sui prodotti non disponibili, un report elenca le informazioni sul prodotto potrebbe impostare il colore di sfondo su giallo per tali prodotti i cui UnitsInStock campi e UnitsOnOrder sono entrambi uguali a 0. Per evidenziare i prodotti più costosi, potremmo voler visualizzare i prezzi di tali prodotti che costano più di 75,00 dollari in un carattere in grassetto.

La modifica del formato di GridView, DetailsView o FormView in base ai dati associati può essere eseguita in più modi. In questa esercitazione verrà illustrato come eseguire la formattazione dei dati associata tramite l'uso dei DataBound gestori eventi e RowDataBound . Nell'esercitazione successiva si esaminerà un approccio alternativo.

Uso del gestore eventi diDataBoundDetailsView Control

Quando i dati sono associati a un oggetto DetailsView, da un controllo origine dati o tramite l'assegnazione di dati alla proprietà del DataSource controllo e chiamando il DataBind() relativo metodo, si verificano la sequenza di passaggi seguenti:

1. Viene generato l'evento del DataBinding controllo Web dei dati.
2. I dati sono associati al controllo Web dati.
3. Viene generato l'evento del DataBound controllo Web dei dati.

La logica personalizzata può essere inserita immediatamente dopo i passaggi 1 e 3 tramite un gestore eventi. Creando un gestore eventi per l'evento DataBound è possibile determinare a livello di codice i dati associati al controllo Web dei dati e modificare la formattazione in base alle esigenze. Per illustrare questa operazione, verrà creato un oggetto DetailsView che elenca le informazioni generali su un prodotto, ma visualizzerà il UnitPrice valore in un carattere grassetto, corsivo , se supera $75.00.

Passaggio 1: Visualizzazione delle informazioni sul prodotto in un oggetto DetailsView

Aprire la CustomColors.aspx pagina nella CustomFormatting cartella, trascinare un controllo DetailsView dalla casella degli strumenti nella Designer, impostarne il ID valore della proprietà su ExpensiveProductsPriceInBoldItalice associarlo a un nuovo controllo ObjectDataSource che richiama il ProductsBLL metodo della GetProducts() classe. I passaggi dettagliati per l'esecuzione di questa operazione vengono omessi qui per brevità poiché sono stati esaminati in dettaglio nelle esercitazioni precedenti.

Dopo aver associato ObjectDataSource a DetailsView, è necessario modificare l'elenco di campi. Ho scelto di rimuovere , ProductIDUnitsInStockCategoryIDUnitsOnOrderSupplierIDReorderLevele Discontinued BoundFields e rinominare e riformato i rimanenti BoundFields. Ho anche cancellato le Width impostazioni e Height . Poiché DetailsView visualizza solo un singolo record, è necessario abilitare il paging per consentire all'utente finale di visualizzare tutti i prodotti. A tale scopo, selezionare la casella di controllo Abilita paging nello smart tag di DetailsView.

Figura 1: Figura 1: Selezionare la casella di controllo Abilita paging nello Smart Tag di DetailsView (fare clic per visualizzare l'immagine full-size)

Dopo queste modifiche, il markup DetailsView sarà:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Provare questa pagina nel browser.

Figura 2: Il controllo DetailsView visualizza un prodotto alla volta (fare clic per visualizzare l'immagine full-size)

Passaggio 2: Determinazione del valore dei dati nel gestore eventi DataBound

Per visualizzare il prezzo in grassetto, carattere corsivo per quei prodotti il cui UnitPrice valore supera $75,00, dobbiamo prima essere in grado di determinare a livello di codice il UnitPrice valore. Per DetailsView, questa operazione può essere eseguita nel DataBound gestore eventi. Per creare il gestore eventi, fare clic su DetailsView nel Designer quindi passare alla Finestra Proprietà. Premere F4 per visualizzarla, se non è visibile oppure passare al menu Visualizza e selezionare l'opzione di menu Proprietà finestra. Dal Finestra Proprietà fare clic sull'icona del fulmine per elencare gli eventi di DetailsView. Fare quindi doppio clic sull'evento DataBound o digitare il nome del gestore eventi che si vuole creare.

Figura 3: Creare un gestore eventi per l'evento DataBound

Nota

È anche possibile creare un gestore eventi dalla parte del codice della pagina di ASP.NET. Nella parte superiore della pagina sono disponibili due elenchi a discesa. Selezionare l'oggetto dall'elenco a discesa a sinistra e l'evento per cui si vuole creare un gestore dall'elenco a discesa a destra e Visual Studio creerà automaticamente il gestore eventi appropriato.

In questo modo verrà creato automaticamente il gestore eventi e verrà visualizzata la parte del codice in cui è stata aggiunta. A questo punto si vedrà:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound
End Sub

I dati associati a DetailsView possono essere accessibili tramite la DataItem proprietà . Si noti che si associano i controlli a una tabella dati fortemente tipizzata, costituita da una raccolta di istanze di DataRow fortemente tipizzata. Quando DataTable è associato a DetailsView, il primo DataRow in DataTable viene assegnato alla proprietà DetailsView DataItem . In particolare, la DataItem proprietà viene assegnata a un DataRowView oggetto. È possibile usare la DataRowViewproprietà 's Row per ottenere l'accesso all'oggetto DataRow sottostante, che è effettivamente un'istanza ProductsRow . Dopo aver ottenuto questa ProductsRow istanza, è possibile prendere la decisione controllando semplicemente i valori delle proprietà dell'oggetto.

Il codice seguente illustra come determinare se il UnitPrice valore associato al controllo DetailsView è maggiore di $75.00:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
    End If
End Sub

Nota

Poiché UnitPrice può avere un NULL valore nel database, verificare prima di tutto che non si tratti di un NULL valore prima di accedere alla ProductsRowproprietà dell'oggetto UnitPrice . Questo controllo è importante perché se si tenta di accedere alla proprietà quando ha un valore l'oggetto UnitPriceProductsRow genererà un'eccezione NULLStrongTypingException.

Passaggio 3: Formattazione del valore UnitPrice in DetailsView

A questo punto è possibile determinare se il UnitPrice valore associato a DetailsView ha un valore che supera $75.00, ma non è ancora stato possibile modificare a livello di codice la formattazione di DetailsView di conseguenza. Per modificare la formattazione di un'intera riga in DetailsView, accedere a livello di codice alla riga usando DetailsViewID.Rows(index); per modificare una determinata cella, usare DetailsViewID.Rows(index).Cells(index). Dopo avere un riferimento alla riga o alla cella, è possibile regolarne l'aspetto impostandone le proprietà correlate allo stile.

Per accedere a una riga a livello di codice è necessario conoscere l'indice della riga, che inizia a 0. La UnitPrice riga è la quinta riga in DetailsView, dandogli un indice pari a 4 e rendendolo accessibile a livello di codice usando ExpensiveProductsPriceInBoldItalic.Rows(4). A questo punto, è possibile visualizzare l'intero contenuto della riga in grassetto, corsivo usando il codice seguente:

ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Italic = True

In questo modo, tuttavia, l'etichetta (Prezzo) e il valore grassetto e corsivo. Se si vuole fare solo il valore grassetto e corsivo, è necessario applicare questa formattazione alla seconda cella della riga, che può essere eseguita usando quanto segue:

ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Italic = True

Poiché le esercitazioni finora hanno usato fogli di stile per mantenere una separazione pulita tra il markup di rendering e le informazioni correlate allo stile, anziché impostare le proprietà di stile specifiche, come illustrato sopra, usare invece una classe CSS. Aprire il Styles.css foglio di stile e aggiungere una nuova classe CSS denominata ExpensivePriceEmphasis con la definizione seguente:

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

Quindi, nel DataBound gestore eventi impostare la proprietà della CssClass cella su ExpensivePriceEmphasis. Il codice seguente mostra il gestore eventi nell'intera DataBound funzionalità:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
       ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).CssClass = _
            "ExpensivePriceEmphasis"
    End If
End Sub

Quando si visualizza Chai, che costa meno di $75,00, il prezzo viene visualizzato in un tipo di carattere normale (vedere la figura 4). Tuttavia, quando si visualizza Mishi Kobe Niku, che ha un prezzo di $97,00, il prezzo viene visualizzato in un carattere grassetto, corsivo (vedere Figura 5).

Figura 4: I prezzi inferiori a $75.00 vengono visualizzati in un tipo di carattere normale (fare clic per visualizzare un'immagine full-size)

Figura 5: I prezzi dei prodotti costosi vengono visualizzati in un carattere grassetto, corsivo (fare clic per visualizzare l'immagine full-size)

Uso del gestore eventi diDataBoundFormView Control

I passaggi per determinare i dati sottostanti associati a formView sono identici a quelli per un gestore eventi DetailsView DataBound , eseguire il cast della DataItem proprietà sul tipo di oggetto appropriato associato al controllo e determinare come procedere. FormView e DetailsView differiscono, tuttavia, nel modo in cui l'aspetto dell'interfaccia utente viene aggiornato.

FormView non contiene alcun oggetto BoundFields e pertanto non contiene la Rows raccolta. Invece, un FormView è costituito da modelli, che possono contenere una combinazione di sintassi html statici, controlli Web e sintassi di associazione dei dati. La modifica dello stile di un FormView comporta in genere la modifica dello stile di uno o più controlli Web all'interno dei modelli di FormView.

Per illustrare questa operazione, si userà formView per elencare i prodotti come nell'esempio precedente, ma questa volta verrà visualizzato solo il nome e le unità di prodotto in magazzino con le unità in magazzino visualizzate in un tipo di carattere rosso se è minore o uguale a 10.

Passaggio 4: Visualizzazione delle informazioni sul prodotto in formView

Aggiungere formView alla CustomColors.aspx pagina sotto DetailsView e impostarne la ID proprietà su LowStockedProductsInRed. Associare FormView al controllo ObjectDataSource creato dal passaggio precedente. Verrà creato un ItemTemplateoggetto , EditItemTemplatee InsertItemTemplate per FormView. Rimuovere e InsertItemTemplate semplificare l'oggetto ItemTemplateEditItemTemplate per includere solo i ProductName valori eUnitsInStock, ognuno nei propri controlli Etichetta denominati in modo appropriato. Come per DetailsView nell'esempio precedente, selezionare anche la casella di controllo Abilita paging nello smart tag di FormView.

Dopo queste modifiche, il markup di FormView dovrebbe essere simile al seguente:

<asp:FormView ID="LowStockedProductsInRed" runat="server"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Si noti che contiene ItemTemplate :

• Html statico il testo "Product:" e "Units In Stock:" insieme agli <br /> elementi e <b> .
• Web controlla i due controlli Label e ProductNameLabelUnitsInStockLabel.
• Sintassi di associazione dati e <%# Bind("ProductName") %><%# Bind("UnitsInStock") %> sintassi, che assegna i valori da questi campi alle proprietà dei Text controlli Label.

Passaggio 5: Determinare il valore dei dati nel gestore eventi DataBound a livello di codice

Al termine del markup di FormView, il passaggio successivo consiste nel determinare a livello di codice se il UnitsInStock valore è minore o uguale a 10. Questa operazione viene eseguita esattamente allo stesso modo con FormView come con DetailsView. Per iniziare, creare un gestore eventi per l'evento di DataBound FormView.

Figura 6: Creare il DataBound gestore eventi

Nel gestore eventi eseguire il cast della proprietà di DataItem FormView in un'istanza ProductsRow e determinare se il UnitsInPrice valore è tale che è necessario visualizzarlo in un tipo di carattere rosso.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
        End If
    End If
End Sub

Passaggio 6: Formattazione del controllo Etichetta UnitsInStockLabel nel ItemTemplate di FormView

Il passaggio finale consiste nel formattare il valore visualizzato UnitsInStock in un tipo di carattere rosso se il valore è 10 o minore. A tale scopo, è necessario accedere al UnitsInStockLabel controllo a livello di codice in ItemTemplate e impostarne le proprietà di stile in modo che il testo venga visualizzato in rosso. Per accedere a un controllo Web in un modello, usare il FindControl("controlID") metodo seguente:

Dim someName As WebControlType = _
    CType(FormViewID.FindControl("controlID"), WebControlType)

Per questo esempio si vuole accedere a un controllo Label il cui ID valore è UnitsInStockLabel, quindi si userà:

Dim unitsInStock As Label = _
    CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

Dopo aver ottenuto un riferimento a livello di codice al controllo Web, è possibile modificarne le proprietà correlate allo stile in base alle esigenze. Come nell'esempio precedente, ho creato una classe CSS in Styles.css denominata LowUnitsInStockEmphasis. Per applicare questo stile al controllo Web Etichetta, impostarne la CssClass proprietà di conseguenza.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
            unitsInStock.CssClass = "LowUnitsInStockEmphasis"
        End If
    End If
End Sub

Nota

La sintassi per la formattazione di un modello a livello di codice che accede al controllo Web usando FindControl("controlID") e quindi l'impostazione delle proprietà correlate allo stile può essere usata anche quando si usano TemplateFields nei controlli DetailsView o GridView. Nell'esercitazione successiva verranno esaminati TemplateFields.

Le figure 7 mostrano FormView quando si visualizza un prodotto il cui UnitsInStock valore è maggiore di 10, mentre il prodotto nella figura 8 ha un valore minore di 10.

Figura 7: Per i prodotti con unità sufficientemente grandi in magazzino, non viene applicata alcuna formattazione personalizzata (fare clic per visualizzare l'immagine a dimensione intera)

Figura 8: Le unità nel numero di magazzino sono visualizzate in rosso per i prodotti con valori di 10 o meno (fare clic per visualizzare l'immagine a dimensione intera)

Formattazione con l'evento gridViewRowDataBound

In precedenza è stata esaminata la sequenza di passaggi che i controlli DetailsView e FormView procedono durante il databinding. Esaminiamo di nuovo questi passaggi come un aggiornamento.

1. Viene generato l'evento del controllo Web dei DataBinding dati.
2. I dati sono associati al controllo Web dei dati.
3. Viene generato l'evento del controllo Web dei DataBound dati.

Questi tre semplici passaggi sono sufficienti per DetailsView e FormView perché visualizzano solo un singolo record. Per GridView, che visualizza tutti i record associati (non solo il primo), il passaggio 2 è un po 'più coinvolto.

Nel passaggio 2 GridView enumera l'origine dati e, per ogni record, crea un'istanza GridViewRow e associa il record corrente. Per ogni GridViewRow elemento aggiunto a GridView, vengono generati due eventi:

• RowCreatedviene generato dopo la creazione dell'oggetto GridViewRow
• RowDataBound viene generato dopo che il record corrente è stato associato all'oggetto GridViewRow.

Per GridView, quindi, il data binding è descritto in modo più accurato dalla sequenza di passaggi seguente:

1. Viene generato l'evento di DataBinding GridView.

2. I dati sono associati a GridView.

   Per ogni record nell'origine dati

   1. Creare un GridViewRow oggetto
   2. Generare l'evento RowCreated
   3. Associare il record all'oggetto GridViewRow
   4. Generare l'evento RowDataBound
   5. Aggiungere l'oggetto GridViewRowRows alla raccolta

3. Viene generato l'evento di DataBound GridView.

Per personalizzare il formato dei singoli record di GridView, è quindi necessario creare un gestore eventi per l'evento RowDataBound . Per illustrare questo aspetto, aggiungiamo un controllo GridView alla CustomColors.aspx pagina che elenca il nome, la categoria e il prezzo per ogni prodotto, evidenziando i prodotti il cui prezzo è inferiore a $10,00 con un colore di sfondo giallo.

Passaggio 7: Visualizzazione delle informazioni sul prodotto in un controllo GridView

Aggiungere un controllo GridView sotto FormView dell'esempio precedente e impostarne la ID proprietà su HighlightCheapProducts. Poiché è già disponibile objectDataSource che restituisce tutti i prodotti nella pagina, associare GridView a tale oggetto. Modificare infine i campi BoundField di GridView in modo da includere solo i nomi, le categorie e i prezzi dei prodotti. Dopo aver modificato il markup di GridView dovrebbe essere simile al seguente:

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

La figura 9 mostra lo stato di avanzamento fino a questo punto quando viene visualizzato tramite un browser.

Figura 9: GridView Elenchi nome, categoria e prezzo per ogni prodotto (fare clic per visualizzare l'immagine a dimensione intera)

Passaggio 8: Determinare il valore dei dati nel gestore eventi RowDataBound a livello di codice

Quando l'oggetto ProductsDataTable è associato a GridView, le relative ProductsRow istanze vengono enumerate e per ogni ProductsRow classe GridViewRow viene creata. La GridViewRowproprietà dell'oggetto DataItem viene assegnata al particolare ProductRowoggetto , dopo il quale viene generato il gestore eventi di RowDataBound GridView. Per determinare il UnitPrice valore di ogni prodotto associato a GridView, è quindi necessario creare un gestore eventi per l'evento gridView RowDataBound . In questo gestore eventi è possibile esaminare il UnitPrice valore per l'oggetto corrente GridViewRow e prendere una decisione di formattazione per tale riga.

Questo gestore eventi può essere creato usando la stessa serie di passaggi di FormView e DetailsView.

Figura 10: Creare un gestore eventi per l'evento di RowDataBound GridView

La creazione del gestore eventi in questo modo causerà l'aggiunta automatica del codice seguente alla parte di codice della pagina di ASP.NET:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

End Sub

Quando l'evento RowDataBound viene generato, il gestore eventi viene passato come secondo parametro un oggetto di tipo GridViewRowEventArgs, che ha una proprietà denominata Row. Questa proprietà restituisce un riferimento all'oggetto GridViewRow associato solo ai dati. Per accedere all'istanza ProductsRow associata a GridViewRow viene usata la DataItem proprietà in questo modo:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
    End If
End Sub

Quando si usa il RowDataBound gestore eventi, è importante tenere presente che GridView è costituito da diversi tipi di righe e che questo evento viene generato per tutti i tipi di riga. Il tipo di un GridViewRowoggetto può essere determinato dalla relativa RowType proprietà e può avere uno dei valori possibili:

• DataRow una riga associata a un record di GridView DataSource
• EmptyDataRow la riga visualizzata se gridView è DataSource vuota
• Footer la riga del piè di pagina; visualizzato se la proprietà di ShowFooter GridView è impostata su True
• Header la riga di intestazione; visualizzato se la proprietà ShowHeader di GridView è impostata su True (impostazione predefinita)
• Pager per GridView che implementa il paging, la riga che visualizza l'interfaccia di paging
• Separator non usato per GridView, ma usato dalle proprietà per i RowType controlli DataList e Repeater, due controlli Web dati verranno illustrati nelle esercitazioni future

Poiché le EmptyDataRowrighe , Header, Footere Pager non sono associate a un DataSource record, avranno sempre un valore per Nothing la relativa DataItem proprietà. Per questo motivo, prima di provare a usare la proprietà dell'oggetto DataItem correnteGridViewRow, è prima necessario assicurarsi di gestire un oggetto DataRow. A tale scopo, è possibile controllare la GridViewRowproprietà dell'oggetto RowType in questo modo:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
        End If
    End If
End Sub

Passaggio 9: Evidenziazione della riga gialla quando il valore UnitPrice è minore di $10,00

L'ultimo passaggio consiste nell'evidenziare l'intero oggetto GridViewRow a livello di codice se il UnitPrice valore per tale riga è minore di $10,00. La sintassi per l'accesso alle righe o alle celle di GridView è uguale a quella di DetailsView GridViewID.Rows(index) per accedere all'intera riga, GridViewID.Rows(index).Cells(index) per accedere a una cella specifica. Tuttavia, quando il RowDataBound gestore eventi attiva il data bound GridViewRow deve ancora essere aggiunto alla raccolta di Rows GridView. Non è pertanto possibile accedere all'istanza corrente GridViewRow dal RowDataBound gestore eventi utilizzando l'insieme Rows.

GridViewID.Rows(index)Anziché , è possibile fare riferimento all'istanza corrente GridViewRow nel RowDataBound gestore eventi usando e.Row. Ciò significa che per evidenziare l'istanza corrente GridViewRow dal RowDataBound gestore eventi si userà:

e.Row.BackColor = System.Drawing.Color.Yellow

Invece di impostare direttamente la GridViewRowproprietà di BackColor , è consigliabile usare le classi CSS. Ho creato una classe CSS denominata AffordablePriceEmphasis che imposta il colore di sfondo su giallo. Il gestore eventi completato RowDataBound segue:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
            e.Row.CssClass = "AffordablePriceEmphasis"
        End If
    End If
End Sub

Figura 11: I prodotti più accessibili sono evidenziati in giallo (fare clic per visualizzare l'immagine a dimensione intera)

Riepilogo

In questa esercitazione è stato illustrato come formattare GridView, DetailsView e FormView in base ai dati associati al controllo. A tale scopo, è stato creato un gestore eventi per gli DataBound eventi o RowDataBound , in cui i dati sottostanti sono stati esaminati insieme a una modifica di formattazione, se necessario. Per accedere ai dati associati a un controllo DetailsView o FormView, viene usata la DataItem proprietà nel DataBound gestore eventi. Per un controllo GridView, ogni GridViewRow proprietà dell'istanza DataItem contiene i dati associati a tale riga, disponibile nel RowDataBound gestore eventi.

La sintassi per la modifica a livello di codice della formattazione del controllo Web dei dati dipende dal controllo Web e dal modo in cui vengono visualizzati i dati da formattare. Per i controlli DetailsView e GridView, è possibile accedere alle righe e alle celle tramite un indice ordinale. Per FormView, che usa modelli, il FindControl("controlID") metodo viene comunemente usato per individuare un controllo Web dall'interno del modello.

Nell'esercitazione successiva verrà illustrato come usare i modelli con GridView e DetailsView. Verrà inoltre visualizzata un'altra tecnica per personalizzare la formattazione in base ai dati sottostanti.

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.

Grazie speciali

Questa serie di esercitazioni è stata esaminata da molti revisori utili. I revisori principali per questa esercitazione sono stati E.R. Gilmore, Dennis Patterson e Dan Jagers. Interessati a esaminare i prossimi articoli MSDN? In tal caso, lasciami una riga in mitchell@4GuysFromRolla.com.

IndietroAvanti