Delen via

Knoppen toevoegen en erop reageren op een GridView (C#)

door Scott Mitchell

PDF downloaden

In deze zelfstudie bekijken we hoe u aangepaste knoppen toevoegt, zowel aan een sjabloon als aan de velden van een GridView- of DetailsView-besturingselement. In het bijzonder bouwen we een interface met een FormView waarmee de gebruiker door de leveranciers kan bladeren.

Introductie

Hoewel veel rapportagescenario's alleen-lezentoegang tot de rapportgegevens omvatten, is het niet ongebruikelijk dat rapporten de mogelijkheid hebben om acties uit te voeren op basis van de weergegeven gegevens. Dit is meestal het toevoegen van een knop, LinkButton of ImageButton-webbesturingselement waarbij elke record wordt weergegeven in het rapport dat, wanneer erop wordt geklikt, een postback veroorzaakt en bepaalde code aan de serverzijde aanroept. Het bewerken en verwijderen van de gegevens op recordbasis is het meest voorkomende voorbeeld. Zoals we hebben gezien met het overzicht van de zelfstudie Gegevens invoegen, bijwerken en verwijderen , is bewerken en verwijderen zo gebruikelijk dat de besturingselementen GridView, DetailsView en FormView dergelijke functionaliteit kunnen ondersteunen zonder dat u één regel code hoeft te schrijven.

Naast de knoppen Bewerken en Verwijderen kunnen de besturingselementen GridView, DetailsView en FormView ook knoppen, LinkButtons of ImageButtons bevatten die, wanneer erop wordt geklikt, aangepaste logica op de server uitvoeren. In deze zelfstudie bekijken we hoe u aangepaste knoppen toevoegt, zowel aan een sjabloon als aan de velden van een GridView- of DetailsView-besturingselement. In het bijzonder bouwen we een interface met een FormView waarmee de gebruiker door de leveranciers kan bladeren. Voor een bepaalde leverancier toont de FormView informatie over de leverancier, samen met een knopwebbesturingselement dat, indien erop wordt geklikt, alle bijbehorende producten als stopgezet markeert. Daarnaast bevat een GridView een lijst van de producten die door de geselecteerde leverancier worden geleverd, waarbij elke rij met de knoppen Prijs verhogen en Kortingsprijs bevat die, indien erop wordt geklikt, het product UnitPrice met 10% verhogen of verminderen (zie afbeelding 1).

Zowel de knoppen FormView als GridView bevatten knoppen die aangepaste acties uitvoeren

Afbeelding 1: De knoppen FormView en GridView bevatten knoppen waarmee aangepaste acties worden uitgevoerd (klik om de volledige afbeelding weer te geven)

Stap 1: De webpagina's van de knophandleiding toevoegen

Voordat we kijken hoe we aangepaste knoppen kunnen toevoegen, gaan we eerst de ASP.NET pagina's maken in ons websiteproject die we nodig hebben voor deze zelfstudie. Begin met het toevoegen van een nieuwe map met de naam CustomButtons. Voeg vervolgens de volgende twee ASP.NET pagina's toe aan die map en zorg ervoor dat u elke pagina koppelt aan de Site.master basispagina:

  • Default.aspx
  • CustomButtons.aspx

ASP.NET-pagina's toevoegen voor de aangepaste Buttons-Related tutorials

Afbeelding 2: Voeg de ASP.NET-pagina's toe voor de aangepaste Buttons-Related-tutorials

Net als in de andere mappen, zal Default.aspx in de map CustomButtons de zelfstudies in zijn sectie weergeven. Zoals u weet, biedt het SectionLevelTutorialListing.ascx gebruikersbeheer deze functionaliteit. Voeg deze gebruikerscontrole toe aan Default.aspx door deze vanuit Solution Explorer naar de ontwerpweergave van de pagina te slepen.

Voeg de SectionLevelTutorialListing.ascx User Control toe aan Default.aspx

Afbeelding 3: Het gebruikersbesturingselement toevoegen SectionLevelTutorialListing.ascx aan Default.aspx (klik om de afbeelding op volledige grootte weer te geven)

Voeg tot slot de pagina's toe als vermeldingen aan het Web.sitemap bestand. Specifiek, voeg de volgende opmaak toe na de paginering en sortering <siteMapNode>:

<siteMapNode
    title="Adding Custom Buttons"
    description="Samples of Reports that Include Buttons for Performing
                  Server-Side Actions"
    url="~/CustomButtons/Default.aspx">
    <siteMapNode
        title="Using ButtonFields and Buttons in Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons as ButtonFields or within templates."
        url="~/CustomButtons/CustomButtons.aspx" />
</siteMapNode>

Neem na het bijwerken Web.sitemap even de moeite om de tutorialswebsite via een browser te bekijken. Het menu aan de linkerkant bevat nu items voor bewerken, invoegen, en verwijderen van tutorials.

De sitemap bevat nu de vermelding voor de zelfstudie over aangepaste knoppen

Afbeelding 4: De sitemap bevat nu de vermelding voor de zelfstudie voor aangepaste knoppen

Stap 2: Een FormView toevoegen waarin de leveranciers worden vermeld

Laten we aan de slag gaan met deze tutorial door de FormView (formulierweergave) toe te voegen waarin de leveranciers worden vermeld. Zoals besproken in de inleiding, kunnen gebruikers met deze FormView door de leveranciers bladeren en de door de leverancier verstrekte producten in een rasterweergave bekijken. Daarnaast bevat deze FormView een knop die, wanneer erop wordt geklikt, alle producten van de leverancier als stopgezet markeert. Voordat we ons zorgen maken over het toevoegen van de aangepaste knop aan de FormView, gaan we eerst de FormView maken zodat de leveranciersgegevens worden weergegeven.

Open eerst de CustomButtons.aspx pagina in de CustomButtons map. Voeg een FormView toe aan de pagina door deze van de werkset naar de ontwerpfunctie te slepen en de eigenschap ervan in te stellen ID op Suppliers. Kies in de smart tag van FormView om een nieuwe ObjectDataSource te maken met de naam SuppliersDataSource.

Een nieuwe ObjectDataSource maken met de naam SuppliersDataSource

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

Configureer deze nieuwe ObjectDataSource zodanig dat deze een query uitvoert op de SuppliersBLL klasse's GetSuppliers() methode (zie afbeelding 6). Aangezien deze FormView geen interface biedt voor het bijwerken van de leveranciersgegevens, selecteert u de optie (Geen) in de vervolgkeuzelijst op het tabblad UPDATE.

De gegevensbron configureren voor het gebruik van de methode SuppliersBLL Class s GetSuppliers()

Afbeelding 6: De gegevensbron configureren om de methode van SuppliersBLL de GetSuppliers() klasse te gebruiken (klik om de afbeelding op volledige grootte weer te geven)

Nadat u ObjectDataSource hebt geconfigureerd, genereert Visual Studio een InsertItemTemplate, EditItemTemplateen ItemTemplate voor de FormView. Verwijder de InsertItemTemplate en EditItemTemplate en wijzig de ItemTemplate zodat alleen de bedrijfsnaam en het telefoonnummer van de leverancier worden weergegeven. Schakel ten slotte de ondersteuning voor paginering van de FormView in door het selectievakje "Paginering inschakelen" in zijn slimme label aan te vinken (of door de eigenschap AllowPaging op True in te stellen). Nadat je deze wijzigingen hebt doorgevoerd, ziet de declaratieve markering van je pagina er ongeveer als volgt uit:

<asp:FormView ID="Suppliers" runat="server" DataKeyNames="SupplierID"
    DataSourceID="SuppliersDataSource" EnableViewState="False" AllowPaging="True">
    <ItemTemplate>
        <h3>
            <asp:Label ID="CompanyName" runat="server"
                Text='<%# Bind("CompanyName") %>' />
        </h3>
        <b>Phone:</b>
        <asp:Label ID="PhoneLabel" runat="server" Text='<%# Bind("Phone") %>' />
    </ItemTemplate>
</asp:FormView>
<asp:ObjectDataSource ID="SuppliersDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetSuppliers" TypeName="SuppliersBLL">
</asp:ObjectDataSource>

Afbeelding 7 toont de CustomButtons.aspx pagina wanneer deze wordt bekeken via een browser.

De FormView bevat de bedrijfsnaam- en telefoonvelden van de geselecteerde leverancier

Afbeelding 7: De FormView bevat de CompanyName velden Phone van de geselecteerde leverancier (klik om de afbeelding op volledige grootte weer te geven)

Stap 3: Een GridView toevoegen waarin de producten van de geselecteerde leverancier worden vermeld

Voordat we de knop Alle producten stoppen toevoegen aan de sjabloon van FormView, gaan we eerst een GridView toevoegen onder de FormView met de producten die door de geselecteerde leverancier worden geleverd. Hiervoor voegt u een GridView toe aan de pagina, stelt u de eigenschap ID in op SuppliersProducts en voegt u een nieuwe ObjectDataSource toe met de naam SuppliersProductsDataSource.

Een nieuwe ObjectDataSource maken met de naam SuppliersProductsDataSource

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

Configureer deze ObjectDataSource om de methode van GetProductsBySupplierID(supplierID) de klasse ProductsBLL te gebruiken (zie afbeelding 9). Hoewel met deze GridView de prijs van een product kan worden aangepast, wordt de ingebouwde bewerkings- of verwijderingsfuncties van de GridView niet gebruikt. Daarom kunnen we de vervolgkeuzelijst instellen op (Geen) voor de tabbladen UPDATE, INSERT en DELETE van ObjectDataSource.

De gegevensbron configureren voor het gebruik van de methode ProductsBLL Class s GetProductsBySupplierID(leverancierID)

Afbeelding 9: De gegevensbron configureren om de methode van ProductsBLL de GetProductsBySupplierID(supplierID) klasse te gebruiken (klik om de afbeelding op volledige grootte weer te geven)

Omdat de GetProductsBySupplierID(supplierID) methode een invoerparameter accepteert, vraagt de wizard ObjectDataSource ons om de bron van deze parameterwaarde. Als u de SupplierID waarde van de FormView wilt doorgeven, stelt u de vervolgkeuzelijst Parameterbron in op Control en de vervolgkeuzelijst ControlID op Suppliers (de id van de FormView die in stap 2 is gemaakt).

Geef aan dat de parameter leverancier-id afkomstig moet zijn van het besturingselement Leveranciers FormView

Afbeelding 10: Geef aan dat de supplierID parameter afkomstig moet zijn van het Suppliers besturingselement FormView (klik om de afbeelding op volledige grootte weer te geven)

Nadat u de wizard ObjectDataSource hebt voltooid, bevat de GridView een BoundField of CheckBoxField voor elk van de productgegevensvelden. Laten we dit inkorten om alleen de ProductName en UnitPrice BoundFields samen met het Discontinued CheckBoxField weer te geven. Bovendien maken we het UnitPrice BoundField zodanig op dat de tekst is opgemaakt als een valuta. De declaratieve markeringen van Uw GridView en SuppliersProductsDataSource ObjectDataSource moeten er ongeveer als volgt uitzien:

<asp:GridView ID="SuppliersProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="SuppliersProductsDataSource"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="SuppliersProductsDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProductsBySupplierID" TypeName="ProductsBLL">
    <SelectParameters>
        <asp:ControlParameter ControlID="Suppliers" Name="supplierID"
            PropertyName="SelectedValue" Type="Int32" />
    </SelectParameters>
</asp:ObjectDataSource>

Op dit moment wordt in onze zelfstudie een hoofd-/detailrapport weergegeven, zodat de gebruiker een leverancier kan kiezen uit de FormView bovenaan en de producten van die leverancier kan bekijken via GridView onderaan. Afbeelding 11 toont een schermafbeelding van deze pagina wanneer u de leverancier van Tokyo Traders selecteert in de FormView.

De producten van de geselecteerde leverancier worden weergegeven in de GridView

Afbeelding 11: De producten van de geselecteerde leverancier worden weergegeven in de Rasterweergave (klik hier om de volledige afbeelding weer te geven)

Stap 4: DAL- en BLL-methoden maken om alle producten voor een leverancier te stoppen

Voordat we een knop kunnen toevoegen aan de FormView die, wanneer erop wordt geklikt, alle producten van de leverancier stopt, moeten we eerst een methode toevoegen aan zowel de DAL als de BLL die deze actie uitvoert. Deze methode krijgt met name de naam DiscontinueAllProductsForSupplier(supplierID). Wanneer op de knop van FormView wordt geklikt, roepen we deze methode aan in de bedrijfslogicalaag, waarbij de geselecteerde leverancier SupplierIDwordt doorgegeven. De BLL roept vervolgens de bijbehorende Methode Data Access Layer aan, waarmee een UPDATE instructie wordt verzonden naar de database waarmee de opgegeven producten van de leverancier worden stopgezet.

Zoals we in onze vorige zelfstudies hebben gedaan, gebruiken we een bottom-upbenadering, beginnend met het maken van de DAL-methode, de BLL-methode en ten slotte implementeren we de functionaliteit op de pagina ASP.NET. Open de Northwind.xsd getypte gegevensset in de App_Code/DAL map en voeg een nieuwe methode toe aan de map (klik met de ProductsTableAdapter rechtermuisknop op de ProductsTableAdapter gegevensset en kies Query toevoegen). Als u dit doet, wordt de TableAdapter Queryconfiguratie-wizard opgestart, die u begeleidt bij het toevoegen van de nieuwe methode. Begin door aan te geven dat onze DAL-methode gebruikmaakt van een ad-hoc SQL-instructie.

De DAL-methode maken met behulp van een ad-hoc SQL-instructie

Afbeelding 12: Maak de DAL-methode met behulp van een ad-hoc SQL-instructie (klik hier om de volledige afbeelding weer te geven)

Vervolgens vraagt de wizard ons welk type query we willen maken. Omdat de DiscontinueAllProductsForSupplier(supplierID) methode de Products databasetabel moet bijwerken door het Discontinued veld in te stellen op 1 voor alle producten die door de opgegeven supplierID worden geleverd, moeten we een query maken waarmee gegevens worden bijgewerkt.

Kies het querytype UPDATE

Afbeelding 13: Kies het querytype UPDATE (klik hier om de volledige afbeelding weer te geven)

Het volgende wizardscherm bevat de bestaande UPDATE instructie van TableAdapter, waarmee alle velden worden bijgewerkt die zijn gedefinieerd in de Products DataTable. Vervang deze querytekst door de volgende verklaring:

UPDATE [Products] SET
   Discontinued = 1
WHERE SupplierID = @SupplierID

Nadat u deze query hebt ingevoerd en op Volgende hebt geklikt, wordt in het laatste wizardscherm gevraagd om de naam van de nieuwe methode te gebruiken DiscontinueAllProductsForSupplier. Voltooi de wizard door op de knop Voltooien te klikken. Wanneer u terugkeert naar de DataSet Designer, zou u een nieuwe methode in de ProductsTableAdapter genaamd DiscontinueAllProductsForSupplier(@SupplierID) moeten zien.

Geef de nieuwe DAL-methode de naam DiscontinueAllProductsForSupplier

Afbeelding 14: Geef de nieuwe DAL-methode DiscontinueAllProductsForSupplier een naam (klik hier om de volledige afbeelding weer te geven)

Met de DiscontinueAllProductsForSupplier(supplierID) methode die is gemaakt in de Data Access-laag, is onze volgende taak het maken van de DiscontinueAllProductsForSupplier(supplierID) methode in de bedrijfslogicalaag. U doet dit door het ProductsBLL klassebestand te openen en het volgende toe te voegen:

public int DiscontinueAllProductsForSupplier(int supplierID)
{
    return Adapter.DiscontinueAllProductsForSupplier(supplierID);
}

Deze methode roept eenvoudigweg de DiscontinueAllProductsForSupplier(supplierID) methode in de DAL aan en geeft de opgegeven supplierID parameterwaarde door. Als er bedrijfsregels waren die alleen toestaan dat de producten van een leverancier onder bepaalde omstandigheden worden stopgezet, moeten deze regels in het BLL worden geïmplementeerd.

Opmerking

In tegenstelling tot de UpdateProduct overbelastingen in de ProductsBLL klasse bevat de DiscontinueAllProductsForSupplier(supplierID) methodehandtekening niet het DataObjectMethodAttribute kenmerk (<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, Boolean)>). Hierdoor wordt de DiscontinueAllProductsForSupplier(supplierID) methode uitgesloten van de keuzelijst in het tabblad UPDATE van de wizard Gegevensbron configureren van ObjectDataSource. Ik heb dit kenmerk weggelaten omdat we de DiscontinueAllProductsForSupplier(supplierID) methode rechtstreeks vanuit een gebeurtenis-handler zullen aanroepen op onze ASP.NET-pagina.

