Gombok hozzáadása és megválaszolása GridView-hoz (VB)

által Scott Mitchell

PDF letöltése

Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan adhat hozzá egyéni gombokat egy sablonhoz és egy GridView- vagy DetailsView-vezérlő mezőihez. Létrehozunk egy felületet, amely egy FormView-val rendelkezik, amely lehetővé teszi a felhasználó számára a beszállítókon keresztüli lapozást.

Bevezetés

Bár számos jelentéskészítési forgatókönyv csak olvasási hozzáféréssel rendelkezik a jelentésadatokhoz, nem ritka, hogy a jelentések a megjelenített adatokon alapuló műveletek elvégzésére is képesek. Ez általában egy Gomb, LinkButton vagy ImageButton web vezérlőelem hozzáadását jelentette a jelentésben megjelenő összes rekordtal, amely kattintáskor visszavételt okoz, és meghív néhány kiszolgálóoldali kódot. A leggyakoribb példa az adatok rekordonkénti szerkesztése és törlése. Valójában, mint láttuk, az adatok beszúrásának, frissítésének és törlésének áttekintésével kezdődően a szerkesztés és a törlés olyan gyakori, hogy a GridView, a DetailsView és a FormView vezérlők egyetlen kódsor írása nélkül is támogathatják az ilyen funkciókat.

A Szerkesztés és törlés gomb mellett a GridView, a DetailsView és a FormView vezérlők olyan gombokat, LinkButtonokat vagy ImageButtonokat is tartalmazhatnak, amelyek kattintáskor egyéni kiszolgálóoldali logikát hajtanak végre. Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan adhat hozzá egyéni gombokat egy sablonhoz és egy GridView- vagy DetailsView-vezérlő mezőihez. Létrehozunk egy felületet, amely egy FormView-val rendelkezik, amely lehetővé teszi a felhasználó számára a beszállítókon keresztüli lapozást. Egy adott szállító esetében a FormView megjeleníti a szállítóra vonatkozó információkat, valamint egy gombos webvezérlőt, amely kattintás esetén az összes társított terméket megszüntetettként jelöli meg. Ezenkívül a GridView felsorolja a kiválasztott szállító által biztosított termékeket, és minden sor tartalmazza az Árnövelés és a Kedvezményes Ára gombokat, amelyek kattintás esetén 10%-val növelik vagy csökkentik a termék árát (lásd az 1. ábrát).

1. ábra: A FormView és a GridView is egyéni műveleteket végrehajtó gombokat tartalmaz (ide kattintva megtekintheti a teljes méretű képet)

1. lépés: A Gomb oktatóanyag weblapjainak hozzáadása

Mielőtt megnézzük, hogyan adhatunk hozzá egyéni gombokat, először szánjunk egy kis időt arra, hogy létrehozzuk a webhelyprojekt ASP.NET lapjait, amelyekre szükségünk lesz az oktatóanyaghoz. Első lépésként adjon hozzá egy új mappát.CustomButtons Ezután adja hozzá a következő két ASP.NET lapot a mappához, és mindenképpen társítsa az egyes lapokat a Site.master mesterlaphoz:

• Default.aspx
• CustomButtons.aspx

2. ábra: Az egyéni Buttons-Related oktatóanyagok ASP.NET lapjainak hozzáadása

A többi mappához Default.aspx hasonlóan a CustomButtons mappában is a szakasz oktatóanyagai jelennek meg. Ne feledje, hogy a SectionLevelTutorialListing.ascx Felhasználói vezérlő biztosítja ezt a funkciót. Ezért húzza ezt a felhasználói vezérlőt a Megoldáskezelőből a lap tervezési nézetébe.

3. ábra: A felhasználói vezérlő hozzáadása SectionLevelTutorialListing.ascx (Default.aspxide kattintva megtekintheti a teljes méretű képet)

Végül adja hozzá a lapokat bejegyzésként a Web.sitemap fájlhoz. Pontosabban adja hozzá a következő jelölést a lapozás és rendezés<siteMapNode> után:

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

A frissítés Web.sitemapután szánjon egy kis időt az oktatóanyagok webhelyének megtekintésére egy böngészőben. A bal oldali menü mostantól tartalmazza az oktatóanyagok szerkesztéséhez, beszúrásához és törléséhez szükséges elemeket.

4. ábra: A webhelytérkép most már tartalmazza az Egyéni gombok oktatóanyag bejegyzését

