Aangepaste opmaak op basis van gegevens (VB)

door Scott Mitchell

PDF downloaden

Het aanpassen van de indeling van de GridView, DetailsView of FormView op basis van de gegevens die eraan zijn gebonden, kan op meerdere manieren worden uitgevoerd. In deze handleiding bekijken we hoe u data-gebaseerde opmaak kunt uitvoeren door de DataBound- en RowDataBound-gebeurtenis-handlers te gebruiken.

Introductie

Het uiterlijk van de besturingselementen GridView, DetailsView en FormView kan worden aangepast via een groot aantal stijlgerelateerde eigenschappen. Eigenschappen zoals CssClass, Font, BorderWidth, BorderStyle, BorderColor, Width en Height, onder andere, bepalen het algemene uiterlijk van het gerenderde besturingselement. Eigenschappen, waaronder HeaderStyle, RowStyleen AlternatingRowStyleandere, staan toe dat dezelfde stijlinstellingen worden toegepast op bepaalde secties. Op dezelfde manier kunnen deze stijlinstellingen worden toegepast op veldniveau.

In veel scenario's zijn de opmaakvereisten echter afhankelijk van de waarde van de weergegeven gegevens. Als u bijvoorbeeld de aandacht wilt vestigen op producten die niet op voorraad zijn, kan een rapport met productinformatie de achtergrondkleur geel instellen voor die producten waarvan UnitsInStock en UnitsOnOrder velden beide gelijk zijn aan 0. Om de duurdere producten te markeren, willen we mogelijk de prijzen van die producten weergeven die meer dan $ 75,00 in een vet lettertype kosten.

Het aanpassen van de indeling van de GridView, DetailsView of FormView op basis van de gegevens die eraan zijn gebonden, kan op meerdere manieren worden uitgevoerd. In deze zelfstudie bekijken we hoe u data gebonden opmaak kunt toepassen door gebruik te maken van de DataBound en RowDataBound gebeurtenis-handlers. In de volgende zelfstudie verkennen we een alternatieve benadering.

De gebeurtenis-handler vanDataBoundhet DetailsView-besturingselement gebruiken

Wanneer gegevens zijn gebonden aan een DetailsView, hetzij vanuit een besturingselement voor gegevensbronnen of via programmatisch toewijzen van gegevens aan de eigenschap van DataSource het besturingselement en het aanroepen DataBind() van de methode, vindt de volgende reeks stappen plaats:

1. De gebeurtenis van de gegevenswebbesturing DataBinding wordt geactiveerd.
2. De gegevens zijn gebonden aan het besturingselement voor het gegevensweb.
3. De gebeurtenis van de gegevenswebbesturing DataBound wordt geactiveerd.

Aangepaste logica kan direct na stap 1 en 3 worden geïnjecteerd via een gebeurtenis-handler. Door een gebeurtenis-handler voor de DataBound gebeurtenis te maken, kunnen we programmatisch bepalen welke gegevens zijn gebonden aan het gegevenswebbeheer en zo nodig de opmaak aanpassen. Ter illustratie hiervan gaan we een DetailsView maken waarin algemene informatie over een product wordt weergegeven, maar de UnitPrice waarde wordt vetgedrukt, cursief lettertype weergegeven als deze hoger is dan $ 75,00.

Stap 1: De productgegevens weergeven in een DetailsView

Open de CustomColors.aspx pagina in de CustomFormatting map, sleep een DetailsView-besturingselement van de Werkset naar de Ontwerper, stel de eigenschapswaarde ID in op ExpensiveProductsPriceInBoldItalic, en bind deze aan een nieuw ObjectDataSource-besturingselement dat de ProductsBLL methode van de GetProducts() klasse aanroept. De gedetailleerde stappen voor het voltooien hiervan worden hier weggelaten voor beknoptheid, omdat we ze in de vorige zelfstudies in detail hebben onderzocht.

Nadat u de ObjectDataSource hebt gebonden aan de DetailsView, kunt u de lijst met velden even wijzigen. Ik heb ervoor gekozen om de ProductID, SupplierID, CategoryID, UnitsInStock, UnitsOnOrder, ReorderLevel, en Discontinued BoundFields te verwijderen, en de resterende BoundFields een nieuwe naam te geven en opnieuw te formatteren. Ik heb ook de Width en Height instellingen gewist. Omdat in DetailsView slechts één record wordt weergegeven, moeten we paginering inschakelen om de eindgebruiker in staat te stellen alle producten weer te geven. Schakel hiervoor het selectievakje Inschakelen van Paginering in de smart tag van DetailsView in.

