Share via

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. V tomto kurzu se podíváme na vytváření běžných vzorů generování sestav pomocí ovládacích prvků DataList a Repeater a začneme základy zobrazení dat pomocí těchto ovládacích prvků.

Úvod

Pokud jsme ve všech příkladech z posledních 28 kurzů potřebovali zobrazit více záznamů ze zdroje dat, obrátili jsme se na ovládací prvek GridView. Objekt 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ánek, řazení, úpravám a odstranění dat, jeho vzhled je trochu střídmý. Navíc kód zodpovědný za GridView struktury je pevně daný obsahuje HTML <table> s řádkem tabulky (<tr>) pro každý záznam a buňku tabulky (<td>) pro každé pole.

Aby bylo možné zajistit větší míru přizpůsobení vzhledu a vykreslení značek při zobrazení více záznamů, nabízí ASP.NET 2.0 ovládací prvky DataList a Repeater (oba byly k dispozici také v ASP.NET verzi 1.x). Ovládací prvky DataList a Repeater vykreslují svůj obsah pomocí šablon místo BoundFields, CheckBoxFields, ButtonFields atd. Podobně jako GridView se i DataList vykresluje jako HTML <table>, ale umožňuje zobrazení více záznamů zdroje dat na každém řádku tabulky. Repeater na druhé straně nevykreslí žádné další značky než to, co výslovně zadáte, a je ideální kandidát, pokud potřebujete přesnou kontrolu nad vygenerovanými značkami.

V dalších asi deseti kurzech se podíváme na vytváření běžných vzorů generování sestav pomocí ovládacích prvků DataList a Repeater, přičemž začneme základy zobrazování 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 hlavního/podrobného seznamu, způsoby úprav a odstranění dat, jak procházet záznamy stránkováním atd.

Krok 1: Přidání webových stránek kurzu DataList a Repeater

Než začneme s tímto kurzem, udělejme si nejdřív chvilku a přidejte ASP.NET stránky, které budeme potřebovat pro tento kurz, a několik dalších kurzů, které se zabývají zobrazením dat pomocí datových seznamů a repeaterů. Začněte vytvořením nové složky v projektu s názvem DataListRepeaterBasics. Dále do této složky přidejte následujících pět ASP.NET stránek, přičemž všechny z nich budou nakonfigurovány 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 tutorial

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

Default.aspx Otevřete stránku a přetáhněte SectionLevelTutorialListing.ascx uživatelský ovládací prvek ze UserControls složky na plochu Návrh. 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)

Aby seznam s odrážkami zobrazoval kurzy DataList a Repeater, které budeme vytvářet, musíme je přidat do mapy webu. Web.sitemap Otevřete soubor a za značku 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>

Aktualizovat mapu 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í dataList

Podobně jako u ovládacího prvku FormView závisí vykreslený výstup ovládacího prvku DataList na šablonách, nikoli na objektech BoundFields, CheckBoxFields atd. Na rozdíl od objektu FormView je objekt DataList navržený tak, aby zobrazoval sadu záznamů, nikoli solitérní. Začněme tento kurz tím, že se podíváme na vazbu informací o produktu na dataList. Začněte otevřením Basics.aspx stránky ve DataListRepeaterBasics složce . Dále přetáhněte dataList z panelu nástrojů na Designer. Jak znázorňuje obrázek 4, před určením šablony DataList se Designer zobrazí jako šedé pole.

Přetáhněte dataList z panelu nástrojů na Designer

Obrázek 4: Přetažení seznamu dat ze sady nástrojů na Designer (kliknutím zobrazíte obrázek v plné velikosti)

Z inteligentní značky DataList přidejte novou hodnotu ObjectDataSource a nakonfigurujte ji tak, aby používala metodu ProductsBLL třídy s GetProducts . Vzhledem k tomu, že v tomto kurzu vytváříme seznam DataList jen pro čtení, nastavte rozevírací seznam na kartách průvodce INSERT, UPDATE a DELETE na (Žádný).

Možnost vytvoření nového objektuDataSource

