Sdílet prostřednictvím

Zobrazení dat ovládacími prvky DataList a Repeater (VB)

  • Článek

Scott Mitchell

Stáhnout PDF

V předchozích kurzech jsme k zobrazení dat použili ovládací prvek GridView. Počínaje tímto kurzem se podíváme na vytváření běžných vzorů vytváření sestav pomocí ovládacích prvků DataList a Repeater počínaje základy zobrazení dat pomocí těchto ovládacích prvků.

Úvod

Ve všech příkladech v předchozích 28 kurzech, pokud jsme potřebovali zobrazit více záznamů ze zdroje dat, jsme se obrátili na ovládací prvek GridView. GridView vykreslí řádek pro každý záznam ve zdroji dat a zobrazí datová pole záznamu ve sloupcích. Zatímco GridView umožňuje přichycení k zobrazení, procházení stránky, řazení, úpravě a odstraňování dat, jeho vzhled je trochu boxy. Kromě toho je kód zodpovědný za strukturu GridView s pevnou součástí HTML <table> s řádkem tabulky (<tr>) pro každý záznam a buňku tabulky (<td>) pro každé pole.

Chcete-li poskytnout větší stupeň přizpůsobení vzhledu a vykreslení kódu při zobrazení více záznamů, ASP.NET 2.0 nabízí ovládací prvky DataList a Repeater (oba byly také k dispozici v ASP.NET verze 1.x). Ovládací prvky DataList a Repeater vykreslují jejich obsah pomocí šablon místo BoundFields, CheckBoxFields, ButtonFields atd. Podobně jako GridView se DataList vykresluje jako HTML <table>, ale umožňuje zobrazení více záznamů zdroje dat na řádek tabulky. Repeater na druhé straně nevykreslí žádné další značky, než je to, co explicitně zadáte, a je ideální kandidát, pokud potřebujete přesnou kontrolu nad vygenerovanými revizemi.

V dalších desítkách kurzů se podíváme na vytváření běžných vzorů vytváření sestav pomocí ovládacích prvků DataList a Repeater, počínaje základy zobrazení dat pomocí těchto šablon ovládacích prvků. Uvidíme, jak tyto ovládací prvky formátovat, jak změnit rozložení záznamů zdroje dat v seznamu DataList, běžné scénáře předlohy/podrobností, způsoby úprav a odstranění dat, jak stránkovat záznamy atd.

Krok 1: Přidáníwebových

Než začneme s tímto kurzem, zabereme chvilku, než přidáme ASP.NET stránky, které budeme pro tento kurz potřebovat, a v dalších několika kurzech, které se zabývají zobrazením dat pomocí prvku DataList a Repeater. Začněte vytvořením nové složky v projektu s názvem DataListRepeaterBasics. Dále přidejte do této složky následující pět ASP.NET stránek, přičemž všechny z nich jsou nakonfigurované tak, aby používaly stránku Site.masterpředlohy:

  • Default.aspx
  • Basics.aspx
  • Formatting.aspx
  • RepeatColumnAndDirection.aspx
  • NestedControls.aspx

Vytvoření složky DataListRepeaterBasics a přidání ASP.NET stránek kurzu

Obrázek 1: Vytvoření DataListRepeaterBasics složky a přidání ASP.NET stránek kurzu

Default.aspx Otevřete stránku a přetáhněte SectionLevelTutorialListing.ascx uživatelský ovládací prvek ze UserControls složky na návrhovou plochu. Tento uživatelský ovládací prvek, který jsme vytvořili v kurzu Stránky předlohy a Navigace na webu, vytvoří výčet mapy webu a zobrazí kurzy z aktuálního oddílu v seznamu s odrážkami.

Přidání uživatelského ovládacího prvku SectionLevelTutorialListing.ascx do Default.aspx

Obrázek 2: Přidání SectionLevelTutorialListing.ascx uživatelského ovládacího prvku do Default.aspx (kliknutím zobrazíte obrázek v plné velikosti)

Abychom mohli seznam s odrážkami zobrazit kurzy DataList a Repeater, které budeme vytvářet, musíme je přidat do mapy webu. Web.sitemap Otevřete soubor a za kód uzlu mapy webu Přidání vlastních tlačítek přidejte následující kód:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Aktualizace mapy webu tak, aby zahrnovala nové stránky ASP.NET

