De DataList en Repeater op basis van gegevens opmaken (C#)

door Scott Mitchell

PDF downloaden

In deze handleiding zullen we voorbeelden doorlopen van hoe we het uiterlijk van de elementen DataList en Repeater opmaken, door gebruik te maken van opmaakfuncties in sjablonen of door de DataBound-gebeurtenis te verwerken.

Introductie

Zoals we in de vorige zelfstudie hebben gezien, biedt DataList een aantal stijlgerelateerde eigenschappen die van invloed zijn op het uiterlijk. In het bijzonder hebben we gezien hoe we standaard CSS-klassen kunnen toewijzen aan de DataList sHeaderStyle, ItemStyleen AlternatingItemStyleSelectedItemStyleeigenschappen. Naast deze vier eigenschappen bevat de DataList een aantal andere stijlgerelateerde eigenschappen, zoals Font, ForeColor, BackColoren BorderWidth, om er een paar te noemen. Het besturingselement Repeater bevat geen stijlgerelateerde eigenschappen. Dergelijke stijlinstellingen moeten rechtstreeks in de markeringen in de sjablonen van Repeater worden gemaakt.

Hoe gegevens moeten worden opgemaakt, is echter vaak afhankelijk van de gegevens zelf. Wanneer we bijvoorbeeld producten vermelden, willen we mogelijk de productgegevens weergeven in een lichtgrijze tekstkleur als deze wordt stopgezet, of willen we de UnitsInStock waarde markeren als deze nul is. Zoals we in de vorige zelfstudies hebben gezien, bieden de GridView, DetailsView en FormView twee verschillende manieren om hun uiterlijk op te maken op basis van hun gegevens:

• De DataBound gebeurtenis maakt een gebeurtenis-handler voor de juiste DataBound gebeurtenis, die wordt geactiveerd nadat de gegevens aan elk item zijn gebonden (voor de GridView was het de RowDataBound gebeurtenis; voor de DataList en Repeater is het de ItemDataBound gebeurtenis). In die gebeurtenisbeheerder kunnen de zojuist gebonden gegevens worden onderzocht en formatteringsbeslissingen worden genomen. We hebben deze techniek onderzocht in de zelfstudie Aangepaste opmaak op basis van gegevens .
• Opmaakfuncties in sjablonen kunnen we bij het gebruik van TemplateFields in de besturingselementen DetailsView of GridView, of een sjabloon in het besturingselement FormView, een opmaakfunctie toevoegen aan de code-behind-klasse van de ASP.NET-pagina, de bedrijfslogische laag of een andere klassebibliotheek die toegankelijk is voor de webtoepassing. Deze opmaakfunctie kan een willekeurig aantal invoerparameters accepteren, maar moet de HTML retourneren om in de sjabloon weer te geven. Opmaakfuncties werden eerst onderzocht in de zelfstudie Sjabloonvelden gebruiken in de GridView Control.

Beide opmaaktechnieken zijn beschikbaar met de besturingselementen DataList en Repeater. In deze zelfstudie doorlopen we voorbeelden met behulp van beide technieken voor beide besturingselementen.

ItemDataBoundDe gebeurtenis-handler gebruiken

Wanneer gegevens zijn gebonden aan een DataList, hetzij vanuit een gegevensbronbesturingselement of via een programma dat gegevens toewijst aan de DataSource eigenschap van het besturingselement en zijn methode DataBind() aanroept, wordt de DataList-gebeurtenis DataBinding geactiveerd, de gegevensbron geïnventariseerd en wordt elke gegevensrecord gebonden aan de DataList. Voor elke record in de gegevensbron maakt DataList een DataListItem object dat vervolgens is gebonden aan de huidige record. Tijdens dit proces worden in DataList twee gebeurtenissen gegenereerd:

• ItemCreated brandt nadat de DataListItem is gemaakt
• ItemDataBound wordt geactiveerd nadat de huidige record is gebonden aan de DataListItem

De volgende stappen geven een overzicht van het gegevensbindingsproces voor het besturingselement DataList.

1. Het DataList DataBinding-event wordt geactiveerd

2. De gegevens zijn gebonden aan de DataList

   Voor elke record in de gegevensbron

   1. DataListItem Een object maken
   2. ItemCreated De gebeurtenis starten
   3. De record binden aan de DataListItem
   4. ItemDataBound De gebeurtenis starten
   5. Voeg de DataListItem toe aan de Items collectie

Bij het koppelen van gegevens aan het Repeater-besturingselement, doorloopt het exact dezelfde reeks stappen. Het enige verschil is dat in plaats van DataListItem exemplaren te maken, de Repeater RepeaterItem gebruikt.

Opmerking

De alerte lezer heeft misschien een kleine afwijking opgemerkt tussen de reeks stappen die worden doorlopen wanneer de DataList en Repeater aan gegevens zijn gebonden versus wanneer de GridView aan gegevens is gebonden. Aan het einde van het gegevensbindingsproces genereert GridView de DataBound gebeurtenis. Het besturingselement DataList en Repeater hebben echter geen dergelijke gebeurtenis. Dit komt doordat de besturingselementen DataList en Repeater zijn gemaakt in het ASP.NET 1.x-tijdsbestek, voordat het gebeurtenishandlerpatroon vóór en na het niveau gebruikelijk was geworden.

Net als bij GridView is één optie voor opmaak op basis van de gegevens het maken van een gebeurtenis-handler voor de ItemDataBound gebeurtenis. Met deze gebeurtenis-handler worden de gegevens gecontroleerd die zojuist zijn gebonden aan DataListItem of RepeaterItem, en indien nodig de opmaak van het besturingselement beïnvloeden.

Voor het besturingselement DataList kunnen opmaakwijzigingen voor het hele item worden geïmplementeerd met behulp van de stijlgerelateerde eigenschappen, waaronder de standaard DataListItem, Font, ForeColor, BackColor, enzovoort. Om de opmaak van bepaalde webbesturingselementen in de DataList-sjabloon te beïnvloeden, moeten we programmatisch toegang krijgen tot en de stijl van deze webbesturingselementen wijzigen. We hebben gezien hoe u dit kunt doen in de handleiding Aangepaste opmaak op basis van gegevens. Net als het besturingselement Repeater heeft de RepeaterItem klasse geen stijlgerelateerde eigenschappen. Daarom moeten alle stijlgerelateerde wijzigingen in een RepeaterItem gebeurtenishandler ItemDataBound worden uitgevoerd door programmatisch toegang te krijgen tot en bij te werken webbesturingselementen in de sjabloon.

Omdat de ItemDataBound opmaaktechniek voor de DataList en Repeater vrijwel identiek is, richt ons voorbeeld zich op het gebruik van de DataList.

Stap 1: Productinformatie weergeven in de DataList

Voordat we ons zorgen maken over de opmaak, gaan we eerst een pagina maken die gebruikmaakt van een DataList om productgegevens weer te geven. In de vorige zelfstudie hebben we een DataList gemaakt waarvan ItemTemplate elke productnaam, categorie, leverancier, hoeveelheid per eenheid en prijs wordt weergegeven. Laten we deze functionaliteit hier in deze zelfstudie herhalen. Hiervoor kunt u de DataList en de bijbehorende ObjectDataSource helemaal opnieuw maken, of u kunt deze besturingselementen kopiëren vanaf de pagina die u in de vorige zelfstudie hebt gemaakt (Basics.aspx) en deze in de pagina voor deze zelfstudie (Formatting.aspx) plakken.

Zodra u de DataList- en ObjectDataSource-functionaliteit van Basics.aspx naar Formatting.aspx hebt gerepliceerd, neem dan even de tijd om de DataList-eigenschap ID te wijzigen van DataList1 naar een meer beschrijvende eigenschap ItemDataBoundFormattingExample. Bekijk vervolgens de DataList in een browser. Zoals in afbeelding 1 wordt weergegeven, is het enige opmaakverschil tussen elk product dat de achtergrondkleur afwisselt.

Afbeelding 1: De producten worden vermeld in het besturingselement DataList (klik hier om de volledige afbeelding weer te geven)

Voor deze zelfstudie gaan we de DataList zo opmaken dat alle producten met een prijs lager dan $ 20,00 zowel de naam als de eenheidsprijs geel hebben gemarkeerd.

Stap 2: Programmatisch de waarde van de gegevens bepalen in de ItemDataBound-gebeurtenishandler

Aangezien alleen die producten met een prijs onder $ 20,00 de aangepaste opmaak hebben toegepast, moeten we de prijs van elk product kunnen bepalen. Bij het binden van gegevens aan een DataList worden de records in de bijbehorende gegevensbron opgesomd en wordt voor elke record een DataListItem exemplaar gemaakt, waarbij de gegevensbronrecord aan de DataListItemgegevensbron wordt gekoppeld. Nadat de gegevens van de specifieke record zijn gebonden aan het huidige DataListItem object, wordt de datalist-gebeurtenis ItemDataBound geactiveerd. We kunnen een gebeurtenis-handler voor deze gebeurtenis maken om de gegevenswaarden voor de huidige DataListItem te controleren en, op basis van deze waarden, opmaakwijzigingen aan te brengen die nodig zijn.

Maak een ItemDataBound gebeurtenis voor de DataList en voeg de volgende code toe:

protected void ItemDataBoundFormattingExample_ItemDataBound
    (object sender, DataListItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item ||
        e.Item.ItemType == ListItemType.AlternatingItem)
    {
        // Programmatically reference the ProductsRow instance bound
        // to this DataListItem
        Northwind.ProductsRow product =
            (Northwind.ProductsRow)((System.Data.DataRowView)e.Item.DataItem).Row;
        // See if the UnitPrice is not NULL and less than $20.00
        if (!product.IsUnitPriceNull() && product.UnitPrice < 20)
        {
            // TODO: Highlight the product's name and price
        }
    }
}

