Delen via

Knoppen toevoegen en erop reageren op een GridView (VB)

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 knoppen bevat om de Prijs te verhogen of te verlagen. Wanneer erop wordt geklikt, verhogen of verlagen deze knoppen de prijs van het product UnitPrice met 10% (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 een 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

Voeg de ASP.NET-pagina's toe voor de aangepaste Buttons-Related-zelfstudies

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 daarom deze gebruikerscontrole toe aan Default.aspx door het vanuit de 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 een moment om de zelfstudiewebsite via een browser te bekijken. Het menu aan de linkerkant bevat nu items voor bewerken, invoegen, en verwijderen van tutorials.

Het Siteoverzicht bevat nu de vermelding voor de zelfstudie voor Aangepaste Knoppen

Afbeelding 4: Het siteoverzicht bevat nu de vermelding voor de zelfstudie voor aangepaste knoppen

Stap 2: Een FormView toevoegen waarin de leveranciers worden vermeld

Laten we met deze tutorial aan de slag gaan door de FormView toe te voegen die de leveranciers vermeldt. 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 smarttag van FormView om een nieuwe ObjectDataSource met de naam SuppliersDataSourcete maken.

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 het queries uitvoert vanuit de SuppliersBLL klasse en de 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 SuppliersBLL van de klasse GetSuppliers() te gebruiken (klik om de volledige afbeelding 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). Na deze wijzigingen zou de declaratieve opmaak van uw pagina er ongeveer als volgt uit moeten zien:

<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 ProductsBLL-klasse GetProductsBySupplierID(supplierID) te gebruiken (zie afbeelding 9). Hoewel met deze GridView de prijs van een product kan worden aangepast, wordt de ingebouwde bewerkings- of verwijderingsfuncties van 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 voor het gebruik van de methode van klasse ProductsBLL (GetProductsBySupplierID(supplierID))

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 GridView een BoundField- of CheckBoxField-veld voor elk van de gegevensvelden van het product. 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 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 om de afbeelding op volledige grootte 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, wordt deze methode aangeroepen in de bedrijfslogicalaag, waarbij de geselecteerde leverancier wordt doorgegeven. De BLL roept vervolgens de bijbehorende Methode Data Access Layer aan, waarmee een SupplierID instructie wordt verzonden naar de database waarmee de opgegeven leveranciersproducten UPDATEworden 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 Gegevenstabel. 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 Function DiscontinueAllProductsForSupplier(supplierID As Integer) As Integer
    Return Adapter.DiscontinueAllProductsForSupplier(supplierID)
End Function

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 producten van een leverancier onder bepaalde omstandigheden worden stopgezet, moeten deze regels hier in de 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)>). Dit voorkomt de DiscontinueAllProductsForSupplier(supplierID) methode in de vervolgkeuzelijst van de wizard Gegevensbron configureren van ObjectDataSource op het tabblad UPDATE. Ik heb dit kenmerk weggelaten omdat we de DiscontinueAllProductsForSupplier(supplierID) methode rechtstreeks vanuit een gebeurtenis-handler 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, het toevoegen van een knopwebbesturingselement 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 smarttag van FormView (zie afbeelding 15) of rechtstreeks via de declaratieve syntaxis.

Voeg een knop webbesturingselement

Afbeelding 15: Een webbesturingselement Voor alle producten stoppen toevoegen aan de FormView's ItemTemplate (klik om de afbeelding volledig weer te geven)

Wanneer op de knop wordt geklikt door een gebruiker die de pagina bezoekt, wordt een postback geactiveerd en wordt de FormView ItemCommand 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. U begrijpt echter dat de ItemCommand gebeurtenis telkens wordt geactiveerd wanneer een Button-, LinkButton- of ImageButton-webbesturingselement 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 de Button-webcontrole CommandName instellen op een bepaalde 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 Discontinue All Products Button CommandName in op DiscontinueProducts.

Ten slotte gebruiken we een bevestigingsdialoogvenster aan de clientzijde om ervoor te zorgen dat de gebruiker de producten van de geselecteerde leverancier echt wil stopzetten. Zoals we zagen in de Toevoegen van Client-Side Bevestiging bij het Verwijderen handleiding, kan dit worden gedaan met een beetje JavaScript. Stel met name de eigenschap van Button Web Controls OnClientClick 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 gebeurtenis-handler voor de FormView-gebeurtenis ItemCommand . 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 Sub Suppliers_ItemCommand(sender As Object, e As FormViewCommandEventArgs) _
    Handles Suppliers.ItemCommand
    If e.CommandName.CompareTo("DiscontinueProducts") = 0 Then
        ' The "Discontinue All Products" Button was clicked.
        ' Invoke the ProductsBLL.DiscontinueAllProductsForSupplier(supplierID) method
        ' First, get the SupplierID selected in the FormView
        Dim supplierID As Integer = CType(Suppliers.SelectedValue, Integer)
        ' Next, create an instance of the ProductsBLL class
        Dim productInfo As New ProductsBLL()
        ' Finally, invoke the DiscontinueAllProductsForSupplier(supplierID) method
        productInfo.DiscontinueAllProductsForSupplier(supplierID)
    End If