Obrázek 3: Aktualizace mapy webu tak, aby zahrnovala nové stránky ASP.NET

Krok 2: Zobrazení informací o produktu pomocí seznamu DataList

Podobně jako FormView závisí vykreslený výstup ovládacího prvku DataList na šablonách místo BoundFields, CheckBoxFields atd. Na rozdíl od Objektu FormView je DataList navržen tak, aby zobrazoval sadu záznamů, nikoli solitární. Začněme tímto kurzem a podívejme se na vazby informací o produktu na dataList. Začněte otevřením Basics.aspx stránky ve DataListRepeaterBasics složce. Potom přetáhněte seznam DataList ze sady nástrojů do Návrháře. Jak je znázorněno na obrázku 4, před zadáním šablon DataListu ho Návrhář zobrazí jako šedé pole.

Přetáhněte seznam DataList ze sady nástrojů do Návrháře.

Obrázek 4: Přetažení datového seznamu z panelu nástrojů do Návrháře (kliknutím zobrazíte obrázek v plné velikosti)

Z inteligentní značky DataList přidejte nový ObjectDataSource a nakonfigurujte ho tak, aby používal metodu ProductsBLL třídy GetProducts . Vzhledem k tomu, že v tomto kurzu vytváříme datový seznam jen pro čtení, nastavte rozevírací seznam na kartu INSERT, UPDATE a DELETE v průvodci na hodnotu (Žádné).

Opt to Create a New ObjectDataSource

Obrázek 5: Opt to Create a New ObjectDataSource (Click to view full-size image)

Konfigurace ObjectDataSource pro použití třídy ProductsBLL

Obrázek 6: Konfigurace ObjectDataSource pro použití ProductsBLL třídy (kliknutím zobrazíte obrázek s plnou velikostí)

Načtení informací o všech produktech pomocí metody GetProducts

Obrázek 7: Načtení informací o všech produktech pomocí GetProducts metody (kliknutím zobrazíte obrázek v plné velikosti)

Po nakonfigurování ObjectDataSource a jeho přidružení k DataList prostřednictvím inteligentní značky Visual Studio automaticky vytvoří ItemTemplate v seznamu DataList název a hodnotu každého datového pole vráceného zdrojem dat (viz níže uvedený kód). Tento výchozí ItemTemplate vzhled je stejný jako u šablon, které se automaticky vytvoří při vytváření vazby zdroje dat do FormView prostřednictvím Návrháře.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Poznámka:

Vzpomeňte si, že při vytváření vazby zdroje dat k ovládacímu prvku FormView prostřednictvím inteligentní značky FormView, visual Studio vytvořilo , ItemTemplateInsertItemTemplatea EditItemTemplate. S datovým seznamem je však vytvořen pouze objekt ItemTemplate . Důvodem je to, že DataList nemá stejnou integrovanou podporu úprav a vkládání, kterou nabízí FormView. DataList obsahuje události související s úpravami a odstraňováním a úpravy a odstraňování je možné přidat s trochou kódu, ale neexistuje žádná jednoduchá podpora, stejně jako u FormView. V dalším kurzu se dozvíme, jak zahrnout podporu pro úpravy a odstranění v dataListu.

Pojďme chvíli zkrátit vzhled této šablony. Místo zobrazení všech datových polí pojďme zobrazit pouze název produktu, dodavatele, kategorii, množství na jednotku a jednotkovou cenu. Kromě toho pojďme zobrazit název v nadpisu <h4> a rozložit zbývající pole pod <table> nadpisem.

Chcete-li provést tyto změny, můžete použít funkce úprav šablony v Návrháři z inteligentní značky DataList s kliknutí na odkaz Upravit šablony nebo můžete šablonu upravit ručně prostřednictvím deklarativní syntaxe stránky. Pokud použijete možnost Upravit šablony v Návrháři, výsledné značky nemusí přesně odpovídat následujícím značkám, ale při prohlížení v prohlížeči by měly vypadat velmi podobně jako na snímku obrazovky zobrazeném na obrázku 8.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Poznámka:

Výše uvedený příklad používá ovládací prvky Label Web, jejichž Text vlastnost je přiřazena hodnota syntaxe vazby dat. Případně bychom mohli popisky úplně vynechat a zadat jenom syntaxi vazby dat. To znamená, že místo použití <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> bychom místo toho mohli použít deklarativní syntaxi <%# Eval("CategoryName") %>.