Afbeelding 1: Afbeelding 1: Schakel het selectievakje Paging inschakelen in de Smart Tag van DetailsView in (klik om de volledige afbeelding weer te geven)

Na deze wijzigingen is de DetailsView-markering:

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

Neem even de tijd om deze pagina in uw browser te testen.

Afbeelding 2: In het besturingselement DetailsView wordt één product tegelijk weergegeven (klik hier om de volledige afbeelding weer te geven)

Stap 2: Programmatisch de waarde van de gegevens bepalen in de DataBound Event Handler

Als we de prijs in een vet en cursief lettertype willen weergeven voor die producten waarvan de UnitPrice-waarde hoger is dan $ 75,00, moeten we eerst in staat zijn de UnitPrice-waarde programmatisch te bepalen. Voor de DetailsView kan dit worden bereikt in de DataBound gebeurtenis-handler. Als u de gebeurtenis-handler wilt maken, klikt u op DetailsView in de Ontwerper en gaat u naar het venster Eigenschappen. Druk op F4 om het weer te geven, als deze niet zichtbaar is of ga naar het menu Beeld en selecteer de menuoptie Eigenschappenvenster. Klik in het venster Eigenschappen op het bliksemschichtpictogram om de gebeurtenissen van DetailsView weer te geven. Dubbelklik vervolgens op de DataBound gebeurtenis of typ de naam van de gebeurtenis-handler die u wilt maken.

Afbeelding 3: Een gebeurtenis-handler maken voor de DataBound gebeurtenis

Opmerking

U kunt ook een gebeurtenis-handler maken op basis van het codegedeelte van de ASP.NET pagina. Daar vindt u twee vervolgkeuzelijsten boven aan de pagina. Selecteer het object in de linker vervolgkeuzelijst en de gebeurtenis waarvoor u een handler wilt maken in de rechter vervolgkeuzelijst en Visual Studio maakt automatisch de juiste gebeurtenis-handler.

Als u dit doet, wordt de event handler automatisch aangemaakt en wordt u naar het deel van de code geleid waar deze is toegevoegd. Op dit moment ziet u het volgende:

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

De gegevens die zijn gebonden aan de DetailsView, kunnen worden geopend via de DataItem eigenschap. U herinnert zich nog dat we onze besturingselementen binden aan een sterk getypte DataTable, die bestaat uit een verzameling sterk getypte DataRow-exemplaren. Wanneer de gegevenstabel is gebonden aan de DetailsView, wordt de eerste DataRow in de gegevenstabel toegewezen aan de eigenschap DetailsView DataItem . DataItem De eigenschap wordt specifiek toegewezen aan een DataRowView object. We kunnen de DataRowView-eigenschap van Row gebruiken om toegang te krijgen tot het onderliggende DataRow-object, wat eigenlijk een ProductsRow-instantie is. Zodra we dit ProductsRow exemplaar hebben, kunnen we onze beslissing nemen door simpelweg de eigenschapswaarden van het object te inspecteren.

De volgende code laat zien hoe u kunt bepalen of de UnitPrice waarde die is gebonden aan het besturingselement DetailsView groter is dan $ 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

Opmerking

Omdat UnitPrice een NULL waarde in de database kan hebben, controleren we eerst dat we niet met een NULL waarde te maken hebben voordat we toegang krijgen tot de ProductsRow eigenschap van UnitPrice. Deze controle is belangrijk omdat als we proberen toegang te krijgen tot de UnitPrice eigenschap wanneer het een NULL waarde heeft, het ProductsRow object een StrongTypingException-uitzondering genereert.

Stap 3: de prijswaarde van de eenheid opmaken in de DetailsView

Op dit moment kunnen we bepalen of de UnitPrice waarde die is gebonden aan de DetailsView een waarde heeft die hoger is dan $ 75,00, maar we moeten nog wel zien hoe we de opmaak van de DetailsView programmatisch kunnen aanpassen. Als u de opmaak van een hele rij in de DetailsView wilt wijzigen, krijgt u programmatisch toegang tot de rij met behulp van DetailsViewID.Rows(index); om een bepaalde cel te wijzigen, gebruikt u DetailsViewID.Rows(index).Cells(index) toegang. Zodra we een verwijzing naar de rij of cel hebben, kunnen we het uiterlijk ervan aanpassen door de stijlgerelateerde eigenschappen in te stellen.

