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

av Scott Mitchell

Ladda ned PDF

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 visar en 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 produktens UnitPrice med 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, ska vi först ta en stund för att skapa de ASP.NET-sidor 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

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

Precis som i de andra mapparna kommer Default.aspx i CustomButtons-mappen att lista självstudierna i dess avsnitt. 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 redigering, infogning och borttagning av handledningar.

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

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

Nu ska vi 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ående. 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 den här nya ObjectDataSource så att den hämtar data från SuppliersBLL-klassens GetSuppliers()-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 klassens GetSuppliers() metod (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 productsBLL-klassens GetProductsBySupplierID(supplierID) metod (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 klassens GetProductsBySupplierID(supplierID) metod (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. Nu ska vi trimma ned det här 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 vi klickar upphör med alla leverantörens produkter 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 Du klickar på Knappen för FormView anropar vi den här metoden i affärslogiklagret och skickar in den valda leverantörens 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 guidsidan dig om namnet på den nya metoden använder 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 int DiscontinueAllProductsForSupplier(int supplierID)
{
    return Adapter.DiscontinueAllProductsForSupplier(supplierID);
}

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 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 är klar ä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 FormViews ItemTemplate. Nu ska vi 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 FormViews smarta tagg (se bild 15) eller direkt via den deklarativa syntaxen.

Bild 15: Lägg till webbkontrollen Avbryt alla produkter i FormView ItemTemplate (Klicka om du vill visa en bild i full storlek)

När en användare som besöker sidan klickar på knappen, utlöses ett återanrop och FormViews ItemCommand händelse 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 egenskapen för knappkontrollen i webbläsaren till något 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 Avbryt alla produkter på CommandName 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 OnClientClick för knappwebbkontrollen 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 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);
    }
}

Observera att SupplierID den nuvarande valda leverantören i FormView kan nås med FormView's SelectedValue egenskap. Egenskapen SelectedValue returnerar det första datanyckelvärdet för posten som visas i FormView. Egenskapen DataKeyNames i FormView, som anger de datafält varifrån datanyckelvärdena hämtas, angavs automatiskt till SupplierID av Visual Studio när ObjectDataSource bands 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 dialogrutan bekräfta på klientsidan fortsätter formuläröverföringen, vilket orsakar en postback där Händelsen i FormView ItemCommand 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: Skapa en UppdateraProdukt-överlagring i affärslogiklagret för att justera priset på en produkt

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 avviker vi något från den här standarden och skickar i stället in produktens ProductID och procentandelen för att justera UnitPrice (i stället för att mata in den nya, justerade UnitPrice). 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 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;
}

Den här överlagringen hämtar information om den angivna produkten via DAL-metoden GetProductByProductID(productID) . Den kontrollerar sedan om produktens UnitPrice har fått ett databasvärde NULL tilldelat. 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. På samma sätt som i FormView, när du klickar på valfri knapp inom GridView-pageringsknapparna, redigerings- eller borttagningsknappar, sorteringsknappar och så vidare, sker en postback och utlöser GridViewRowCommand-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.

Nu ska vi lägga 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.

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 ButtonFields ButtonType egenskap. 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.

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

För att fastställa ProductID för raden vars knapp Pris +10% eller Pris -10% 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 GridView-DataKeyNames-egenskapen hade angetts till ProductID av Visual Studio när ObjectDataSource associerades med GridView, tillhandahåller DataKeys(rowIndex).ValueProductID för den 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 Avsluta alla produkter, om du har inaktiverat GridViews tillståndsvy, återställs GridView till det underliggande datalagret vid varje postback och uppdateras därför omedelbart för att återspegla en prisändring som sker 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 generera ett återanrop, vilket utlöser GridView-händelsen RowCommand. När du lägger till knappar i ett TemplateField anges dock inte knappens 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 knappens CommandArgument egenskap i dess deklarativa syntax i TemplateField med hjälp av kod som:
<asp:Button runat="server" ... CommandArgument='<%# ((GridViewRow) Container).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.

Nästa