Obrázek 5: Možnost vytvořit nový objektDataSource (kliknutím zobrazíte obrázek v plné velikosti)

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

Obrázek 6: Konfigurace objektu ObjectDataSource pro použití ProductsBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)

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í objektu ObjectDataSource a jeho přidružení k sadě DataList prostřednictvím inteligentní značky Visual Studio automaticky vytvoří ItemTemplate v seznamu DataList objekt, který zobrazí název a hodnotu každého datového pole vráceného zdrojem dat (viz kód níže). Tento výchozí ItemTemplate vzhled je stejný jako u šablon automaticky vytvořených při vytvoření vazby zdroje dat na FormView prostřednictvím Designer.

<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 vytvořila ItemTemplatesada Visual Studio , InsertItemTemplatea EditItemTemplate. U datového seznamu se ale vytvoří pouze objekt ItemTemplate . Důvodem je, že DataList nemá stejnou integrovanou podporu úprav a vkládání, kterou nabízí FormView. DataList obsahuje události související s úpravami a odstraněním a podporu úprav a odstranění lze přidat s trochou kódu, ale neexistuje žádná jednoduchá podpora jako u FormView. V dalším kurzu se dozvíte, jak zahrnout podporu úprav a odstranění u dataListu.

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

K provedení těchto změn můžete použít funkce pro úpravu šablony v Designer z inteligentní značky DataList klikněte na odkaz Upravit šablony nebo můžete šablonu upravit ručně prostřednictvím deklarativní syntaxe stránky. Pokud v Designer použijete možnost Upravit šablony, nemusí se výsledné značky přesně shodovat s následujícími značkami, ale při prohlížení v prohlížeči by měly vypadat velmi podobně jako 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 vynechat úplně a zadat jenom syntaxi datové vazby. To znamená, že místo použití <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> bychom mohli použít deklarativní syntaxi <%# Eval("CategoryName") %>.

Ovládací prvky Label Web ale nabízejí dvě výhody. Zaprvé poskytuje jednodušší způsob formátování dat na základě dat, jak uvidíme v dalším kurzu. Zadruhé možnost Upravit šablony v Designer nezobrazuje syntaxi deklarativní vazby dat, která se zobrazuje mimo některý webový ovládací prvek. Místo toho je rozhraní Upravit šablony navržené tak, aby usnadnilo práci se statickými značkami a webovými ovládacími prvky a předpokládá, že všechny vazby dat budou provedeny 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 Designer, dávám přednost použití popisků webové ovládací prvky, aby obsah byl přístupný prostřednictvím rozhraní Upravit šablony. Jak za chvíli uvidíme, repeater vyžaduje, aby se obsah šablony upravoval ze zobrazení Zdroj. V důsledku toho při vytváření šablon Repeater č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í šablony DataList s ItemTemplate.

