Zobrazení více záznamů na řádku ovládacím prvkem DataList (C#)
V tomto krátkém kurzu se podíváme, jak přizpůsobit rozložení DataListu pomocí jeho vlastností RepeatColumns a RepeatDirection.
Úvod
Příklady DataList, které jsme viděli v předchozích dvou kurzech, vykreslily každý záznam ze svého zdroje dat jako řádek v html s jedním sloupcem <table>. I když se jedná o výchozí chování datalistu, 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 seznamu DataList s jedním řádkem s více sloupci.
Rozložení DataList s můžeme přizpůsobit pomocí vlastností RepeatColumns a RepeatDirection , které označují, kolik sloupců se vykresluje a jestli jsou tyto položky rozložené svisle nebo vodorovně. Obrázek 1 například znázorňuje 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)
Díky zobrazení více položek zdroje dat na řádek může seznam DataList efektivněji využívat prostor na vodorovné obrazovce. V tomto krátkém kurzu prozkoumáme tyto dvě vlastnosti DataList.
Krok 1: Zobrazení informací o produktu v seznamu DataList
Než prozkoumáme RepeatColumns vlastnosti a RepeatDirection , pojďme nejprve na naší stránce vytvořit seznam DataList, který obsahuje informace o produktu pomocí standardního rozložení tabulky s jedním sloupcem a více řádky. V tomto příkladu nechte zobrazit název, kategorii a cenu produktu pomocí následující přirážky:
<h4>Product Name</h4>
Available in the Category Name store for Price
V předchozích příkladech jsme viděli, jak svázat data se seznamem DataList, takže si tyto kroky rychle projdu. Začněte tím, že RepeatColumnAndDirection.aspx otevřete stránku ve DataListRepeaterBasics složce a přetáhnete DataList ze sady nástrojů do Designer. Z inteligentní značky DataList s se rozhodnete vytvořit nový ObjectDataSource a nakonfigurovat ho tak, aby načítá data z ProductsBLL metody třídy s GetProducts , a zvolte možnost (None) z karet průvodce INSERT, UPDATE a DELETE.
Po vytvoření a vytvoření vazby nového objektu ObjectDataSource na seznam DataList visual Studio automaticky vytvoří objekt ItemTemplate , který zobrazí název a hodnotu pro každé z datových polí produktu. ItemTemplate Upravte kód buď přímo prostřednictvím deklarativní značky, nebo z možnosti Upravit šablony v inteligentní značce DataList s tak, aby používala výše uvedené značky a nahraďte text Název produktu, Název kategorie a Cena ovládacími prvky Popisek, které používají příslušnou syntaxi vazby dat k přiřazení hodnot k jejich Text vlastnostem. Po aktualizaci ItemTemplateby deklarativní značky stránky měly vypadat přibližně 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 do Eval syntaxe vazby dat zahrnul(a) specifikátor formátu , UnitPricekterý vrácené hodnoty naformátuje jako měnu . Eval("UnitPrice", "{0:C}").
Udělejte si chvilku a navštivte stránku v prohlížeči. Jak ukazuje obrázek 2, DataList se vykresluje jako tabulka produktů s jedním sloupcem s více řádky.
Obrázek 2: Ve výchozím nastavení se DataList 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
Zatímco výchozí chování Pro DataList je rozložení jeho položek svisle v jednosloupcové víceřádkové tabulce, toto chování lze snadno změnit pomocí vlastnosti DataList sRepeatDirection. Vlastnost RepeatDirection může přijmout jednu ze dvou možných hodnot: Horizontal nebo Vertical (výchozí).
Změnou RepeatDirection vlastnosti z Vertical na Horizontalvykreslí DataList své záznamy v jednom řádku a vytvoří jeden sloupec pro každou položku zdroje dat. Pokud chcete tento efekt ilustrovat, klikněte v Designer na DataList a potom v okno Vlastnosti změňte RepeatDirection vlastnost z Vertical na Horizontal. Okamžitě po tom Designer upraví rozložení DataListu a vytvoří jednořádkové rozhraní s více sloupci (viz Obrázek 3).
Obrázek 3: Vlastnost RepeatDirection určuje, jakým způsobem jsou položky DataList s rozloženy (kliknutím zobrazíte obrázek v plné velikosti)
Při zobrazování malých objemů dat může být jedním řádkem vícesloupce ideální způsob, jak maximalizovat realitu obrazovky. U větších objemů dat ale bude jeden řádek vyžadovat velký počet sloupců, což posune položky, které se nevejdou na obrazovku, doprava. Obrázek 4 znázorňuje produkty vykreslené v jednořádkovém seznamu DataList. Vzhledem k tomu, že existuje mnoho produktů (více než 80), uživatel se bude muset posunout daleko doprava, aby zobrazil informace o jednotlivých produktech.
Obrázek 4: U dostatečně velkých zdrojů dat bude jeden sloupec DataList vyžadovat vodorovné posouvání (kliknutím zobrazíte obrázek v plné velikosti).
Krok 3: Zobrazení dat ve vícesloupkové tabulce
Pokud chcete vytvořit vícesloupce s víceřádkovým seznamem DataList, musíme vlastnost nastavit RepeatColumns na počet sloupců, které se mají zobrazit. Ve výchozím nastavení RepeatColumns je vlastnost nastavená na hodnotu 0, což způsobí, že DataList zobrazí všechny své položky v jednom řádku nebo sloupci (v závislosti na hodnotě RepeatDirection vlastnosti).
V našem příkladu zobrazíme tři produkty na řádek tabulky. Proto nastavte RepeatColumns vlastnost na 3. Po provedení této změny si chvíli prohlédněte výsledky v prohlížeči. Jak ukazuje obrázek 5, produkty jsou teď uvedené ve třísloupkové tabulce s více řádky.
Obrázek 5: Na řádek jsou zobrazeny tři produkty (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 ukazuje výsledky s vlastností nastavenou RepeatDirection na Horizontal. Všimněte si, že první tři produkty Chai, Chang a Anýsový sirup jsou rozloženy zleva doprava, shora dolů. Další tři produkty (počínaje od Chef Anton s Cajun Seasoning) se objeví v řadě pod prvními třemi. RepeatDirection Změna vlastnosti zpět na Verticalvšak tyto produkty rozloží shora dolů, zleva doprava, jak je znázorněno na obrázku 6.
Obrázek 6: Tady jsou produkty rozložené svisle (kliknutím zobrazíte obrázek v plné velikosti)
Počet řádků zobrazených ve výsledné tabulce závisí na počtu celkových záznamů vázaných na seznam DataList. Přesně jde o horní mez celkového počtu položek zdroje dat vydělené RepeatColumns hodnotou vlastnosti. Vzhledem k tomu, že Products tabulka v současné době obsahuje 84 produktů, které lze dělit 3, je zde 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. RepeatDirection Pokud je hodnota nastavená na Vertical, bude mít poslední sloupec prázdné buňky; pokud RepeatDirection je Horizontal, bude mít poslední řádek prázdné buňky.
Souhrn
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 maximalizovat realitu obrazovky zobrazením více položek zdroje dat na řádek. Stačí nastavit vlastnost DataList s RepeatColumns na počet sloupců, které se mají zobrazit na řádek. Vlastnost DataList s RepeatDirection navíc může být použita k označení, zda má být obsah tabulky s více sloupci s více řádky rozložen vodorovně zleva doprava, shora dolů nebo svisle shora dolů, zleva doprava.
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 najít na mitchell@4GuysFromRolla.comadrese . nebo prostřednictvím jeho blogu, který najdete na http://ScottOnWriting.NETadrese .
Zvláštní poděkování
Tato série kurzů byla zkontrolována mnoha užitečnými recenzenty. Hlavním recenzentem pro tento kurz byl John Suru. Chcete si projít moje nadcházející články na WEBU MSDN? Pokud ano, dejte mi čáru na mitchell@4GuysFromRolla.comadresu .