Stap 5: de knop Alle producten stoppen toevoegen aan de FormView

Wanneer de DiscontinueAllProductsForSupplier(supplierID) methode in de BLL en DAL is voltooid, is de laatste stap voor het toevoegen van de mogelijkheid om alle producten voor de geselecteerde leverancier te stoppen, een knopwebbesturingselement toe te voegen aan de FormView's ItemTemplate. Laten we een dergelijke knop toevoegen onder het telefoonnummer van de leverancier met de knoptekst, Alle producten stoppen en een ID eigenschapswaarde van DiscontinueAllProductsForSupplier. U kunt dit knopwebbesturingselement toevoegen via de ontwerpfunctie door te klikken op de koppeling Sjablonen bewerken in de infolabel van FormView (zie afbeelding 15) of rechtstreeks via de declaratieve syntaxis.

Voeg een knop 'Alle Producten Stoppen' webbesturingselement toe aan de FormView 'ItemTemplate'

Afbeelding 15: Voeg een webbesturingselement voor de knop 'Alle producten stoppen' toe aan de FormView ItemTemplate (Klik om de volledige afbeelding weer te geven)

Wanneer op de knop wordt geklikt door een gebruiker die de pagina bezoekt, vindt een postback plaats en wordt de ItemCommand FormView-gebeurtenis geactiveerd. Als u aangepaste code wilt uitvoeren als reactie op deze knop die wordt geklikt, kunnen we een gebeurtenis-handler voor deze gebeurtenis maken. Begrijp wel dat de ItemCommand gebeurtenis wordt geactiveerd wanneer elk besturingselement Button, LinkButton of ImageButton binnen de FormView wordt geklikt. Dat betekent dat wanneer de gebruiker van de ene pagina naar de andere in de FormView wordt verplaatst, de ItemCommand gebeurtenis wordt geactiveerd. Hetzelfde geldt wanneer de gebruiker op Nieuw, Bewerken of Verwijderen klikt in een FormView die ondersteuning biedt voor invoegen, bijwerken of verwijderen.

