Sdílet prostřednictvím

Vlastní tlačítka v ovládacích prvcích DataList a Repeater (VB)

od Scotta Mitchella

Stáhnout PDF

V tomto kurzu vytvoříme rozhraní, které pomocí Repeateru vypíše kategorie v systému. Každá kategorie poskytuje tlačítko pro zobrazení přidružených produktů pomocí ovládacího prvku BulletedList.

Úvod

V posledních sedmnácti kurzech DataList a Repeater jsme vytvořili jak příklady pouze pro čtení, tak i příklady pro úpravy a mazání. Abychom usnadnili úpravy a odstraňování schopností v prvku DataList, přidali jsme tlačítka do objektu DataList s ItemTemplate , která po kliknutí způsobila postback a vyvolala událost DataList odpovídající vlastnosti tlačítka CommandName . Například přidání tlačítka k ItemTemplate s hodnotou vlastnosti CommandName Edit způsobí vyvolání EditCommand DataList při zpětném odeslání; ten, který má CommandName vlastnost Delete, vyvolá DeleteCommand.

Kromě tlačítek Upravit a Smazat mohou ovládací prvky DataList a Repeater obsahovat také tlačítka, odkazová tlačítka nebo obrazová tlačítka, která při kliknutí provádějí vlastní logiku na straně serveru. V tomto kurzu vytvoříme rozhraní, které pomocí repeateru vypíše kategorie v systému. Pro každou kategorii bude repeater obsahovat tlačítko pro zobrazení přidružených produktů kategorií pomocí ovládacího prvku BulletedList (viz obrázek 1).

Kliknutím na odkaz Zobrazit produkty zobrazíte produkty kategorie ve formě seznamu s odrážkami.

Obrázek 1: Kliknutím na odkaz Zobrazit produkty zobrazíte produkty kategorie v seznamu s odrážkami (kliknutím zobrazíte obrázek s plnou velikostí).

Krok 1: Přidání webových stránek s návodem k vlastním tlačítkům

Než se podíváme na to, jak přidat vlastní tlačítko, zabereme chvilku, než vytvoříme ASP.NET stránky v našem projektu webu, který budeme pro tento kurz potřebovat. Začněte přidáním nové složky s názvem CustomButtonsDataListRepeater. Dále do této složky přidejte následující dvě ASP.NET stránky a nezapomeňte přidružit každou stránku ke Site.master stránce předlohy:

  • Default.aspx
  • CustomButtons.aspx

Přidejte stránky ASP.NET pro vlastní kurzy Buttons-Related

Obrázek 2: Přidání ASP.NET stránek pro vlastní kurzy Buttons-Related

Stejně jako v ostatních složkách, ve složce Default.aspx bude uveden seznam kurzů v této části. Vzpomeňte si, že SectionLevelTutorialListing.ascx uživatelské řízení tuto funkci poskytuje. Přidejte tento uživatelský ovládací prvek Default.aspx tak, že ho přetáhnete z Průzkumníka řešení do návrhového zobrazení stránky.

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

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

Nakonec přidejte stránky jako položky do Web.sitemap souboru. Konkrétně přidejte následující kód za stránkování a řazení pomocí DataList a Repeater <siteMapNode>:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</siteMapNode>

Po aktualizaci Web.sitemapsi chvíli prohlédněte web kurzů prostřednictvím prohlížeče. Nabídka vlevo teď obsahuje položky pro úpravy, vkládání a odstraňování kurzů.

Mapa webu teď obsahuje položku pro kurz vlastních tlačítek.

Obrázek 4: Mapa webu teď obsahuje položku pro kurz vlastních tlačítek

Krok 2: Přidání seznamu kategorií

Pro účely tohoto kurzu potřebujeme vytvořit Repeater, který obsahuje seznam všech kategorií spolu s odkazem Zobrazit produkty LinkButton, které po kliknutí zobrazí přidružené produkty kategorií v seznamu s odrážkami. Nejprve vytvoříme jednoduchý repeater, který zobrazí seznam kategorií v systému. Začněte otevřením CustomButtons.aspx stránky ve CustomButtonsDataListRepeater složce. Přetáhněte repeater z panelu nástrojů do Návrháře a nastavte jeho ID vlastnost na Categories. Dále vytvořte nový ovládací prvek zdroje dat z inteligentní značky Repeateru. Konkrétně vytvořte nový ovládací prvek ObjectDataSource s názvem CategoriesDataSource , který vybere jeho data z CategoriesBLL metody třídy s GetCategories() .

Konfigurujte ObjectDataSource pro použití metody GetCategories() třídy CategoriesBLL

Obrázek 5: Konfigurace ObjectDataSource tak, aby používala metodu CategoriesBLL class s GetCategories() (kliknutím zobrazíte obrázek s plnou velikostí)