2. lépés: A szállítókat listázó FormView hozzáadása

Kezdjük el ezzel a bemutatóval a szállítókat listázó FormView hozzáadásával. A Bevezetésben leírtaknak megfelelően ez a FormView lehetővé teszi, hogy a felhasználó a szállítókon keresztül lapozza a szállítókon, és megjelenítse a szállító által a GridView-ban biztosított termékeket. Ezen kívül ez a FormView tartalmaz egy gombot, amely kattintáskor az összes szállító termékét megszüntetettként jelöli meg. Mielőtt azzal foglalkoznánk, hogy hozzáadjuk az egyéni gombot a FormView-hoz, először hozzuk létre a FormView-t, hogy megjelenítsük a szállító adatait.

Először nyissa meg a CustomButtons.aspx lapot a CustomButtons mappában. Adjon hozzá egy FormView-t a laphoz úgy, hogy az eszközkészletből a Tervezőre húzza, majd állítsa be a ID tulajdonságát Suppliers értékre. A FormView intelligens címkéje alapján hozzon létre egy új ObjectDataSource nevű SuppliersDataSourceobjektumot.

5. ábra: Új ObjectDataSource névvel ellátott SuppliersDataSource objektum létrehozása (ide kattintva megtekintheti a teljes méretű képet)

Konfigurálja ezt az új ObjectDataSource-t úgy, hogy lekérdezze az SuppliersBLL osztályból a GetSuppliers() metódust (lásd a 6. ábrát). Mivel ez a FormView nem biztosít felületet a szállítói adatok frissítéséhez, válassza a (Nincs) lehetőséget az UPDATE lap legördülő listájából.

6. ábra: Az adatforrás konfigurálása az SuppliersBLL osztály GetSuppliers() metódusának használatára (kattintson ide a teljes méretű kép megtekintéséhez)

Az ObjectDataSource konfigurálása után a Visual Studio létrehoz egy InsertItemTemplate, EditItemTemplate, és ItemTemplate a FormView-hoz. Távolítsa el a InsertItemTemplate és EditItemTemplate tageket, és módosítsa a ItemTemplate tageket úgy, hogy csak a szállító cégnevét és telefonszámát jelenítse meg. Végül kapcsolja be a lapozási támogatást a FormView-hoz az Intelligens címke Lapozás engedélyezése jelölőnégyzetének bejelölésével (vagy a AllowPaging tulajdonság True értékének beállításával). A módosítások után a lap deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

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

A 7. ábrán a CustomButtons.aspx lap látható, ha egy böngészőben tekinti meg.

