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

á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ést biztosít a jelentésadatokhoz, nem ritka, hogy a jelentések tartalmazzák a megjelenített adatok alapján végrehajtható műveleteket. 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 sorban az Áremelés és az Ár csökkentése gombok találhatók, amelyekre kattintva 10%-kal növelik vagy csökkentik a termék értékét UnitPrice (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éznénk, hogyan adhatunk hozzá egyéni gombokat, először szánjunk egy percet arra, hogy létrehozzuk a webhelyprojektünk ASP.NET oldalait, amelyekre szükségünk lesz ehhez 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 adja hozzá ezt a felhasználói vezérlőt a Default.aspx-hez úgy, hogy a Megoldáskezelőből húzza a lap Tervező 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 ezzel az oktatóanyaggal a beszállítókat felsoroló 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. Ezenkívül ez a FormView tartalmaz egy gombot, amelyre kattintva a szállító összes termékét megszűntként jelöli meg. Mielőtt foglalkoznánk az egyéni gomb hozzáadásával a FormView-hoz, először csak hozzuk létre a FormView-t, hogy megjelenítse a szállítói információkat.

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éjében hozzon létre egy új ObjectDataSource-t .SuppliersDataSource

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 az osztály SuppliersBLL metódusából kérdezzen GetSuppliers() le (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 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 az InsertItemTemplate és és EditItemTemplate módosítsa úgy ItemTemplate , hogy csak a szállító cégneve és telefonszáma jelenjen 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 az oldal deklaratív jelölésének az alábbihoz hasonlóan 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") %>' />
        </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 felsoroló rácsnézet hozzáadása

Mielőtt hozzáadnánk az Összes termék megszüntetése gombot a FormView sablonjához, először adjunk hozzá egy GridView-t a FormView alá, 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 GetProductsBySupplierID(supplierID) metódusának használatára (lásd a 9. ábrát). Bár ez a GridView lehetővé teszi a 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 a legördülő listát (Nincs) értékre állíthatjuk az ObjectDataSource UPDATE, INSERT és DELETE lapjain.

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

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 tartalmaz egy BoundField vagy CheckBoxField értéket a termék minden adatmezőjéhez. Vágjuk le ezt úgy, hogy csak a ProductName és a UnitPrice BoundFields jelenjen meg a Discontinued CheckBoxField mellett; továbbá formázzuk a UnitPrice BoundFieldet úgy, hogy a szövege pénznemként legyen formázva. A GridView és SuppliersProductsDataSource az ObjectDataSource deklaratív jelölésének az alábbihoz hasonlóan kell kinéznie:

<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ó termékei megjelennek a rácsnézetben (kattintson a teljes méretű kép megtekintéséhez)

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, amelyre kattintva leállítja a szállító összes termékét, először hozzá kell adnunk egy metódust mind a DAL-hoz, mind a BLL-hez, amely ezt a műveletet végrehajtja. Különösen ezt a metódust nevezzük DiscontinueAllProductsForSupplier(supplierID)-nak. Amikor a FormView gombjára kattintunk, ezt a metódust hívjuk meg az üzleti logikai rétegben, átadva a kiválasztott szállító SupplierIDmetódusát; a BLL ezután lehívja a megfelelő adatelérési réteg metódust, amely UPDATE kiad egy utasítást 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 varázsló következő képernyője a TableAdapter meglévő UPDATE utasítását tartalmazza, amely frissíti a Products DataTable által 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

A lekérdezés beírása és a Tovább gombra kattintás után a varázsló utolsó képernyője az új metódus nevét kéri DiscontinueAllProductsForSupplier. 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 int DiscontinueAllProductsForSupplier(int supplierID)
{
    return Adapter.DiscontinueAllProductsForSupplier(supplierID);
}

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 léteznének olyan üzleti szabályok, amelyek csak bizonyos körülmények között tették lehetővé a szállító termékeinek megszüntetését, akkor ezeket a szabályokat itt, a BLL-ben kell végrehajtani.

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 kizárja a DiscontinueAllProductsForSupplier(supplierID) metódust az ObjectDataSource Adatforrás konfigurálása varázsló legördülő listájából a FRISSÍTÉS lapon. Kihagytam ezt az attribútumot, mert a DiscontinueAllProductsForSupplier(supplierID) metódust közvetlenül a ASP.NET oldalunkon lévő eseménykezelőből fogjuk meghívni.

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

A BLL és a DAL metódusának befejezése után DiscontinueAllProductsForSupplier(supplierID) a kiválasztott szállító összes termékének megszüntetésének lehetőségének utolsó lépése egy Button Web vezérlő hozzáadása a FormView ItemTemplate. Vegyünk fel egy ilyen gombot a szállító telefonszáma alá a Megszűnés minden termék gombszöveggel és a ID tulajdonság értékével.DiscontinueAllProductsForSupplier Ezt a gomb webes vezérlőt a Tervezőn keresztül adhatja hozzá a FormView intelligens címkéjében található Sablonok szerkesztése hivatkozásra kattintva (lásd 15. ábra), vagy közvetlenül a deklaratív szintaxison keresztül.

15. ábra: Az összes termék megszüntetése gomb webes vezérlőjének hozzáadása a FormView-hoz ItemTemplate (kattintson a teljes méretű kép megtekintéséhez)

Amikor az oldalt meglátogató felhasználó rákattint a gombra, visszaküldés következik, és a ItemCommand FormView eseménye 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 eléréséhez beállíthatjuk a Gomb webes vezérlő 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 az CommandName Összes termék megszűnése gomb tulajdonságát DiscontinuProducts értékre.

Végül használjunk egy kliensoldali megerősítési párbeszédpanelt annak biztosítására, hogy a felhasználó valóban meg akarja 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 a Gomb webvezérlő Ügyfélkattintás tulajdonságát állítsa a következőre: 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 ItemCommand eseményéhez. 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 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);
    }
}