Hoewel het concept en de semantiek achter de gebeurtenis-handler van DataList ItemDataBound hetzelfde zijn als het concept en de semantiek die worden gebruikt door de gebeurtenis-handler van RowDataBound GridView in de zelfstudie Aangepaste opmaak op basis van gegevens , verschilt de syntaxis enigszins. Wanneer de ItemDataBound gebeurtenis wordt geactiveerd, wordt de DataListItem, die zojuist aan gegevens is gebonden, doorgegeven aan de bijbehorende gebeurtenis-handler via e.Item (in plaats van e.Row, zoals bij de gebeurtenis-handler van RowDataBound GridView). De gebeurtenis-handler van ItemDataBound DataList wordt geactiveerd voor elke rij die is toegevoegd aan de DataList, inclusief koprijen, voettekstrijen en scheidingsrijen. De productinformatie is echter alleen gebonden aan de gegevensrijen. Wanneer u de ItemDataBound gebeurtenis gebruikt om de gegevens te inspecteren die zijn gebonden aan de DataList, moeten we er daarom eerst voor zorgen dat we met een gegevensitem werken. Dit kan worden bereikt door de DataListItem eigenschap s ItemTypete controleren, die een van de volgende acht waarden kan hebben:

• AlternatingItem
• EditItem
• Footer
• Header
• Item
• Pager
• SelectedItem
• Separator