Omdat de ItemCommand brand, ongeacht welke knop wordt geklikt, hebben we in de gebeurtenis-handler een manier nodig om te bepalen of de knop Alle producten stoppen is geklikt of als het een andere knop was. Hiervoor kunnen we de eigenschap van het Knopweb-besturingselement instellen op een identificatiewaarde. Wanneer op de knop wordt geklikt, wordt deze CommandName waarde doorgegeven aan de ItemCommand gebeurtenis-handler, zodat we kunnen bepalen of de knop Alle producten beëindigen is aangeklikt. Stel de eigenschap van de knop 'Stop Alle Producten' CommandName in op DiscontinueProducts.

Ten slotte zullen we een bevestigingsdialoogvenster aan de clientzijde gebruiken om ervoor te zorgen dat de gebruiker echt de producten van de geselecteerde leverancier wil stopzetten. Zoals we hebben gezien in de zelfstudie Adding Client-Side Confirmation When Deleting, kan dit worden bereikt met een beetje JavaScript. Stel met name de eigenschap OnClientClick van het knopwebbesturingselement in op return confirm('This will mark _all_ of this supplier\'s products as discontinued. Are you certain you want to do this?');

Nadat u deze wijzigingen hebt aangebracht, moet de declaratieve syntaxis van FormView er als volgt uitzien:

<asp:FormView ID="Suppliers" runat="server" DataKeyNames="SupplierID"
    DataSourceID="SuppliersDataSource" EnableViewState="False"
    AllowPaging="True">
    <ItemTemplate>
        <h3><asp:Label ID="CompanyName" runat="server"
            Text='<%# Bind("CompanyName") %>'></asp:Label></h3>
        <b>Phone:</b>
        <asp:Label ID="PhoneLabel" runat="server" Text='<%# Bind("Phone") %>' />
        <br />
        <asp:Button ID="DiscontinueAllProductsForSupplier" runat="server"
            CommandName="DiscontinueProducts" Text="Discontinue All Products"
            OnClientClick="return confirm('This will mark _all_ of this supplier\'s
                products as discontinued. Are you certain you want to do this?');" />
    </ItemTemplate>
</asp:FormView>

Maak vervolgens een eventhandler voor het ItemCommand event van FormView. In deze event handler moeten we eerst bepalen of de Stop Alle Producten Knop is geklikt. Als dit het geval is, willen we een exemplaar van de ProductsBLL klasse maken en zijn DiscontinueAllProductsForSupplier(supplierID) methode aanroepen, waarbij de SupplierID van de FormView geselecteerd wordt doorgegeven.

protected void Suppliers_ItemCommand(object sender, FormViewCommandEventArgs e)
{
    if (e.CommandName.CompareTo("DiscontinueProducts") == 0)
    {
        // The "Discontinue All Products" Button was clicked.
        // Invoke the ProductsBLL.DiscontinueAllProductsForSupplier(supplierID) method
        // First, get the SupplierID selected in the FormView
        int supplierID = (int)Suppliers.SelectedValue;
        // Next, create an instance of the ProductsBLL class
        ProductsBLL productInfo = new ProductsBLL();
        // Finally, invoke the DiscontinueAllProductsForSupplier(supplierID) method
        productInfo.DiscontinueAllProductsForSupplier(supplierID);
    }
}

