Zobrazení více záznamů na řádku ovládacím prvkem DataList (C#)

od Scotta Mitchella

Stáhnout PDF

V této krátké ukázce se podíváme na to, jak přizpůsobit rozložení DataListu pomocí vlastností RepeatColumns a RepeatDirection.

Úvod

Příklady DataList, které jsme viděli v předchozích dvou kurzech, vykreslovaly každý záznam z jeho zdroje dat jako řádek v html <table>s jedním sloupcem . I když se jedná o výchozí chování DataList, je velmi snadné přizpůsobit zobrazení DataList tak, aby se položky zdroje dat rozprostřely do vícesloupcové tabulky s více řádky. Kromě toho je možné mít všechny položky zdroje dat zobrazené v DataListu, který je v jednom řádku s více sloupci.

Rozložení DataList můžeme přizpůsobit pomocí svých RepeatColumns a RepeatDirection vlastností, což označuje, kolik sloupců se vykresluje a zda jsou tyto položky rozloženy svisle nebo vodorovně. Obrázek 1 například ukazuje Seznam dat, který zobrazuje informace o produktu v tabulce se třemi sloupci.

Obrázek 1: Seznam dat zobrazuje tři produkty na řádek (kliknutím zobrazíte obrázek v plné velikosti).

Zobrazením více položek zdroje dat na řádek může DataList efektivněji využívat vodorovné místo na obrazovce. V tomto krátkém kurzu prozkoumáme tyto dvě vlastnosti DataList.

Krok 1: Zobrazení informací o produktu v datovém seznamu

Než prozkoumáme RepeatColumns vlastnosti a RepeatDirection vlastnosti, nejprve vytvoříme na naší stránce seznam informací o produktech pomocí standardního rozložení tabulky s jedním sloupcem s více řádky. V tomto příkladu zobrazíme název produktu, kategorii a cenu pomocí následující značky:

<h4>Product Name</h4>
Available in the Category Name store for Price

Viděli jsme, jak vytvořit vazbu dat k objektu DataList v předchozích příkladech, takže si tyto kroky rychle projdeme. Začněte otevřením RepeatColumnAndDirection.aspx stránky ve DataListRepeaterBasics složce a přetažením datového seznamu ze sady nástrojů do Návrháře. Z inteligentní značky DataList se můžete rozhodnout vytvořit nový ObjectDataSource a nakonfigurovat ho tak, aby načítá data z ProductsBLL metody třídy GetProducts , a zvolte možnost (None) v průvodci s kartaMI INSERT, UPDATE a DELETE.

Po vytvoření a svázání nového ObjectDataSource na DataList Visual Studio automaticky vytvoří ItemTemplate, který zobrazuje název a hodnotu pro každé pole dat produktu. Upravte ItemTemplate buď přímo pomocí deklarativní značky, nebo z možnosti Upravit šablony v inteligentní značce DataList, aby používal značky uvedené výše. Nahraďte text název produktu, název kategorie a Cena ovládacími prvky Label. Tyto prvky by měly využívat odpovídající syntaxi vazby dat pro přiřazení hodnot jejich vlastnostem Text. Po aktualizaci ItemTemplateby deklarativní kód stránky měl vypadat nějak takto:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Všimněte si, že jsem zahrnul specifikátor formátu v Eval syntaxi vazby dat pro UnitPrice, formátování vrácené hodnoty jako měny - Eval("UnitPrice", "{0:C}").

Chvilku navštivte stránku v prohlížeči. Jak ukazuje obrázek 2, DataList se vykreslí jako tabulka produktů s jedním sloupcem s více řádky.

Obrázek 2: Ve výchozím nastavení se datový seznam vykresluje jako jednosloupcová tabulka s více řádky (kliknutím zobrazíte obrázek v plné velikosti).

Krok 2: Změna směru rozložení DataList s

I když je výchozím chováním DataList rozložení jejích položek svisle v jednosloupcové tabulce s více řádky, toto chování lze snadno změnit prostřednictvím vlastnosti DataList sRepeatDirection. Vlastnost RepeatDirection může přijmout jednu ze dvou možných hodnot: Horizontal nebo Vertical (výchozí).

Při změně vlastnosti z RepeatDirection na Vertical DataList vykreslí své záznamy v jednom řádku, čímž vytvoří jeden sloupec pro každou položku zdroje dat. Chcete-li tento efekt ilustrovat, klepněte na DataList v Návrháři a potom v okně Vlastnosti změňte RepeatDirection vlastnost z Vertical na Horizontal. Návrhář hned po tomto provedení upraví rozložení DataList s a vytvoří jednořádkové rozhraní s více sloupci (viz obrázek 3).

Obrázek 3: Vlastnost RepeatDirection určuje, jak jsou položky DataList s rozloženy (kliknutím zobrazíte obrázek v plné velikosti).

Při zobrazení malých objemů dat může být tabulka s jedním řádkem a více sloupci ideálním způsobem, jak maximalizovat využití prostoru na obrazovce. Při větších objemech dat bude jeden řádek vyžadovat mnoho sloupců, což posune položky, které se nevejdou na obrazovku, doprava. Obrázek 4 znázorňuje produkty při vykreslení v seznamu DataList s jedním řádkem. Vzhledem k tomu, že existuje mnoho produktů (více než 80), uživatel se bude muset posunout úplně doprava, aby zobrazil informace o jednotlivých produktech.

Obrázek 4: Pro dostatečně velké zdroje dat bude seznam DataList s jedním sloupcem vyžadovat vodorovné posouvání (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Zobrazení dat v tabulce s více sloupci a více řádky

Abychom mohli vytvořit vícesloupkový datový seznam s více řádky, musíme RepeatColumns nastavit vlastnost na počet sloupců, které se mají zobrazit. Ve výchozím nastavení je vlastnost nastavena na hodnotu 0, což způsobí, RepeatColumns že DataList zobrazí všechny její položky v jednom řádku nebo sloupci (v závislosti na hodnotě RepeatDirection vlastnosti).

V našem příkladu můžeme zobrazit tři produkty na řádek tabulky. Proto nastavte RepeatColumns vlastnost na hodnotu 3. Po provedení této změny chvíli zobrazte výsledky v prohlížeči. Jak ukazuje obrázek 5, produkty jsou teď uvedeny v tabulce se třemi sloupci s více řádky.

Obrázek 5: Zobrazí se tři produkty na řádek (kliknutím zobrazíte obrázek v plné velikosti).

Vlastnost RepeatDirection ovlivňuje způsob, jakým jsou položky v seznamu DataList rozloženy. Obrázek 5 zobrazuje výsledky s vlastností nastavenou RepeatDirection na Horizontal. Všimněte si, že první tři produkty Chai, Chang a Aniseed Sirup jsou rozloženy zleva doprava, shora dolů. Další tři produkty (počínaje chefem Antonem a jeho kořením Cajun) se objeví v řadě pod prvními třemi. Změna vlastnosti RepeatDirection zpět na Vertical uspořádá tyto produkty shora dolů, zleva doprava, jak znázorňuje obrázek 6.

Obrázek 6: Produkty jsou rozloženy svisle (Kliknutím zobrazíte obrázek s plnou velikostí)

Počet řádků zobrazených ve výsledné tabulce závisí na počtu celkových záznamů vázaných na DataList. Přesně je to strop celkového počtu položek zdroje dat vydělený RepeatColumns hodnotou vlastnosti. Products Vzhledem k tomu, že tabulka aktuálně obsahuje 84 produktů, které jsou dělitelné 3, má 28 řádků. Pokud počet položek ve zdroji dat a RepeatColumns hodnota vlastnosti nejsou dělitelné, bude poslední řádek nebo sloupec obsahovat prázdné buňky. Pokud je nastavený RepeatDirection na Vertical, bude poslední sloupec obsahovat prázdné buňky; pokud je RepeatDirection nastaveno na Horizontal, bude poslední řádek obsahovat prázdné buňky.

Shrnutí

DataList ve výchozím nastavení obsahuje seznam svých položek v tabulce s jedním sloupcem s více řádky, která napodobuje rozložení objektu GridView s jedním polem TemplateField. I když je toto výchozí rozložení přijatelné, můžeme využití prostoru na obrazovce maximalizovat zobrazením více položek na řádek. Stačí, když vlastnost DataList nastavíte RepeatColumns na počet sloupců, které se mají zobrazit na řádku. Kromě toho lze vlastnost DataList s RepeatDirection použít k označení, zda obsah vícesloupce, víceřádkové tabulky by měl být rozložen vodorovně zleva doprava, shora dolů nebo svisle shora dolů, zleva doprava.

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čte se sami 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í recenzent tohoto kurzu byl John Suru. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

Předchozídalší