Zowel Item als AlternatingItem``DataListItem vormen de samenstelling van de data-items in de DataList. Ervan uitgaande dat we met een Item of AlternatingItemwerken, hebben we toegang tot het werkelijke ProductsRow exemplaar dat is gebonden aan de huidige DataListItem. De DataListItem eigenschap s DataItem bevat een verwijzing naar het DataRowView object, waarvan de Row eigenschap een verwijzing naar het werkelijke ProductsRow object biedt.

Vervolgens controleren we de ProductsRow instantie UnitPrice eigenschap. Omdat het veld van de tabel Producten UnitPrice waarden toestaat, moeten we eerst met behulp van de NULL-methode controleren of het een UnitPrice waarde heeft, voordat we proberen toegang te krijgen tot de NULL-eigenschap. Als de UnitPrice waarde niet NULLis, controleren we of deze kleiner is dan $ 20,00. Als het inderdaad minder dan $ 20,00 is, moeten we de aangepaste opmaak toepassen.

Stap 3: De naam en prijs van het product markeren

Zodra we weten dat de prijs van een product lager is dan $ 20,00, hoeft u alleen maar de naam en prijs ervan te markeren. Hiervoor moeten we eerst programmatisch verwijzen naar de Label-controles in de ItemTemplate die de naam en prijs van het product tonen. Vervolgens moeten ze een gele achtergrond weergeven. Deze opmaakgegevens kunnen worden toegepast door de eigenschappen van labels BackColor rechtstreeks te wijzigen (LabelID.BackColor = Color.Yellow). In het ideale geval moeten alle weergavegerelateerde zaken worden uitgedrukt via trapsgewijze opmaakmodellen. In feite hebben we al een opmaakmodel dat de gewenste opmaak biedt die is gedefinieerd in Styles.css - AffordablePriceEmphasis, die is gemaakt en besproken in de zelfstudie Aangepaste opmaak op basis van gegevens .

