Přidání sloupce zaškrtávacích políček do ovládacího prvku GridView (VB)

V tomto kurzu se dozvíte, jak přidat sloupec zaškrtávacích políček do ovládacího prvku GridView, který uživateli poskytne intuitivní způsob výběru více řádků objektu GridView.

Úvod

V předchozím kurzu jsme se zaměřili na to, jak přidat sloupec radio tlačítek do GridView pro účely výběru konkrétního záznamu. Sloupec přepínačů je vhodné uživatelské rozhraní, pokud je uživatel omezen na volbu maximálně jedné položky z mřížky. Někdy ale můžeme chtít uživateli povolit výběr libovolného počtu položek z mřížky. Webové e-mailové klienty, například obvykle zobrazují seznam zpráv se sloupcem zaškrtávacích políček. Uživatel může vybrat libovolný počet zpráv a pak provést nějakou akci, například přesunout e-maily do jiné složky nebo je odstranit.

V tomto návodu se dozvíme, jak přidat sloupec zaškrtávacích políček a jak určit, která zaškrtávací políčka byla zaškrtnutá během zpětného odeslání dat. Konkrétně vytvoříme příklad, který úzce napodobuje uživatelské rozhraní webového e-mailového klienta. Náš příklad bude obsahovat stránkovaný GridView se seznamem produktů v Products databázové tabulce se zaškrtávacím políčkem v každém řádku (viz obrázek 1). Tlačítko Odstranit vybrané produkty po kliknutí odstraní vybrané produkty.

Obrázek 1: Každý řádek produktu obsahuje zaškrtávací políčko (kliknutím zobrazíte obrázek s plnou velikostí)

Krok 1: Přidání paged GridView se seznamem informací o produktu

Než se budeme starat o přidání sloupce zaškrtávacích políček, zaměřme se nejprve na výpis produktů v Objektu GridView, který podporuje stránkování. Začněte otevřením CheckBoxField.aspx stránky ve EnhancedGridView složce a přetažením objektu GridView z panelu nástrojů do Návrháře a nastavením jeho ID na Products. Dále zvolte vytvořit vazbu GridView na nový ObjectDataSource s názvem ProductsDataSource. Nakonfigurujte ObjectDataSource tak, aby používal ProductsBLL třídu, která volá metodu GetProducts() pro vrácení dat. Vzhledem k tomu, že tento Objekt GridView bude jen pro čtení, nastavte rozevírací seznamy na kartách UPDATE, INSERT a DELETE na (Žádné).

Obrázek 2: Vytvoření nového objektu ObjectDataSource s názvem ProductsDataSource (kliknutím zobrazíte obrázek s plnou velikostí)

Obrázek 3: Konfigurace ObjectDataSource pro načtení dat pomocí GetProducts() metody (kliknutím zobrazíte obrázek plné velikosti)

Obrázek 4: Nastavení Drop-Down seznamů na kartách UPDATE, INSERT a DELETE na (Žádné) (Kliknutím zobrazíte obrázek v plné velikosti)

Po dokončení průvodce konfigurací zdroje dat visual Studio automaticky vytvoří BoundColumns a CheckBoxColumn pro datová pole související s produktem. Stejně jako jsme to udělali v předchozím kurzu, odeberte všechny ProductName, CategoryName a UnitPrice BoundFields a změňte HeaderText vlastnosti na Produkt, Kategorie a Cena. UnitPrice Nakonfigurujte BoundField tak, aby jeho hodnota byla formátována jako měna. Také nakonfigurujte GridView, aby obsahoval podporu pro stránkování, zaškrtnutím políčka Povolit stránkování z inteligentního popisku.

Pojďme také přidat uživatelské rozhraní pro odstranění vybraných produktů. Přidejte ovládací prvek Tlačítko Web pod GridView, nastavte jeho ID na DeleteSelectedProducts a jeho vlastnost Text na Odstranit vybrané produkty. Místo skutečného odstranění produktů z databáze v tomto příkladu zobrazíme jenom zprávu s informacemi o produktech, které by byly odstraněny. Chcete-li to přizpůsobit, přidejte ovládací prvek Label Web pod tlačítko. Nastavte jeho ID na DeleteResults, vymažte jeho Text vlastnost a nastavte jeho Visible a EnableViewState vlastnosti na False.

Po provedení těchto změn by deklarativní značení prvků GridView, ObjectDataSource, Button a Label mělo vypadat přibližně takto:

<p>
    <asp:GridView ID="Products" runat="server" AutoGenerateColumns="False" 
        DataKeyNames="ProductID" DataSourceID="ProductsDataSource" 
        AllowPaging="True" EnableViewState="False">
        <Columns>
            <asp:BoundField DataField="ProductName" HeaderText="Product" 
                SortExpression="ProductName" />
            <asp:BoundField DataField="CategoryName" HeaderText="Category" 
                ReadOnly="True" SortExpression="CategoryName" />
            <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}" 
                HeaderText="Price" HtmlEncode="False" 
                SortExpression="UnitPrice" />
        </Columns>
    </asp:GridView>
    <asp:ObjectDataSource ID="ProductsDataSource" runat="server" 
        OldValuesParameterFormatString="original_{0}" 
        SelectMethod="GetProducts" TypeName="ProductsBLL">            
    </asp:ObjectDataSource>
