Jelölőnégyzetek GridView-oszlopának hozzáadása (VB)

által Scott Mitchell

PDF letöltése

Ez az oktatóanyag bemutatja, hogyan adhat hozzá jelölőnégyzetek oszlopát egy GridView-vezérlőhöz, hogy a felhasználó intuitív módon válassza ki a GridView több sorát.

Bevezetés

Az előző oktatóanyagban megvizsgáltuk, hogyan adhat hozzá egy oszlopnyi választógombot a GridView-hoz egy adott rekord kiválasztása céljából. A választógombok sora megfelelő felhasználói felület, ha a felhasználó legfeljebb egy elemet választhat a táblázatból. Előfordulhat azonban, hogy lehetővé szeretnénk tenni, hogy a felhasználó tetszőleges számú elemet válasszon a rácsból. A webalapú e-mail-ügyfelek például általában jelölőnégyzetek oszlopával jelenítik meg az üzenetek listáját. A felhasználó tetszőleges számú üzenetet kijelölhet, majd végrehajthat néhány műveletet, például áthelyezheti az e-maileket egy másik mappába, vagy törölheti őket.

Ebben az oktatóanyagban megtanuljuk, hogyan adhat hozzá jelölőnégyzetek oszlopát, és megállapítjuk, mely jelölőnégyzetek lettek bejelölve az adatküldés után. Létrehozunk egy példát, amely szorosan utánozza a webes levelezési ügyfél felhasználói felületét. A példánkban egy lapozott GridView szerepel, amely felsorolja az Products adatbázistáblában lévő termékeket, és minden sorban jelölőnégyzet van (lásd az 1. ábrát). A Kijelölt termékek törlése gombra kattintva törli a kijelölt termékeket.

1. ábra: Minden terméksor tartalmaz egy jelölőnégyzetet (ide kattintva megtekintheti a teljes méretű képet)

1. lépés: Termékinformációkat listázó paged GridView hozzáadása

Mielőtt a jelölőnégyzetek oszlopának hozzáadásával foglalkoznánk, először koncentráljunk a termékek listázására egy olyan GridView-ban, amely támogatja a lapozást. Először nyissa meg a CheckBoxField.aspx oldalt a EnhancedGridView mappában, húzza a Tervezőre az Eszköztárból a GridView elemet, és állítsa be a ID értéket Products-re. Ezután válassza a GridView kötését egy új ObjectDataSource nevű ProductsDataSourceobjektumhoz. Konfigurálja az ObjectDataSource-t az ProductsBLL osztály használatára, és hívja meg a GetProducts() metódust az adatok visszaadásához. Mivel ez a GridView írásvédett lesz, állítsa az UPDATE, INSERT és DELETE fülek legördülő listáit (Nincs) értékre.

2. ábra: Új ObjectDataSource névvel ellátott ProductsDataSource objektum létrehozása (ide kattintva megtekintheti a teljes méretű képet)

3. ábra: Az ObjectDataSource konfigurálása adatok lekéréséhez a GetProducts() metódus használatával (kattintson ide a teljes méretű kép megtekintéséhez)

4. ábra: Állítsa a Drop-Down listákat az UPDATE, INSERT és DELETE tabulátorokban a (Nincs) értékre (ide kattintva megtekintheti a teljes méretű képet)

Az Adatforrás konfigurálása varázsló befejezése után a Visual Studio automatikusan létrehozza a BoundColumns és a CheckBoxColumn elemeket a termékhez kapcsolódó adatmezőkhöz. Ahogy az előző oktatóanyagban is tettük, távolítsa el az összeset, kivéve a ProductName, CategoryName és UnitPrice BoundFieldeket, és módosítsa a HeaderText tulajdonságokat a Termék, Kategória és Ár értékre. Konfigurálja a UnitPrice BoundFieldet úgy, hogy az értéke pénznemként legyen formázva. A GridView-t úgy is konfigurálhatja, hogy támogassa a lapozást az intelligens címke Lapozás engedélyezése jelölőnégyzetének bejelölésével.

A kiválasztott termékek törléséhez adja hozzá a felhasználói felületet is. Adjon hozzá egy Gomb webvezérlő elemet a GridView alá, állítva ID, DeleteSelectedProducts és Text tulajdonságát a Kijelölt termékek törlése értékre. Ahelyett, hogy ténylegesen törölné a termékeket az adatbázisból, ebben a példában csak egy üzenetet jelenítünk meg, amely közli a törölt termékeket. Ennek kezeléséhez vegyen fel egy címke webvezérlőt a gomb alá. Állítsa be az azonosítóját a következőre: DeleteResults, törölje Text tulajdonságát, és állítsa be Visible és EnableViewState tulajdonságát a False értékre.