Als u de opmaak wilt toepassen, stelt u de eigenschappen van de twee labelwebbesturingselementen in op CssClass, zoals weergegeven in de volgende code.

// Highlight the product name and unit price Labels
// First, get a reference to the two Label Web controls
Label ProductNameLabel = (Label)e.Item.FindControl("ProductNameLabel");
Label UnitPriceLabel = (Label)e.Item.FindControl("UnitPriceLabel");
// Next, set their CssClass properties
if (ProductNameLabel != null)
    ProductNameLabel.CssClass = "AffordablePriceEmphasis";
if (UnitPriceLabel != null)
    UnitPriceLabel.CssClass = "AffordablePriceEmphasis";

Als de ItemDataBound gebeurtenis-handler is voltooid, keert u terug naar de Formatting.aspx pagina in een browser. Zoals in afbeelding 2 wordt geïllustreerd, hebben die producten met een prijs onder $ 20,00 zowel hun naam als prijs gemarkeerd.

Afbeelding 2: Deze producten kleiner dan $ 20,00 zijn gemarkeerd (klik om de volledige afbeelding weer te geven)

Opmerking

Omdat de DataList wordt weergegeven als HTML <table>, hebben de DataListItem exemplaren stijlgerelateerde eigenschappen die kunnen worden ingesteld om een specifieke stijl toe te passen op het hele item. Als we bijvoorbeeld het hele item geel willen markeren wanneer de prijs lager was dan $ 20,00, kunnen we de code vervangen die naar de labels verwijst en hun CssClass eigenschappen instellen met de volgende coderegel: e.Item.CssClass = "AffordablePriceEmphasis" (zie afbeelding 3).

De RepeaterItem waarden waaruit het besturingselement Repeater bestaat, bieden echter geen eigenschappen op stijlniveau. Daarom vereist het toepassen van aangepaste opmaak op de repeater de toepassing van stijleigenschappen op de webbesturingselementen in de sjablonen van Repeater, net zoals in afbeelding 2.

Afbeelding 3: Het hele productitem is gemarkeerd voor producten onder $ 20,00 (klik om de volledige afbeelding weer te geven)

Opmaakfuncties gebruiken vanuit de sjabloon

In de zelfstudie Sjabloonvelden gebruiken in de zelfstudie GridView Control hebben we gezien hoe u een opmaakfunctie in een GridView TemplateField kunt gebruiken om aangepaste opmaak toe te passen op basis van de gegevens die zijn gebonden aan de rijen van GridView. Een opmaakfunctie is een methode die kan worden aangeroepen vanuit een sjabloon en retourneert de HTML die op zijn plaats moet worden verzonden. Opmaakfuncties kunnen zich in de code-behind-klasse van de ASP.NET-pagina bevinden of kunnen worden gecentraliseerd in klassebestanden in de App_Code map of in een afzonderlijk klassebibliotheekproject. Het verplaatsen van de opmaakfunctie uit de code-behind-klasse van de ASP.NET pagina is ideaal als u van plan bent dezelfde opmaakfunctie te gebruiken op meerdere ASP.NET pagina's of in andere ASP.NET webtoepassingen.