Houd er rekening mee dat de SupplierID huidige geselecteerde leverancier in FormView toegankelijk is via de eigenschap van FormViewSelectedValue. De SelectedValue eigenschap retourneert de eerste gegevenssleutelwaarde voor de record die wordt weergegeven in de FormView. De DataKeyNames eigenschap van FormView, die de gegevensvelden aangeeft waaruit de gegevenssleutelwaarden worden opgehaald, is door Visual Studio automatisch ingesteld op SupplierID bij het koppelen van de ObjectDataSource aan de FormView in stap 2.

Als de ItemCommand gebeurtenis-handler is gemaakt, neemt u even de tijd om de pagina te testen. Blader naar de Cooperativa de Quesos 'Las Cabras' leverancier (het is de vijfde leverancier in de FormView voor mij). Deze leverancier levert twee producten, Queso Cabrales en Queso Manchego La Pastora, beide zijn niet stopgezet.

Stel dat Cooperativa de Quesos 'Las Cabras' uit de handel is gegaan en daarom zijn producten moeten worden stopgezet. Klik op de knop om alle producten te stoppen. Hiermee wordt het dialoogvenster Bevestigen aan de clientzijde weergegeven (zie afbeelding 16).

Cooperativa de Quesos Las Cabras levert twee actieve producten