A módosítások elvégzése után a GridView, az ObjectDataSource, a Gomb és a Címke deklaratív korrektúra a következőhöz hasonló:

<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>

Szánjon egy kis időt a lap böngészőben való megtekintésére (lásd az 5. ábrát). Ezen a ponton látnia kell az első tíz termék nevét, kategóriáját és árát.

5. ábra: Az első tíz termék neve, kategóriája és ára szerepel a listán (Kattintson ide a teljes méretű kép megtekintéséhez)

2. lépés: Jelölőnégyzetek oszlopának hozzáadása

Mivel ASP.NET 2.0-s verziójában található egy Jelölőnégyzetmező, úgy gondolhatnánk, hogy a jelölőnégyzetek oszlopának hozzáadására használható a GridView-hoz. Sajnos ez nem így van, mivel a CheckBoxField logikai adatmezővel való használatra lett tervezve. Vagyis a CheckBoxField használatához meg kell adnunk a mögöttes adatmezőt, amelynek az értékét a rendszer ellenőrzi annak megállapításához, hogy a renderelt jelölőnégyzet be van-e jelölve. A Jelölőnégyzetmező nem használható a bejelöletlen jelölőnégyzetek oszlopának belefoglalására.

Ehelyett hozzá kell adnunk egy TemplateFieldet, majd el kell helyeznünk egy Jelölőnégyzet webvezérlőt annak ItemTemplate. Adja hozzá a TemplateFieldet a Products GridView-hoz, és tegye az első (bal szélső) mezővé. A GridView intelligens címkéjén kattintson a Sablonok szerkesztése hivatkozásra, majd húzzon egy Jelölőnégyzet webvezérlőt az eszközkészletből ide: ItemTemplate. Állítsa be a Jelölőnégyzet ID tulajdonságát ProductSelector.

6. ábra: A Sablonmezőkhöz ProductSelector elnevezett ItemTemplate jelölőnégyzet webvezérlő hozzáadása (ide kattintva megtekintheti a teljes méretű képet)

A TemplateField és a CheckBox Web vezérlő hozzáadásával minden sor tartalmaz egy jelölőnégyzetet. A 7. ábrán ez a lap jelenik meg böngészőben a TemplateField és a CheckBox hozzáadása után.