End Sub

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

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 er een postback wordt uitgevoerd waarin de FormView-gebeurtenis ItemCommand 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 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. Als u dit wilt doen, roept u de methode GridView DataBind() onmiddellijk aan nadat u de DiscontinueAllProductsForSupplier(supplierID) methode hebt aangeroepen.

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 leveranciers dienovereenkomstig bijgewerkt (klik om de volledige afbeelding weer te geven)

Stap 6: Een UpdateProduct Overload 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 overbelasting verschillen we enigszins van deze standaard en geven we in plaats daarvan het product ProductID door en het percentage waarmee de UnitPrice (in tegenstelling tot het doorgeven van de nieuwe, aangepaste UnitPrice zelf) moet worden aangepast. Deze aanpak vereenvoudigt de code die we moeten schrijven in de ASP.NET paginacode-achterklasse, omdat we niet de moeite hoeven te doen met het bepalen van de huidige product s UnitPrice.

De UpdateProduct overbelasting voor deze zelfstudie wordt hieronder weergegeven:

Public Function UpdateProduct _
    (unitPriceAdjustmentPercentage As Decimal, productID As Integer) As Boolean
    Dim products As Northwind.ProductsDataTable = Adapter.GetProductByProductID(productID)
    If products.Count = 0 Then
        ' no matching record found, return false
        Return False
    End If
    Dim product As Northwind.ProductsRow = products(0)
    ' Adjust the UnitPrice by the specified percentage (if it's not NULL)
    If Not product.IsUnitPriceNull() Then
        product.UnitPrice *= unitPriceAdjustmentPercentage
    End If
    ' Update the product record
    Dim rowsAffected As Integer = Adapter.Update(product)
    ' Return true if precisely one row was updated, otherwise false
    Return rowsAffected = 1
End Function

Deze overbelasting haalt informatie over het opgegeven product op via de DAL-methode GetProductByProductID(productID) . Vervolgens wordt gecontroleerd of aan de product-s UnitPrice een databasewaarde NULL is toegewezen. Als dat zo is, blijft de prijs ongewijzigd. Als er echter een andere waarde dan NULLUnitPrice is, werkt de methode het productUnitPrice bij 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 FormView wordt er bij het klikken op een van de knoppen binnen de rasterweergave, waaronder de knoppen Bewerken of Verwijderen, sorteerkoppen, enzovoort, een terugkoppeling veroorzaakt en de GridView-RowCommand gebeurtenis opgewekt.

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.

Laten we 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' vanuit de GridView's smart tag, 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 GridView-gebeurtenis RowCommand . Deze eventhandler, indien geactiveerd omdat op de knoppen Prijs +10% of Prijs -10% is geklikt, moet de rij bepalen waarvoor de knop is ingedrukt en vervolgens de ProductID klassemethode ProductsBLL aanroepen, waarbij de juiste UpdateProduct percentageaanpassing wordt doorgegeven, samen met de UnitPrice. Met de volgende code worden deze taken uitgevoerd:

Protected Sub SuppliersProducts_RowCommand _
    (sender As Object, e As GridViewCommandEventArgs) _
        Handles SuppliersProducts.RowCommand
    If e.CommandName.CompareTo("IncreasePrice") = 0 OrElse _
       e.CommandName.CompareTo("DecreasePrice") = 0 Then
        ' The Increase Price or Decrease Price Button has been clicked
        ' Determine the ID of the product whose price was adjusted
        Dim productID As Integer = Convert.ToInt32( _
            SuppliersProducts.DataKeys(Convert.ToInt32(e.CommandArgument)).Value)
        ' Determine how much to adjust the price
        Dim percentageAdjust As Decimal
        If e.CommandName.CompareTo("IncreasePrice") = 0 Then
            percentageAdjust = 1.1
        Else
            percentageAdjust = 0.9
        End If
        ' Adjust the price
        Dim productInfo As New ProductsBLL()
        productInfo.UpdateProduct(percentageAdjust, productID)
    End If
End Sub

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

ButtonField geeft automatisch de rowIndex van de rij door waarop de knop is geklikt via de e.CommandArgument parameter. 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 zoals bij de Button om Alle Producten Stoppen, wordt de GridView, indien u de weergavestatus van de GridView hebt uitgeschakeld, bij elke terugkoppeling opnieuw verbonden met de onderliggende gegevensbron en daarom onmiddellijk bijgewerkt om een prijswijziging weer te geven die optreedt bij 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. Als u dit wilt doen, roept u de methode GridView DataBind() onmiddellijk aan nadat u de UpdateProduct methode hebt aangeroepen.

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 een BoundField veroorzaken deze knoppen, wanneer erop wordt geklikt, een postback, waardoor het GridView-evenement RowCommand wordt gegenereerd. Wanneer u echter knoppen toevoegt in een TemplateField, wordt de Knop s 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 Knop CommandArgument handmatig instellen in de declaratieve syntaxis in het TemplateField, met behulp van code zoals:
<asp:Button runat="server" ... CommandArgument='<%# CType(Container, GridViewRow).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.

Vorig

  • Last updated on