Sdílet prostřednictvím

Formátování ovládacích prvků DataList a Repeater na základě dat (C#)

od Scotta Mitchella

Stáhnout PDF

V tomto kurzu si projdeme příklady formátování vzhledu ovládacích prvků DataList a Repeater, a to buď pomocí funkcí formátování v rámci šablon, nebo zpracováním události DataBound.

Úvod

Jak jsme viděli v předchozím kurzu, DataList nabízí řadu vlastností souvisejících se stylem, které ovlivňují jeho vzhled. Konkrétně jsme viděli, jak přiřadit výchozí třídy CSS vlastnostem DataList, HeaderStyle, ItemStyle, AlternatingItemStyle, a SelectedItemStyle. Kromě těchto čtyř vlastností obsahuje DataList několik dalších vlastností souvisejících se stylem, například Font, ForeColor, BackColora BorderWidth, pro pojmenování několika. Ovládací prvek Repeater neobsahuje žádné vlastnosti související se stylem. Jakákoli taková nastavení stylu musí být provedena přímo v rámci značkování v šablonách Repeateru.

Způsob formátování dat ale často závisí na samotných datech. Například při výpisu produktů můžeme chtít zobrazit informace o produktu světle šedou barvou písma, pokud je ukončena, nebo můžeme chtít zvýraznit UnitsInStock hodnotu, pokud je nulová. Jak jsme viděli v předchozích kurzech, GridView, DetailsView a FormView nabízejí dva různé způsoby formátování jejich vzhledu na základě dat:

  • Událost DataBound vytvoří obslužnou rutinu události pro příslušnou DataBound událost, která se aktivuje po sváznutí dat s každou položkou (pro GridView to byla RowDataBound událost, pro DataList a Repeater se jedná o ItemDataBound událost). V této obslužné rutině události je možné zkoumat právě svázaná data a rozhodnout o jejich formátování. Tuto techniku jsme prozkoumali v kurzu Vlastní formátování založené na datech .
  • Formátovací funkce v šablonách při použití TemplateFields v ovládacích prvcích DetailsView nebo GridView, nebo šablony v ovládacím prvku FormView, můžeme přidat funkci formátování do třídy s kódem v ASP.NET stránkách, obchodní logické vrstvy, nebo jakékoli jiné knihovny tříd, která je přístupná z webové aplikace. Tato funkce formátování může přijmout libovolný počet vstupních parametrů, ale musí vrátit html pro vykreslení v šabloně. Funkce formátování byly nejprve zkoumány v kurzu Using TemplateFields in the GridView Control.

Obě tyto techniky formátování jsou k dispozici s ovládacími prvky DataList a Repeater. V tomto kurzu si projdeme příklady pomocí obou technik pro oba ovládací prvky.

Použití obslužné událostní rutiny

Pokud jsou data vázána na DataList, ať už z ovládacího prvku zdroje dat, nebo prostřednictvím programového přiřazení dat k vlastnosti ovládacího prvku DataSource a volání jeho DataBind() metody, aktivace události DataBinding DataListu se spustí, data ze zdroje jsou vyčíslena a každý datový záznam je vázán na DataList. Pro každý záznam ve zdroji dat vytvoří DataListItem DataList objekt, který je vázán na aktuální záznam. Během tohoto procesu vyvolá DataList dvě události:

  • ItemCreated se spustí poté, co DataListItem byl vytvořen
  • ItemDataBound aktivuje se poté, co je aktuální záznam vázán na DataListItem

Následující kroky popisují proces datové vazby pro ovládací prvek DataList.

  1. Aktivuje se událost DataList sDataBinding.

  2. Data jsou svázaná s datovým seznamem.

    Pro každý záznam ve zdroji dat

    1. Vytvoření objektu DataListItem
    2. ItemCreated Spusťte událost
    3. Připojte záznam k DataListItem
    4. ItemDataBound Spusťte událost
    5. Přidejte DataListItem do kolekce Items

Při vazbě dat na ovládací prvek Repeater prochází přes stejnou posloupnost kroků. Jediným rozdílem je, že Repeater místo vytváření instancí používá DataListItems.

Poznámka:

Pozorný čtenář si možná všiml mírné anomálie mezi sekvencí kroků, které se odehrávají, když DataList a Repeater jsou propojeny s daty, a když GridView je propojen s daty. Na konci procesu vazby dat gridView vyvolá DataBound událost. Ovládací prvek DataList ani Repeater však takovou událost nemá. Důvodem je to, že ovládací prvky DataList a Repeater byly vytvořeny v době ASP.NET 1.x, dříve než se vzor obslužné rutiny události předúrovňový a poúrovňový stal běžným.

Stejně jako u GridView je jednou z možností formátování na základě dat vytvoření obslužné rutiny události pro ItemDataBound událost. Tento obslužný proces události by měl zkontrolovat data, která byla právě svázána s DataListItem nebo RepeaterItem, a podle potřeby ovlivnit formátování ovládacího prvku.

U ovládacího prvku DataList lze změny formátování pro celou položku implementovat pomocí DataListItem vlastností souvisejících se stylem, které zahrnují standardní Font, ForeColor, BackColor, CssClassa tak dále. Abychom mohli ovlivnit formátování konkrétních webových ovládacích prvků v šabloně DataList s, musíme k těmto webovým ovládacím prvkům přistupovat prostřednictvím kódu programu a upravit styl těchto webových ovládacích prvků. Viděli jsme, jak toho dosáhnout v tutoriálu Vlastní formátování na základě dat. Podobně jako u ovládacího prvku RepeaterItem Repeater třída nemá žádné vlastnosti související se stylem, a proto všechny změny související se stylem RepeaterItem provedené v ItemDataBound obslužné rutině události musí být provedeny programovým přístupem k webovým ovládacím prvkům v rámci šablony a jejich aktualizací.

Vzhledem k tomu, že ItemDataBound technika formátování pro DataList a Repeater jsou prakticky identická, náš příklad se zaměří na použití DataListu.

Krok 1: Zobrazení informací o produktu v seznamu DataList

Než se budeme starat o formátování, pojďme nejprve vytvořit stránku, která k zobrazení informací o produktu používá Seznam dat. V předchozím kurzu jsme vytvořili Seznam dat, jehož ItemTemplate zobrazovaný název každého produktu, kategorie, dodavatele, množství na jednotku a cenu. Pojďme tuto funkci zopakovat zde v tomto kurzu. K tomu můžete buď znovu vytvořit DataList a jeho ObjectDataSource úplně od začátku, nebo můžete tyto ovládací prvky zkopírovat ze stránky vytvořené v předchozím kurzu (Basics.aspx) a vložit je na stránku pro tento kurz (Formatting.aspx).

Jakmile replikujete funkci DataList a ObjectDataSource z Basics.aspx do Formatting.aspx, věnujte chvíli změně vlastnosti DataList z ID na popisnější DataList1. V dalším kroku zobrazte seznam DataList v prohlížeči. Jak ukazuje obrázek 1, jediným rozdílem formátování mezi jednotlivými produkty je, že se barva pozadí střídá.

Produkty jsou uvedeny v ovládacím prvku DataList.

Obrázek 1: Produkty jsou uvedeny v ovládacím prvku DataList (kliknutím zobrazíte obrázek v plné velikosti).

Pro účely tohoto kurzu naformátujme DataList tak, aby všechny produkty s cenou nižší než 20,00 USD měly název i jednotkovou cenu zvýrazněnou žlutou.

Krok 2: Programové určení hodnoty dat v obslužné rutině události ItemDataBound

Vzhledem k tomu, že vlastní formátování bude použito pouze u těchto produktů s cenou pod 20,00 USD, musíme být schopni určit cenu jednotlivých produktů. Při vazbě dat na DataList dataList vytvoří výčet záznamů ze svého zdroje dat a pro každý záznam vytvoří DataListItem instanci, ke které se váže záznam zdroje dat DataListItem. Jakmile jsou data konkrétního záznamu svázaná s aktuálním DataListItem objektem, aktivuje se událost DataList s ItemDataBound . Pro tuto událost můžeme vytvořit obslužnou rutinu události, která zkontroluje hodnoty dat pro aktuální DataListItem hodnotu a na základě těchto hodnot provede všechny potřebné změny formátování.

ItemDataBound Vytvořte událost pro DataList a přidejte následující kód:

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

Zatímco koncept a sémantika obslužné rutiny události DataList s ItemDataBound jsou stejné jako ty, které používá obslužná rutina událostí GridView RowDataBound v kurzu Vlastní formátování založené na datech , syntaxe se mírně liší. Když se ItemDataBound událost aktivuje, DataListItem, která je právě svázaná s daty, se předává do odpovídající obslužné rutiny události přes e.Item (místo e.Row, což je typické u RowDataBound obslužné rutiny události GridView). Obslužná rutina události DataList se ItemDataBound aktivuje pro každý řádek přidaný do DataListu, včetně řádků záhlaví, řádků zápatí a řádků oddělovače. Informace o produktu jsou však vázány pouze na datové řádky. Proto při použití události ItemDataBound ke kontrole dat vázaných na DataList musíme nejprve zajistit, že opravdu pracujeme s datovou položkou. Toho lze dosáhnout kontrolou DataListItem vlastnosti sItemType, která může mít jednu z následujících osmi hodnot:

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

Oba Item a AlternatingItem``DataListItem tvoří datové položky DataListu. Za předpokladu, že pracujeme s propojenými Item nebo AlternatingItem, přistupujeme ke skutečné instanci ProductsRow, která byla vázána na aktuální DataListItem. Vlastnost DataListItem s DataItem obsahuje odkaz na DataRowView objekt, jehož Row vlastnost poskytuje odkaz na skutečný ProductsRow objekt.

Dále zkontrolujeme vlastnost ProductsRow instance UnitPrice. Vzhledem k tomu, že pole tabulky UnitPrice Products umožňuje NULL hodnoty, před pokusem o přístup UnitPrice k vlastnosti bychom měli nejprve zkontrolovat, zda má NULL hodnotu pomocí IsUnitPriceNull() metody. UnitPrice Pokud hodnota neníNULL, zkontrolujeme, jestli je menší než 20,00 USD. Pokud je skutečně pod 20,00 USD, musíme použít vlastní formátování.

Krok 3: Zvýraznění názvu a ceny produktu

Jakmile víme, že cena produktu je menší než 20,00 USD, vše, co zbývá, je zvýraznit jeho název a cenu. K tomu musíme nejprve programově odkazovat na ovládací prvky štítku v ItemTemplate, které zobrazují název a cenu produktu. V dalším kroku musíme, aby zobrazovaly žluté pozadí. Tyto informace o formátování lze použít přímo úpravou vlastností popisků BackColor (LabelID.BackColor = Color.Yellow); v ideálním případě by se ale všechny záležitosti související se zobrazením měly být vyjádřeny kaskádovými šablonami stylů. Ve skutečnosti již máme šablonu stylů, která poskytuje požadované formátování definované v Styles.css - AffordablePriceEmphasis, které bylo vytvořeno a popsáno v kurzu Vlastní formátování založené na datech .

Chcete-li použít formátování, jednoduše nastavte dvě vlastnosti ovládacích prvků CssClass Label Web na AffordablePriceEmphasis, jak je znázorněno v následujícím kódu:

// 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";

Po dokončení obslužné funkce ItemDataBound události znovu se podívejte na Formatting.aspx stránku v prohlížeči. Jak znázorňuje obrázek 2, tyto produkty s cenou pod 20,00 USD mají zvýrazněný název i cenu.

Tyto produkty nižší než 20,00 USD jsou zvýrazněny.

Obrázek 2: Tyto produkty menší než 20,00 USD jsou zvýrazněné (kliknutím zobrazíte obrázek v plné velikosti).

Poznámka:

Vzhledem k tomu, DataList je vykreslen jako HTML <table>, jeho DataListItem instance mají vlastnosti související se stylem, které lze nastavit tak, aby použily určitý styl pro celou položku. Pokud bychom například chtěli zvýraznit celou položku žlutou, když její cena byla nižší než 20,00 USD, mohli jsme nahradit kód, na který odkazuje popisky, a nastavit jejich CssClass vlastnosti následujícím řádkem kódu: e.Item.CssClass = "AffordablePriceEmphasis" (viz obrázek 3).

Položky RepeaterItem, které tvoří ovládací prvek Repeater, však nenabízejí vlastnosti úrovně stylu. Proto použití vlastního formátování na Repeater vyžaduje použití vlastností stylu u webových ovládacích prvků v šablonách Repeater s, stejně jako jsme to udělali na obrázku 2.

Celá položka produktu je zvýrazněná pro produkty do 20,00 USD.

Obrázek 3: Celá položka produktu je zvýrazněná pro produkty pod $20.00 (Kliknutím zobrazíte obrázek v plné velikosti)

Použití funkcí formátování z šablony

V kurzu Použití TemplateFields v ovládacím prvku GridView jsme viděli, jak použít funkci formátování v rámci GridView TemplateField použít vlastní formátování založené na datech svázaných s řádky GridView. Funkce formátování je metoda, kterou lze vyvolat ze šablony a vrací kód HTML, který se má vygenerovat na svém místě. Funkce formátování se můžou nacházet na ASP.NET stránce s kódem třídy nebo mohou být centralizované do souborů tříd ve App_Code složce nebo v samostatném projektu knihovny tříd. Přesunutí funkce formátování mimo třídu kódu stránky ASP.NET je ideální, pokud plánujete použít stejnou funkci formátování na více ASP.NET stránkách nebo v jiných ASP.NET webových aplikacích.

Abychom si mohli předvést funkce formátování, uveďme informace o produktu text [UKONČENO] vedle názvu produktu, pokud je ukončen. Také zvýrazněme cenu žlutě, pokud je nižší než 20,00 USD (jak jsme to udělali v příkladu ItemDataBound obslužné rutiny události); jestliže je cena 20,00 USD nebo vyšší, nezobrazujme skutečnou cenu, ale místo ní text: Zavolejte prosím pro cenovou nabídku. Obrázek 4 ukazuje snímek obrazovky s uvedením produktů s použitím těchto pravidel formátování.

Snímek obrazovky zobrazující produkty uvedené v ovládacím prvku DataList s cenou produktů, která stojí více než 20,00 USD, nahrazena textem

Obrázek 4: V případě drahých produktů je cena nahrazena textem, zavolejte na cenovou nabídku (kliknutím zobrazíte obrázek s plnou velikostí).

Krok 1: Vytvoření funkcí formátování

V tomto příkladu potřebujeme dvě funkce formátování, jednu, která zobrazuje název produktu spolu s textem [UKONČENO], a další, která v případě potřeby zobrazí zvýrazněnou cenu, pokud je nižší než 20,00 USD, nebo text, v opačném případě zavolejte na cenovou nabídku. Pojďme tyto funkce vytvořit na ASP.NET stránce s kódem třídy a pojmenovat je DisplayProductNameAndDiscontinuedStatus a DisplayPrice. Obě metody musí vrátit kód HTML, aby se vykresloval jako řetězec, a oba musí být označené Protected (nebo Public) pro vyvolání z části deklarativní syntaxe stránky ASP.NET. Kód pro tyto dvě metody:

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>";
}