7. ábra: Minden terméksor tartalmaz egy jelölőnégyzetet (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: Annak meghatározása, hogy milyen jelölőnégyzetek lettek bejelölve a postbacken

Ezen a ponton van egy jelölőnégyzetek oszlopa, de nincs mód annak meghatározására, hogy a visszavételkor mely jelölőnégyzetek lettek bejelölve. A Kijelölt termékek törlése gombra kattintva azonban tudnia kell, hogy milyen jelölőnégyzetek lettek bejelölve a termékek törléséhez.

A GridView tulajdonságRows hozzáférést biztosít a GridView adatsoraihoz. Végigvezethetjük ezeket a sorokat, programozott módon hozzáférhetünk a Jelölőnégyzet vezérlőelemhez, majd a tulajdonsággal Checked megállapíthatjuk, hogy a jelölőnégyzet be van-e jelölve.

Hozzon létre egy eseménykezelőt a DeleteSelectedProducts Gomb webvezérlő eseményéhez Click , és adja hozzá a következő kódot:

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

A Rows tulajdonság a GridView adatsorait alkotó példányok GridViewRow gyűjteményét adja vissza. Az For Each itt található hurok enumerálja ezt a gyűjteményt. Minden GridViewRow objektum esetében a sor jelölőnégyzete programozott módon érhető el a row.FindControl("controlID") használatával. Ha a jelölőnégyzet be van jelölve, a rendszer lekéri az adott sor megfelelő ProductID értékét a DataKeys gyűjteményből. Ebben a gyakorlatban egyszerűen megjelenítünk egy informatív üzenetet a DeleteResults Címkében, bár egy működő alkalmazásban inkább az osztály metódusát ProductsBLLDeleteProduct(productID) hívnánk meg.

Az eseménykezelő hozzáadásával most a Kijelölt termékek törlése gombra kattintva megjelenik a kijelölt termékek ProductID azonosítója.

8. ábra: Ha a Kijelölt termékek törlése gombra kattint, a kijelölt termékek ProductID listája megjelenik (ide kattintva megtekintheti a teljes méretű képet)

4. lépés: Az Összes kijelölése és az Összes kijelölés visszavonása gombok hozzáadása

Ha egy felhasználó törölni szeretné az aktuális oldalon lévő összes terméket, akkor a tíz jelölőnégyzet mindegyikét ellenőriznie kell. A folyamat felgyorsításához hozzáadhatunk egy "Összes kijelölése" gombot, amely kattintás esetén kijelöli a táblázat összes jelölőnégyzetét. Egy Mindent töröl gomb ugyanilyen hasznos lenne.

Adjon hozzá két gombos webvezérlőt a laphoz, és helyezze őket a GridView fölé. Állítsa be az elsőt s ID értékre CheckAll , a tulajdonságát Text pedig az Összes ellenőrzése beállításra; a másodikat állítsa be az s ID értékre UncheckAll , a tulajdonságát pedig törölje az összes jelölését Text .

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

Ezután hozzon létre egy metódust a kód mögötti osztályban ToggleCheckState(checkState) , amely meghíváskor számba vegye a Products GridView gyűjteményét Rows , és minden CheckBox-tulajdonságot Checked az átadott checkState paraméter értékére állít be.

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

Ezután hozzon létre Click eseménykezelőket a CheckAll és UncheckAll gombokhoz. Az CheckAll eseménykezelőben egyszerűen hívja meg ToggleCheckState(True); a UncheckAll-ben hívja meg a ToggleCheckState(False) parancsot.

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

Ezzel a kóddal a "Minden kijelölése" gombra kattintás eseményt indít el, és bejelöli a GridView összes jelölőnégyzetét. Hasonlóképpen, ha az Összes jelölőnégyzet jelölésének törlése gombra kattint, az összes jelölőnégyzetet törli. A 9. ábrán az Összes ellenőrzése gomb ellenőrzése után látható a képernyő.

9. ábra: Az Összes ellenőrzése gombra kattintva kijelöli az összes jelölőnégyzetet (ide kattintva megtekintheti a teljes méretű képet)

Megjegyzés:

A jelölőnégyzetek oszlopának megjelenítésekor az összes jelölőnégyzet kijelölésére vagy törlésére az egyik módszer a fejlécsorban található jelölőnégyzet használata. Ezenkívül a "Mindet kijelöl"/"Kijelölések megszüntetése" funkció jelenlegi megvalósítása postback-et igényel. A jelölőnégyzetek bejelölhetők vagy törölhetők, azonban teljes egészében ügyféloldali szkripttel, így jobb felhasználói élményt biztosíthatnak. Ha szeretné részletesen megvizsgálni a fejléc jelölőnégyzet használatát az Összes bejelölésére és kijelölésének megszüntetésére, valamint megvitatni az ügyféloldali technikák alkalmazását, tekintse meg az Összes jelölőnégyzet bejelölése a GridView-ban Client-Side szkript és az Összes jelölőnégyzet bejelölése jelölőnégyzettel című témakört.

Összefoglalás

Azokban az esetekben, amikor lehetővé kell tenni, hogy a felhasználók tetszőleges számú sort válasszanak a GridView-ból a folytatás előtt, a jelölőnégyzetek oszlopának hozzáadása az egyik lehetőség. Ahogy ebben az oktatóanyagban láttuk, a GridView-ban lévő jelölőnégyzetek oszlopának hozzáadásához szükség van egy TemplateField és egy CheckBox Web vezérlőelem hozzáadására. Webes vezérlő használatával (szemben a markup közvetlen beszúrásával a sablonba, ahogy az előző oktatóanyagban tettük), az ASP.NET automatikusan megjegyzi, hogy mely jelölőnégyzetek voltak bejelölve és melyek nem az újraküldés során. Programozott módon is hozzáférhetünk a jelölőnégyzetekhez a kódban annak megállapításához, hogy egy adott jelölőnégyzet be van-e jelölve, vagy hogy módosíthassuk a bejelölt állapotot.

Ez az oktatóanyag és az utolsó azt vizsgálta, hogyan adhat hozzá egy sorválasztó oszlopot a GridView-hoz. A következő oktatóanyagban azt vizsgáljuk meg, hogyan adhatunk hozzá beszúrási képességeket a GridView-hoz egy kis munkával.

Boldog programozást!

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams Teach Yourself ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Előzőkövetkező