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

2025-04-30

In diesem Lernprogramm wird erläutert, wie Sie einem GridView-Steuerelement eine Spalte mit Kontrollkästchen hinzufügen, um dem Benutzer eine intuitive Möglichkeit zum Auswählen mehrerer Zeilen der GridView zu bieten.

Einleitung

Im vorherigen Tutorial haben wir untersucht, wie man der GridView eine Spalte mit Optionsfeldern hinzufügt, um einen bestimmten Datensatz auszuwählen. Eine Spalte mit 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 z. B. 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. das Verschieben der E-Mails in einen anderen Ordner oder das Löschen dieser Nachrichten.

In diesem Lernprogramm 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 webbasierte Benutzeroberfläche des E-Mail-Clients genau nachahmt. Unser Beispiel enthält ein seitenseitiges GridView-Element, das 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" geklickt haben, werden diese Produkte gelöscht.

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

Schritt 1: Hinzufügen einer paged GridView, die Produktinformationen auflistet

Bevor wir uns gedanken über das Hinzufügen einer Spalte mit Kontrollkästchen machen, konzentrieren wir uns zuerst 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 ein GridView aus der Toolbox auf den Designer und stellen Sie ID auf Products ein. Als Nächstes binden Sie die GridView an die neue ObjectDataSource mit dem Namen ProductsDataSource. Konfigurieren Sie objectDataSource so, dass sie die ProductsBLL Klasse verwendet, 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 einer neuen ObjectDataSource namens ProductsDataSource (Klicken Sie, um das Bild in voller Größe anzuzeigen)

Abbildung 3: Konfigurieren der ObjectDataSource zum Abrufen von Daten mithilfe der GetProducts() Methode (Klicken, um das Bild in voller Größe anzuzeigen)

Abbildung 4: Festlegen der Drop-Down Listen in den Registerkarten UPDATE, INSERT und DELETE auf (Keine) (Klicken, um das Bild in voller Größe anzuzeigen)

Nach Abschluss des Assistenten "Datenquelle konfigurieren" erstellt Visual Studio automatisch gebundene Spalten und eine Checkboxspalte für die produktbezogenen Datenfelder. Wie im vorherigen Lernprogramm, entfernen Sie alle außer den ProductName, CategoryName und UnitPrice BoundFields und ändern Sie die HeaderText-Eigenschaften zu "Produkt", "Kategorie" und "Preis". Konfigurieren Sie das UnitPrice BoundField so, dass der Wert als Währung formatiert ist. Konfigurieren Sie auch die GridView so, dass paging unterstützt wird, indem Sie das Kontrollkästchen "Paging aktivieren" aus dem Smarttag aktivieren.

Wir fügen nun auch die Benutzeroberfläche zum Löschen der ausgewählten Produkte hinzu. Fügen Sie ein Schaltflächen-Websteuerelement unterhalb der GridView hinzu und legen Sie dessen ID auf DeleteSelectedProducts und die Eigenschaft Text auf "Ausgewählte Produkte löschen" fest. Anstatt Produkte aus der Datenbank tatsächlich zu löschen, wird in diesem Beispiel nur eine Meldung mit der Meldung angezeigt, dass die Produkte gelöscht wurden. Fügen Sie dazu eine Label-Websteuerung unter dem Button hinzu. Setzen Sie seine ID auf DeleteResults, löschen Sie seine Text Eigenschaft, und setzen Sie seine Visible und EnableViewState Eigenschaften auf 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 dieser Stelle sollten Sie den Namen, die Kategorie und den Preis der ersten zehn Produkte sehen.

Abbildung 5: Der Name, die Kategorie und der Preis der ersten zehn Produkte sind aufgelistet (Klicken Sie, um das Bild in voller Größe anzuzeigen)

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

Da ASP.NET 2.0 ein CheckBoxField enthält, könnte man denken, dass es verwendet werden könnte, um einer GridView eine Spalte mit Kontrollkästchen hinzuzufügen. Leider ist das nicht der Fall, da das CheckBoxField für die Arbeit mit einem booleschen Datenfeld konzipiert ist. Das heißt, um das CheckBoxField zu verwenden, 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 das CheckBoxField nicht verwenden, um nur eine Spalte mit deaktivierten Kontrollkästchen einzuschließen.

Stattdessen müssen wir ein TemplateField hinzufügen und eine CheckBox-Webkontrolle zu ItemTemplate hinzufügen. Fahren Sie fort, und fügen Sie ein TemplateField zur Products GridView hinzu, und machen Sie es zum ersten (ganz links) Feld. Klicken Sie im Smart-Tag von GridView auf den Link "Vorlagen bearbeiten", und ziehen Sie dann ein CheckBox-Web-Steuerelement aus der Toolbox in das ItemTemplate. Legen Sie diese CheckBox s-Eigenschaft ID auf ProductSelector.

Abbildung 6: Hinzufügen eines CheckBox-Websteuerelements ProductSelector namens "TemplateFields ItemTemplate " (Klicken Sie hier, um das Bild in voller Größe anzuzeigen)

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

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

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 für 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 Eigenschaft Rows von GridView bietet Zugriff auf die Datenzeilen in der GridView. Wir können diese Zeilen durchlaufen, programmgesteuert auf das Kontrollkästchen zugreifen und dann dessen Eigenschaft Checked prüfen, um festzustellen, ob das Kontrollkästchen 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 void DeleteSelectedProducts_Click(object sender, EventArgs e)
{
    bool atLeastOneRowDeleted = false;
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null && cb.Checked)
        {
            // Delete row! (Well, not really...)
            atLeastOneRowDeleted = true;
            // First, get the ProductID for the selected row
            int productID = 
                Convert.ToInt32(Products.DataKeys[row.RowIndex].Value);
            // "Delete" the row
            DeleteResults.Text += string.Format(
                "This would have deleted ProductID {0}<br />", productID);
        }
    }
    // Show the Label if at least one row was deleted...
    DeleteResults.Visible = atLeastOneRowDeleted;
}

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