Všimněte si, že DisplayProductNameAndDiscontinuedStatus metoda přijímá hodnoty datových productNamediscontinued polí jako skalární hodnoty, zatímco DisplayPrice metoda přijímá ProductsRow instanci (nikoli unitPrice skalární hodnotu). Oba přístupy budou fungovat; pokud však funkce formátování pracuje se skalárními hodnotami, které mohou obsahovat hodnoty databáze NULL (například UnitPrice; ani ProductName ani Discontinued nepovolují NULL hodnoty), je nutné při zpracování těchto skalárních vstupů věnovat zvláštní pozornost.

Vstupní parametr musí být konkrétně typu Object , protože příchozí hodnota může být DBNull instance místo očekávaného datového typu. Kromě toho je třeba provést kontrolu, aby bylo možné určit, zda příchozí hodnota je hodnota databáze NULL . To znamená, že pokud bychom chtěli metodu DisplayPrice přijmout cenu jako skalární hodnotu, museli bychom použít následující kód:

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>";
}

Všimněte si, že unitPrice vstupní parametr je typu Object a že podmíněný příkaz byl změněn, aby zjistil, zda unitPrice je DBNull nebo není. Vzhledem k tomu, že unitPrice vstupní parametr je předán jako parametr Object, musí být přetypován na desetinnou hodnotu.