</p>
<p>
    <asp:Button ID="DeleteSelectedProducts" runat="server" 
        Text="Delete Selected Products" />
</p>
<p>
    <asp:Label ID="DeleteResults" runat="server" EnableViewState="False" 
        Visible="False"></asp:Label>
</p>

Chvíli se podívejte na stránku v prohlížeči (viz obrázek 5). V tomto okamžiku byste měli vidět název, kategorii a cenu prvních deseti produktů.

Obrázek 5: Zobrazí se název, kategorie a cena prvních deseti produktů (kliknutím zobrazíte obrázek s plnou velikostí).

Krok 2: Přidání sloupce zaškrtávacích políček

Vzhledem k tomu, ASP.NET 2.0 obsahuje CheckBoxField, jeden by si mohl myslet, že se dá použít k přidání sloupce zaškrtávacích políček do GridView. To bohužel neplatí, protože CheckBoxField je navržený tak, aby fungoval s logickým datovým polem. To znamená, že aby bylo možné použít CheckBoxField, musíme zadat podkladové datové pole, jehož hodnota je zkontrolována k určení, zda je vykreslené zaškrtávací políčko zaškrtnuté. CheckBoxField nemůžeme použít k zahrnutí sloupce nezaškrtnutých zaškrtávacích políček.

Místo toho musíme přidat TemplateField a webový ovládací prvek CheckBox do jeho ItemTemplate elementu. Pokračujte a přidejte pole TemplateField do Products Objektu GridView a nastavte ho jako první (úplně vlevo). Z chytré značky GridView klikněte na odkaz Upravit šablony a přetáhněte ovládací prvek CheckBox Web z panelu nástrojů do ItemTemplate. Nastavte vlastnost ID tohoto CheckBox na ProductSelector.

Obrázek 6: Přidání webového ovládacího prvku CheckBox s pojmenovaného ProductSelector do templateField s ItemTemplate (kliknutím zobrazíte obrázek s plnou velikostí)

Při přidání ovládacího prvku TemplateField a CheckBox Web teď každý řádek obsahuje zaškrtávací políčko. Obrázek 7 znázorňuje tuto stránku po přidání pole TemplateField a CheckBox po zobrazení v prohlížeči.

Obrázek 7: Každý řádek produktu teď obsahuje zaškrtávací políčko (kliknutím zobrazíte obrázek s plnou velikostí)

Krok 3: Určení zaškrtávacích políček, která byla v postbacku zaškrtnutá

V tomto okamžiku máme sloupec zaškrtávacích políček, ale neexistuje způsob, jak určit, jaká zaškrtávací políčka byla zaškrtnutá v postbacku. Po kliknutí na tlačítko Odstranit vybrané produkty ale potřebujeme vědět, jaká zaškrtávací políčka byla zaškrtnutá, aby bylo možné tyto produkty odstranit.

Vlastnost GridView poskytuje přístup k datovým řádkům v GridView. Tyto řádky můžeme iterovat, programově přistupovat k ovládacímu prvku CheckBox a pak zkontrolovat jeho Checked vlastnost, abychom zjistili, zda je zaškrtávací políčko zaškrtnuté.

Vytvořte obslužnou rutinu události webového ovládacího prvku DeleteSelectedProducts Button pro událost Click a přidejte následující kód:

Protected Sub DeleteSelectedProducts_Click(sender As Object, e As EventArgs) _
    Handles DeleteSelectedProducts.Click
    
    Dim atLeastOneRowDeleted As Boolean = False
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing AndAlso cb.Checked Then
            ' Delete row! (Well, not really...)
            atLeastOneRowDeleted = True
            ' First, get the ProductID for the selected row
            Dim productID As Integer = _
                Convert.ToInt32(Products.DataKeys(row.RowIndex).Value)
            ' "Delete" the row
            DeleteResults.Text &= String.Format( _
                "This would have deleted ProductID {0}<br />", productID)
            '... To actually delete the product, use ...
            ' Dim productAPI As New ProductsBLL
            ' productAPI.DeleteProduct(productID)
            '............................................
        End If
    Next
    ' Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted
End Sub

Tato Rows vlastnost vrátí kolekci GridViewRow instancí, které tvoří datové řádky GridView. Smyčka For Each zde vytvoří výčet této kolekce. Pro každý GridViewRow objekt je k řádku s CheckBoxem programově přistupováno pomocí row.FindControl("controlID"). Pokud je zaškrtávací políčko zaškrtnuté, z kolekce ProductID se načte odpovídající hodnota DataKeys pro řádek. V tomto cvičení jednoduše zobrazíme informativní zprávu v DeleteResults popisku, ačkoli v pracovní aplikaci bychom místo toho volali metodu ProductsBLL třídy DeleteProduct(productID).

