Lägga till och svara på knappar i en GridView (VB)

I den här självstudien ska vi titta på hur du lägger till anpassade knappar, både i en mall och i fälten i en GridView- eller DetailsView-kontroll. I synnerhet skapar vi ett gränssnitt som har en FormView som gör att användaren kan bläddra bland leverantörerna.

Inledning

Även om många rapporteringsscenarier omfattar skrivskyddad åtkomst till rapportdata är det inte ovanligt att rapporter inkluderar möjligheten att utföra åtgärder baserat på de data som visas. Vanligtvis handlade det om att lägga till en knapp-, LinkButton- eller ImageButton-webbkontroll med varje post som visas i rapporten som, när den klickas, orsakar en postback och anropar viss kod på serversidan. Det vanligaste exemplet är att redigera och ta bort data på post-för-post-basis. Som vi såg när vi började med självstudiekursen Infoga, Uppdatera och ta bort data är redigering och borttagning så vanligt att kontrollerna GridView, DetailsView och FormView kan stödja sådana funktioner utan att behöva skriva en enda kodrad.

Förutom knapparna Redigera och Ta bort kan kontrollerna GridView, DetailsView och FormView även innehålla Knappar, LinkButtons eller ImageButtons som vid klickning utför viss anpassad logik på serversidan. I den här självstudien ska vi titta på hur du lägger till anpassade knappar, både i en mall och i fälten i en GridView- eller DetailsView-kontroll. I synnerhet skapar vi ett gränssnitt som har en FormView som gör att användaren kan bläddra bland leverantörerna. För en viss leverantör visar FormView information om leverantören tillsammans med en knappwebbkontroll som, om den klickas, markerar alla deras associerade produkter som utgångna. Dessutom listar ett GridView de produkter som tillhandahålls av den valda leverantören, med varje rad som innehåller knapparna Öka pris och Rabattpris som, om de klickas, höjer eller minskar produkten med UnitPrice 10% (se bild 1).

Bild 1: Både FormView och GridView innehåller knappar som utför anpassade åtgärder (klicka om du vill visa en bild i full storlek)

Steg 1: Lägga till webbsidor för knappguiden

Innan vi tittar på hur du lägger till en anpassad knapp, låt oss först ta en stund att skapa ASP.NET-sidorna i vårt webbplatsprojekt som vi behöver för den här handledningen. Börja med att lägga till en ny mapp med namnet CustomButtons. Lägg sedan till följande två ASP.NET sidor i mappen och se till att associera varje sida med Site.master huvudsidan:

Default.aspx
CustomButtons.aspx

Lägg till ASP.NET-sidorna för de anpassade Buttons-Related-handledningarna

Bild 2: Lägg till ASP.NET-sidorna för anpassade Buttons-Related-självstudier

Precis som i de andra mapparna, kommer självstudierna i Default.aspx-mappen i CustomButtons-avsnittet att listas. Kom ihåg att SectionLevelTutorialListing.ascx användarkontrollen innehåller den här funktionen. Lägg därför till den här användarkontrollen genom att Default.aspx dra den från Solution Explorer till sidans designvy.

Bild 3: Lägg till SectionLevelTutorialListing.ascx användarkontrollen Default.aspx i (Klicka om du vill visa en bild i full storlek)

Slutligen lägger du till sidorna som poster i Web.sitemap filen. Lägg till följande markering efter sidsortering och 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>

Efter att du har uppdaterat Web.sitemap, ta en stund att besöka självstudiewebbplatsen via en webbläsare. Menyn till vänster innehåller nu alternativ för att redigera, infoga och ta bort guider.

Webbplatskartan innehåller nu posten för självstudiekursen för anpassade knappar

Bild 4: Webbplatskartan innehåller nu posten för självstudie för anpassade knappar

Steg 2: Lägga till en FormView som listar leverantörerna

Låt oss komma igång med den här självstudien genom att lägga till FormView som visar en lista över leverantörerna. Som beskrivs i introduktionen gör denna FormView det möjligt för användaren att bläddra igenom leverantörerna och visa de produkter som tillhandahålls av leverantören i en GridView. Dessutom innehåller denna FormView en knapp som, när den klickas, markerar alla leverantörens produkter som utgångna. Innan vi börjar med att lägga till den anpassade knappen i FormView ska vi först skapa FormView så att den visar leverantörsinformationen.