Afbeelding 16: Cooperativa de Quesos Las Cabras levert twee actieve producten (Klik om de volledige afbeelding weer te geven)

Als u op OK klikt in het dialoogvenster Bevestigen aan de clientzijde, wordt het verzenden van het formulier voortgezet, waardoor een terugzendbewerking wordt uitgevoerd waarin de gebeurtenis van ItemCommand FormView wordt geactiveerd. De gebeurtenishandler die we hebben gemaakt, zal dan worden uitgevoerd, waarbij de DiscontinueAllProductsForSupplier(supplierID)-methode wordt aangeroepen en zowel de producten Queso Cabrales als Queso Manchego La Pastora worden stopgezet.

Als u de weergavestatus van GridView hebt uitgeschakeld, wordt de GridView opnieuw teruggezet naar het onderliggende gegevensarchief op elke postback en wordt daarom onmiddellijk bijgewerkt om aan te geven dat deze twee producten nu worden stopgezet (zie afbeelding 17). Als u de weergavestatus echter niet hebt uitgeschakeld in de GridView, moet u de gegevens handmatig opnieuw koppelen aan de GridView nadat u deze wijziging hebt aangebracht. U doet dit door direct na het aanroepen van de DataBind() methode de DiscontinueAllProductsForSupplier(supplierID) methode van GridView aan te roepen.

Nadat u op de knop Alle producten stoppen hebt geklikt, worden de producten van de leverancier dienovereenkomstig bijgewerkt

Afbeelding 17: Nadat u op de knop Alle producten stoppen hebt geklikt, worden de producten van de leverancier dienovereenkomstig bijgewerkt (klik om de volledige afbeelding weer te geven)

Stap 6: Een UpdateProduct-overbelasting maken in de bedrijfslogicalaag voor het aanpassen van de prijs van een product

Net als bij de Alle producten beëindigen-knop in de FormView, moeten we eerst de juiste methoden voor de gegevenslaag en de bedrijfslogicalaag toevoegen om knoppen toe te voegen voor het verhogen en verlagen van de prijs voor een product in de GridView. Omdat we al een methode hebben die één productrij in de DAL bijwerkt, kunnen we deze functionaliteit bieden door een nieuwe overload voor de UpdateProduct-methode in de BLL te creëren.

Onze eerdere functies met overbelasting hebben een combinatie van producteigenschappen als scalaire invoerwaarden gebruikt en vervolgens alleen die eigenschappen voor het opgegeven product bijgewerkt. Voor deze overbelastingprocedure wijken we enigszins af van deze standaard en geven we in plaats daarvan de ProductID en het percentage door waarmee het UnitPrice moet worden aangepast (in plaats van het doorgeven van de nieuwe, aangepaste UnitPrice zelf). Deze aanpak vereenvoudigt de code die we moeten schrijven in de ASP.NET paginacode-achterklasse, omdat we niet hoeven te bepalen wat het huidige product UnitPriceis.

De UpdateProduct overbelasting voor deze zelfstudie wordt hieronder weergegeven:

public bool UpdateProduct(decimal unitPriceAdjustmentPercentage, int productID)
{
    Northwind.ProductsDataTable products = Adapter.GetProductByProductID(productID);
    if (products.Count == 0)
        // no matching record found, return false
        return false;
    Northwind.ProductsRow product = products[0];
    // Adjust the UnitPrice by the specified percentage (if it's not NULL)
    if (!product.IsUnitPriceNull())
        product.UnitPrice *= unitPriceAdjustmentPercentage;
    // Update the product record
    int rowsAffected = Adapter.Update(product);
    // Return true if precisely one row was updated, otherwise false
    return rowsAffected == 1;
}