Obrázek 8: Výstup každého produktu se vykreslí pomocí seznamu dat ItemTemplate (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Vylepšení vzhledu dataList

Podobně jako Objekt GridView i Objekt DataList nabízí řadu vlastností souvisejících se stylem, například Font, , ForeColorBackColor, , CssClassItemStyleAlternatingItemStyleSelectedItemStyle, a tak dále. 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í (RowStyle, HeaderStyleatd.). Udělejme to samé pro DataList.

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

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

Snímek obrazovky znázorňující okno Přidat novou položku se zadaným souborem Default.skin jako novým názvem souboru Skin

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

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, které byly použity s Ovládací prvky GridView a DetailsView. Třídy CSS použité zde DataWebControlStyle, AlternatingRowStyle, RowStylea 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 skinů se vzhled souboru DataList v Designer aktualizuje (možná budete muset aktualizovat zobrazení Designer, abyste viděli účinky nového souboru skinů; v nabídce Zobrazení zvolte Aktualizovat). Jak ukazuje obrázek 10, každý střídavý produkt má světle růžovou barvu pozadí.

Snímek obrazovky, který ukazuje, jak nový soubor Skin aktualizuje vzhled dataList v Designer

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

Krok 4: Prozkoumání dalších šablon DataList

Kromě ItemTemplatenástroje podporuje DataList š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 sSelectedIndex.
  • EditItemTemplate slouží k vykreslení upravované položky.
  • SeparatorTemplate pokud je zadaný, přidá mezi každou položku oddělovač a použije se k vykreslení tohoto oddělovače.
  • FooterTemplate – pokud je zadaný, přidá do výstupu řádek zápatí a použije se k vykreslení tohoto řádku.

Při zadání HeaderTemplate nebo FooterTemplatedataList přidá 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 objektu DataList vázané na data. Proto jakákoli syntaxe vazby dat v 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, zatímco řádky záhlaví a zápatí nepodporují syntaxi vazby dat, informace specifické pro data mohou být vloženy 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í do zápatí. Stejný koncept lze použít na Ovládací prvky DataList a Repeater; Jediným rozdílem je, že pro DataList a Repeater vytvoří obslužnou rutinu ItemDataBound události pro událost (místo pro RowDataBound událost).

V našem příkladu se v záhlaví zobrazí název Informace o produktu v horní části výsledků <h3> seznamu dat. Chcete-li to provést, přidejte s příslušným kódem HeaderTemplate . V Designer to můžete udělat tak, že kliknete na odkaz Upravit šablony v inteligentní značce DataList, v rozevíracím seznamu zvolíte Šablonu záhlaví a zadáte text po výběru možnosti Nadpis 3 z rozevíracího seznamu styl (viz Obrázek 11).

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

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

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

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

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

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Poznámka

Podobně jako u HeaderTemplate a FooterTemplatesnení objekt SeparatorTemplate vázán na žádný záznam ze zdroje dat, a proto nemůže přímo přistupovat k záznamům zdroje dat svázaným se seznamem DataList.

Po tomto přidání by stránka při prohlížení v prohlížeči měla vypadat podobně jako na obrázku 12. Všimněte si řádku záhlaví a řádku mezi jednotlivými seznamy produktů.

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

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

Krok 5: Vykreslení konkrétních značek 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> , který obsahuje řádek tabulky (<tr>) s jednou buňkou tabulky (<td>) pro každou položku vázanou na tento seznam Dat. Tento výstup je ve skutečnosti identický s tím, co by bylo generováno z GridView s jedním TemplateField. Jak uvidíme v dalším kurzu, DataList umožňuje další přizpůsobení výstupu, což nám umožňuje zobrazit více záznamů zdroje dat na řádek tabulky.

Co když ale nechcete generovat kód HTML <table>? Pro úplnou kontrolu nad značkou vygenerovanou datovým webovým ovládacím prvkem musíme použít ovládací prvek Repeater. Stejně jako DataList se repeater sestavuje na základě šablon. Repeater ale nabízí pouze následujících pět šablon:

  • HeaderTemplate pokud je zadán, přidá před položky zadaný kód.
  • 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án, přidá zadaný kód mezi každou položku.
  • FooterTemplate - pokud je zadán, 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 některého zdroje dat. V takovém případě HeaderTemplate by a FooterTemplates obsahovaly počáteční a uzavírací <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 kurzu Stránky předlohy a Navigace na webu :

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

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ý kód HTML související se seznamem; místo toho jednoduše označíme datové pole, které se má zobrazit jako text pro každou položku seznamu.

Repeater slouží jako ovládací prvek catch all data web. Pokud neexistuje ovládací prvek, který generuje potřebný kód, lze použít ovládací prvek Repeater. Chcete-li ilustrovat použití repeateru, nechte si zobrazit seznam kategorií zobrazený nad seznamem dat informací o produktu vytvořeným v kroku 2. Konkrétně si necháme zobrazit kategorie v jednořádkovém kódu HTML <table> , přičemž každá kategorie se zobrazí 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ů na Designer nad seznam dat informací o produktu. Stejně jako u dataList se repeater zpočátku zobrazuje jako šedé pole, dokud nebudou jeho šablony definovány.

Přidání repeateru do Designer

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

Inteligentní značka Repeateru obsahuje pouze jednu možnost: Zvolit zdroj dat. Vyberte možnost vytvořit nový objekt ObjectDataSource a nakonfigurujte ho tak, aby používal metodu CategoriesBLL třídy s GetCategories .

Vytvoření nového objektuDataSource

Obrázek 14: Vytvoření nového objektuDataSource (kliknutím zobrazíte obrázek v plné velikosti)

Konfigurace objektu ObjectDataSource pro použití třídy CategoriesBLL

Obrázek 15: Konfigurace objektu ObjectDataSource pro použití CategoriesBLL třídy (kliknutím zobrazíte obrázek v plné velikosti)

Načtení informací o všech kategoriích pomocí metody GetCategories

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

Na rozdíl od DataList, Visual Studio automaticky nevytvoří ItemTemplate pro Repeater po vytvoření vazby se zdrojem dat. Kromě toho nelze konfigurovat šablony Repeater s prostřednictvím Designer a musí být zadány deklarativně.

Pokud chcete zobrazit kategorie 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 šabloně Repeater s ItemTemplate. Značky, které se zobrazí před , <table><tr> se umístí do HeaderTemplate pole , zatímco koncová značka – </tr></table> se umístí do FooterTemplate. 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řesné značky tak, jak je specifikuje jeho šablony, nic víc, nic míň. Obrázek 17 znázorňuje výstup repeateru při prohlížení prostřednictvím prohlížeče.

Tabulka> HTML <Single-Row Seznamy každou kategorii v samostatném sloupci

Obrázek 17: Single-Row HTML <table> Seznamy každou kategorii v samostatném sloupci (kliknutím zobrazíte obrázek v plné velikosti)

Krok 6: Vylepšení vzhledu opakovače

Vzhledem k tomu, repeater generuje přesně značky určené svými šablonami, nemělo by být překvapením, že pro repeater nejsou k dispozici žádné vlastnosti související se stylem. Abychom změnili vzhled obsahu generovaného repeaterem, musíme ručně přidat potřebný obsah HTML nebo CSS přímo do šablon repeateru.

V našem příkladu necháme sloupce kategorií střídat barvy pozadí, jako jsou střídavé řádky v seznamu DataList. Abychom toho dosáhli, musíme přiřadit RowStyle třídu CSS 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 , například takto:

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

Pojďme do výstupu přidat také řádek záhlaví 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ý bude zaručeně přesahovat všechny sloupce, je použít dvě<table> s. První <table> bude obsahovat dva řádky řádku záhlaví a řádek, který bude obsahovat druhý, jeden řádek <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>

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

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

Souhrn

Zatímco GridView ovládací prvek usnadňuje zobrazení, úpravy, odstranění, řazení a procházení dat, vzhled je velmi krabicový a mřížkový. Pokud chcete mít větší kontrolu nad vzhledem, musíme přejít 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 vykreslí jako HTML <table> , který ve výchozím nastavení zobrazí každý záznam zdroje dat v jednom řádku tabulky, stejně jako GridView s jedním TemplateField. Jak ale uvidíme v dalším kurzu, dataList umožňuje zobrazení více záznamů na řádku tabulky. Repeater, na druhé straně, výhradně 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 html elementech jiných než a <table> (například v seznamu s odrážkami).

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

Všechno nejlepší na programování!

O autorovi

Scott Mitchell, autor sedmi knih o ASP/ASP.NET a zakladatel 4GuysFromRolla.com, pracuje s webovými technologiemi Microsoftu od roku 1998. Scott pracuje jako nezávislý konzultant, školitel a spisovatel. Jeho nejnovější kniha je Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Můžete ho zastihnout na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na adrese http://ScottOnWriting.NET.

Zvláštní poděkování

Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavními recenzenty pro tento kurz byli Yaakov Ellis, Liz Shulok, Randy Schmidt a Stacy Park. Chtěli byste si projít své nadcházející články na webu MSDN? Pokud ano, dejte mi řádek na mitchell@4GuysFromRolla.com.

PředchozíDalší