Börja med att öppna sidan CustomButtons.aspx i CustomButtons mappen. Lägg till en FormView på sidan genom att dra den från verktygslådan till designern och ange dess ID egenskap till Suppliers. Från Den smarta Taggen i FormView väljer du att skapa en ny ObjectDataSource med namnet SuppliersDataSource.

Bild 5: Skapa en ny ObjectDataSource med namnet SuppliersDataSource (Klicka om du vill visa en bild i full storlek)

Konfigurera denna nya ObjectDataSource så att den utför en sökning med klassens SuppliersBLLGetSuppliers()-metod (se bild 6). Eftersom den här FormView inte tillhandahåller något gränssnitt för att uppdatera leverantörsinformationen väljer du alternativet (Ingen) i listrutan på fliken UPPDATERA.

Bild 6: Konfigurera datakällan så att den SuppliersBLL använder klassmetoden GetSuppliers() (Klicka om du vill visa en bild i full storlek)

När du har konfigurerat ObjectDataSource genererar Visual Studio en InsertItemTemplate, EditItemTemplateoch ItemTemplate för FormView. InsertItemTemplate Ta bort och EditItemTemplate ändra ItemTemplate så att den bara visar leverantörens företagsnamn och telefonnummer. Slutligen aktiverar du stöd för växling för FormView genom att markera kryssrutan Aktivera växling från dess smarta tagg (eller genom att ange dess AllowPaging egenskap till True). När dessa ändringar har gjorts bör sidans deklarativa markering se ut ungefär så här:

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

Bild 7 visar sidan CustomButtons.aspx när den visas via en webbläsare.

Bild 7: Formulärvyn visar fälten CompanyName och Phone från den leverantör som valts (klicka för att visa en bild i full storlek)

Steg 3: Lägga till en GridView som visar den valda leverantörens produkter

Innan vi lägger till knappen Avbryt alla produkter i FormView-mallen ska vi först lägga till en GridView under FormView som visar de produkter som tillhandahålls av den valda leverantören. Det gör du genom att lägga till en GridView på sidan, ange dess ID egenskap till SuppliersProductsoch lägga till en ny ObjectDataSource med namnet SuppliersProductsDataSource.

Bild 8: Skapa en ny ObjectDataSource med namnet SuppliersProductsDataSource (Klicka om du vill visa en bild i full storlek)

Konfigurera den här ObjectDataSource för att använda metoden ProductsBLL-klass s GetProductsBySupplierID(supplierID) (se bild 9). Även om det här GridView tillåter att en produkts pris justeras, kommer det inte att använda de inbyggda redigerings- eller borttagningsfunktionerna från GridView. Därför kan vi ange listrutan till (Ingen) för flikarna Update, INSERT och DELETE i ObjectDataSource.

Bild 9: Konfigurera datakällan så att den ProductsBLL använder klassmetoden GetProductsBySupplierID(supplierID) (Klicka om du vill visa en bild i full storlek)

GetProductsBySupplierID(supplierID) Eftersom metoden accepterar en indataparameter frågar guiden ObjectDataSource oss om källan till det här parametervärdet. Om du vill skicka in SupplierID värdet från FormView anger du listrutan Parameterkälla till Kontroll och listrutan ControlID till Suppliers (ID för FormView som skapades i steg 2).

Bild 10: Anger att parametern supplierID ska komma från SuppliersFormView-kontrollen (klicka om du vill visa en bild i full storlek)

När du har slutfört guiden ObjectDataSource innehåller GridView ett BoundField- eller CheckBoxField-fält för var och en av produktens datafält. Låt oss trimma ned detta för att visa bara ProductName BoundFields och UnitPriceDiscontinued CheckBoxField. Dessutom ska vi formatera UnitPrice BoundField så att texten formateras som en valuta. GridView och SuppliersProductsDataSource ObjectDataSources deklarativa markering bör se ut ungefär så här:

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

Nu visar vår handledning en detaljerad rapport som gör att användaren kan välja en leverantör från FormView-fältet högst upp och se de produkter som visas av den leverantören via GridView längst ned. Bild 11 visar en skärmbild av den här sidan när du väljer Tokyo Traders-leverantören från FormView.

Bild 11: Den valda leverantörens produkter visas i GridView (klicka om du vill visa en bild i full storlek)

Steg 4: Skapa DAL- och BLL-metoder för att avbryta alla produkter för en leverantör