Opuštění webových ovládacích prvků Popisek ale nabízí dvě výhody. Za prvé poskytuje jednodušší způsob formátování dat na základě dat, jak uvidíme v dalším kurzu. Za druhé možnost Upravit šablony v Návrháři nezobrazuje deklarativní syntaxi vazby dat, která se zobrazí mimo nějaký webový ovládací prvek. Místo toho je rozhraní Upravit šablony navržené tak, aby usnadnilo práci se statickými revizemi a webovými ovládacími prvky a předpokládá, že všechna propojení dat budou provedena prostřednictvím dialogového okna Upravit datové vazby, které je přístupné z inteligentních značek webových ovládacích prvků.

Proto při práci s DataList, který poskytuje možnost upravovat šablony prostřednictvím Návrháře, dávám přednost použití ovládacích prvků Label Web, aby byl obsah přístupný prostřednictvím rozhraní Upravit šablony. Jak uvidíme krátce, repeater vyžaduje, aby se obsah šablony upravoval ze zobrazení Zdroj. Při vytváření šablon Repeateru často vynechám ovládací prvky Label Web, pokud nevím, že budu muset formátovat vzhled textu vázaného na data na základě programové logiky.

Výstup každého produktu se vykreslí pomocí prvku DataList s ItemTemplate.