Krok 2: Volání funkce formátování ze šablony prvku DataListu ItemTemplate

Díky funkcím formátování přidaným do kódové třídy pozadí naší stránky ASP.NET zbývá už jen vyvolat tyto funkce formátování z ItemTemplate DataList. Pokud chcete volat funkci formátování ze šablony, umístěte volání funkce do syntaxe vazby dat:

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

V prvku DataList s ItemTemplate webový prvek Label ProductNameLabel aktuálně zobrazuje název produktu tím, že přiřazuje výsledek Text jeho vlastnosti <%# Eval("ProductName") %>. Chcete-li, aby se zobrazoval název plus text [UKONČENO], v případě potřeby aktualizujte deklarativní syntaxi tak, aby místo toho přiřazuje Text vlastnost hodnotu DisplayProductNameAndDiscontinuedStatus metody. Při tom musíme předat název produktu a hodnoty 'discontinued' pomocí syntaxe Eval("columnName"). Eval vrátí hodnotu typu Object, ale DisplayProductNameAndDiscontinuedStatus metoda očekává vstupní parametry typu String , a Booleanproto musíme přetypovat hodnoty vrácené metodou Eval na očekávané vstupní typy parametrů, například takto:

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

Abychom zobrazili cenu, můžeme jednoduše nastavit UnitPriceLabel vlastnost Label s Text na hodnotu vrácenou DisplayPrice metodou, stejně jako jsme to udělali pro zobrazení názvu produktu a [UKONČENO] textu. Místo předání jako skalárního vstupního parametru UnitPrice ale předáváme celou ProductsRow instanci:

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