Als u een rij programmatisch opent, moet u de index van de rij kennen, die begint bij 0. De UnitPrice rij is de vijfde rij in de DetailsView, waardoor deze een index van 4 geeft en programmatisch toegankelijk maakt met behulp van ExpensiveProductsPriceInBoldItalic.Rows(4). Op dit moment kan de inhoud van de hele rij worden weergegeven in een vet, cursief lettertype met behulp van de volgende code:

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

Dit maakt echter zowel het label (Prijs) als de waarde vet en cursief. Als we alleen de waarde vet en cursief willen maken, moeten we deze opmaak toepassen op de tweede cel in de rij. Dit kan worden bereikt met behulp van het volgende:

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

Omdat onze zelfstudies tot nu toe opmaakmodellen hebben gebruikt om een schone scheiding te behouden tussen de weergegeven opmaak en stijlgerelateerde informatie, in plaats van de specifieke stijleigenschappen in te stellen zoals hierboven wordt weergegeven, gebruiken we in plaats daarvan een CSS-klasse. Open het Styles.css stijlblad en voeg een nieuwe CSS-klasse toe met de volgende definitie: ExpensivePriceEmphasis

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

Stel vervolgens in de DataBound gebeurtenishandler de eigenschap van de cel CssClass in op ExpensivePriceEmphasis. De volgende code toont de DataBound gebeurtenis-handler in zijn geheel:

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

Bij het weergeven van Chai, die minder dan $ 75,00 kost, wordt de prijs weergegeven in een normaal lettertype (zie afbeelding 4). Bij het bekijken van Mishi Kobe Niku, dat een prijs van $97,00 heeft, wordt de prijs echter weergegeven in een vet, cursief lettertype (zie afbeelding 5).

Afbeelding 4: Prijzen kleiner dan $ 75,00 worden weergegeven in een normaal lettertype (klik om de afbeelding volledig weer te geven)

Afbeelding 5: De prijzen van dure producten worden weergegeven in een vet, cursief lettertype (klik om de volledige afbeelding weer te geven)

De event-handler vanDataBoundhet FormView-besturingselement gebruiken

De stappen voor het bepalen van de onderliggende gegevens die aan een FormView zijn gebonden, zijn identiek aan die voor een DetailsView. Maak een DataBound gebeurtenis-handler, cast de DataItem eigenschap naar het juiste objecttype dat aan het besturingselement is gekoppeld, en bepaal hoe verder te gaan. De FormView en DetailsView verschillen echter in de wijze waarop het uiterlijk van hun gebruikersinterface wordt bijgewerkt.

De FormView bevat geen BoundFields en mist daarom de Rows verzameling. In plaats daarvan bestaat een FormView uit sjablonen, die een combinatie van statische HTML-, webbesturingselementen en gegevensbindingsyntaxis kunnen bevatten. Het aanpassen van de stijl van een FormView omvat meestal het aanpassen van de stijl van een of meer webbesturingselementen in de sjablonen van FormView.

Om dit te illustreren, gebruiken we een FormView om producten zoals in het vorige voorbeeld weer te geven, maar deze keer laten we alleen de productnaam en eenheden op voorraad weergeven met de eenheden op voorraad die in een rood lettertype worden weergegeven als deze kleiner is dan of gelijk is aan 10.

Stap 4: De productgegevens weergeven in een FormView

Voeg een FormView toe aan de CustomColors.aspx-pagina onder de DetailsView en stel de eigenschap ID in op LowStockedProductsInRed. Koppel de FormView aan het besturingselement ObjectDataSource dat is gemaakt in de vorige stap. Hiermee maakt u een ItemTemplate, EditItemTemplateen InsertItemTemplate voor de FormView. Verwijder de EditItemTemplate en InsertItemTemplate en vereenvoudig de ItemTemplate om alleen de ProductName en UnitsInStock waarden op te nemen, elk in een correct benoemde label. Net als bij de DetailsView uit het vorige voorbeeld, vinkt u ook het selectievakje "Paging inschakelen" aan in de slimme label van de FormView.

Nadat deze wijzigingen zijn uitgevoerd, ziet de opmaak van uw FormView er ongeveer als volgt uit:

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

