Hinzufügen einer GridView-Spalte mit Kontrollkästchen (VB)

von Scott Mitchell

PDF herunterladen

In diesem Tutorial wird untersucht, wie Sie einem GridView-Steuerelement eine Spalte mit Kontrollkästchen hinzufügen, um dem Benutzer eine intuitive Möglichkeit zu bieten, mehrere Zeilen der GridView auszuwählen.

Einführung

Im vorherigen Tutorial haben wir untersucht, wie Sie der GridView eine Spalte mit Optionsfeldern hinzufügen, um einen bestimmten Datensatz auszuwählen. Eine Spalte von Optionsfeldern ist eine geeignete Benutzeroberfläche, wenn der Benutzer auf die Auswahl von höchstens einem Element aus dem Raster beschränkt ist. Manchmal möchten wir es dem Benutzer jedoch ermöglichen, eine beliebige Anzahl von Elementen aus dem Raster zu wählen. Webbasierte E-Mail-Clients zeigen beispielsweise in der Regel die Liste der Nachrichten mit einer Spalte mit Kontrollkästchen an. Der Benutzer kann eine beliebige Anzahl von Nachrichten auswählen und dann eine Aktion ausführen, z. B. die E-Mails in einen anderen Ordner verschieben oder löschen.

In diesem Tutorial erfahren Sie, wie Sie eine Spalte mit Kontrollkästchen hinzufügen und bestimmen, welche Kontrollkästchen beim Postback aktiviert wurden. Insbesondere erstellen wir ein Beispiel, das die benutzeroberfläche des webbasierten E-Mail-Clients genau nachahmt. Unser Beispiel enthält eine ausgelagerte GridView, die die Produkte in der Products Datenbanktabelle mit einem Kontrollkästchen in jeder Zeile auflistet (siehe Abbildung 1). Wenn Sie auf die Schaltfläche Ausgewählte Produkte löschen klicken, werden diese ausgewählten Produkte gelöscht.