Mit der Ergänzung dieses Ereignis-Handlers wird beim Klicken auf die Schaltfläche "Ausgewählte Produkte löschen" nun die ProductID 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, um das Bild in voller Größe anzuzeigen)

Schritt 4: Hinzufügen von "Alle auswählen" und "Alle abwählen" Schaltflächen

Wenn ein Benutzer alle Produkte auf der aktuellen Seite löschen möchte, muss er jedes der zehn Kontrollkästchen überprüfen. Wir können diesen Vorgang 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 gleichermaßen hilfreich.

Fügen Sie der Seite zwei Schaltflächenwebsteuerelemente hinzu, und platzieren Sie sie über der GridView. Legen Sie das erste ID auf CheckAll fest und setzen Sie dessen Text-Eigenschaft auf "Alle überprüfen"; legen Sie das zweite ID auf UncheckAll fest und setzen Sie dessen Text-Eigenschaft auf "Alle deaktivieren".

<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 ToggleCheckState(checkState) , die beim Aufrufen die Products GridView-Auflistung Rows aufzählt und jede CheckBox-Eigenschaft Checked auf den Wert des übergebenen checkState-Parameters festlegt.

private void ToggleCheckState(bool checkState)
{
    // Iterate through the Products.Rows property
    foreach (GridViewRow row in Products.Rows)
    {
        // Access the CheckBox
        CheckBox cb = (CheckBox)row.FindControl("ProductSelector");
        if (cb != null)
            cb.Checked = checkState;
    }
}

Erstellen Sie als nächsten Schritt Click Ereignishandler für die Schaltflächen CheckAll und UncheckAll. Rufen Sie im Ereignis-Handler von CheckAll einfach ToggleCheckState(true) auf; in UncheckAll rufen Sie ToggleCheckState(false) auf.

protected void CheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(true);
}
protected void UncheckAll_Click(object sender, EventArgs e)
{
    ToggleCheckState(false);
}

Mit diesem Code bewirkt das Klicken auf die Schaltfläche "Alle überprüfen" ein Postback und überprüft alle Kontrollkästchen in der GridView. Ebenso deaktiviert das Klicken auf "Alle abwählen" alle Kontrollkästchen. Abbildung 9 zeigt den Bildschirm, nachdem die Schaltfläche "Alle überprüfen" aktiviert wurde.

Abbildung 9: Klicken auf die Schaltfläche "Alle aktivieren" aktiviert alle Kontrollkästchen (Zum Anzeigen des Bilds mit voller Größe klicken)

Hinweis

Beim Anzeigen einer Spalte mit Kontrollkästchen besteht ein Ansatz zum Auswählen oder Aufheben der Auswahl aller Kontrollkästchen darin, ein Kontrollkästchen in der Kopfzeile zu verwenden. Darüber hinaus benötigt die aktuelle Implementierung „Alle auswählen“ / „Alle abwählen“ einen Postback. Die Kontrollkästchen können jedoch vollständig über clientseitige Skripts aktiviert oder deaktiviert werden, wodurch eine Snappier-Benutzeroberfläche bereitgestellt wird. Um die Verwendung eines Kontrollkästchens in der Überschriftenzeile für "Alle überprüfen" und "Alle aufheben" zusammen mit einer Diskussion über die Nutzung clientseitiger Techniken zu erkunden, sehen Sie sich Auswahl aller Kontrollkästchen in einer GridView mithilfe von Client-Side Skript und einem Kontrollkästchen für 'Alle überprüfen' an.

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, erfordert das Hinzufügen einer Spalte mit Kontrollkästchen in der GridView ein TemplateField mit einem CheckBox-Websteuerelement. Durch die Verwendung eines Websteuerelements (im Vergleich zum direkten Einfügen von Markup in die Vorlage, wie im vorherigen Lernprogramm beschrieben) merkt sich ASP.NET automatisch, welche Kontrollkästchen angekreuzt waren und welche nicht, auch bei Rückmeldungen. Wir können auch im Code auf die Kontrollkästchen zugreifen, um zu bestimmen, ob ein bestimmtes Kontrollkästchen aktiviert ist oder um den Zustand zu ändern.

In diesem Lernprogramm und dem letzten Beispiel wurde das Hinzufügen einer Zeilenauswahlspalte zur GridView untersucht. In unserem nächsten Lernprogramm untersuchen wir, wie wir mit etwas Arbeit Funktionen zum GridView hinzufügen können.

Glückliche Programmierung!

Zum Autor

Scott Mitchell, Autor von sieben ASP/ASP.NET Büchern und Gründer von 4GuysFromRolla.com, arbeitet seit 1998 mit Microsoft Web Technologies zusammen. Scott arbeitet als unabhängiger Berater, Trainer und Schriftsteller. Sein neuestes Buch ist Sams Teach Yourself ASP.NET 2.0 in 24 Stunden. Er kann bei mitchell@4GuysFromRolla.comerreicht werden.

Zurück Weiter

Freigeben über