Deze overbelasting haalt informatie over het opgegeven product op via de DAL-methode GetProductByProductID(productID) . Vervolgens wordt gecontroleerd of aan het product UnitPrice een databasewaarde NULL is toegewezen. Als dat zo is, blijft de prijs ongewijzigd. Als er echter een waarde die niet NULLUnitPrice is, wordt het UnitPrice van het product bijgewerkt met het opgegeven percentage (unitPriceAdjustmentPercent).

Stap 7: de knoppen Voor vergroten en verkleinen toevoegen aan rasterweergave

De GridView (en DetailsView) bestaan beide uit een verzameling velden. Naast BoundFields, CheckBoxFields en TemplateFields bevat ASP.NET het ButtonField, dat, zoals de naam al aangeeft, wordt weergegeven als een kolom met een knop, LinkButton of ImageButton voor elke rij. Net als bij de FormView, veroorzaakt het klikken op een willekeurige knop binnen de rasterweergave, zoals pagineringsknoppen, bewerken- of verwijderenknoppen, sorteerknoppen, enzovoort, een postback en activeert het de van de GridView.

Het ButtonField heeft een CommandName eigenschap die de opgegeven waarde toewijst aan elk van de knoppeneigenschappen CommandName . Net als bij de FormView wordt de CommandName waarde gebruikt door de RowCommand gebeurtenis-handler om te bepalen op welke knop is geklikt.

We gaan twee nieuwe ButtonFields toevoegen aan de GridView, een met een knoptekst Prijs +10% en de andere met de tekst Prijs -10%. Als u deze ButtonFields wilt toevoegen, klikt u op de koppeling Kolommen bewerken in de infolabel van GridView, selecteert u het veldtype ButtonField in de lijst linksboven en klikt u op de knop Toevoegen.

Twee ButtonFields toevoegen aan de GridView

Afbeelding 18: Twee knopvelden toevoegen aan rasterweergave

Verplaats de twee ButtonFields zodat ze worden weergegeven als de eerste twee GridView-velden. Stel vervolgens de Text eigenschappen van deze twee ButtonFields in op Price +10% en Price -10% en de CommandName eigenschappen voor respectievelijk IncreasePrice en DecreasePrice. Standaard geeft een ButtonField de kolom met knoppen weer als LinkButtons. Dit kan echter worden gewijzigd via de eigenschap ButtonFieldButtonType. Laten we deze twee ButtonFields laten weergeven als gewone drukknoppen; stel daarom de ButtonType eigenschap in op Button. Afbeelding 19 toont het dialoogvenster Velden nadat deze wijzigingen zijn aangebracht; hierna volgt de declaratieve markeringen van GridView.

De eigenschappen ButtonFields Text, CommandName en ButtonType configureren

Afbeelding 19: De knopvelden Texten CommandNameButtonType eigenschappen configureren

<asp:GridView ID="SuppliersProducts" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="SuppliersProductsDataSource"
    EnableViewState="False">
    <Columns>
        <asp:ButtonField ButtonType="Button" CommandName="IncreasePrice"
            Text="Price +10%" />
        <asp:ButtonField ButtonType="Button" CommandName="DecreasePrice"
            Text="Price -10%" />
        <asp:BoundField DataField="ProductName" HeaderText="Product"
            SortExpression="ProductName" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

Wanneer deze ButtonFields zijn gemaakt, is de laatste stap het maken van een gebeurtenis-handler voor de gebeurtenis van GridView RowCommand . Deze gebeurtenis-handler, indien geactiveerd omdat op de knoppen Prijs +10% of Prijs -10% is geklikt, moet het ProductID voor de rij bepalen waarop op de knop is geklikt en vervolgens de ProductsBLL klasse's UpdateProduct methode aanroepen, waarbij de juiste UnitPrice percentageaanpassing samen met de ProductID wordt doorgegeven. Met de volgende code worden deze taken uitgevoerd:

protected void SuppliersProducts_RowCommand(object sender, GridViewCommandEventArgs e)
{
    if (e.CommandName.CompareTo("IncreasePrice") == 0 ||
        e.CommandName.CompareTo("DecreasePrice") == 0)
    {
        // The Increase Price or Decrease Price Button has been clicked
        // Determine the ID of the product whose price was adjusted
        int productID =
            (int)SuppliersProducts.DataKeys[Convert.ToInt32(e.CommandArgument)].Value;
        // Determine how much to adjust the price
        decimal percentageAdjust;
        if (e.CommandName.CompareTo("IncreasePrice") == 0)
            percentageAdjust = 1.1M;
        else
            percentageAdjust = 0.9M;

        // Adjust the price
        ProductsBLL productInfo = new ProductsBLL();
        productInfo.UpdateProduct(percentageAdjust, productID);
    }
}