Innan vi kan lägga till en knapp i FormView som när du klickar upphör med alla leverantörsprodukter måste vi först lägga till en metod i både DAL och BLL som utför den här åtgärden. I synnerhet kommer den här metoden att namnges DiscontinueAllProductsForSupplier(supplierID). När knappen FormView klickas anropar vi den här metoden i affärslogiklagret och skickar in de valda leverantörerna SupplierID. BLL-filen anropar sedan motsvarande Data Access Layer-metod, som utfärdar en UPDATE instruktion till databasen som upphör med den angivna leverantörens produkter.

Som vi har gjort i våra tidigare självstudier använder vi en bottom-up-metod som börjar med att skapa DAL-metoden, sedan BLL-metoden och slutligen implementera funktionerna på ASP.NET-sidan. Öppna Den Northwind.xsd typerade datamängden App_Code/DAL i mappen och lägg till en ny metod i ProductsTableAdapter (högerklicka på ProductsTableAdapter och välj Lägg till fråga). Om du gör det visas guiden TableAdapter Query Configuration, som vägleder oss genom processen att lägga till den nya metoden. Börja med att ange att dal-metoden använder en ad hoc SQL-instruktion.

Bild 12: Skapa DAL-metoden med hjälp av en Ad-Hoc SQL-instruktion (Klicka om du vill visa en bild i full storlek)

Därefter frågar guiden oss om vilken typ av fråga som ska skapas. DiscontinueAllProductsForSupplier(supplierID) Eftersom metoden måste uppdatera databastabellen Products måste du ange Discontinued fältet till 1 för alla produkter som tillhandahålls av den angivna supplierID, och vi måste skapa en fråga som uppdaterar data.

Bild 13: Välj FRÅGETYP FÖR UPPDATERING (Klicka om du vill visa en bild i full storlek)

Nästa guideskärm innehåller TableAdapters befintliga UPDATE instruktion, som uppdaterar vart och ett av fälten som definierats i Products DataTable. Ersätt den här frågetexten med följande instruktion:

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

När du har angett den här frågan och klickat på Nästa, ber den sista guideskärmen dig ange det nya metodens namn genom att använda DiscontinueAllProductsForSupplier. Slutför guiden genom att klicka på knappen Slutför. När du återvänder till DataSet Designer bör du se en ny metod i namnet ProductsTableAdapterDiscontinueAllProductsForSupplier(@SupplierID).

Ge namn åt den nya DAL-metoden DiscontinueAllProductsForSupplier

Bild 14: Namnge den nya DAL-metoden DiscontinueAllProductsForSupplier (Klicka om du vill visa en bild i full storlek)

Med metoden DiscontinueAllProductsForSupplier(supplierID) skapas i dataåtkomstlaget är vår nästa uppgift att skapa metoden DiscontinueAllProductsForSupplier(supplierID) i affärslogiklagret. Det gör du genom att ProductsBLL öppna klassfilen och lägga till följande:

Public Function DiscontinueAllProductsForSupplier(supplierID As Integer) As Integer
    Return Adapter.DiscontinueAllProductsForSupplier(supplierID)
End Function

Den här metoden anropar helt enkelt metoden DiscontinueAllProductsForSupplier(supplierID) i DAL och skickar det angivna supplierID parametervärdet. Om det fanns några affärsregler som endast tillät att en leverantörs produkter upphörde under vissa omständigheter, bör dessa regler införas här, i BLL.

Anmärkning

UpdateProduct Till skillnad från överlagringarna i ProductsBLL klassen innehåller metodsignaturen DiscontinueAllProductsForSupplier(supplierID)DataObjectMethodAttribute inte attributet (<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, Boolean)>). Detta utesluter DiscontinueAllProductsForSupplier(supplierID) metoden från listrutan Konfigurera datakälla i Guiden Konfigurera datakälla i ObjectDataSource på fliken UPPDATERA. Jag har utelämnat det här attributet eftersom vi anropar DiscontinueAllProductsForSupplier(supplierID) metoden direkt från en händelsehanterare på vår ASP.NET-sida.

Steg 5: Lägga till knappen Avbryt alla produkter i FormView