Na rozdíl od ovládacího prvku DataList, pro který Visual Studio vytvoří výchozí ItemTemplate na základě zdroje dat, musí být šablony pro Repeater definovány ručně. Šablony Repeater s musí být navíc vytvořeny a upravovány deklarativním způsobem (to znamená, že není k dispozici žádná možnost Upravit šablony v inteligentní značce Repeater s).

Klikněte na kartu Zdroj v levém dolním rohu a přidejte ItemTemplate, který zobrazuje název kategorie v <h3> prvku a jeho popis v odstavcové značce; přidejte SeparatorTemplate, který zobrazuje vodorovnou čáru (<hr />) mezi každými kategoriemi. Přidejte také LinkButton s jeho Text vlastností nastavenou na Zobrazit produkty. Po dokončení těchto kroků by deklarativní kód stránky měl vypadat takto:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

Obrázek 6 znázorňuje stránku při prohlížení v prohlížeči. Zobrazí se název a popis každé kategorie. Tlačítko Zobrazit produkty po kliknutí vyvolá postback, ale ještě neprovede žádnou akci.

Zobrazí se název a popis každé kategorie spolu s odkazem Zobrazit produkty.

Obrázek 6: Zobrazí se název a popis každé kategorie spolu s odkazem Zobrazit produkty (kliknutím zobrazíte obrázek v plné velikosti).

Krok 3: Spuštění logiky Server-Side při kliknutí na tlačítko pro zobrazení produktů.

Kdykoli kliknete na tlačítko, LinkButton nebo ImageButton v šabloně v objektu DataList nebo Repeater, dojde k zpětnému odeslání a událost DataList nebo Repeater s ItemCommand se aktivuje. Kromě ItemCommand události může ovládací prvek DataList také vyvolat další, konkrétnější událost, pokud je vlastnost tlačítka CommandName nastavena na jeden z rezervovaných řetězců ( Delete, Edit, Cancel, Update nebo Select ), ale ItemCommand událost je vždy aktivována.

Když je tlačítko kliknuto v ovládacím prvku DataList nebo Repeater, často potřebujeme předat to, na které tlačítko bylo kliknuto (v případě, že v ovládacím prvku může existovat více tlačítek, například tlačítko Upravit a Odstranit) a možná i některé další informace (například hodnota primárního klíče položky, jejíž tlačítko bylo kliknuto). Button, LinkButton a ImageButton poskytují dvě vlastnosti, jejichž hodnoty jsou předány obslužné rutině ItemCommand události:

  • CommandName Řetězec obvykle používaný k identifikaci jednotlivých tlačítek v šabloně
  • CommandArgument často se používá k uložení hodnoty některých datových polí, jako je hodnota primárního klíče.

V tomto příkladu nastavte vlastnost ShowProducts u LinkButton s CommandName a svázat hodnotu primárního klíče aktuálního záznamu CategoryID k CommandArgument vlastnosti pomocí syntaxe vazby CategoryArgument='<%# Eval("CategoryID") %>' dat. Po zadání těchto dvou vlastností by deklarativní syntaxe LinkButton s měla vypadat takto:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Po kliknutí na tlačítko dojde k provedení postbacku a se aktivuje událost ItemCommand pro DataList nebo Repeater. Obslužná rutina události je předána tlačítku s hodnotami CommandName a CommandArgument.

Vytvořte obslužnou rutinu události pro událost Repeater s ItemCommand a poznamenejte si druhý parametr předaný do obslužné rutiny události (pojmenované e). Tento druhý parametr je typu RepeaterCommandEventArgs a má následující čtyři vlastnosti:

  • CommandArgumenthodnota vlastnosti kliknutí na tlačítko s CommandArgument
  • CommandNamehodnota vlastnosti tlačítka CommandName
  • CommandSource odkaz na ovládací prvek tlačítka, na který se kliklo
  • Item odkaz na objekt RepeaterItem, který obsahuje tlačítko, na které bylo kliknuto; každý záznam navázaný na opakovač se projevuje jako RepeaterItem

Vzhledem k tomu, že vybraná kategorie se CategoryID předává prostřednictvím CommandArgument vlastnosti, můžeme získat množinu produktů přidružených k vybrané kategorii v obslužné rutině ItemCommand události. Tyto produkty pak mohou být vázány na ovládací prvek BulletedList (který jsme ještě nepřidali) ItemTemplate. Vše, co zbývá, je přidat BulletedList, odkazovat na něj v ItemCommand obslužné rutině události a vytvořit vazbu k sadě produktů pro vybranou kategorii, kterou budeme řešit v kroku 4.

Poznámka:

Obslužné rutině události DataList je předán objekt typu ItemCommand, který nabízí stejné čtyři vlastnosti jako třída DataListCommandEventArgs.

Krok 4: Zobrazení produktů vybrané kategorie v seznamu s odrážkami