Obrázek 8: Každý výstup produktu se vykresluje pomocí datových seznamů ItemTemplate (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Vylepšení vzhledu dataListu

Podobně jako GridView nabízí DataList řadu vlastností souvisejících se stylem, jako Fontjsou , ForeColor, CssClassBackColor, , ItemStyle, , AlternatingItemStyleatdSelectedItemStyle. Při práci s ovládacími prvky GridView a DetailsView jsme vytvořili soubory Skin v motivu DataWebControls , které předdefinovaly CssClass vlastnosti těchto dvou ovládacích prvků a CssClass vlastnost pro několik jejich dílčích vlastností (RowStyleatd HeaderStyle.). Pojďme to udělat stejně pro DataList.

Jak je popsáno v kurzu Zobrazení dat pomocí ObjectDataSource , soubor Skin určuje výchozí vlastnosti související s vzhledem webového ovládacího prvku. Motiv je kolekce skinů, CSS, obrázků a javascriptových souborů, které definují konkrétní vzhled a chování webu. V zobrazení dat pomocí ObjectDataSource kurzu jsme vytvořili DataWebControls motiv (který je implementovaný jako složka v rámci App_Themes složky), který má v současné době dva soubory Skin - GridView.skin a DetailsView.skin. Pojďme přidat třetí soubor skinu pro určení předdefinovaných nastavení stylu pro DataList.

Pokud chcete přidat soubor skinu, klikněte pravým tlačítkem myši na App_Themes/DataWebControls složku, zvolte Přidat novou položku a v seznamu vyberte možnost Soubor kůže. Pojmenujte soubor DataList.skin.

Snímek obrazovky s oknem Přidat novou položku s položkou Default.skin zadaným jako nový název souboru Skin

Obrázek 9: Vytvoření nového souboru skinu s názvem DataList.skin (kliknutím zobrazíte obrázek s plnou velikostí)

Pro soubor použijte následující kód DataList.skin :

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Tato nastavení přiřazují stejné třídy CSS k příslušným vlastnostem DataList, jaké byly použity s ovládacími prvky GridView a DetailsView. Třídy CSS použité zde DataWebControlStyle, , AlternatingRowStyleRowStylea tak dále jsou definovány v Styles.css souboru a byly přidány v předchozích kurzech.

Po přidání tohoto souboru skinu se vzhled souboru DataList aktualizuje v Návrháři (možná budete muset aktualizovat zobrazení Návrháře, abyste viděli efekty nového souboru Skin; v nabídce Zobrazení zvolte Aktualizovat). Jak znázorňuje obrázek 10, každý střídavý produkt má světle růžovou barvu pozadí.

Snímek obrazovky znázorňující, jak nový soubor Skin aktualizuje vzhled souboru DataList v Návrháři

Obrázek 10: Vytvoření nového souboru skinu s názvem DataList.skin (kliknutím zobrazíte obrázek s plnou velikostí)

Krok 4: Zkoumání dalších šablon DataList s

Kromě datového ItemTemplateseznamu podporuje šest dalších volitelných šablon:

  • HeaderTemplate pokud je zadaný, přidá do výstupu řádek záhlaví a použije se k vykreslení tohoto řádku.
  • AlternatingItemTemplate slouží k vykreslení střídavých položek.
  • SelectedItemTemplateslouží k vykreslení vybrané položky; vybraná položka je položka, jejíž index odpovídá vlastnosti DataList s SelectedIndex
  • EditItemTemplate slouží k vykreslení upravované položky.
  • SeparatorTemplate v případě potřeby přidá oddělovač mezi každou položku a použije se k vykreslení tohoto oddělovače.
  • FooterTemplate – pokud je k dispozici, přidá do výstupu řádek zápatí a použije se k vykreslení tohoto řádku.

Při zadávání HeaderTemplate nebo FooterTemplatepřidá DataList do vykresleného výstupu další řádek záhlaví nebo zápatí. Stejně jako u řádků záhlaví a zápatí GridView nejsou záhlaví a zápatí v seznamu DataList svázané s daty. Proto jakákoli syntaxe vazby dat v objektu HeaderTemplate nebo FooterTemplate , která se pokusí o přístup k vázaným datům, vrátí prázdný řetězec.

Poznámka:

Jak jsme viděli v kurzu Zobrazení souhrnných informací v zápatí GridView s, zatímco řádky záhlaví a zápatí nepodporují syntaxi vazby dat, lze informace specifické pro data vložit přímo do těchto řádků z obslužné rutiny události GridView RowDataBound . Tuto techniku lze použít k výpočtu průběžných součtů nebo jiných informací z dat vázaných na ovládací prvek a také k přiřazení těchto informací zápatí. Stejný koncept lze použít u ovládacích prvků DataList a Repeater; Jediným rozdílem je, že pro DataList a Repeater vytvoří obslužnou rutinu události pro ItemDataBound událost (místo pro RowDataBound událost).

V našem příkladu můžeme mít název Informace o produktu zobrazený v horní části seznamu dat v nadpisu <h3> . Chcete-li toho dosáhnout, přidejte s příslušnou značkou HeaderTemplate . Z Návrháře to lze provést kliknutím na odkaz Upravit šablony v inteligentní značce DataList s, výběrem šablony záhlaví z rozevíracího seznamu a zadáním textu po výběru možnosti Nadpis 3 z rozevíracího seznamu stylu (viz obrázek 11).

Přidání headerTemplate s textovými informacemi o produktu

Obrázek 11: Přidání s informacemi o textovém HeaderTemplate produktu (kliknutím zobrazíte obrázek v plné velikosti)

Alternativně to můžete přidat deklarativní zadáním následujícího kódu do <asp:DataList> značek:

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Pokud chcete přidat trochu místa mezi jednotlivými výpisy produktů, pojďme přidat SeparatorTemplate řádek mezi jednotlivými oddíly. Značka vodorovného pravidla (<hr>) přidá takový rozdělovač. Vytvořte tak SeparatorTemplate , aby mělo následující kód:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Poznámka:

HeaderTemplate Stejně jako a FooterTemplates, SeparatorTemplate není vázán na žádný záznam ze zdroje dat, a proto nemůže přímo přistupovat k záznamům zdroje dat vázané na DataList.

Po přidání by se při prohlížení stránky v prohlížeči měla podobat obrázku 12. Poznamenejte si řádek záhlaví a čáru mezi jednotlivými výpisy produktů.

DataList obsahuje řádek záhlaví a vodorovné pravidlo mezi jednotlivými výpisy produktů.

Obrázek 12: DataList obsahuje řádek záhlaví a vodorovné pravidlo mezi jednotlivými výpisy produktů (kliknutím zobrazíte obrázek v plné velikosti).

Krok 5: Vykreslení konkrétních revizí pomocí ovládacího prvku Repeater

Pokud při návštěvě příkladu DataList z obrázku 12 provedete zobrazení nebo zdroj z prohlížeče, uvidíte, že Datový seznam vygeneruje kód HTML <table> obsahující řádek tabulky (<tr>) s jednou buňkou tabulky () pro<td> každou položku vázanou na dataList. Tento výstup je ve skutečnosti identický s tím, co by se vygenerovalo z objektu GridView s jedním polem TemplateField. Jak uvidíme v budoucím kurzu, DataList umožňuje další přizpůsobení výstupu, což nám umožní zobrazit více záznamů zdroje dat na řádek tabulky.

Co když ale nechcete generovat kód HTML <table>? Pro celkovou a úplnou kontrolu nad značkou vygenerovanou ovládacím prvkem datového webu musíme použít ovládací prvek Repeater. Stejně jako DataList je repeater vytvořen na základě šablon. Repeater ale nabízí pouze následující pět šablon:

  • HeaderTemplate v případě potřeby přidá zadané značky před položky.
  • ItemTemplate slouží k vykreslení položek.
  • AlternatingItemTemplate pokud je k dispozici, používá se k vykreslení střídavých položek
  • SeparatorTemplate pokud je zadáno, přidá zadaný kód mezi každou položku.
  • FooterTemplate - pokud je zadáno, přidá za položky zadaný kód.

V ASP.NET 1.x se ovládací prvek Repeater běžně používal k zobrazení seznamu s odrážkami, jehož data pocházejí z určitého zdroje dat. V takovém případě HeaderTemplate by obsahovaly FooterTemplates počáteční a koncové <ul> značky, zatímco ItemTemplate by obsahovaly <li> prvky se syntaxí vazby dat. Tento přístup je stále možné použít v ASP.NET 2.0, jak jsme viděli ve dvou příkladech v kurzu Stránky předlohy a Navigace na webu:

  • Site.master Na stránce předlohy byl repeater použit k zobrazení seznamu s odrážkami obsahu mapy webu nejvyšší úrovně (základní vytváření sestav, filtrování sestav, přizpůsobené formátování atd.), další vnořený repeater se použil k zobrazení podřízených oddílů nejvyšší úrovně.
  • V SectionLevelTutorialListing.ascxnástroji Repeater se použil k zobrazení seznamu s odrážkami podřízených oddílů aktuální mapy webu.

Poznámka:

ASP.NET 2.0 zavádí nový ovládací prvek BulletedList, který může být vázán na ovládací prvek zdroje dat, aby se zobrazil jednoduchý seznam s odrážkami. Pomocí ovládacího prvku BulletedList nemusíme zadávat žádný z HTML souvisejících se seznamem; místo toho jednoduše označujeme datové pole, které se má zobrazit jako text pro každou položku seznamu.

Repeater slouží jako zachytávání všech datových webových ovládacích prvků. Pokud neexistuje existující ovládací prvek, který generuje potřebné značky, lze použít ovládací prvek Repeater. Abychom mohli ilustrovat použití repeateru, pojďme mít seznam kategorií zobrazených nad seznamem Product Information DataList vytvořeným v kroku 2. Konkrétně pojďme mít kategorie zobrazené v HTML <table> s jedním řádkem a každou kategorii zobrazenou jako sloupec v tabulce.

Chcete-li toho dosáhnout, začněte přetažením ovládacího prvku Repeater z panelu nástrojů do Návrháře nad dataList informací o produktu. Stejně jako u dataListu se repeater zpočátku zobrazí jako šedé pole, dokud nebudou definovány jeho šablony.

Přidání opakovače do Návrháře

Obrázek 13: Přidání opakovače do Návrháře (kliknutím zobrazíte obrázek v plné velikosti)

V inteligentní značce Repeater s je pouze jedna možnost: Zvolte zdroj dat. Umožňuje vytvořit nový ObjectDataSource a nakonfigurovat ho tak, aby používal metodu CategoriesBLL třídy.GetCategories

Vytvoření nového objektu ObjectDataSource

Obrázek 14: Vytvoření nového objektu ObjectDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Konfigurace ObjectDataSource pro použití kategorieBLL třídy

Obrázek 15: Konfigurace ObjectDataSource pro použití CategoriesBLL třídy (kliknutím zobrazíte obrázek s plnou velikostí)

Načtení informací o všech kategoriích pomocí getCategories – metoda

Obrázek 16: Načtení informací o všech kategoriích pomocí GetCategories metody (kliknutím zobrazíte obrázek s plnou velikostí)

Na rozdíl od objektu DataList sada Visual Studio po vytvoření vazby ke zdroji dat automaticky nevytvoří položku ItemTemplate pro Repeater. Šablony Repeater s nelze navíc konfigurovat prostřednictvím Návrháře a musí být zadány deklarativním způsobem.

Abychom mohli kategorie zobrazit jako jeden řádek <table> se sloupcem pro každou kategorii, potřebujeme, aby repeater vygenerovala značky podobné následujícímu:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td> Vzhledem k tomu, že text je část, která se opakuje, zobrazí se v itemTemplate Repeater s. Značka, která se zobrazí před ní - <table><tr> - bude umístěna v HeaderTemplate době, kdy končí - </tr></table> - bude umístěna FooterTemplatedo . Pokud chcete zadat tato nastavení šablony, přejděte na deklarativní část stránky ASP.NET kliknutím na tlačítko Zdroj v levém dolním rohu a zadejte následující syntaxi:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater vygeneruje přesnou značku určenou svými šablonami, nic více, nic menšího. Obrázek 17 znázorňuje výstup repeateru při prohlížení v prohlížeči.

Tabulka> HTML <s jedním řádkem uvádí každou kategorii v samostatném sloupci.

Obrázek 17: Jeden řádek HTML <table> uvádí každou kategorii v samostatném sloupci (kliknutím zobrazíte obrázek v plné velikosti).

Krok 6: Zlepšení vzhledu opakovače

Vzhledem k tomu, repeater generuje přesně kód určený svými šablonami, měl by přijít jako překvapení, že neexistují žádné vlastnosti související se stylem repeater. Abychom změnili vzhled obsahu vygenerovaného repeaterem, musíme do šablon Repeateru ručně přidat potřebný obsah HTML nebo CSS.

V našem příkladu můžeme mít sloupce kategorií alternativní barvy pozadí, například se střídavými řádky v seznamu DataList. Abychom toho dosáhli, musíme třídu CSS přiřadit RowStyle ke každé položce Repeateru a AlternatingRowStyle třídu CSS ke každé střídavé položce Repeateru ItemTemplate prostřednictvím šablon a AlternatingItemTemplate šablon, například:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Pojďme také přidat řádek záhlaví do výstupu s textem Kategorie produktů. Vzhledem k tomu, že nevíme, kolik sloupců se bude výsledek <table> skládat, nejjednodušší způsob, jak vygenerovat řádek záhlaví, který je zaručen, že bude zahrnovat všechny sloupce, je použít dva <table> s. První <table> bude obsahovat dva řádky řádku záhlaví a řádek, který bude obsahovat druhý řádek s jedním řádkem <table> , který má sloupec pro každou kategorii v systému. To znamená, že chceme vygenerovat následující kód:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

HeaderTemplate Následující kód a FooterTemplate výsledkem je požadovaná revize:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Obrázek 18 znázorňuje opakovač po provedení těchto změn.

Sloupce kategorií se střídají v barvě pozadí a obsahují řádek záhlaví.

Obrázek 18: Sloupce kategorií se střídají v barvě pozadí a obsahují řádek záhlaví (kliknutím zobrazíte obrázek v plné velikosti).

Shrnutí

I když ovládací prvek GridView usnadňuje zobrazení, úpravu, odstranění, řazení a stránkování dat, vzhled je velmi boxy a mřížka. Abychom měli větší kontrolu nad vzhledem, musíme se obrátit na ovládací prvky DataList nebo Repeater. Oba tyto ovládací prvky zobrazují sadu záznamů pomocí šablon místo BoundFields, CheckBoxFields atd.

DataList se vykresluje jako HTML <table> , který ve výchozím nastavení zobrazuje každý záznam zdroje dat v jednom řádku tabulky, stejně jako GridView s jedním TemplateField. Jak uvidíme v budoucím kurzu, ale DataList umožňuje zobrazení více záznamů na řádek tabulky. Repeater na druhé straně přísně vydává značky uvedené v jeho šablonách; nepřidává žádné další značky, a proto se běžně používá k zobrazení dat v jiných elementech HTML než <table> (například v seznamu s odrážkami).

I když DataList a Repeater nabízejí větší flexibilitu ve svém vykreslené výstupu, chybí mnoho předdefinovaných funkcí nalezených v GridView. Jak si probereme v nadcházejících kurzech, některé z těchto funkcí se dají připojit zpět bez příliš velkého úsilí, ale mějte na paměti, že použití prvku DataList nebo Repeater místo GridView omezuje funkce, které můžete použít, aniž byste tyto funkce museli implementovat sami.

Šť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 Teach Yourself ASP.NET 2.0 za 24 hodin. Je dostupný na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím svého blogu, který lze najít na http://ScottOnWriting.NET.

Zvláštní díky

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

PředchozíDalší