Als u opmaakfuncties wilt demonstreren, laten we de productinformatie de tekst [STOPGEZET] naast de naam van het product opnemen als deze wordt stopgezet. Laten we de prijs geel markeren als deze minder dan $20,00 is (zoals we hebben gedaan in het voorbeeld van de ItemDataBound gebeurtenis-handler). Als de prijs $20,00 of hoger is, geven we de werkelijke prijs niet weer, maar in plaats daarvan de tekst: "Neem contact op voor een prijsopgave." In afbeelding 4 ziet u een schermafbeelding van de lijst met producten waarop deze opmaakregels zijn toegepast.

Afbeelding 4: Voor dure producten wordt de prijs vervangen door de tekst, bel voor een prijsopgave (klik om de volledige afbeelding weer te geven)

Stap 1: De opmaakfuncties maken

Voor dit voorbeeld hebben we twee opmaakfuncties nodig, één die de productnaam samen met de tekst [STOPGEZET] weergeeft, indien nodig, en een andere die een gemarkeerde prijs weergeeft als deze kleiner is dan $ 20,00, of de tekst, bel anders voor een prijsopgave. Laten we deze functies maken in de code-behind-klasse van de ASP.NET pagina en geef ze DisplayProductNameAndDiscontinuedStatus een naam en DisplayPrice. Beide methoden moeten de HTML retourneren om te worden weergegeven als een tekenreeks en beide moeten worden gemarkeerd Protected (of Public) om te worden aangeroepen vanuit het declaratieve syntaxisgedeelte van de ASP.NET pagina. De code voor deze twee methoden volgt:

protected string DisplayProductNameAndDiscontinuedStatus
    (string productName, bool discontinued)
{
    // Return just the productName if discontinued is false
    if (!discontinued)
        return productName;
    else
        // otherwise, return the productName appended with the text "[DISCONTINUED]"
        return string.Concat(productName, " [DISCONTINUED]");
}
protected string DisplayPrice(Northwind.ProductsRow product)
{
    // If price is less than $20.00, return the price, highlighted
    if (!product.IsUnitPriceNull() && product.UnitPrice < 20)
        return string.Concat("<span class=\"AffordablePriceEmphasis\">",
                              product.UnitPrice.ToString("C"), "</span>");
    else
        // Otherwise return the text, "Please call for a price quote"
        return "<span>Please call for a price quote</span>";
}

Houd er rekening mee dat de DisplayProductNameAndDiscontinuedStatus methode de waarden van de productName en discontinued gegevensvelden accepteert als scalaire waarden, terwijl de DisplayPrice methode een ProductsRow exemplaar accepteert (in plaats van een unitPrice scalaire waarde). Beide benaderingen werken; als de opmaakfunctie echter werkt met scalaire waardes die database NULL waardes kunnen bevatten (zoals UnitPrice; noch ProductName noch Discontinued staat NULL waardes toe), moet er speciale aandacht worden besteed aan het verwerken van deze scalaire invoer.

De invoerparameter moet met name van het type Object zijn, omdat de binnenkomende waarde een DBNull exemplaar kan zijn in plaats van het verwachte gegevenstype. Daarnaast moet er een controle worden uitgevoerd om te bepalen of de binnenkomende waarde een databasewaarde NULL is. Als we willen dat de methode de DisplayPrice prijs accepteert als scalaire waarde, moeten we de volgende code gebruiken:

protected string DisplayPrice(object unitPrice)
{
    // If price is less than $20.00, return the price, highlighted
    if (!Convert.IsDBNull(unitPrice) && ((decimal) unitPrice) < 20)
        return string.Concat("<span class=\"AffordablePriceEmphasis\">",
                              ((decimal) unitPrice).ToString("C"), "</span>");
    else
        // Otherwise return the text, "Please call for a price quote"
        return "<span>Please call for a price quote</span>";
}

Houd er rekening mee dat de unitPrice invoerparameter van het type Object is en dat de voorwaarde is gewijzigd om na te gaan of unitPriceDBNull is of niet. Aangezien de unitPrice invoerparameter als een Objectparameter wordt doorgegeven, moet deze worden omgezet in een decimale waarde.

Stap 2: De opmaakfunctie aanroepen vanuit de DataList s ItemTemplate