Abbildung 1: Jede Produktzeile enthält ein Kontrollkästchen (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Schritt 1: Hinzufügen einer ausgelagerten GridView, die Produktinformationen Listen

Bevor wir uns um das Hinzufügen einer Spalte mit Kontrollkästchen kümmern, konzentrieren wir uns zunächst auf die Auflistung der Produkte in einer GridView, die Paging unterstützt. Öffnen Sie zunächst die CheckBoxField.aspx Seite im EnhancedGridView Ordner, ziehen Sie eine GridView aus der Toolbox auf die Designer, und legen Sie sie ID auf festProducts. Wählen Sie als Nächstes aus, um die GridView an eine neue ObjectDataSource mit dem Namen ProductsDataSourcezu binden. Konfigurieren Sie objectDataSource für die Verwendung der ProductsBLL -Klasse, und rufen Sie die GetProducts() -Methode auf, um die Daten zurückzugeben. Da diese GridView schreibgeschützt ist, legen Sie die Dropdownlisten in den Registerkarten UPDATE, INSERT und DELETE auf (Keine) fest.

Abbildung 2: Erstellen eines neuen ObjectDataSource-Namens ProductsDataSource (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Abbildung 3: Konfigurieren der ObjectDataSource zum Abrufen von Daten mithilfe der GetProducts() -Methode (Klicken Sie, um das vollständige Bild anzuzeigen)

Abbildung 4: Legen Sie die Drop-Down Listen in den Registerkarten UPDATE, INSERT und DELETE auf (Keine) fest (Klicken Sie, um das bild in voller Größe anzuzeigen)

Nach Abschluss des Assistenten Zum Konfigurieren von Datenquellen erstellt Visual Studio automatisch BoundColumns und eine CheckBoxColumn für die produktbezogenen Datenfelder. Entfernen Sie wie im vorherigen Tutorial alle außer , ProductNameCategoryNameund UnitPrice BoundFields, und ändern Sie die HeaderText Eigenschaften in Product, Category und Price. Konfigurieren Sie das UnitPrice BoundField so, dass sein Wert als Währung formatiert ist. Konfigurieren Sie auch die GridView so, dass das Paging unterstützt wird, indem Sie das Kontrollkästchen Paging aktivieren über das Smarttag aktivieren.

Fügen Sie auch die Benutzeroberfläche zum Löschen der ausgewählten Produkte hinzu. Fügen Sie ein Button-Websteuerelement unter der GridView hinzu, und legen Sie es ID auf DeleteSelectedProducts und seine Text Eigenschaft auf Ausgewählte Produkte löschen fest. Anstatt Produkte tatsächlich aus der Datenbank zu löschen, wird in diesem Beispiel nur eine Meldung angezeigt, in der die Produkte angegeben werden, die gelöscht worden wären. Fügen Sie dazu ein Label Web-Steuerelement unter der Schaltfläche hinzu. Legen Sie die ID auf DeleteResultsfest, löschen Sie die Text -Eigenschaft, und legen Sie ihre Visible Eigenschaften und EnableViewState auf fest False.

Nachdem Sie diese Änderungen vorgenommen haben, sollte das deklarative Markup gridView, ObjectDataSource, Button und Label wie folgt aussehen:

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

Nehmen Sie sich einen Moment Zeit, um die Seite in einem Browser anzuzeigen (siehe Abbildung 5). An diesem Punkt sollten Sie den Namen, die Kategorie und den Preis der ersten zehn Produkte sehen.

Abbildung 5: Name, Kategorie und Preis der ersten zehn Produkte sind aufgeführt (Klicken Sie hier, um das bild in voller Größe anzuzeigen)

Schritt 2: Hinzufügen einer Spalte mit Kontrollkästchen

Da ASP.NET 2.0 ein CheckBoxField-Element enthält, könnte man meinen, es könnte verwendet werden, um eine Spalte mit Kontrollkästchen zu einer GridView hinzuzufügen. Leider ist dies nicht der Fall, da das CheckBoxField für die Arbeit mit einem booleschen Datenfeld konzipiert ist. Das heißt, um das CheckBoxField verwenden zu können, müssen wir das zugrunde liegende Datenfeld angeben, dessen Wert konsultiert wird, um zu bestimmen, ob das gerenderte Kontrollkästchen aktiviert ist. Wir können checkBoxField nicht verwenden, um nur eine Spalte mit nicht aktivierten Kontrollkästchen einzuschließen.

Stattdessen müssen wir ein TemplateField-Steuerelement hinzufügen und seinem ItemTemplateein CheckBox-Websteuerelement hinzufügen. Fügen Sie der GridView ein TemplateField-Element Products hinzu, und machen Sie es zum ersten Feld (ganz links). Klicken Sie im Smarttag des GridView-Smarttags auf den Link Vorlagen bearbeiten, und ziehen Sie dann ein CheckBox-Websteuerelement aus der Toolbox in die ItemTemplate. Legen Sie diese CheckBox-Eigenschaft ID auf fest ProductSelector.

Abbildung 6: Hinzufügen eines CheckBox-Websteuerelements namens ProductSelector zu den TemplateField s (Klicken Sie hier, um ein vollständigesItemTemplate Bild anzuzeigen)

Nachdem das Websteuerelement TemplateField und CheckBox hinzugefügt wurde, enthält jede Zeile jetzt ein Kontrollkästchen. Abbildung 7 zeigt diese Seite, wenn sie über einen Browser angezeigt wird, nachdem TemplateField und CheckBox hinzugefügt wurden.

Abbildung 7: Jede Produktzeile enthält jetzt ein Kontrollkästchen (Zum Anzeigen des Bilds in voller Größe klicken)

Schritt 3: Bestimmen, welche Kontrollkästchen beim Postback aktiviert wurden

An diesem Punkt haben wir eine Spalte mit Kontrollkästchen, aber keine Möglichkeit zu bestimmen, welche Kontrollkästchen beim Postback aktiviert wurden. Wenn auf die Schaltfläche Ausgewählte Produkte löschen geklickt wird, müssen wir jedoch wissen, welche Kontrollkästchen aktiviert wurden, um diese Produkte zu löschen.

Die GridView-Eigenschaft Rows ermöglicht den Zugriff auf die Datenzeilen in GridView. Wir können diese Zeilen durchlaufen, programmgesteuert auf das CheckBox-Steuerelement zugreifen und dann dessen Eigenschaft konsultieren Checked , um festzustellen, ob das CheckBox-Steuerelement ausgewählt wurde.

Erstellen Sie einen Ereignishandler für das Ereignis des DeleteSelectedProducts Button-Websteuerelements, Click und fügen Sie den folgenden Code hinzu:

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

Die Rows -Eigenschaft gibt eine Auflistung von GridViewRow Instanzen zurück, die die GridView-Datenzeilen erstellen. Die For Each Schleife hier listet diese Auflistung auf. Für jedes GridViewRow Objekt wird programmgesteuert auf die CheckBox-Zeile zugegriffen row.FindControl("controlID"). Wenn checkBox aktiviert ist, wird der entsprechende ProductID Wert der Zeile aus der DataKeys Auflistung abgerufen. In dieser Übung zeigen wir einfach eine informative Meldung in der DeleteResults Bezeichnung an, obwohl wir in einer funktionierenden Anwendung stattdessen die Methode der ProductsBLL Klasse s DeleteProduct(productID) aufrufen.

Wenn Sie diesen Ereignishandler hinzugefügt haben, werden beim Klicken auf die Schaltfläche Ausgewählte Produkte löschen nun die ProductID s der ausgewählten Produkte angezeigt.

Abbildung 8: Wenn auf die Schaltfläche Ausgewählte Produkte löschen geklickt wird, werden die ausgewählten Produkte ProductID aufgelistet (Klicken Sie hier, um das bild in voller Größe anzuzeigen).

Schritt 4: Hinzufügen von "Alle überprüfen" und "Alle Schaltflächen deaktivieren"

Wenn ein Benutzer alle Produkte auf der aktuellen Seite löschen möchte, muss er jedes der zehn Kontrollkästchen aktivieren. Wir können diesen Prozess beschleunigen, indem wir eine Schaltfläche Alle überprüfen hinzufügen, die beim Klicken alle Kontrollkästchen im Raster aktiviert. Eine Schaltfläche "Alle deaktivieren" wäre ebenso hilfreich.

Fügen Sie der Seite zwei Schaltflächen-Websteuerelemente hinzu, und platzieren Sie sie über der GridView. Legen Sie den ersten s ID auf CheckAll und seine Text Eigenschaft auf Alle überprüfen fest. Legen Sie den zweiten s ID auf UncheckAll und seine Text Eigenschaft auf Alle deaktivieren fest.

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

Erstellen Sie als Nächstes eine Methode in der CodeBehind-Klasse namens ToggleCheckState(checkState) , die beim Aufrufen die Products GridView-Auflistung Rows aufzählt und jede CheckBox s-Eigenschaft Checked auf den Wert des übergebenen checkState-Parameters festlegt.

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

Erstellen Sie Click als Nächstes Ereignishandler für die CheckAll Schaltflächen und UncheckAll . CheckAll Rufen Sie ToggleCheckState(True)in s-Ereignishandler einfach auf ; in auf.ToggleCheckState(False)UncheckAll

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

Bei diesem Code führt das Klicken auf die Schaltfläche Alle überprüfen zu einem Postback und überprüft alle Kontrollkästchen in der GridView. Wenn Sie auf Das Kontrollkästchen Alle klicken, werden alle Kontrollkästchen deaktiviert. Abbildung 9 zeigt den Bildschirm, nachdem die Schaltfläche Alle überprüfen aktiviert wurde.

Abbildung 9: Klicken auf die Schaltfläche "Alle überprüfen" wählt alle Kontrollkästchen aus (Zum Anzeigen des Bilds in voller Größe klicken)

Hinweis

Wenn Sie eine Spalte mit Kontrollkästchen anzeigen, können Sie alle Kontrollkästchen auswählen oder deaktivieren, indem Sie ein Kontrollkästchen in der Kopfzeile verwenden. Darüber hinaus erfordert die aktuelle Implementierung Alle überprüfen/Deaktivieren von Alle ein Postback. Die Kontrollkästchen können jedoch vollständig über clientseitige Skripts aktiviert oder deaktiviert werden, wodurch eine schnellere Benutzererfahrung ermöglicht wird. Um die Verwendung eines Headerzeilenkontrollkästchens für "Alle überprüfen" und "Alle im Detail deaktivieren" sowie eine Diskussion zur Verwendung clientseitiger Techniken zu erkunden, lesen Sie Check All CheckBoxes in a GridView Using Client-Side Script and a Check All CheckBox.

Zusammenfassung

In Fällen, in denen Benutzer eine beliebige Anzahl von Zeilen aus einer GridView auswählen müssen, bevor Sie fortfahren, ist das Hinzufügen einer Spalte mit Kontrollkästchen eine Option. Wie wir in diesem Tutorial gesehen haben, beinhaltet das Einschließen einer Spalte mit Kontrollkästchen in der GridView das Hinzufügen eines TemplateField-Steuerelements mit einem CheckBox-Websteuerelement. Durch die Verwendung eines Websteuerelements (im Gegensatz zum direkten Einfügen von Markup in die Vorlage, wie im vorherigen Tutorial) ASP.NET sich automatisch daran erinnern, welche CheckBoxes postbackübergreifend überprüft wurden. Wir können auch programmgesteuert auf die CheckBoxes im Code zugreifen, um zu bestimmen, ob ein bestimmtes CheckBox-Element aktiviert ist, oder um den überprüften Zustand zu ändern.

In diesem Tutorial und im letzten Tutorial wurde das Hinzufügen einer Zeilenauswahlspalte zur GridView untersucht. In unserem nächsten Tutorial untersuchen wir, wie wir der GridView mit ein wenig Arbeit Einfügefunktionen hinzufügen können.

Viel Spaß beim Programmieren!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET-Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft-Webtechnologien. Scott arbeitet als unabhängiger Berater, Trainer und Autor. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Er kann unter mitchell@4GuysFromRolla.comoder über seinen Blog erreicht werden, der unter http://ScottOnWriting.NETzu finden ist.

ZurückWeiter