Delen via

Een GridView-kolom met selectievakjes toevoegen (C#)

door Scott Mitchell

PDF downloaden

In deze zelfstudie wordt uitgelegd hoe u een kolom met selectievakjes toevoegt aan een GridView-besturingselement om de gebruiker een intuïtieve manier te bieden om meerdere rijen van de GridView te selecteren.

Introductie

In de voorgaande zelfstudie hebben we onderzocht hoe u een kolom met keuzerondjes toevoegt aan de GridView om een bepaalde record te selecteren. Een kolom met radiobuttons is een geschikte gebruikersinterface wanneer de gebruiker maximaal één item uit het raster kan kiezen. Soms willen we echter toestaan dat de gebruiker een willekeurig aantal items uit het raster kan kiezen. E-mailclients op internet geven bijvoorbeeld meestal de lijst met berichten weer met een kolom met selectievakjes. De gebruiker kan een willekeurig aantal berichten selecteren en vervolgens een actie uitvoeren, zoals het verplaatsen van de e-mailberichten naar een andere map of het verwijderen ervan.

In deze zelfstudie zien we hoe u een kolom met selectievakjes toevoegt en hoe u kunt bepalen welke selectievakjes zijn ingeschakeld bij terugpost. We bouwen met name een voorbeeld dat de gebruikersinterface van de e-mailclient op internet nabootst. Ons voorbeeld bevat een gepaginade GridView met de producten in de Products databasetabel met een selectievakje in elke rij (zie afbeelding 1). Als u op de knop Geselecteerde producten verwijderen klikt, worden de geselecteerde producten verwijderd.

Elke productrij bevat een selectievakje

Afbeelding 1: Elke productrij bevat een selectievakje (klik hier om de volledige afbeelding weer te geven)

Stap 1: Een gepaginade rasterweergave toevoegen waarin productgegevens worden vermeld

Voordat we ons zorgen maken over het toevoegen van een kolom met selectievakjes, richten we ons eerst op het weergeven van de producten in een GridView die paging ondersteunt. Begin met het openen van de CheckBoxField.aspx pagina in de EnhancedGridView map en sleep een GridView van de Werkset naar de ontwerpfunctie, waarbij u deze instelt ID op Products. Kies er vervolgens voor om de GridView te binden aan een nieuwe ObjectDataSource met de naam ProductsDataSource. Configureer de ObjectDataSource om de ProductsBLL klasse te gebruiken, waarbij de GetProducts() methode wordt aangeroepen om de gegevens te retourneren. Aangezien deze GridView alleen lezen is, stelt u de vervolgkeuzelijsten in de tabbladen UPDATE, INSERT en DELETE in op (Geen).

Een nieuwe ObjectDataSource maken met de naam ProductsDataSource

Afbeelding 2: Een nieuwe ObjectDataSource maken met de naam ProductsDataSource (klik om de afbeelding op volledige grootte weer te geven)

De ObjectDataSource configureren om gegevens op te halen met behulp van de methode GetProducts()

Afbeelding 3: De ObjectDataSource configureren om gegevens op te halen met behulp van de GetProducts() methode (klik om de afbeelding op volledige grootte weer te geven)

Stel de Drop-Down-lijsten in de tabbladen UPDATE, INSERT en DELETE in op (Geen)

Afbeelding 4: Stel de Drop-Down lijsten in de tabbladen UPDATE, INSERT en DELETE in op (Geen) (Klik om de volledige afbeelding weer te geven)

Nadat u de wizard Gegevensbron configureren hebt voltooid, maakt Visual Studio automatisch BoundColumns en een CheckBoxColumn voor de productgerelateerde gegevensvelden. Zoals we in de vorige handleiding hebben gedaan, verwijdert u alle BoundFields, behalve de ProductName, CategoryName en UnitPrice, en wijzigt u de HeaderText-eigenschappen naar Product, Categorie en Prijs. Configureer het BoundField zodanig dat de UnitPrice waarde wordt opgemaakt als een valuta. Configureer de GridView ook ter ondersteuning van paging door het selectievakje Paging inschakelen vanuit de infotag in te schakelen.

Laten we ook de gebruikersinterface toevoegen voor het verwijderen van de geselecteerde producten. Voeg een Webcontrol-knop toe onder de GridView, stel de eigenschap ID in naar DeleteSelectedProducts, en de eigenschap Text naar "Geselecteerde producten verwijderen". In plaats van producten uit de database te verwijderen, geven we in dit voorbeeld alleen een bericht weer waarin staat dat de producten zijn verwijderd. Voeg onder de knop een labelweb besturingselement toe om dit mogelijk te maken. Stel de ID in op DeleteResults, wis de eigenschap Text en stel de eigenschappen Visible en EnableViewState in op false.

Nadat u deze wijzigingen hebt aangebracht, moeten de declaratieve markeringen van GridView, ObjectDataSource, Button en Label er ongeveer als volgt uitzien:

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

Neem even de tijd om de pagina in een browser weer te geven (zie afbeelding 5). Op dit moment ziet u de naam, categorie en prijs van de eerste tien producten.

De naam, categorie en prijs van de eerste tien producten worden vermeld

Afbeelding 5: De naam, categorie en prijs van de eerste tien producten worden vermeld (klik hier om de volledige afbeelding weer te geven)

Stap 2: Een kolom met selectievakjes toevoegen

Aangezien ASP.NET 2.0 een Selectievakjeveld bevat, kan het zijn dat het kan worden gebruikt om een kolom met selectievakjes toe te voegen aan een GridView. Dat is helaas niet het geval, omdat het CheckBoxField is ontworpen om te werken met een Boole-gegevensveld. Om de CheckBoxField te kunnen gebruiken, moeten we het onderliggende gegevensveld opgeven waarvan de waarde wordt geraadpleegd om te bepalen of het gerenderde selectievakje is aangevinkt. We kunnen het SelectievakjeVeld niet gebruiken om alleen een kolom met uitgeschakelde selectievakjes op te nemen.

In plaats daarvan moeten we een TemplateField toevoegen en een selectievakje-webbesturingselement aan het bijbehorende ItemTemplate-element toevoegen. Voeg een TemplateField toe aan de Products GridView en maak dit het eerste veld (uiterst links). Klik vanuit de smarttag van GridView op de koppeling Sjablonen bewerken en sleep vervolgens een selectievakje webbesturingselement uit de werkset naar de ItemTemplate. Stel de eigenschap van dit selectievakje in ID op ProductSelector.

Een webbesturingselement voor selectievakjes met de naam ProductSelector toevoegen aan de TemplateField s ItemTemplate

Afbeelding 6: Voeg een selectievakje webbesturingselement genaamd ProductSelector toe aan het sjabloonveld ItemTemplate (Klik om de volledige afbeelding weer te geven)

Nu het web besturingselement TemplateField en CheckBox zijn toegevoegd, bevat elke rij nu een selectievakje. In afbeelding 7 ziet u deze pagina, wanneer deze wordt weergegeven via een browser, nadat het Sjabloonveld en het Selectievakje zijn toegevoegd.

Elke productrij bevat nu een selectievakje

Afbeelding 7: Elke productrij bevat nu een selectievakje (klik hier om de volledige afbeelding weer te geven)

Stap 3: bepalen welke selectievakjes zijn ingeschakeld bij terugschrijven

Momenteel hebben we een kolom met selectievakjes, maar we hebben geen manier om te bepalen welke selectievakjes zijn aangevinkt bij het terugsturen van gegevens. Wanneer echter op de knop Geselecteerde producten verwijderen wordt geklikt, moeten we weten welke selectievakjes zijn ingeschakeld om deze producten te verwijderen.

De eigenschap GridView Rows biedt toegang tot de gegevensrijen in de GridView. We kunnen deze rijen doorlopen, programmatisch toegang krijgen tot het besturingselement Selectievakje en vervolgens de eigenschap raadplegen Checked om te bepalen of het selectievakje is geselecteerd.

Maak een gebeurtenis-handler voor de gebeurtenis DeleteSelectedProducts van de knop webcontrole Click en voeg de volgende code toe:

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

De Rows eigenschap retourneert een verzameling GridViewRow exemplaren die de gegevensrijen van GridView maken. De foreach lus hier bevat een opsomming van deze verzameling. Voor elk GridViewRow object wordt het selectievakje van de rij programmatisch geopend met behulp van row.FindControl("controlID"). Als het selectievakje is ingeschakeld, wordt de overeenkomende ProductID waarde van de rij opgehaald uit de DataKeys verzameling. In deze oefening geven we gewoon een informatief bericht weer in het DeleteResults label, hoewel we in een functionerende applicatie in plaats daarvan een aanroep naar de ProductsBLL klasse's DeleteProduct(productID) methode zouden maken.

Door de toevoeging van deze gebeurtenis-handler worden bij het klikken op de knop "Geselecteerde producten verwijderen" nu de ProductID-en van de geselecteerde producten weergegeven.

Wanneer op de knop Geselecteerde producten verwijderen wordt geklikt, worden de product-id's van geselecteerde producten weergegeven

Afbeelding 8: Wanneer op de knop Geselecteerde producten verwijderen wordt geklikt, worden de geselecteerde producten ProductID weergegeven (klik hier om de volledige afbeelding weer te geven)

Stap 4: Alle selectievakjes toevoegen en Alle knoppen uitschakelen

Als een gebruiker alle producten op de huidige pagina wil verwijderen, moet deze elk van de tien selectievakjes controleren. We kunnen dit proces versnellen door een knop Alles controleren toe te voegen die, wanneer erop wordt geklikt, alle selectievakjes in het raster selecteert. Een knop Alles uitschakelen zou even nuttig zijn.

Voeg twee knopwebbesturingselementen toe aan de pagina en plaats deze boven de GridView. Stel de eerste s ID in op CheckAll en de Text eigenschap op Alles controleren; stel de tweede s ID in op UncheckAll en de eigenschap ervan Text op Alles uitvinken.

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

Maak vervolgens een methode in de code-behind-klasse met de naam ToggleCheckState(checkState) die, wanneer deze wordt aangeroepen, de collectie van Products GridView opsomt en de eigenschap van elke selectievakje op de waarde van de doorgegeven parameter Rows instelt.

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

Vervolgens maak Click eventhandlers voor de CheckAll en UncheckAll knoppen. In CheckAlls eventhandler, en gewoon ToggleCheckState(true) aanroepen; in UncheckAll, ToggleCheckState(false) aanroepen.

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

Als u met deze code op de knop Alles controleren klikt, wordt een terugdraaiactie uitgevoerd en worden alle selectievakjes in de GridView gecontroleerd. Als u ook op Alles uitschakelen klikt, worden alle selectievakjes uitgeschakeld. In afbeelding 9 ziet u het scherm nadat de knop Alles controleren is geselecteerd.

Als u op de knop Alles controleren klikt, worden alle selectievakjes geselecteerd

Afbeelding 9: Als u op de knop Alles controleren klikt, worden alle selectievakjes geselecteerd (klik om de afbeelding op volledige grootte weer te geven)

Opmerking

Wanneer u een kolom met selectievakjes weergeeft, is één methode voor het selecteren of opheffen van alle selectievakjes via een selectievakje in de koprij. Bovendien is voor de huidige check all/uncheck All-implementatie een terugpost vereist. De selectievakjes kunnen worden ingeschakeld of uitgeschakeld, maar volledig via script aan de clientzijde, waardoor een snappier gebruikerservaring ontstaat. Als u wilt ontdekken hoe u een selectievakje in de koprij kunt gebruiken voor Alles aanvinken en Alles uitvinken in detail, samen met een discussie over het gebruik van technieken aan de clientzijde, bekijkt u Alle selectievakjes in een GridView controleren met behulp van Client-Side Script en een Selecteer Alles vakje.

Samenvatting

In gevallen waarin u gebruikers een willekeurig aantal rijen uit een GridView wilt laten kiezen voordat u doorgaat, is het toevoegen van een kolom met selectievakjes één optie. Zoals we in deze zelfstudie hebben gezien, omvat het toevoegen van een kolom met selectievakjes in de GridView het toevoegen van een TemplateField met een Webcontrol voor Selectievakjes. Door een webbesturingselement te gebruiken (versus markeringen rechtstreeks in de sjabloon injecteren, zoals we in de vorige zelfstudie hebben gedaan), onthoudt ASP.NET automatisch welke selectievakjes wel en niet zijn aangevinkt bij een postback. We kunnen ook programmatisch toegang krijgen tot de CheckBoxes in code om te bepalen of een bepaald selectievakje is aangevinkt, of om de ingeschakeld status te wijzigen.

In deze zelfstudie en de vorige hebben we gekeken naar het toevoegen van een rijselectiekolom aan de GridView. In onze volgende zelfstudie bekijken we hoe we, met een beetje werk, mogelijkheden voor het invoegen van de GridView kunnen toevoegen.

Veel plezier met programmeren!

Over de auteur

Scott Mitchell, auteur van zeven ASP/ASP.NET-boeken en oprichter van 4GuysFromRolla.com, werkt sinds 1998 met Microsoft-webtechnologieën. Scott werkt als onafhankelijk consultant, trainer en schrijver. Zijn laatste boek is Sams Teach Yourself ASP.NET 2.0 in 24 uur. Hij kan worden bereikt op mitchell@4GuysFromRolla.com.

Vorigevolgende

  • Last updated on