Om de ProductID van de rij vast te stellen waarvoor de knop Prijs +10% of Prijs -10% is geklikt, moeten we de GridView-verzameling DataKeys raadplegen. Deze verzameling bevat de waarden van de velden die zijn opgegeven in de DataKeyNames eigenschap voor elke GridView-rij. Omdat de GridView DataKeyNames eigenschap door Visual Studio is ingesteld op ProductID bij het binden van de ObjectDataSource aan de GridView, geeft DataKeys(rowIndex).Value de ProductID voor de opgegeven rowIndex.

ButtonField geeft automatisch de rowIndex van de rij door waarvan op de knop is geklikt, via de parameter e.CommandArgument. Om de ProductID voor de rij te bepalen waarvan op de knop de prijs +10% of de prijs -10% is geklikt, gebruiken we: Convert.ToInt32(SuppliersProducts.DataKeys(Convert.ToInt32(e.CommandArgument)).Value).

Net als bij de knop Alle producten stoppen, wordt de GridView, als u de weergavestatus van de GridView hebt uitgeschakeld, bij elke postback opnieuw gebonden aan het onderliggende gegevensarchief en wordt daarom onmiddellijk bijgewerkt om een prijswijziging weer te geven die optreedt door het klikken op een van de knoppen. Als u de weergavestatus echter niet hebt uitgeschakeld in de GridView, moet u de gegevens handmatig opnieuw koppelen aan de GridView nadat u deze wijziging hebt aangebracht. U doet dit door direct na het aanroepen van de DataBind() methode de UpdateProduct methode van GridView aan te roepen.

Afbeelding 20 toont de pagina bij het bekijken van de producten van Oma Kelly's Homestead. In afbeelding 21 ziet u de resultaten nadat de knop Prijs +10% twee keer is geklikt voor De Boysenberry Spread van oma en de knop Prijs -10% eenmaal voor Northwoods Cranberry Sauce.

De GridView bevat de knoppen Price +10% en Price -10%

Afbeelding 20: De GridView bevat prijs +10% en prijs -10% knoppen (klik om de volledige afbeelding weer te geven)

De prijzen voor het eerste en derde product zijn bijgewerkt via de knoppen Prijs +10% en Prijs -10%

Afbeelding 21: De prijzen voor het eerste en derde product zijn bijgewerkt via de knoppen Prijs +10% en Prijs -10% (Klik om de volledige afbeelding weer te geven)

Opmerking

De GridView (en DetailsView) kunnen ook knoppen, LinkButtons of ImageButtons toevoegen aan hun TemplateFields. Net als bij het BoundField veroorzaken deze knoppen, wanneer erop wordt geklikt, een postback, waardoor het RowCommand-evenement van de GridView wordt geactiveerd. Wanneer u echter knoppen toevoegt in een TemplateField, wordt de knop CommandArgument niet automatisch ingesteld op de index van de rij, net zoals bij het gebruik van ButtonFields. Als u de rijindex wilt bepalen van de knop waarop in de RowCommand gebeurtenis-handler is geklikt, moet u de eigenschap van CommandArgument knop handmatig instellen in de declaratieve syntaxis in het TemplateField, met behulp van code zoals:
<asp:Button runat="server" ... CommandArgument='<%# ((GridViewRow) Container).RowIndex %>'.

Samenvatting

De besturingselementen GridView, DetailsView en FormView kunnen allemaal knoppen, LinkButtons of ImageButtons bevatten. Dergelijke knoppen, wanneer deze worden aangeklikt, veroorzaken een postback en genereren de ItemCommand gebeurtenis in de FormView- en DetailsView-besturingselementen en de RowCommand gebeurtenis in de GridView. Deze besturingselementen voor gegevensweb hebben ingebouwde functionaliteit voor het afhandelen van algemene opdrachtengerelateerde acties, zoals het verwijderen of bewerken van records. We kunnen echter ook knoppen gebruiken die, wanneer erop wordt geklikt, reageren met het uitvoeren van onze eigen aangepaste code.

Hiervoor moeten we een gebeurtenis-handler maken voor de ItemCommand of RowCommand gebeurtenis. In deze gebeurtenis-handler controleren we eerst de binnenkomende CommandName waarde om te bepalen op welke knop is geklikt en vervolgens de juiste aangepaste actie te ondernemen. In deze zelfstudie hebben we gezien hoe we knoppen en ButtonFields kunnen gebruiken om alle producten voor een bepaalde leverancier te stoppen of om de prijs van een bepaald product met 10%te verhogen of verlagen.

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.

Volgend

  • Last updated on