Po přidání této obslužné rutiny události se po kliknutí na tlačítko Odstranit vybrané produkty zobrazí ProductID položky vybraných produktů.

Obrázek 8: Po kliknutí na tlačítko Odstranit vybrané produkty jsou uvedeny vybrané produkty ProductID (kliknutím zobrazíte obrázek plné velikosti)

Krok 4: Přidání tlačítek Vybrat vše a Zrušit výběr všeho

Pokud chce uživatel odstranit všechny produkty na aktuální stránce, musí zaškrtnout každou z deseti políček. Tento proces můžeme urychlit přidáním tlačítka Zkontrolovat vše, které po kliknutí zaškrtne všechna políčka v mřížce. Tlačítko Zrušit zaškrtnutí políčka Vše by bylo stejně užitečné.

Přidejte na stránku dva webové ovládací prvky button a umístěte je nad GridView. Nastavte první z nich ID na CheckAll a jeho Text vlastnost na Check All; nastavte druhou z nich ID na UncheckAll a její Text vlastnost na Uncheck All.

<asp:Button ID="CheckAll" runat="server" Text="Check All" />
 
<asp:Button ID="UncheckAll" runat="server" Text="Uncheck All" />

Dále vytvořte metodu ve třídě kódu za názvem ToggleCheckState(checkState) , která při vyvolání vytvoří výčet Products GridView s Rows kolekce a nastaví každou CheckBox s Checked vlastnost na hodnotu předaného parametru checkState .

Private Sub ToggleCheckState(ByVal checkState As Boolean)
    ' Iterate through the Products.Rows property
    For Each row As GridViewRow In Products.Rows
        ' Access the CheckBox
        Dim cb As CheckBox = row.FindControl("ProductSelector")
        If cb IsNot Nothing Then
            cb.Checked = checkState
        End If
    Next
End Sub

Dále vytvořte Click obslužné rutiny událostí pro tlačítka CheckAll a UncheckAll. V CheckAll obslužné rutině události jednoduše volejte ToggleCheckState(True); v UncheckAll volejte ToggleCheckState(False).

Protected Sub CheckAll_Click(sender As Object, e As EventArgs) _
    Handles CheckAll.Click
    
    ToggleCheckState(True)
End Sub
Protected Sub UncheckAll_Click(sender As Object, e As EventArgs) _
    Handles UncheckAll.Click
    
    ToggleCheckState(False)
End Sub

Když s tímto kódem kliknete na tlačítko Zkontrolovat vše, způsobí postback a zkontroluje všechna zaškrtávací políčka v GridView. Podobně, kliknutím na Zrušit výběr všech odstraníte výběr všech zaškrtávacích políček. Obrázek 9 zobrazuje obrazovku po zaškrtnutí tlačítka Zkontrolovat vše.

Obrázek 9: Kliknutí na tlačítko Zaškrtnout vše zaškrtne všechna zaškrtávací políčka (Kliknutím zobrazíte obrázek plné velikosti)

Poznámka:

Při zobrazení sloupce zaškrtávacích políček je jedním z přístupů k výběru nebo zrušení výběru všech zaškrtávacích políček zaškrtávací políčko v řádku záhlaví. Kromě toho aktuální implementace zaškrtnutí vše / odškrtnutí vše vyžaduje postback. Zaškrtávací políčka je možné zaškrtnout nebo zrušit zaškrtnutí, ale zcela prostřednictvím skriptu na straně klienta a poskytnout tak uživatelské prostředí snappieru. Pokud chcete podrobně prozkoumat použití zaškrtávacího políčka v řádku záhlaví pro funkce Zaškrtnout vše a Zrušit zaškrtnutí všeho, spolu s diskuzí o používání technik na straně klienta, podívejte se na Check All CheckBoxes v GridView pomocí Client-Side Script a Check All CheckBox.

Shrnutí

V případech, kdy potřebujete, aby uživatelé před pokračováním zvolili libovolný počet řádků z objektu GridView, je přidání sloupce zaškrtávacích políček jednou z možností. Jak jsme viděli v tomto kurzu, přidání sloupce s zaškrtávacími políčky do GridView vyžaduje přidání TemplateField s webovou ovládací kontrolou typu CheckBox. Použitím webového ovládacího prvku (oproti vložení kódu přímo do šablony, jak jsme to dělali v předchozím tutoriálu) si ASP.NET automaticky pamatuje, která zaškrtávací políčka byla zaškrtnuta a která nebyla během postbacku. K zaškrtávacím polím v kódu můžeme také přistupovat prostřednictvím kódu programově, abychom zjistili, jestli je dané zaškrtávací políčko zaškrtnuté nebo jestli chcete změnit stav zaškrtnutí.

Tento výukový program a ten předchozí se zaměřili na přidání sloupce selektoru řádků do ovládacího prvku GridView. V dalším kurzu se podíváme, jak s trochou práce můžeme do GridView přidat možnosti vkládání.

Šť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 .

předchozí Další

Váš názor

Byla tato stránka užitečná?

Last updated on 2025-05-01