7. ábra: A FormView listázza a CompanyName jelenleg kijelölt szállító mezőit és Phone mezőit (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: A kiválasztott szállító termékeit listázó GridView hozzáadása

Mielőtt hozzáadnánk a Minden termék megszüntetése gombot a FormView sablonhoz, először adjunk hozzá egy GridView-t a FormView alatt, amely felsorolja a kiválasztott szállító által biztosított termékeket. Ehhez adjon hozzá egy GridView-t a laphoz, állítsa a ID tulajdonságát SuppliersProducts értékre, és adjon hozzá egy új SuppliersProductsDataSource nevű ObjectDataSource-t.

8. ábra: Új ObjectDataSource névvel ellátott SuppliersProductsDataSource objektum létrehozása (ide kattintva megtekintheti a teljes méretű képet)

Konfigurálja ezt az ObjectDataSource-t a ProductsBLL osztály metódusának GetProductsBySupplierID(supplierID) használatára (lásd a 9. ábrát). Bár ez a GridView lehetővé teszi egy termék árának módosítását, nem fogja használni a GridView beépített szerkesztési vagy törlési funkcióit. Ezért az ObjectDataSource UPDATE, INSERT és DELETE lapjának legördülő listáját (None) (None) értékre állíthatjuk.

9. ábra: Az adatforrás konfigurálása az ProductsBLL osztály GetProductsBySupplierID(supplierID) metódusának használatára (ide kattintva megtekintheti a teljes méretű képet)

Mivel a GetProductsBySupplierID(supplierID) metódus elfogad egy bemeneti paramétert, az ObjectDataSource varázsló kéri a paraméter értékének forrását. Ha át szeretné adni az értéket a SupplierID FormView-ból, állítsa a Paraméter forrás legördülő listát a Control-ra, és a ControlID legördülő listát Suppliers-re (a 2. lépésben létrehozott FormView azonosítója).

10. ábra: Azt jelzi, hogy a supplierID paraméternek a Suppliers FormView vezérlőből kell származnia (kattintson ide a teljes méretű kép megtekintéséhez)

Az ObjectDataSource varázsló befejezése után a GridView minden egyes termék adatmezőjéhez tartalmaz majd egy BoundField vagy CheckBoxField mezőt. Formázzuk úgy az adatokat, hogy csak a ProductName és UnitPrice BoundField-ek, valamint a Discontinued CheckBoxField jelenjen meg; továbbá formázzuk úgy a UnitPrice BoundFieldet, hogy a szöveg pénznemként jelenjen meg. A GridView és az SuppliersProductsDataSource ObjectDataSource deklaratív jelölése az alábbi jelöléshez hasonlóan néz ki:

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

Ezen a ponton az oktatóanyag egy fő/részlet jelentést jelenít meg, amely lehetővé teszi a felhasználó számára, hogy kiválasztjon egy szállítót a FormView-ból a tetején, és hogy az adott szállító által biztosított termékeket az alján található GridView-on keresztül tekinthesse meg. A 11. ábrán az oldal képernyőképe látható, amikor kiválasztja a Tokyo Traders szállítóját a FormView-ból.

11. ábra: A kiválasztott szállítói termékek megjelennek a GridView-ban (ide kattintva megtekintheti a teljes méretű képet)

4. lépés: DAL- és BLL-metódusok létrehozása a szállító összes termékének megszüntetéséhez

Mielőtt hozzáadhatnánk egy gombot a FormView-hoz, amely kattintáskor megszünteti az összes szállító termékét, először hozzá kell adnunk egy metódust mind a DAL-hoz, mind a BLL-hez, amely végrehajtja ezt a műveletet. Különösen ezt a metódust nevezzük DiscontinueAllProductsForSupplier(supplierID)-nak. Amikor a FormView gombjára kattintunk, meghívjuk ezt a metódust az Üzleti logikai rétegben, és átadjuk a kiválasztott szállító SupplierID-át; a BLL ezután a megfelelő Adatelérési réteg metódust hívja meg, ami egy UPDATE utasítást ad ki az adatbázisnak, amely megszünteti a megadott szállító termékeit.

Ahogy az előző oktatóanyagainkban is tettük, egy alulról felfelé haladó megközelítést fogunk használni, kezdve a DAL metódus, majd a BLL metódus létrehozásával, majd a funkció implementálásával a ASP.NET oldalon. Nyissa meg a Northwind.xsd gépelt adathalmazt a App_Code/DAL mappában, és adjon hozzá egy új metódust a ProductsTableAdapter mappához (kattintson a jobb gombbal a lekérdezésre, és válassza a ProductsTableAdapter Lekérdezés hozzáadása parancsot). Ezzel megjelenik a TableAdapter Lekérdezéskonfiguráció varázsló, amely végigvezet az új metódus hozzáadásának folyamatán. Először is jelezzük, hogy a DAL metódus egy alkalmi SQL-utasítást fog használni.

12. ábra: A DAL metódus létrehozása alkalmi SQL-utasítás használatával (ide kattintva megtekintheti a teljes méretű képet)

Ezután a varázsló megkérdezi, hogy milyen típusú lekérdezést szeretne létrehozni. Mivel a DiscontinueAllProductsForSupplier(supplierID) metódusnak frissítenie kell az Products adatbázistáblát, és a Discontinued mezőt 1 értékre kell állítania a megadott supplierIDtermékekhez, létre kell hoznunk egy olyan lekérdezést, amely frissíti az adatokat.

13. ábra: Válassza ki az UPDATE lekérdezés típusát (kattintson ide a teljes méretű kép megtekintéséhez)

A következő varázslóképernyőn megjelenik a TableAdapter meglévő UPDATE utasítása, amely frissíti a Products DataTable-ban definiált mezőket. Cserélje le a lekérdezés szövegét a következő utasításra:

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

Miután beírta ezt a lekérdezést, és a Tovább gombra kattintott, az utolsó varázslóképernyő az új metódus nevét DiscontinueAllProductsForSupplier kéri. A varázsló befejezéséhez kattintson a Befejezés gombra. A DataSet Designerhez való visszatéréskor megjelenik egy új metódus a ProductsTableAdapter elemen belül DiscontinueAllProductsForSupplier(@SupplierID) néven.

14. ábra: Nevezze el az Új DAL metódust DiscontinueAllProductsForSupplier (kattintson ide a teljes méretű kép megtekintéséhez)

Az adatelérési DiscontinueAllProductsForSupplier(supplierID) rétegben létrehozott metódussal a következő feladatunk a metódus létrehozása az DiscontinueAllProductsForSupplier(supplierID) üzleti logikai rétegben. Ehhez nyissa meg az osztályfájlt ProductsBLL , és adja hozzá a következőket:

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

Ez a metódus egyszerűen lehívja a DiscontinueAllProductsForSupplier(supplierID) DAL metódusát a megadott supplierID paraméterérték mentén haladva. Ha voltak olyan üzleti szabályok, amelyek csak bizonyos körülmények között engedélyezték egy szállító termékeinek megszüntetését, ezeket a szabályokat itt, a BLL-ben kell alkalmazni.

Megjegyzés:

A UpdateProduct osztályban lévő túlterhelésekkel ellentétben, a ProductsBLLDiscontinueAllProductsForSupplier(supplierID) metódus szignatúrája nem tartalmazza a DataObjectMethodAttribute (<System.ComponentModel.DataObjectMethodAttribute(System.ComponentModel.DataObjectMethodType.Update, Boolean)>) attribútumot. Ez nem zárja ki a metódust az DiscontinueAllProductsForSupplier(supplierID) ObjectDataSource Adatforrás konfigurálása varázsló UPDATE lapjának legördülő listájából. Kihagytam ezt az attribútumot, mert a metódust közvetlenül egy DiscontinueAllProductsForSupplier(supplierID) eseménykezelőből hívjuk meg a ASP.NET oldalon.

5. lépés: Az Összes termék megszüntetése gomb hozzáadása a FormView-hoz

DiscontinueAllProductsForSupplier(supplierID) A BLL és a DAL metódusának befejeztével a kiválasztott szállító összes termékének megszüntetésének utolsó lépése egy gomb webvezérlő hozzáadása a FormView-khozItemTemplate. Adjunk hozzá egy olyan gombot a szállító telefonszáma alá, amelynek a gomb szövege: „Összes termék megszüntetése”, és a ID tulajdonságértéke DiscontinueAllProductsForSupplier. Ezt a gombweb vezérlőelemet a Tervezőn keresztül is hozzáadhatja, ha a FormView intelligens címkéjén a Sablonok szerkesztése hivatkozásra kattint (lásd a 15. ábrát), vagy közvetlenül a deklaratív szintaxison keresztül.

15. ábra: Az Összes termék megszüntetése gomb webvezérlőjének hozzáadása a FormView-hoz ItemTemplate (ide kattintva megtekintheti a teljes méretű képet)

Amikor egy felhasználó, aki meglátogatja az oldalt, a gombra kattint, egy visszaküldési művelet történik, és a FormView eseményeItemCommand aktiválódik. Ha egyéni kódot szeretne végrehajtani erre a gombra kattintva, létrehozhatunk egy eseménykezelőt ehhez az eseményhez. Értse meg azonban, hogy az ItemCommand esemény akkor aktiválódik, amikor egy Gomb, LinkButton vagy ImageButton webvezérlőre kattint a FormView-ban. Ez azt jelenti, hogy amikor a felhasználó egyik lapról a másikra lép a FormView-ban, az ItemCommand esemény aktiválódik; ugyanez történik, ha a felhasználó az Új, a Szerkesztés vagy a Törlés gombra kattint egy Olyan FormView-ban, amely támogatja a beszúrást, a frissítést vagy a törlést.

Mivel a ItemCommand aktiválódik függetlenül attól, hogy melyik gombra kattintunk, az eseménykezelőben meg kell határoznunk, hogy a Minden termék megszüntetése gombra kattintottunk-e, vagy valami más gombra. Ennek érdekében beállíthatjuk a Button Web control tulajdonságát CommandName valamilyen azonosító értékre. Amikor a gombra kattint, a rendszer átadja ezt CommandName az értéket az ItemCommand eseménykezelőnek, így megállapíthatjuk, hogy a Minden termék megszüntetése gombra kattintott-e. Állítsa a Minden termék megszüntetése gomb tulajdonságát CommandName a DiscontinueProducts értékre.

Végül használjunk egy ügyféloldali megerősítési párbeszédpanelt annak biztosítására, hogy a felhasználó valóban meg szeretné szüntetni a kiválasztott szállító termékeit. Amint az Client-Side megerősítés hozzáadása törléskor című oktatóanyagban láttuk, ez elvégezhető egy kis JavaScript segítségével. Különösen fontos, hogy állítsd be a Button Web vezérlő OnClientClick tulajdonságát return confirm('This will mark _all_ of this supplier\'s products as discontinued. Are you certain you want to do this?');

A módosítások elvégzése után a FormView deklaratív szintaxisának a következőképpen kell kinéznie:

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

Ezután hozzon létre egy eseménykezelőt a FormView-eseményhez ItemCommand . Ebben az eseménykezelőben először meg kell határoznunk, hogy a Minden termék megszüntetése gombra kattintott-e. Ha igen, létre szeretnénk hozni az ProductsBLL osztály egy példányát, és a(z) DiscontinueAllProductsForSupplier(supplierID) metódusát meghívjuk, átadva a kiválasztott FormView-ból a(z) SupplierID.

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

Vegye figyelembe, hogy a SupplierID FormView-ban az aktuálisan kiválasztott szállító a FormView tulajdonságávalSelectedValue érhető el. A SelectedValue tulajdonság a FormView-ban megjelenített rekord első adatkulcs-értékét adja vissza. A FormView tulajdonságotDataKeyNames, amely azokat az adatmezőket jelzi, amelyekből az adatkulcs-értékeket lekérte, a Visual Studio automatikusan beállítottaSupplierID, amikor az ObjectDataSource-t a 2. lépésben újra a FormView-hoz kötötte.

ItemCommand Az eseménykezelő létrehozása után szánjon egy kis időt az oldal tesztelésére. Böngéssze a Cooperativa de Quesos „Las Cabras” szállítót (ez számomra az ötödik szállító a FormView-ban). Ez a szállító két terméket kínál, a Queso Cabrales és a Queso Manchego La Pastora, amelyek mindegyike nem szűnt meg.

Tegyük fel, hogy a Cooperativa de Quesos "Las Cabras" üzletből kilépett, ezért termékeit meg kell szüntetni. Kattintson az Összes termék megszüntetése gombra. Ekkor megjelenik az ügyféloldali megerősítés párbeszédpanel (lásd a 16. ábrát).

16. ábra: Cooperativa de Quesos Las Cabras két aktív terméket biztosít (Kattintson a teljes méretű kép megtekintéséhez)

Ha az ügyféloldali megerősítés párbeszédpanelen az OK gombra kattint, az űrlap beküldése folytatódik, ami azt eredményezi, hogy a FormView eseménye ItemCommand kigyullad. Az általunk létrehozott eseménykezelő ezután végrehajtja a DiscontinueAllProductsForSupplier(supplierID) metódust, és megszakítja a Queso Cabrales és a Queso Manchego La Pastora termékeket.

Ha letiltotta a GridView nézetállapotát, a GridView minden utólagos visszavételkor visszakerül a mögöttes adattárba, ezért azonnal frissül, hogy tükrözze, hogy ez a két termék már megszűnt (lásd a 17. ábrát). Ha azonban nem tiltotta le a nézet állapotát a GridView-ban, a módosítás után manuálisan kell újrakonfigurálnia az adatokat a GridView-hoz. Ehhez egyszerűen hívja fel a GridView metódust DataBind() közvetlenül a DiscontinueAllProductsForSupplier(supplierID) metódus meghívása után.

17. ábra: Miután az Összes termék megszüntetése gombra kattintott, a szállítói termékek ennek megfelelően frissülnek (ide kattintva megtekintheti a teljes méretű képet)

6. lépés: UpdateProduct Túlterhelés létrehozása az üzleti logikai rétegben a termék árának módosításához

A FormView Minden termék megszüntetése gombhoz hasonlóan ahhoz, hogy a GridView-ban egy termék árának növeléséhez és csökkentéséhez gombokat adjunk hozzá, először hozzá kell adnunk a megfelelő adatelérési réteg és üzleti logikai réteg metódusokat. Mivel már rendelkezünk egy olyan módszerrel, amely egyetlen terméksort frissít a DAL-ban, ezt a funkciót úgy tudjuk biztosítani, hogy új túlterhelést hozunk létre a metódushoz a UpdateProduct BLL-ben.

A korábbi UpdateProduct túlterhelések a termékmezők bizonyos kombinációját skaláris bemeneti értékekként használták, majd csak a megadott termék mezőit frissítették. Ebben a túlterhelésben kissé eltérünk a szabványtól, és ehelyett a terméket s ProductID-nel, valamint a százalékot UnitPrice adjuk meg, amellyel módosítani kell (ahelyett, hogy közvetlenül a már korrigált UnitPrice-t adnánk át). Ez a megközelítés leegyszerűsíti a ASP.NET lap mögötti osztályba írandó kódot, mivel nem kell foglalkoznunk az aktuális termék UnitPricemeghatározásával.

Az UpdateProduct oktatóanyag túlterhelése az alábbiakban látható:

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

Ez a túlterhelés a DAL metóduson GetProductByProductID(productID) keresztül kéri le a megadott termék adatait. Ezután ellenőrzi, hogy a termékhez UnitPrice adatbázis-érték NULL van-e rendelve. Ha igen, az ár változatlan marad. Ha azonban nincsNULLUnitPrice érték, a metódus a megadott százalék (UnitPrice) alapján frissíti a terméketunitPriceAdjustmentPercent.

7. lépés: A Növelni és csökkenteni gomb hozzáadása a GridView-hoz

A GridView (és a DetailsView) egyaránt mezőgyűjteményből áll. A BoundFields, a CheckBoxFields és a TemplateFields mellett ASP.NET tartalmazza a Gombmezőt is, amely a neve szerint oszlopként jelenik meg, és minden sorhoz gombot, LinkButtont vagy ImageButtont tartalmaz. A FormView-hez hasonlóan a GridView lapozógombok bármelyik gombjára kattintva, a Szerkesztés vagy Törlés gombokra kattintva, illetve a rendezési gombokkal, és így tovább, postbacket okoz és előidézi a GridView RowCommand eseményt.

A Gombmező rendelkezik egy CommandName tulajdonsággal, amely a megadott értéket rendeli hozzá az egyes Gombok CommandName tulajdonságaihoz. A FormView-hoz hasonlóan az CommandName eseménykezelő is ezt az értéket használja annak RowCommand meghatározásához, hogy melyik gombra kattintott.

Adjunk hozzá két új ButtonFieldet a GridViewhoz: az egyik egy 'Ár +10%' szövegű gombbal, a másik pedig 'Ár -10%' szövegűvel. A Gombmezők hozzáadásához kattintson az Oszlopok szerkesztése hivatkozásra a GridView intelligens címkéjén, válassza ki a Gombmező mezőtípust a bal felső listában, és kattintson a Hozzáadás gombra.

18. ábra: Két gombmező hozzáadása a GridView-hoz

Helyezze át a két Gombmezőt úgy, hogy azok az első két GridView-mezőként jelenjenek meg. Ezután állítsa a Text két Gombmező tulajdonságait a Price +10% és Price -10% értékre, a CommandName tulajdonságokat pedig a IncreasePrice és a DecreasePrice értékre. A ButtonField alapértelmezés szerint LinkButtonsként jeleníti meg a gombok oszlopát. Ez azonban a ButtonField tulajdonságonButtonType keresztül módosítható. Legyen ez a két gombterület normál nyomógombként; ezért állítsa be a ButtonType tulajdonságot Button-re. A 19. ábra a Mezők párbeszédpanelt jeleníti meg a módosítások elvégzése után; ezt követi a GridView deklaratív korrektúrája.

19. ábra: A gombmezők TextCommandNameés ButtonType a tulajdonságok konfigurálása

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

A gombmezők létrehozásával az utolsó lépés egy eseménykezelő létrehozása a GridView-eseményhez RowCommand . Ez az eseménykezelő, ha aktiválódik azért, mert az Ár +10% vagy az Ár -10% gombra kattintottak, meg kell határoznia az érintett sor ProductID-t, majd meg kell hívnia az ProductsBLL osztály UpdateProduct metódusát, miközben átadja a megfelelő UnitPrice százalékos módosítást a ProductID-vel együtt. A következő kód ezeket a feladatokat hajtja végre:

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

Annak a sornak a ProductID meghatározásához, amelynek Ár +10% vagy Ár -10% gombjára kattintottunk, tekintse meg a GridView kollekcióját DataKeys. Ez a gyűjtemény az egyes GridView-sorok tulajdonságában DataKeyNames megadott mezők értékeit tartalmazza. Mivel a Visual Studio a GridView DataKeyNames tulajdonságot ProductID értékre állította, amikor az ObjectDataSource-t a GridView-hoz kötötte, DataKeys(rowIndex).Value biztosítja a ProductID megadott sorindexet.

A Gombmező automatikusan átadja annak a sornak a sorIndexét, amelynek a gombjára kattintottak a e.CommandArgument paraméteren keresztül. Ezért annak a sornak az ProductID azonosításához, amelyre az Ár +10% vagy Ár -10% gombnál kattintottak, a következőt használjuk: Convert.ToInt32(SuppliersProducts.DataKeys(Convert.ToInt32(e.CommandArgument)).Value).

A Minden termék megszüntetése gombhoz hasonlóan, ha letiltotta a GridView nézetállapotát, a GridView minden utólagos visszavételkor visszakerül az alapul szolgáló adattárba, ezért azonnal frissül, hogy tükrözze a gombok bármelyikére való kattintáskor bekövetkező árváltozást. Ha azonban nem tiltotta le a nézet állapotát a GridView-ban, a módosítás után manuálisan kell újrakonfigurálnia az adatokat a GridView-hoz. Ehhez egyszerűen hívja fel a GridView metódust DataBind() közvetlenül a UpdateProduct metódus meghívása után.

20. ábra az oldal megjelenését mutatja, amikor megtekintjük a Kelly nagyi birtoka által kínált termékeket. A 21. ábra az eredményeket mutatja, miután a Price +10% gombot kétszer kattintott a nagyi Boysenberry Spread és a Price -10% gomb egyszer a Northwoods Cranberry Sauce.

20. ábra: A GridView tartalmazza az ár +10% és az Ár -10% gombot (kattintson a teljes méretű kép megtekintéséhez)

21. ábra: Az első és harmadik termék árai frissültek az Ár +10% és az Ár -10% gombokkal (kattintson a teljes méretű kép megtekintéséhez)

Megjegyzés:

A GridView (és a DetailsView) gombokat, LinkButtonokat vagy ImageButtonokat is hozzáadhat a Sablonmezőkhöz. Mint egy BoundField esetében, ezekre a gombokra kattintva postback-et kérdeznek, ami felkelti a GridView RowCommand eseményét. Amikor azonban gombokat ad hozzá egy TemplateFieldbe, a gombok nem rendelkeznek automatikusan a sor indexével, ahogy a ButtonField használatakor történik. Ha meg kell határoznia annak a gombnak a sorindexét, amelyre kattintottak az RowCommand eseménykezelőben, manuálisan kell beállítania a Button tulajdonságát CommandArgument a TemplateField használatával annak deklaratív szintaxisában a következő kóddal:
<asp:Button runat="server" ... CommandArgument='<%# CType(Container, GridViewRow).RowIndex %>' />.

Összefoglalás

A GridView, a DetailsView és a FormView vezérlők mind tartalmazhatnak gombokat, LinkButtonokat vagy ImageButtonokat. Ezek a gombok kattintáskor visszaküldést okoznak, és kiváltják a ItemCommand eseményt a FormView és a DetailsView vezérlőkben, valamint az RowCommand eseményt a GridView-ban. Ezek az adat webes vezérlők beépített funkciókkal rendelkeznek a parancsokkal kapcsolatos gyakori műveletek, például rekordok törléséhez vagy szerkesztéséhez. Használhatunk azonban olyan gombokat is, amelyek kattintáskor a saját egyéni kódunk végrehajtásával válaszolnak.

Ehhez létre kell hoznunk egy eseménykezelőt a ItemCommand vagy a RowCommand eseményhez. Ebben az eseménykezelőben először ellenőrizzük a bejövő CommandName értéket annak megállapításához, hogy melyik gombra kattintottunk, majd végrehajtjuk a megfelelő egyéni műveletet. Ebben az oktatóanyagban láttuk, hogyan lehet gombokkal és Gombmezőkkel megszüntetni egy adott szállító összes termékét, vagy 10%-tal növelni vagy csökkenteni egy adott termék árát.

Boldog programozást!

Tudnivalók a szerzőről

Scott Mitchell, hét ASP/ASP.NET-könyv szerzője és a 4GuysFromRolla.com alapítója, 1998 óta dolgozik a Microsoft webtechnológiáival. Scott független tanácsadóként, edzőként és íróként dolgozik. Legújabb könyve Sams Tanuld meg ASP.NET 2.0 24 óra alatt. Ő itt elérhető mitchell@4GuysFromRolla.com.

Előző