DiscontinueAllProductsForSupplier(supplierID) När metoden i BLL och DAL har slutförts är det sista steget för att lägga till möjligheten att avbryta alla produkter för den valda leverantören att lägga till en knappwebbkontroll i FormView s ItemTemplate. Låt oss lägga till en sådan knapp under leverantörens telefonnummer med knapptexten, Avbryt alla produkter och ett ID egenskapsvärde på DiscontinueAllProductsForSupplier. Du kan lägga till den här knappwebbkontrollen via designern genom att klicka på länken Redigera mallar i den smarta taggen FormView (se bild 15) eller direkt via den deklarativa syntaxen.

Bild 15: Lägg till en knappkontroll för att avbryta alla produkter till FormView ItemTemplate (Klicka för att visa bild i full storlek)

När knappen klickas av en användare som besöker sidan sker ett återanrop och FormViewItemCommand-händelsen utlöses. Om du vill köra anpassad kod som svar på den här knappen som klickas kan vi skapa en händelsehanterare för den här händelsen. Förstå dock att händelsen ItemCommand utlöses när någon Knapp-, LinkButton- eller ImageButton-webbkontroll klickas i FormView. Det innebär att när användaren flyttas från en sida till en annan i FormView utlöses händelsen, ItemCommand samma sak när användaren klickar på Ny, Redigera eller Ta bort i en FormView som stöder infogning, uppdatering eller borttagning.

Eftersom utlöses ItemCommand oavsett vilken knapp som klickas behöver vi i händelsehanteraren ett sätt att avgöra om knappen Avbryt alla produkter har klickats på eller om det var någon annan knapp. För att åstadkomma detta kan vi ange Knapp-webbkontrollens egenskap till ett visst identifieringsvärde CommandName. När knappen klickas skickas det här CommandName värdet till ItemCommand händelsehanteraren, vilket gör att vi kan avgöra om knappen Avbryt alla produkter var knappen som klickades. Ställ in egenskapen för knappen Avbryt alla produkter CommandName till AvbrytProdukter.

Slutligen ska vi använda en bekräftelsedialogruta på klientsidan för att säkerställa att användaren verkligen vill avbryta den valda leverantörens produkter. Som vi såg i handledningen Lägga till Client-Side-bekräftelse vid borttagning, kan detta åstadkommas med lite JavaScript. I synnerhet anger du egenskapen för knappwebbkontrollens OnClientClick till return confirm('This will mark _all_ of this supplier\'s products as discontinued. Are you certain you want to do this?');

När du har gjort dessa ändringar bör FormViews deklarativa syntax se ut så här:

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

Skapa sedan en händelsehanterare för FormView-händelsen ItemCommand . I den här händelsehanteraren måste vi först avgöra om knappen Avbryt alla produkter har klickats på. I så fall vill vi skapa en instans av ProductsBLL klassen och anropa dess DiscontinueAllProductsForSupplier(supplierID) metod och skicka in den SupplierID valda FormView:

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

Observera att SupplierID för den aktuellt valda leverantören i FormView kan nås med egenskapen FormViewsSelectedValue. Egenskapen SelectedValue returnerar det första datanyckelvärdet för posten som visas i FormView. Egenskapen FormView, som anger de datafält som datanyckelvärdena hämtas från, ställdes automatiskt in på DataKeyNames av Visual Studio när ObjectDataSource band till FormView i steg 2.

ItemCommand När händelsehanteraren har skapats tar du en stund att testa sidan. Bläddra till Cooperativa de Quesos "Las Cabras" leverantör (det är den femte leverantören i FormView för mig). Denna leverantör tillhandahåller två produkter, Queso Cabrales och Queso Manchego La Pastora, som båda inte upphör.

Tänk dig att Cooperativa de Quesos "Las Cabras" har gått i konkurs och att dess produkter därför ska upphöra. Klicka på knappen Avbryt alla produkter. Då visas dialogrutan bekräfta på klientsidan (se bild 16).

Bild 16: Cooperativa de Quesos Las Cabras levererar två aktiva produkter (Klicka om du vill visa en bild i full storlek)

Om du klickar på OK i bekräftelsedialogrutan på klientsidan fortsätter formuläret att skickas, vilket orsakar en postback där FormViews ItemCommand-händelse utlöses. Händelsehanteraren som vi skapade körs sedan, anropar DiscontinueAllProductsForSupplier(supplierID) metoden och avbryter både Queso Cabrales- och Queso Manchego La Pastora-produkterna.