Houd er rekening mee dat het ItemTemplate volgende bevat:

• Statische HTML de tekst 'Product:' en 'Eenheden op voorraad:' samen met de <br /> en <b> elementen.
• Web bepaalt de twee labelbesturingselementen ProductNameLabel en UnitsInStockLabel.
• Databinding syntaxis de <%# Bind("ProductName") %> en <%# Bind("UnitsInStock") %> syntaxis, waarmee de waarden van deze velden worden toegewezen aan de eigenschappen van de Label-besturingselementenText.

Stap 5: Programmatisch de waarde van de gegevens bepalen in de DataBound Event Handler

Nu de opmaak van FormView is voltooid, is de volgende stap het programmatisch bepalen of de UnitsInStock waarde kleiner is dan of gelijk is aan 10. Dit wordt op exact dezelfde manier bereikt met de FormView als met de DetailsView. Maak een event handler voor de DataBound gebeurtenis van de FormView.

Afbeelding 6: De DataBound gebeurtenis-handler maken

In de event handler cast de FormView-eigenschap DataItem naar een ProductsRow instantie en bepalen of de UnitsInPrice waarde zodanig is dat we deze in een rood lettertype moeten weergeven.

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

Stap 6: Het labelbesturingselement UnitsInStockLabel opmaken in de ItemTemplate van FormView

De laatste stap is het opmaken van de weergegeven UnitsInStock waarde in een rood lettertype als de waarde 10 of minder is. Hiervoor moeten we programmatisch toegang krijgen tot het UnitsInStockLabel besturingselement in ItemTemplate en de stijleigenschappen instellen, zodat de tekst in rood wordt weergegeven. Als u toegang wilt krijgen tot een webbeheer in een sjabloon, gebruikt u de FindControl("controlID") methode als volgt:

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

Voor ons voorbeeld willen we toegang krijgen tot een Label-besturingselement waarvan de waarde ID is UnitsInStockLabel, dus gebruiken we:

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

Zodra we een programmatische verwijzing naar het webbesturingselement hebben, kunnen we de stijlgerelateerde eigenschappen zo nodig wijzigen. Net als in het vorige voorbeeld heb ik een CSS-klasse gemaakt in Styles.css, genaamd LowUnitsInStockEmphasis. Als u deze stijl wilt toepassen op het Label-webbesturingselement, stelt u de eigenschap CssClass dienovereenkomstig in.

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

Opmerking

De syntaxis voor het opmaken van een sjabloon door programmatisch toegang te krijgen tot de webcontrole met behulp van FindControl("controlID") en vervolgens het instellen van de stijlgerelateerde eigenschappen, kan ook worden gebruikt bij TemplateFields in de besturingselementen DetailsView of GridView. In onze volgende zelfstudie bekijken we TemplateFields.

In afbeelding 7 ziet u de FormView bij het weergeven van een product waarvan UnitsInStock de waarde groter is dan 10, terwijl het product in afbeelding 8 de waarde kleiner dan 10 heeft.

Afbeelding 7: Voor producten met voldoende grote eenheden op voorraad wordt er geen aangepaste opmaak toegepast (klik om de volledige afbeelding weer te geven)

Afbeelding 8: De eenheden in voorraadnummer worden rood weergegeven voor die producten met waarden van 10 of minder (klik om de volledige afbeelding weer te geven)

Opmaak met de gebeurtenis van GridViewRowDataBound

Eerder hebben we de volgorde onderzocht van de stappen die de detailsweergave en FormView-besturingselementen doorlopen tijdens het binden van gegevens. Laten we deze stappen nog een keer bekijken als een opfrisser.

1. De gebeurtenis van de gegevenswebbesturing DataBinding wordt geactiveerd.
2. De gegevens zijn gebonden aan het besturingselement voor het gegevensweb.
3. De gebeurtenis van de gegevenswebbesturing DataBound wordt geactiveerd.

Deze drie eenvoudige stappen zijn voldoende voor de DetailsView en FormView, omdat ze slechts één record weergeven. Voor GridView, waarin alle records worden weergegeven die eraan zijn gebonden (niet alleen de eerste), is stap 2 iets meer betrokken.

In stap 2 inventariseert GridView de gegevensbron en maakt voor elke record een GridViewRow exemplaar en verbindt de huidige record eraan. Voor elk GridViewRow item dat is toegevoegd aan GridView, worden er twee gebeurtenissen gegenereerd:

• RowCreated brandt nadat de GridViewRow is gemaakt
• RowDataBound wordt geactiveerd nadat de huidige record is gebonden aan de GridViewRow.

Voor GridView wordt de gegevensbinding nauwkeuriger beschreven door de volgende reeks stappen:

1. De gebeurtenis van DataBinding GridView wordt geactiveerd.

2. De gegevens zijn gebonden aan de GridView.

   Voor elke record in de gegevensbron

   1. GridViewRow Een object maken
   2. Het RowCreated evenement triggeren
   3. De record binden aan de GridViewRow
   4. Het RowDataBound evenement triggeren
   5. Voeg de GridViewRow toe aan de Rows collectie

3. De gebeurtenis van DataBound GridView wordt geactiveerd.

Als u de indeling van de afzonderlijke records van GridView wilt aanpassen, moeten we vervolgens een gebeurtenis-handler voor de RowDataBound gebeurtenis maken. Ter illustratie gaan we een GridView toevoegen aan de CustomColors.aspx pagina met de naam, categorie en prijs voor elk product, waarbij deze producten worden gemarkeerd waarvan de prijs lager is dan $ 10,00 met een gele achtergrondkleur.

Stap 7: Productgegevens weergeven in een GridView

Voeg een GridView toe onder de FormView uit het vorige voorbeeld en stel de eigenschap in ID op HighlightCheapProducts. Omdat we al een ObjectDataSource hebben die alle producten op de pagina retourneert, bindt u de GridView eraan. Bewerk ten slotte de BoundFields van GridView om alleen de namen, categorieën en prijzen van de producten op te nemen. Nadat de markeringen van GridView zijn bewerkt, ziet het er als volgt uit:

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

In afbeelding 9 ziet u de voortgang naar dit punt wanneer u deze bekijkt via een browser.

Afbeelding 9: De GridView bevat de naam, categorie en prijs voor elk product (klik om de volledige afbeelding weer te geven)

Stap 8: Programmatisch bepalen van de waarde van de gegevens in de RowDataBound Event Handler

Wanneer de ProductsDataTable database is gebonden aan de GridView worden de ProductsRow exemplaren ervan geïnventariseerd en voor elk ProductsRow exemplaar wordt er een GridViewRow gemaakt. De eigenschap GridViewRow is toegewezen aan het specifieke DataItem, waarna de gebeurtenishandler van de GridView ProductRow wordt gegenereerd. Om de UnitPrice waarde te bepalen voor elk product dat is gebonden aan GridView, moeten we vervolgens een gebeurtenis-handler maken voor de gebeurtenis van GridView RowDataBound . In deze gebeurtenis-handler kunnen we de UnitPrice waarde voor de huidige GridViewRow controleren en een opmaakbeslissing maken voor die rij.

Deze gebeurtenis-handler kan worden gemaakt met dezelfde reeks stappen als met de FormView en DetailsView.

Afbeelding 10: Een gebeurtenis-handler maken voor de gebeurtenis van GridView RowDataBound

Als u de gebeurtenis-handler op deze manier maakt, wordt de volgende code automatisch toegevoegd aan het codegedeelte van de ASP.NET pagina:

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

End Sub

Wanneer de RowDataBound gebeurtenis optreedt, wordt als de tweede parameter een object van het type GridViewRowEventArgs meegestuurd, dat een eigenschap heeft met de naam Row. Deze eigenschap retourneert een verwijzing naar de GridViewRow die zojuist is verbonden met gegevens. Ga als volgt te werk om toegang te krijgen tot het ProductsRow exemplaar dat is gebonden aan de GridViewRow: we gebruiken de DataItem eigenschap zoals volgt:

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

Wanneer u met de RowDataBound gebeurtenis-handler werkt, is het belangrijk om er rekening mee te houden dat de GridView bestaat uit verschillende typen rijen en dat deze gebeurtenis wordt geactiveerd voor alle rijtypen. Het type van GridViewRow kan worden bepaald door de eigenschap RowType en kan een van de mogelijke waarden hebben:

• DataRow een rij die is gebonden aan een record van de GridView DataSource
• EmptyDataRow de rij die wordt weergegeven als de rasterweergave DataSource leeg is
• Footer de voettekstrij; wordt weergegeven als de eigenschap van GridView ShowFooter is ingesteld op True
• Header de veldnamenrij; wordt weergegeven als de eigenschap ShowHeader van GridView is ingesteld op True (de standaardinstelling)
• Pager voor GridViews die paginering implementeren, de rij die de pagineringsinterface weergeeft
• Separator niet gebruikt voor GridView, maar gebruikt door de eigenschappen van de RowType-besturingselementen DataList en Repeater, twee gegevens-webbesturingselementen die worden besproken in toekomstige zelfstudies

Omdat de EmptyDataRowrijen Header, Footeren Pager rijen niet aan een DataSource record zijn gekoppeld, hebben ze altijd een waarde Nothing voor hun DataItem eigenschap. Daarom moeten we, voordat we proberen te werken met de eigenschap van de huidige GridViewRow, er eerst voor zorgen dat we met een DataItem te maken hebben. Dit kan worden bereikt door de GridViewRow-eigenschap van de RowType te controleren zoals volgt:

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

Stap 9: de rij geel markeren wanneer de prijs per eenheid kleiner is dan $ 10,00

De laatste stap is het programmatisch markeren van het geheel GridViewRow als de UnitPrice waarde voor die rij kleiner is dan $ 10,00. De syntaxis voor het openen van de rijen of cellen van een GridView is hetzelfde als bij de DetailsView: GridViewID.Rows(index) voor toegang tot de hele rij en GridViewID.Rows(index).Cells(index) voor toegang tot een bepaalde cel. Wanneer de RowDataBound gebeurtenis-handler echter wordt geactiveerd, moet de gegevensgrens GridViewRow nog worden toegevoegd aan de verzameling van Rows GridView. Daarom hebt u geen toegang tot het huidige GridViewRow exemplaar vanuit de RowDataBound gebeurtenis-handler met behulp van de verzameling rijen.

In plaats van GridViewID.Rows(index), kunnen we verwijzen naar het huidige GridViewRow exemplaar in de RowDataBound gebeurtenis-handler met behulp van e.Row. Dat wil zeggen, om het huidige GridViewRow exemplaar te markeren vanuit de RowDataBound gebeurtenishandler, zouden we gebruiken:

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

In plaats van de GridViewRoweigenschap rechtstreeks BackColor in te stellen, gaan we aan de slag met het gebruik van CSS-klassen. Ik heb een CSS-klasse gemaakt die AffordablePriceEmphasis de achtergrondkleur op geel instelt. De voltooide RowDataBound gebeurtenis-handler volgt:

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

Afbeelding 11: De meest betaalbare producten zijn geel gemarkeerd (klik om de afbeelding volledig weer te geven)

Samenvatting

In deze zelfstudie hebben we gezien hoe u de GridView, DetailsView en FormView kunt opmaken op basis van de gegevens die aan het besturingselement zijn gebonden. Hiervoor hebben we een gebeurtenis-handler gemaakt voor de DataBound of RowDataBound gebeurtenissen, waarbij de onderliggende gegevens zijn onderzocht en een opmaakwijziging is toegepast indien nodig. Voor toegang tot gebonden gegevens van een DetailsView of FormView gebruiken we de DataItem eigenschap in de DataBound gebeurtenisafhandelaar; voor een GridView bevat de GridViewRow eigenschap van elke DataItem instantie de gegevens die aan die rij zijn gebonden, en deze zijn beschikbaar in de RowDataBound gebeurtenisafhandelaar.

De syntaxis voor het programmatisch aanpassen van de opmaak van het web besturingselement voor gegevens is afhankelijk van het web besturingselement en hoe de gegevens worden weergegeven die moeten worden opgemaakt. Voor de controle-elementen DetailsView en GridView kunnen de rijen en cellen worden benaderd met behulp van een ordinale index. Voor de FormView, die gebruikmaakt van sjablonen, wordt de FindControl("controlID") methode vaak gebruikt om een webbesturingselement te vinden vanuit de sjabloon.

In de volgende zelfstudie bekijken we hoe u sjablonen gebruikt met de GridView en DetailsView. Daarnaast zien we een andere techniek voor het aanpassen van de opmaak op basis van de onderliggende gegevens.

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

Speciale dank aan

Deze tutorialreeks is beoordeeld door veel behulpzame beoordelers. Hoofdrevisoren voor deze zelfstudie waren E.R. Gilmore, Dennis Patterson en Dan Jagers. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

Vorigevolgende