Nu de opmaakfuncties zijn toegevoegd aan de code-behind-klasse van onze ASP.NET pagina, hoeft u alleen maar deze opmaakfuncties aan te roepen vanuit de DataList s ItemTemplate. Als u een opmaakfunctie wilt aanroepen vanuit een sjabloon, plaatst u de functie-aanroep binnen de syntaxis van de gegevensbinding:

<%# MethodName(inputParameter1, inputParameter2, ...) %>

In de DataList ItemTemplate toont de ProductNameLabel Label webcontrole momenteel de naam van het product door zijn Text eigenschap toe te wijzen met het resultaat van <%# Eval("ProductName") %>. Als u de naam plus de tekst [STOPGEZET] wilt weergeven, werkt u indien nodig de declaratieve syntaxis bij, zodat de eigenschap Text de waarde van de methode DisplayProductNameAndDiscontinuedStatus krijgt toegewezen. Als we dit doen, moeten we de naam van het product en de stopgezette producten doorgeven met behulp van de Eval("columnName") syntax. Eval retourneert een waarde van het type Object, maar de DisplayProductNameAndDiscontinuedStatus methode verwacht invoerparameters van het type String . BooleanDaarom moeten we de waarden die door de Eval methode worden geretourneerd, casten naar de verwachte invoerparametertypen, zoals:

<h4>
    <asp:Label ID="ProductNameLabel" runat="server"
        Text='<%# DisplayProductNameAndDiscontinuedStatus((string) Eval("ProductName"),
              (bool) Eval("Discontinued")) %>'>
    </asp:Label>
</h4>

Om de prijs weer te geven, kunnen we de UnitPriceLabel eigenschap Label s Text eenvoudig instellen op de waarde die door de DisplayPrice methode wordt geretourneerd, net zoals we hebben gedaan voor het weergeven van de naam van het product en [STOPGEZET] tekst. In plaats van de UnitPrice als een scalaire invoerparameter door te geven, geven we in plaats daarvan het hele ProductsRow exemplaar door:

<asp:Label ID="UnitPriceLabel" runat="server"
    Text='<%# DisplayPrice((Northwind.ProductsRow)
          ((System.Data.DataRowView) Container.DataItem).Row) %>'>
</asp:Label>

Bekijk de voortgang in een browser met de aanroepen van de opmaakfuncties die zijn gedaan. Neem daar even de tijd voor. Uw scherm moet er ongeveer uitzien als afbeelding 5, met de stopgezette producten, inclusief de tekst [STOPGEZET] en die producten die meer dan $ 20,00 kosten, waarbij hun prijs vervangen wordt door de tekst Gelieve te bellen voor een prijsopgave.

Afbeelding 5: Voor dure producten wordt de prijs vervangen door de tekst, bel voor een prijsopgave (klik om de volledige afbeelding weer te geven)

Samenvatting

Het opmaken van de inhoud van een DataList- of Repeater-controle op basis van de gegevens kan worden bereikt door twee technieken. De eerste techniek is het maken van een gebeurtenis-handler voor de ItemDataBound gebeurtenis, die wordt geactiveerd als elke record in de gegevensbron is gebonden aan een nieuwe DataListItem of RepeaterItem. In de ItemDataBound gebeurtenishandler kunnen de gegevens van het huidige item worden onderzocht en kan de opmaak worden toegepast op de inhoud van de sjabloon of, voor DataListItem s, op het gehele item.

U kunt ook aangepaste opmaak realiseren door middel van opmaakfuncties. Een opmaakfunctie is een methode die kan worden aangeroepen vanuit de DataList- of Repeater-sjablonen waarmee de HTML wordt geretourneerd die op zijn plaats wordt verzonden. Vaak wordt de HTML die wordt geretourneerd door een opmaakfunctie bepaald door de waarden die zijn gebonden aan het huidige item. Deze waarden kunnen worden doorgegeven aan de opmaakfunctie, als scalaire waarden of door het hele object door te geven dat is gebonden aan het item (zoals het ProductsRow exemplaar).

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 Yaakov Ellis, Randy Schmidt en Liz Shulok. Bent u geïnteresseerd in het bekijken van mijn aanstaande MSDN-artikelen? Zo ja, laat iets van je horen via mitchell@4GuysFromRolla.com.

VorigeVolgende