Om du har inaktiverat GridView-visningstillståndet återställs GridView till det underliggande datalagret vid varje postback och uppdateras därför omedelbart för att återspegla att dessa två produkter nu har upphört (se bild 17). Om du däremot inte har inaktiverat visningstillståndet i GridView måste du manuellt koppla om data till GridView när du har gjort den här ändringen. Det gör du genom att göra ett anrop till GridView-metoden omedelbart efter att metoden anropats DataBind()DiscontinueAllProductsForSupplier(supplierID) .

Bild 17: När du har klickat på knappen Avbryt alla produkter uppdateras leverantörens produkter i enlighet med detta (klicka om du vill visa en bild i full storlek)

Steg 6: Att skapa en UpdateProduct-overbelastning i affärslogik-lagret för att justera produktens pris.

Precis som med knappen Avbryt alla produkter i FormView, för att lägga till knappar för att öka och minska priset för en produkt i GridView måste vi först lägga till lämpliga dataåtkomstskikt och affärslogiklagermetoder. Eftersom vi redan har en metod som uppdaterar en enskild produktrad i DAL kan vi tillhandahålla sådana funktioner genom att skapa en ny överbelastning för UpdateProduct metoden i BLL.

Våra tidigare UpdateProduct överbelastningar har tagit emot någon kombination av produktfält som skalära indatavärden och har sedan uppdaterat endast dessa fält för den angivna produkten. För den här överbelastningen kommer vi att variera något från den här standarden och i stället skicka in produktens ProductID och procentandelen för att justera UnitPrice (i stället för att skicka in den nya, justerade UnitPrice själv). Den här metoden förenklar koden som vi behöver skriva i ASP.NET-sidans kod bakom-klassen, eftersom vi inte behöver bry oss om att fastställa den aktuella produktens UnitPrice.

Överbelastningen UpdateProduct för den här självstudien visas nedan:

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

Denna överlagring hämtar information om den angivna produkten via DALs metod GetProductByProductID(productID). Den kontrollerar sedan om produkten har tilldelats UnitPrice ett databasvärde NULL . I så fall lämnas priset oförändrat. Om det däremot finns ett icke-värdeNULLUnitPrice uppdaterar metoden produktens UnitPrice med den angivna procenten (unitPriceAdjustmentPercent).

Steg 7: Lägga till knapparna Öka och minska i GridView

GridView (och DetailsView) består båda av en samling fält. Förutom BoundFields, CheckBoxFields och TemplateFields innehåller ASP.NET ButtonField, som, som namnet antyder, renderas som en kolumn med en Knapp, LinkButton eller ImageButton för varje rad. Precis som i FormView orsakar klick på valfri knapp i GridView-sidväxlingsknappar, Redigera- eller Ta bort-knappar, sorteringsknappar och så vidare en postback och genererar GridView--händelsen.

ButtonField har en CommandName egenskap som tilldelar det angivna värdet till egenskaperna hos var och en av dess knappar CommandName. Precis som med FormView CommandName används värdet av RowCommand händelsehanteraren för att avgöra vilken knapp som klickades.

Vi lägger till två nya ButtonFields i GridView, en med knapptexten Pris +10% och den andra med texten Pris -10%. Om du vill lägga till dessa ButtonFields klickar du på länken Redigera kolumner från GridViews smarta tagg, väljer fälttypen ButtonField i listan längst upp till vänster och klickar på knappen Lägg till.

Lägg till två knappfält i GridView

Bild 18: Lägg till två Knappfält i GridView

Flytta de två ButtonFields så att de visas som de två första GridView-fälten. Nästa, ange Text egenskaperna för dessa två knappfält till Pris +10% och Pris -10% och CommandName egenskaperna till ÖkaPris respektive MinskaPris. Som standard renderar buttonfield sin kolumn med knappar som LinkButtons. Detta kan dock ändras via egenskapen ButtonFieldButtonType. Låt oss låta dessa två ButtonFields återges som vanliga tryckknappar; Ange därför egenskapen ButtonType till Button. Bild 19 visar dialogrutan Fält när dessa ändringar har gjorts. följande är GridViews deklarativa markering.

Konfigurera egenskaperna ButtonFields Text, CommandName och ButtonType

Bild 19: Konfigurera ButtonFields Text, CommandNameoch ButtonType egenskaper

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

När dessa ButtonFields har skapats är det sista steget att skapa en händelsehanterare för GridView-händelsen RowCommand . Om den här händelsehanteraren utlöses på grund av att knapparna Pris +10% eller Pris -10% har klickats på måste du fastställa ProductID för raden vars knapp klickades och sedan anropa ProductsBLL klassens UpdateProduct -metod och skicka lämplig UnitPrice procentjustering tillsammans med ProductID. Följande kod utför följande uppgifter:

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

