Sdílet prostřednictvím

Použití vlastností TemplateField v ovládacím prvku DetailsView (C#)

  • Článek

Scott Mitchell

Stáhnout PDF

Stejné možnosti TemplateFields dostupné s GridView jsou k dispozici také s DetailsView ovládací prvek. V tomto kurzu budeme zobrazovat jeden produkt po druhém pomocí zobrazení DetailsView obsahujícího TemplateFields.

Úvod

TemplateField nabízí vyšší míru flexibility při vykreslování dat než BoundField, CheckBoxField, HyperLinkField a další ovládací prvky datového pole. V předchozím kurzu jsme se podívali na použití TemplateField v objektu GridView k:

  • Zobrazení více hodnot datových polí v jednom sloupci Konkrétně FirstName se pole a LastName zkombinovala do jednoho sloupce GridView.
  • K vyjádření hodnoty datového pole použijte alternativní webový ovládací prvek. Viděli jsme, jak zobrazit HiredDate hodnotu pomocí ovládacího prvku Kalendář.
  • Umožňuje zobrazit informace o stavu na základě podkladových dat. Employees I když tabulka neobsahuje sloupec, který vrací počet dnů, po které byl zaměstnanec na pracovní pozici, v předchozím kurzu jsme tyto informace mohli zobrazit v příkladu GridView pomocí metody TemplateField a formátování.

Stejné možnosti TemplateFields dostupné s GridView jsou k dispozici také s DetailsView ovládací prvek. V tomto kurzu zobrazíme najednou jeden produkt pomocí zobrazení DetailsView, který obsahuje dvě pole TemplateFields. První TemplateField zkombinuje UnitPricedatová pole , UnitsInStocka UnitsOnOrder do jednoho řádku DetailsView. Druhé TemplateField zobrazí hodnotu Discontinued pole, ale použije metodu formátování k zobrazení "ANO", pokud Discontinued je truehodnota , a "NE" v opačném případě.

Dvě pole šablon slouží k přizpůsobení zobrazení.

Obrázek 1: K přizpůsobení zobrazení se používají dvě pole TemplateField (kliknutím zobrazíte obrázek v plné velikosti)

Pusťme se do toho.

Krok 1: Vytvoření vazby dat na DetailsView

Jak je popsáno v předchozím kurzu, při práci s TemplateFields je často nejjednodušší začít vytvořením ovládacího prvku DetailsView, který obsahuje pouze BoundFields, a pak přidat nové TemplateFields nebo podle potřeby převést existující BoundFields na TemplateFields. Proto začněte tento kurz přidáním DetailsView na stránku prostřednictvím Designer a vazbu na ObjectDataSource, který vrací seznam produktů. Tyto kroky vytvoří DetailsView s BoundFields pro každé z polí ne booleovské hodnoty produktu a CheckBoxField pro jedno pole logické hodnoty (Ukončeno).

DetailsViewTemplateField.aspx Otevřete stránku a přetáhněte DetailsView z panelu nástrojů na Designer. Z inteligentní značky DetailsView zvolte přidat nový ovládací prvek ObjectDataSource, který vyvolá metodu ProductsBLL třídy GetProducts() .

Přidání ovládacího prvku New ObjectDataSource, který vyvolá metodu GetProducts()

Obrázek 2: Přidání nového ovládacího prvku ObjectDataSource, který vyvolá metodu GetProducts() (kliknutím zobrazíte obrázek v plné velikosti)

Pro tuto sestavu odeberte objekty ProductID, SupplierIDCategoryID, a ReorderLevel BoundField. Dále změníte pořadí BoundFields tak, aby CategoryName se položky BoundField a SupplierName zobrazily hned za BoundField ProductName . Nebojte se upravit HeaderText vlastnosti a formátování boundfields podle potřeby. Stejně jako u objektu GridView lze tyto úpravy na úrovni BoundField provádět prostřednictvím dialogového okna Pole (přístupné po kliknutí na odkaz Upravit pole v inteligentní značce DetailsView) nebo prostřednictvím deklarativní syntaxe. Nakonec vymažte hodnoty vlastnosti a Width DetailsViewHeight, aby se ovládací prvek DetailsView rozbalil na základě zobrazených dat a zaškrtněte políčko Povolit stránkování v inteligentní značce.

Po provedení těchto změn by deklarativní kód ovládacího prvku DetailsView měl vypadat podobně jako následující:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
          SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="Units In Stock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="Units On Order" SortExpression="UnitsOnOrder" />
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Chvíli si stránku prohlédněte v prohlížeči. V tomto okamžiku byste měli vidět jeden produkt uvedený v seznamu (Chai) s řádky s názvem produktu, kategorií, dodavatelem, cenou, skladovými jednotkami, jednotkami na objednávce a stavem ukončeno.

Podrobnosti o produktu se zobrazují pomocí řady BoundFields.

Obrázek 3: Podrobnosti o produktu jsou zobrazeny pomocí řady vázaných polí (kliknutím zobrazíte obrázek v plné velikosti)

Krok 2: Zkombinování cen, jednotek na skladě a jednotek na objednávku do jednoho řádku

DetailsView obsahuje řádek pro UnitPricepole , UnitsInStocka UnitsOnOrder . Tato datová pole můžeme zkombinovat do jednoho řádku s polem TemplateField buď přidáním nového pole TemplateField, nebo převodem některého z existujících UnitPricepolí , UnitsInStocka UnitsOnOrder BoundField na TemplateField. I když já osobně dávám přednost převodu stávajících boundfieldů, pojďme si to procvičit přidáním nového pole TemplateField.

Začněte kliknutím na odkaz Upravit pole v inteligentní značce DetailsView a otevřete dialogové okno Pole. Dále přidejte nové pole TemplateField, nastavte jeho HeaderText vlastnost na "Price and Inventory" a přesuňte nové TemplateField tak, aby byla umístěna nad UnitPrice BoundField.

Přidání nové šablonyField do ovládacího prvku DetailsView

Obrázek 4: Přidání nového pole TemplateField do ovládacího prvku DetailsView (kliknutím zobrazíte obrázek v plné velikosti)

Vzhledem k tomu, že toto nové pole TemplateField bude obsahovat hodnoty aktuálně zobrazené v UnitPricepolích , UnitsInStocka UnitsOnOrder BoundField, odeberme je.

Posledním úkolem pro tento krok je definovat ItemTemplate přirážku pro Price and Inventory TemplateField, což lze provést buď prostřednictvím rozhraní pro úpravy šablony DetailsView v Designer, nebo ručně prostřednictvím deklarativní syntaxe ovládacího prvku. Stejně jako u Objekt GridView lze získat přístup k rozhraní pro úpravy šablony DetailsView kliknutím na odkaz Upravit šablony v inteligentní značce. Tady můžete vybrat šablonu, kterou chcete upravit, z rozevíracího seznamu a pak přidat všechny webové ovládací prvky z panelu nástrojů.

Pro účely tohoto kurzu začněte přidáním ovládacího prvku Popisek do pole Price and Inventory TemplateField ItemTemplate. Potom klikněte na odkaz Upravit datové vazby z inteligentní značky ovládacího prvku Label Web a vytvořte vazbu Text vlastnosti na UnitPrice pole.

Svázání vlastnosti Text popisku s datovým polem UnitPrice

Obrázek 5: Vytvoření vazby vlastnosti popisku Text k datovému UnitPrice poli (kliknutím zobrazíte obrázek v plné velikosti)

Formátování ceny jako měny

S tímto dodatkem teď ovládací prvky Label Web Price a Inventory TemplateField zobrazí pouze cenu pro vybraný produkt. Obrázek 6 ukazuje snímek obrazovky s naším dosavadním pokrokem při prohlížení prostřednictvím prohlížeče.

Pole Šablony ceny a zásob zobrazuje cenu.

Obrázek 6: Pole šablony ceny a zásob zobrazuje cenu (kliknutím zobrazíte obrázek v plné velikosti)

Všimněte si, že cena produktu není formátovaná jako měna. U objektu BoundField je formátování možné nastavením HtmlEncode vlastnosti na a falseDataFormatString vlastnosti na {0:formatSpecifier}. Pro TemplateField však musí být všechny pokyny formátování zadány v syntaxi datové vazby nebo pomocí metody formátování definované někde v kódu aplikace (například ve třídě kódu na pozadí ASP.NET stránky).

Chcete-li určit formátování syntaxe datové vazby použité v ovládacím prvku Label Web, vraťte se kliknutím na odkaz Upravit datové vazby z inteligentní značky Label do dialogového okna DataBindings. Pokyny k formátování můžete zadat přímo v rozevíracím seznamu Formát nebo vybrat některý z definovaných formátovacích řetězců. Podobně jako u vlastnosti BoundField DataFormatString se formátování určuje pomocí {0:formatSpecifier}.

UnitPrice Pro pole použijte formátování měny určené buď výběrem příslušné hodnoty rozevíracího seznamu, nebo zadáním {0:C} ručně.

Formátování ceny jako měny

Obrázek 7: Formátování ceny jako měny (kliknutím zobrazíte obrázek v plné velikosti)

Specifikace formátování je deklarativním způsobem označena jako druhý parametr metody Bind nebo Eval . Nastavení provedená prostřednictvím Designer výsledkem následujícího výrazu databinding v deklarativním kódu:

<asp:Label ID="Label1" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'/>

Přidání zbývajících datových polí do pole TemplateField

V tomto okamžiku jsme zobrazili a naformátovali UnitPrice datové pole v poli Price a Inventory TemplateField, ale stále potřebujeme zobrazit UnitsInStock pole a UnitsOnOrder . Zobrazíme je na řádku pod cenou a v závorkách. Z rozhraní pro úpravy šablony v Designer lze takové značky přidat umístěním kurzoru do šablony a jednoduchým zadáním textu, který se má zobrazit. Alternativně lze tento kód zadat přímo v deklarativní syntaxi.

Přidejte statické značky, ovládací prvky Label Web a syntaxi datové vazby, aby pole Price and Inventory TemplateField zobrazovaly informace o ceně a zásobách, například takto:

UnitPrice
(Skladem / na objednávku:UnitsInStock / UnitsOnOrder)

Po provedení této úlohy by deklarativní kód DetailsView měl vypadat podobně jako následující:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:TemplateField HeaderText="Price and Inventory">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                  Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                <br />
                <strong>
                (In Stock / On Order: </strong>
                <asp:Label ID="Label2" runat="server"
                  Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                <strong>/</strong>
                <asp:Label ID="Label3" runat="server"
                  Text='<%# Eval("UnitsOnOrder") %>'>
                </asp:Label><strong>)</strong>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Díky těmto změnám jsme konsolidovali informace o cenách a zásobách do jednoho řádku DetailsView.

Informace o cenách a skladových zásobách se zobrazují na jednom řádku.

Obrázek 8: Informace o cenách a skladových zásobách se zobrazují v jednom řádku (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Přizpůsobení informací o ukončených polích

Sloupec Products tabulky Discontinued je bitová hodnota, která označuje, jestli byl produkt ukončen. Při vazbě DetailsView (nebo GridView) na ovládací prvek zdroje dat, logická hodnota pole, jako Discontinuedje , jsou implementovány jako CheckBoxFields, zatímco jiná než logická hodnota pole, jako ProductID, ProductNamea tak dále, jsou implementovány jako BoundFields. CheckBoxField se vykreslí jako zakázané zaškrtávací políčko, které je zaškrtnuté, pokud je hodnota datového pole True a jinak nezaškrtnutá.

Místo zobrazení CheckBoxField můžeme chtít místo toho zobrazit text označující, zda je produkt ukončen. K tomu bychom mohli odebrat CheckBoxField z DetailsView a pak přidat BoundField, jehož DataField vlastnost byla nastavena na Discontinued. Udělejte si na to chvilku. Po této změně DetailsView zobrazí text "True" pro produkty, které už nejsou, a "False" pro produkty, které jsou stále aktivní.

Řetězce true a false slouží k zobrazení stavu ukončení.

Obrázek 9: Řetězce true a false slouží k zobrazení stavu ukončení (kliknutím zobrazíte obrázek v plné velikosti)

Představte si, že nechceme používat řetězce "True" nebo "False", ale "ANO" a "NE". Takové přizpůsobení lze provést pomocí TemplateField a metody formátování. Metoda formátování může přijímat libovolný počet vstupních parametrů, ale musí vracet kód HTML (jako řetězec) pro vložení do šablony.

Do třídy kódu na pozadí stránky přidejte metodu DetailsViewTemplateField.aspx formátování s názvem DisplayDiscontinuedAsYESorNO , která přijme logickou hodnotu jako vstupní parametr a vrátí řetězec. Jak je popsáno v předchozím kurzu, tato metoda musí být označena jako protected nebo public , aby byla přístupná ze šablony.

protected string DisplayDiscontinuedAsYESorNO(bool discontinued)
{
    if (discontinued)
        return "YES";
    else
        return "NO";
}

Tato metoda zkontroluje vstupní parametr (discontinued) a vrátí "ANO", pokud je true, jinak "NE".

Poznámka

V metodě formátování, která se zkoumala v předchozím kurzu, si připomeňme, že jsme předávali datové pole, které by mohlo obsahovat NULL , a proto jsme museli před přístupem k EmployeesRowHiredDate vlastnosti zkontrolovat, jestli hodnota vlastnosti zaměstnance HiredDate má hodnotu databázeNULL. Tato kontrola zde není nutná, protože Discontinued sloupec nikdy nemůže mít přiřazené hodnoty databáze NULL . Navíc je to důvod, proč metoda může přijmout logický vstupní parametr místo toho, aby musela přijmout ProductsRow instanci nebo parametr typu object.

Po dokončení této metody formátování zbývá jen volat z TemplateField .ItemTemplate Pokud chcete vytvořit TemplateField, odeberte Discontinued BoundField a přidejte nové TemplateField nebo převeďte BoundField na Discontinued TemplateField. Potom v zobrazení deklarativních značek upravte TemplateField tak, aby obsahovala pouze ItemTemplate, která vyvolá metodu DisplayDiscontinuedAsYESorNO a předává hodnotu vlastnosti aktuální ProductRow instance Discontinued . Můžete k němu získat přístup prostřednictvím Eval metody . Konkrétně by kód TemplateField měl vypadat takto:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <%# DisplayDiscontinuedAsYESorNO((bool)
          Eval("Discontinued")) %>
    </ItemTemplate>
</asp:TemplateField>

To způsobí DisplayDiscontinuedAsYESorNO , že metoda se vyvolá při vykreslování DetailsView a předá ProductRow hodnotu instance Discontinued . Vzhledem k tomu, že Eval metoda vrací hodnotu typu object, ale DisplayDiscontinuedAsYESorNO metoda očekává vstupní parametr typu bool, přetypujeme Eval metody vracející hodnotu na bool. Metoda DisplayDiscontinuedAsYESorNO pak vrátí "ANO" nebo "NE" v závislosti na hodnotě, kterou obdrží. Vrácená hodnota je to, co se zobrazí v tomto řádku DetailsView (viz Obrázek 10).

Hodnoty ANO nebo NE se teď zobrazují v řádku Ukončeno.

Obrázek 10: Hodnoty ANO nebo NE se teď zobrazují v řádku Ukončeno (kliknutím zobrazíte obrázek v plné velikosti)

Souhrn

TemplateField v ovládacím prvku DetailsView umožňuje větší míru flexibility při zobrazení dat, než je k dispozici u ostatních ovládacích prvků pole, a jsou ideální pro situace, kdy:

  • V jednom sloupci GridView se musí zobrazit více datových polí.
  • Data se nejlépe vyjadřují pomocí webového ovládacího prvku místo prostého textu.
  • Výstup závisí na podkladových datech, jako je zobrazení metadat nebo přeformátování dat.

Zatímco TemplateFields umožňují větší míru flexibility při vykreslování podkladových dat DetailsView, Výstup DetailsView se stále cítí trochu boxy, protože každé pole je vykreslen jako řádek v HTML <table>.

Ovládací prvek FormView nabízí větší míru flexibility při konfiguraci vykresleného výstupu. Objekt FormView neobsahuje pole, ale pouze řadu šablon (ItemTemplate, EditItemTemplate, HeaderTemplateatd.). V dalším kurzu se podíváme, jak pomocí ovládacího prvku FormView dosáhnout ještě větší kontroly nad vykresleným rozložením.

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ím recenzentem pro tento kurz byl Dan Jagers. 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ší