Vegye figyelembe, hogy SupplierID a FormView-ban aktuálisan kiválasztott szállító a FormView SelectedValue tulajdonságával érhető el. A SelectedValue tulajdonság a FormView-ban megjelenített rekord első adatkulcs-értékét adja vissza. A FormView DataKeyNames tulajdonságát, amely azokat az adatmezőket jelzi, amelyekből az adatkulcsértékek lekérve vannak, a Visual Studio automatikusan beállította SupplierID , amikor az ObjectDataSource-t a FormView-hoz köti a 2. lépésben.

ItemCommand Az eseménykezelő létrehozása után szánjon egy kis időt az oldal tesztelésére. Keresse meg a Cooperativa de Quesos 'Las Cabras' beszállítóját (számomra ez az ötödik beszá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ési párbeszédpanelen az OK gombra kattint, az űrlap elküldése folytatódik, és visszaküldést okoz, amelyben a ItemCommand FormView eseménye aktiválódik. 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 nézetállapotát, a GridView minden visszaküldéskor visszapattan az alapul szolgáló adattárba, ezért azonnal frissül, hogy tükrözze, hogy ez a két termék 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. Ennek eléréséhez egyszerűen hívja meg a GridView DataBind() metódusát közvetlenül a DiscontinueAllProductsForSupplier(supplierID) metódus meghívása után.

17. ábra: Az összes termék leállítása gombra kattintás után a szállító termékei ennek megfelelően frissülnek (kattintson a teljes méretű kép megtekintéséhez)

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. Ennél a túlterhelésnél kissé eltérünk ettől a szabványtól, és ehelyett átadjuk a termék ProductID és a százalékos arányt, amellyel be kell állítani ( UnitPrice szemben az új, maga a beállítás UnitPrice átadásával). Ez a megközelítés leegyszerűsíti a kódot, amelyet a ASP.NET oldalas kód mögötti osztályba kell írnunk, mivel nem kell bajlódnunk az aktuális termék UnitPrice.

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

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

Ez a túlterhelés a DAL GetProductByProductID(productID) módszerén keresztül lekéri a megadott termékkel kapcsolatos információkat. Ezután ellenőrzi, hogy a termékhez UnitPrice van-e hozzárendelve adatbázisérték NULL . Ha igen, az ár változatlan marad. Ha azonban van nemNULLUnitPrice érték, a metódus a megadott százalékkal ()UnitPrice 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-hoz hasonlóan a GridView lapozógombok, a Szerkesztés vagy a Törlés gombok, a rendezési gombok stb. bármelyik gombjára kattintva visszaküldés történik, és felveti a GridView RowCommand eseményét.

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 ButtonFields-t a GridView-hoz, az egyiket az ár +10% gombszöveggel, a másikat pedig a Price -10%szöveggel. A ButtonFields hozzáadásához kattintson az Oszlopok szerkesztése hivatkozásra a GridView intelligens címkéjén, válassza ki a ButtonField mezőtípust a bal felső sarokban található listából, majd 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ágánButtonType keresztül módosítható. Jelenítsük meg ezt a két ButtonField-et normál nyomógombként; Ezért állítsa a tulajdonságot ButtonType .Button A 19. ábra a Mezők párbeszédpanelt mutatja a módosítások végrehajtása után; ezt követi a GridView deklaratív jelölése.

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 ButtonFields létrehozása után az utolsó lépés egy eseménykezelő létrehozása a GridView RowCommand eseményéhez. Ennek az eseménykezelőnek, ha az Ár +10% vagy az Ár -10% gombra kattintva aktiválódik, meg kell határoznia annak a sornak a ProductID értékét, amelyre a gombra kattintott, majd meg kell hívnia az ProductsBLL osztály UpdateProduct metódusát, és át kell adnia a megfelelő UnitPrice százalékos korrekciót a ProductID. A következő kód ezeket a feladatokat hajtja végre:

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

Annak a sornak a meghatározásához ProductID , amelynek Price +10% vagy Price -10% gombra kattintott, meg kell néznünk a GridView gyűjteményét DataKeys . Ez a gyűjtemény az egyes GridView-sorok tulajdonságában DataKeyNames megadott mezők értékeit tartalmazza. Mivel a GridView DataKeyNames tulajdonságát a Visual Studio ProductID értékre állította, amikor az ObjectDataSource-t a GridView-hoz köti, DataKeys(rowIndex).Value a megadott ProductID értéket adja meg.

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

Az Összes termék leállítása gombhoz hasonlóan, ha letiltotta a GridView nézet nézetállapotát, a GridView minden visszaküldéskor visszapattan a mögöttes adattárba, ezért azonnal frissül, hogy tükrözze az egyik gombra kattintva 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. Ennek eléréséhez egyszerűen hívja meg a GridView DataBind() metódusát 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. A BoundFieldhez hasonlóan ezek a gombok, ha rájuk kattintanak, visszaküldést indukálnak, ami megemeli RowCommand a GridView eseményét. Ha azonban gombokat ad hozzá egy TemplateFieldhez, a gomb CommandArgument nem lesz automatikusan a sor indexére állítva, mint a ButtonFields használatakor. Ha meg kell határoznia az eseménykezelőn belül RowCommand kattintott gomb sorindexét, manuálisan kell beállítania a gomb CommandArgument tulajdonságát a deklaratív szintaxisában a TemplateField mezőben belül, a következő kód használatával:
<asp:Button runat="server" ... CommandArgument='<%# ((GridViewRow) Container).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.

Következő