För att fastställa ProductID för raden vars pris +10% eller pris -10%-knappen klickades, måste vi konsultera GridView-samlingen DataKeys . Den här samlingen innehåller värdena för de fält som anges i DataKeyNames egenskapen för varje GridView-rad. Eftersom GridViews DataKeyNames-egenskap har ställts in på ProductID av Visual Studio när ObjectDataSource var bunden till GridView, tillhandahåller DataKeys(rowIndex).ValueProductID för det angivna rowIndex.

ButtonField överför automatiskt rowIndex för den rad vars knapp blev klickad via parametern e.CommandArgument. Därför, för att fastställa ProductID för raden vars pris +10% eller pris -10%-knappen klickades på, använder vi: Convert.ToInt32(SuppliersProducts.DataKeys(Convert.ToInt32(e.CommandArgument)).Value).

Precis som med knappen Avbryt alla produkter, om du har inaktiverat GridView-visningstillståndet, återställs GridView till det underliggande datalagret vid varje postback och uppdateras därför omedelbart för att återspegla en prisändring som inträffar när du klickar på någon av knapparna. Om du däremot inte har inaktiverat visningstillståndet i GridView måste du manuellt koppla om data till GridView när du har gjort den här ändringen. Det gör du genom att göra ett anrop till GridView-metoden omedelbart efter att metoden anropats DataBind()UpdateProduct .

Bild 20 visar sidan när man visar de produkter som tillhandahålls av Farmor Kellys Homestead. Bild 21 visar resultatet efter att knappen Pris +10% har klickats två gånger för Mormors Boysenberry Spread och knappen Price -10% en gång för Northwoods Cranberry Sauce.

Bild 20: GridView innehåller pris +10% och pris -10% knappar (klicka om du vill visa en bild i full storlek)

Bild 21: Priserna för den första och tredje produkten har uppdaterats via pris +10% och pris -10% knappar (klicka om du vill visa en bild i full storlek)

Anmärkning

GridView (och DetailsView) kan också ha knappar, länkknappar eller imagebuttons tillagda i sina TemplateFields. Precis som med BoundField, kommer dessa knappar, när de klickas, att framkalla en postback, som utlöser GridView-händelsen RowCommand. När du lägger till knappar i ett TemplateField anges dock inte knapperna CommandArgument automatiskt till indexet för raden som när du använder ButtonFields. Om du behöver fastställa radindexet för knappen som klickades i RowCommand händelsehanteraren måste du manuellt ange egenskapen Button CommandArgument i dess deklarativa syntax i TemplateField med hjälp av kod som:
<asp:Button runat="server" ... CommandArgument='<%# CType(Container, GridViewRow).RowIndex %>' />.

Sammanfattning

Kontrollerna GridView, DetailsView och FormView kan innehålla knappar, länkknappar eller ImageButtons. När sådana knappar klickas orsakar de ett återanrop och genererar ItemCommand-händelsen i FormView- och DetailsView-kontrollen och RowCommand-händelsen i GridView. Dessa datawebbkontroller har inbyggda funktioner för att hantera vanliga kommandorelaterade åtgärder, till exempel att ta bort eller redigera poster. Men vi kan också använda knappar som när du klickar svarar med att köra vår egen anpassade kod.

För att åstadkomma detta måste vi skapa en händelsehanterare för ItemCommand händelsen eller RowCommand . I den här händelsehanteraren kontrollerar vi först det inkommande CommandName värdet för att avgöra vilken knapp som klickades och vidtar sedan lämpliga anpassade åtgärder. I den här handledningen såg vi hur du använder knappar och ButtonFields för att avsluta alla produkter för en specificerad leverantör eller öka eller sänka priset på en viss produkt med 10%.

Lycka till med programmerandet!

Om författaren

Scott Mitchell, författare till sju ASP/ASP.NET-böcker och grundare av 4GuysFromRolla.com, har arbetat med Microsofts webbtekniker sedan 1998. Scott arbetar som oberoende konsult, tränare och författare. Hans senaste bok är Sams Teach Yourself ASP.NET 2.0 på 24 timmar. Han kan nås på mitchell@4GuysFromRolla.com.

Föregående

Feedback

Var den här sidan till hjälp?

Last updated on 2025-04-30