Až budou volání funkcí formátování zavedená, udělejte si chvilku a podívejte se na průběh v prohlížeči. Obrazovka by měla vypadat podobně jako na obrázku 5, přičemž ukončené produkty včetně textu [UKONČENO] a ty produkty stojící více než $20.00 mají jejich cenu nahrazenou textem Prosím zavolejte pro cenovou nabídku.

Snímek obrazovky zobrazující produkty uvedené v ovládacím prvku DataList s cenou produktů, která stojí více než 20,00 USD, nahrazena textem

Obrázek 5: U drahých produktů je cena nahrazena textem, zavolejte na cenovou nabídku (kliknutím zobrazíte obrázek v plné velikosti).

Shrnutí

Formátování obsahu ovládacího prvku DataList nebo Repeater na základě dat lze provést pomocí dvou technik. První technikou je vytvoření obslužné rutiny události pro ItemDataBound událost, která se aktivuje, když je každý záznam ve zdroji dat vázán na nový DataListItem nebo RepeaterItem. V obslužné rutině ItemDataBound události je možné prozkoumat data aktuální položky a potom lze formátování aplikovat na obsah šablony nebo, v případě DataListItem, na celou položku samotnou.

Případně je možné vlastní formátování realizovat prostřednictvím funkcí formátování. Funkce formátování je metoda, kterou lze vyvolat ze šablon DataList nebo Repeater, která vrací HTML, který se má vygenerovat na daném místě. Kód HTML vrácený funkcí formátování je často určen hodnotami, které jsou svázané s aktuální položkou. Tyto hodnoty lze předat do funkce formátování, a to buď jako skalární hodnoty, nebo předáním celého objektu vázaného na položku (například ProductsRow instance).

Šťastné programování!

O autorovi

Scott Mitchell, autor sedmi knih ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, trenér a spisovatel. Jeho nejnovější kniha je Sams: Nauč se ASP.NET 2.0 za 24 hodin. Může být dosažitelný na mitchell@4GuysFromRolla.comadrese .

Zvláštní díky

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Vedoucí recenzenti tohoto kurzu byli Yaakov Ellis, Randy Shulok a Liz Shulok. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

předchozíDalší

  • Last updated on