Vybrané produkty kategorií lze zobrazit v rámci Repeater s ItemTemplate pomocí libovolného počtu ovládacích prvků. Mohli bychom přidat další vnořený Repeater, DataList, DropDownList, GridView atd. Vzhledem k tomu, že chceme produkty zobrazit jako seznam s odrážkami, použijeme ovládací prvek typu BulletedList. Vraťte se na deklarativní kód stránky CustomButtons.aspx a přidejte ovládací prvek ItemTemplate BulletedList za Show Products LinkButton. Nastavte bulletedLists s ID na ProductsInCategory. BulletedList zobrazí hodnotu datového pole určeného prostřednictvím vlastnosti DataTextField. Protože tento ovládací prvek bude mít vázané informace o produktu, nastavte vlastnost DataTextField na ProductName.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

V obslužné rutině události ItemCommand odkažte pomocí e.Item.FindControl("ProductsInCategory") na tento ovládací prvek a připojte ho k sadě produktů přidružených k vybrané kategorii.

Protected Sub Categories_ItemCommand _
    (source As Object, e As RepeaterCommandEventArgs) _
    Handles Categories.ItemCommand
    If e.CommandName = "ShowProducts" Then
        ' Determine the CategoryID
        Dim categoryID As Integer = Convert.ToInt32(e.CommandArgument)
        ' Get the associated products from the ProudctsBLL and
        ' bind them to the BulletedList
        Dim products As BulletedList = _
            CType(e.Item.FindControl("ProductsInCategory"), BulletedList)
        Dim productsAPI As New ProductsBLL()
        products.DataSource = productsAPI.GetProductsByCategoryID(categoryID)
        products.DataBind()
    End If
End Sub

Před tím, než provedete jakoukoli akci v obslužné rutině události ItemCommand, je rozumné nejprve zkontrolovat hodnotu příchozí položky CommandName. Vzhledem k tomu, že obslužná ItemCommand rutina události se aktivuje při kliknutí na libovolné tlačítko, pokud je v šabloně více tlačítek, použijte CommandName hodnotu k rozlišení toho, jakou akci provést. Kontrola CommandName zde je sice nepodstatná, protože máme pouze jediné tlačítko, ale je dobré si vytvořit tento návyk. Dále se vlastnost CategoryID vybrané kategorie načte z CommandArgument. Ovládací prvek BulletedList v šabloně je následně odkazován a vázán na výsledky ProductsBLL metody třídy s GetProductsByCategoryID(categoryID) .

V předchozích kurzech, které používaly tlačítka v rámci DataListu, jako je například Přehled úpravy a mazání dat v DataListu, jsme určili hodnotu primárního klíče dané položky prostřednictvím kolekce DataKeys. I když tento přístup funguje dobře s DataList, Repeater nemá DataKeys vlastnost. Místo toho musíme použít alternativní přístup k zadání hodnoty primárního klíče, například prostřednictvím vlastnosti tlačítka CommandArgument nebo přiřazením hodnoty primárního klíče ke skrytému ovládacímu prvku Label Web v šabloně a čtením jeho hodnoty zpět v obslužné rutině ItemCommand události pomocí e.Item.FindControl("LabelID").

Po dokončení obslužné ItemCommand rutiny události si chvíli otestujte stránku v prohlížeči. Jak ukazuje obrázek 7, kliknutí na odkaz Zobrazit produkty způsobí zpětné odeslání a zobrazí produkty pro vybranou kategorii v bulletedListu. Kromě toho mějte na paměti, že tyto informace o produktu zůstávají, i když jsou kliknuty na jiné kategorie Zobrazit odkazy na produkty.

Poznámka:

Chcete-li upravit chování této sestavy tak, aby byly najednou uvedeny produkty pouze jedné kategorie, jednoduše nastavte vlastnost ovládacího prvku EnableViewState BulletedList na False.

Odrážkový seznam slouží k zobrazení produktů vybrané kategorie.

Obrázek 7: Seznam s odrážkami slouží k zobrazení produktů vybrané kategorie (kliknutím zobrazíte obrázek v plné velikosti).

Shrnutí

Ovládací prvky DataList a Repeater můžou obsahovat libovolný počet tlačítek, tlačítek LinkButtons nebo ImageButtons v rámci svých šablon. Taková tlačítka po kliknutí způsobí obnovu stránky a vyvolají ItemCommand událost. Pokud chcete přidružit vlastní akci na straně serveru ke kliknutí na tlačítko, vytvořte pro událost obslužnou rutinu ItemCommand. V této obslužné rutině události nejprve zkontrolujte příchozí CommandName hodnotu, abyste určili, na které tlačítko bylo kliknuto. Další informace lze volitelně zadat prostřednictvím vlastnosti tlačítka CommandArgument .

Šť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: Nauč se 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. Hlavním recenzentem tohoto návodu byl Dennis Patterson. Chcete si projít nadcházející články MSDN? Pokud ano, napište mi zprávu na mitchell@4GuysFromRolla.com.

Předchozí

  • Last updated on