Az adatok szerkesztésének és törlésének áttekintése a DataListben (C#)

által Scott Mitchell

PDF letöltése

Bár a DataList nem rendelkezik beépített szerkesztési és törlési képességekkel, ebben az oktatóanyagban bemutatjuk, hogyan hozhat létre olyan DataListet, amely támogatja a mögöttes adatok szerkesztését és törlését.

Bevezetés

Az Adatok beszúrásának, frissítésének és törlésének áttekintése oktatóanyagban azt vizsgáltuk, hogyan szúrhat be, frissíthet és törölhet adatokat az alkalmazásarchitektúra, az ObjectDataSource és a GridView, a DetailsView és a FormView vezérlők használatával. Az ObjectDataSource és a három adat-webvezérlő segítségével az egyszerű adatmódosítási felületek implementálása egy pillanat alatt történt, és csak egy jelölőnégyzetet kellett bejelölni egy intelligens címkéről. Nem kellett kódot írni.

Sajnos a DataList nem rendelkezik a GridView vezérlőben rejlő beépített szerkesztési és törlési képességekkel. Ez a hiányzó funkció részben annak a ténynek köszönhető, hogy a DataList a ASP.NET előző verziójának adattára, amikor a deklaratív adatforrás-vezérlők és a kód nélküli adatmódosítási lapok nem voltak elérhetők. Bár a ASP.NET 2.0-s verziójában található DataList nem ugyanazokat a beépített adatmódosítási képességeket kínálja, mint a GridView, ASP.NET 1.x technikákat használhatunk az ilyen funkciók használatára. Ehhez a megközelítéshez egy kis kódra van szükség, de ahogy az oktatóanyagban látni fogjuk, a DataList rendelkezik néhány eseménysel és tulajdonságokkal, amelyek segíthetnek ebben a folyamatban.

Ebben az oktatóanyagban bemutatjuk, hogyan hozhat létre olyan DataListet, amely támogatja a mögöttes adatok szerkesztését és törlését. A jövőbeli oktatóanyagok részletesebb szerkesztési és törlési forgatókönyveket vizsgálnak meg, beleértve a bemeneti mezők érvényesítését, az adatelérési vagy üzleti logikai rétegekből származó kivételek kecses kezelését stb.

Megjegyzés:

A DataListhez hasonlóan az Ismétlő vezérlő sem rendelkezik a beszúrási, frissítési vagy törlési funkcióval. Bár ezek a funkciók hozzáadhatók, a DataList olyan tulajdonságokat és eseményeket tartalmaz, amelyek nem találhatók az Repeaterben, ami leegyszerűsíti az ilyen képességek hozzáadását. Ezért ez az oktatóanyag és a szerkesztést és törlést tárgyaló jövőbeli anyagok szigorúan a DataListre fogják összpontosítani.

1. lépés: A szerkesztési és törlési oktatóanyagok weboldalainak létrehozása

Mielőtt felfedeznénk, hogyan frissíthetjük és törölhetjük az adatokat egy DataListből, 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 és a következő néhányhoz. Első lépésként adjon hozzá egy új mappát.EditDeleteDataList Ezután adja hozzá a következő ASP.NET lapokat a mappához, és mindenképpen társítsa az egyes lapokat a Site.master mesterlaphoz:

• Default.aspx
• Basics.aspx
• BatchUpdate.aspx
• ErrorHandling.aspx
• UIValidation.aspx
• CustomizedUI.aspx
• OptimisticConcurrency.aspx
• ConfirmationOnDelete.aspx
• UserLevelAccess.aspx

1. ábra: Az oktatóanyagok ASP.NET lapjainak hozzáadása

A többi mappához Default.aspx hasonlóan a EditDeleteDataList mappában is megtalálhatók a szakasz oktatóanyagai. 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.

2. ábra: Adja hozzá a SectionLevelTutorialListing.ascx felhasználói vezérlőt Default.aspx (kattintson ide a teljes méretű kép megtekintéséhez)

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 fő/részlet jelentések után a DataList és a Repeater használatával <siteMapNode>.

<siteMapNode
    title="Editing and Deleting with the DataList"
    description="Samples of Reports that Provide Editing and Deleting Capabilities"
    url="~/EditDeleteDataList/Default.aspx" >
    <siteMapNode
        title="Basics"
        description="Examines the basics of editing and deleting with the
                     DataList control."
        url="~/EditDeleteDataList/Basics.aspx" />
    <siteMapNode
        title="Batch Update"
        description="Examines how to update multiple records at once in a
                     fully-editable DataList."
        url="~/EditDeleteDataList/BatchUpdate.aspx" />
    <siteMapNode
        title="Error Handling"
        description="Learn how to gracefully handle exceptions raised during the
                     data modification workflow."
        url="~/EditDeleteDataList/ErrorHandling.aspx" />
    <siteMapNode
        title="Adding Data Entry Validation"
        description="Help prevent data entry errors by providing validation."
        url="~/EditDeleteDataList/UIValidation.aspx" />
    <siteMapNode
        title="Customize the User Interface"
        description="Customize the editing user interfaces."
        url="~/EditDeleteDataList/CustomizedUI.aspx" />
    <siteMapNode
        title="Optimistic Concurrency"
        description="Learn how to help prevent simultaneous users from
                     overwritting one another s changes."
        url="~/EditDeleteDataList/OptimisticConcurrency.aspx" />
    <siteMapNode
        title="Confirm On Delete"
        description="Prompt a user for confirmation when deleting a record."
        url="~/EditDeleteDataList/ConfirmationOnDelete.aspx" />
    <siteMapNode
        title="Limit Capabilities Based on User"
        description="Learn how to limit the data modification functionality
                     based on the user s role or permissions."
        url="~/EditDeleteDataList/UserLevelAccess.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 a DataList szerkesztési és törlési oktatóanyagainak elemeit.

3. ábra: A webhelytérkép mostantól tartalmazza a DataList szerkesztési és törlési oktatóanyagainak bejegyzéseit

2. lépés: Az adatok frissítésének és törlésének technikáinak vizsgálata

Az adatok szerkesztése és törlése a GridView-nal olyan egyszerű, mert a rácsok alatt a GridView és az ObjectDataSource együtt működik. Ahogy a beszúrással, frissítéssel és törléssel kapcsolatos események vizsgálata című oktatóanyagban is szó volt róla, a Sor frissítése gombra kattintva a GridView automatikusan hozzárendeli a kétirányú adatkötést UpdateParameters használó mezőket az ObjectDataSource gyűjteményéhez, majd meghívja az ObjectDataSource metódusát Update() .

Sajnos a DataList egyik beépített funkciót sem biztosítja. A mi felelősségünk annak biztosítása, hogy a felhasználó értékei hozzá legyenek rendelve az ObjectDataSource paramétereihez, és hogy metódusát Update() meghívjuk. Ebben a törekvésben a DataList a következő tulajdonságokat és eseményeket nyújtja:

• A DataKeyField tulajdonság frissítéskor vagy törlésekor képesnek kell lennie a DataList minden elemének egyedi azonosítására. Állítsa be ezt a tulajdonságot a megjelenített adatok elsődleges kulcsmezőjére. Ezzel feltölti a DataList-gyűjteménytDataKeys az egyes DataList-elemek megadott DataKeyField értékével.
• Az EditCommand esemény akkor aktiválódik, ha a rendszer rákattint egy Olyan gombra, LinkButtonra vagy ImageButtonra, amelynek CommandName a tulajdonsága Szerkesztés értékre van állítva.
• Az CancelCommand esemény akkor aktiválódik, ha a rendszer rákattint egy Olyan gombra, LinkButtonra vagy ImageButtonra, amelynek CommandName a tulajdonsága Mégse értékre van állítva.
• Az UpdateCommand esemény akkor aktiválódik, ha a rendszer rákattint egy Olyan gombra, LinkButtonra vagy ImageButtonra, amelynek CommandName tulajdonsága Frissítésre van állítva.
• Az DeleteCommand esemény akkor aktiválódik, ha a rendszer rákattint egy Olyan gombra, LinkButtonra vagy ImageButtonra, amelynek CommandName a tulajdonsága Törlés értékre van állítva.

Ezeknek a tulajdonságoknak és eseményeknek a használatával négy módszert használhatunk az adatok dataList-ből való frissítésére és törlésére:

1. Az ASP.NET 1.x technikákkal a DataList a 2.0 és az ObjectDataSources ASP.NET előtt létezett, és teljes mértékben programozott módon tudta frissíteni és törölni az adatokat. Ez a technika teljesen elzárja az ObjectDataSource-t, és megköveteli, hogy az adatokat közvetlenül az üzleti logikai rétegből kössük a DataListhez, mind az adatok megjelenítéséhez, mind a rekordok frissítésekor vagy törlésekor.
2. Ha egyetlen ObjectDataSource-vezérlőt használ a lapon a kijelöléshez, frissítéshez és törléshez, miközben a DataList nem rendelkezik a GridView belső szerkesztési és törlési képességeivel, nincs okunk arra, hogy magunkban ne tudjuk hozzáadni őket. Ezzel a módszerrel az ObjectDataSource-t ugyanúgy használjuk, mint a GridView-példákban, de létre kell hoznunk egy eseménykezelőt a DataList-eseményhez UpdateCommand , ahol beállítjuk az ObjectDataSource paramétereit, és meghívjuk annak metódusát Update() .
3. Ehelyett használhatjuk az ObjectDataSource-t a kiválasztáshoz, de a hívásokat közvetlenül a BLL-n keresztül frissíthetjük és törölhetjük (például az 1. lehetőségnél). Véleményem szerint az adatok közvetlenül a BLL-lel való kapcsolat kialakításával történő frissítése olvashatóbb kódhoz vezet, mint az ObjectDataSource hozzárendelése UpdateParameters és a metódusának meghívása Update().
4. A deklaratív eszközök több ObjectDataSource-on keresztül történő használatával az előző három megközelítéshez egy kis kód szükséges. Ha a lehető legtöbb deklaratív szintaxist szeretné használni, a végső lehetőség az, hogy több ObjectDataSource-t is felvesz a lapra. Az első ObjectDataSource lekéri az adatokat a BLL-ből, és azokat a DataListhez köti. A frissítéshez a rendszer hozzáad egy másik ObjectDataSource-t, de közvetlenül a DataList-ek EditItemTemplateközé kerül. A törlési támogatás hozzáadásához még egy ObjectDataSource-ra lenne szükség a ItemTemplate. Ezzel a megközelítéssel ezek a beágyazott ObjectDataSource-objektumok ControlParameters deklaratív módon kötik az ObjectDataSource paramétereit a felhasználói beviteli vezérlőkhöz (ahelyett, hogy programozott módon kellene megadni őket a DataList UpdateCommand eseménykezelőjében). Ehhez a megközelítéshez továbbra is szükség van egy kis kódra, amely meghívja a beágyazott ObjectDataSource-parancsot Update() , Delete() de sokkal kevesebbet igényel, mint a másik három módszer esetében. A hátránya itt az, hogy a több ObjectDataSource zsúfoltságot okoz az oldalon, ami rontja az általános olvashatóságot.

Ha arra lennék kényszerítve, hogy csak egy ilyen megközelítést használjak, az 1-es lehetőséget választanám, mert ez biztosítja a legnagyobb rugalmasságot, és mivel a DataListet eredetileg úgy tervezték, hogy megfeleljen ennek a mintának. Bár a DataList ki lett terjesztve a ASP.NET 2.0-s adatforrás-vezérlők használatára, nem rendelkezik a hivatalos ASP.NET 2.0-s adat webes vezérlőinek (a GridView, a DetailsView és a FormView) összes bővíthetőségi pontjával vagy funkciójával. A 2–4. lehetőség azonban nem érdemtelen.

Ez és a jövőbeli szerkesztési és törlési oktatóanyagok egy ObjectDataSource-t használnak az adatok lekéréséhez, hogy megjelenítse és átirányítsa a BLL-hez érkező hívásokat az adatok frissítésére és törlésére (3. lehetőség).

3. lépés: A DataList hozzáadása és az ObjectDataSource konfigurálása

Ebben az oktatóanyagban létrehozunk egy DataListet, amely felsorolja a termékinformációkat, és minden termék esetében lehetővé teszi a felhasználó számára a név és az ár szerkesztését, valamint a termék teljes törlését. A rekordokat az ObjectDataSource használatával fogjuk lekérni, de a frissítési és törlési műveleteket közvetlenül a BLL-sel való együttműködéssel hajtjuk végre. Mielőtt a DataList szerkesztési és törlési képességeinek implementálásával foglalkoznánk, először szerezzük be a lapot, hogy csak olvasható felületen jelenítsük meg a termékeket. Mivel a korábbi oktatóanyagokban megvizsgáltuk ezeket a lépéseket, gyorsan végig fogom őket haladni.

Először nyissa meg a Basics.aspx lapot a EditDeleteDataList mappában, és a Tervező nézetben vegyen fel egy DataListet a lapra. Ezután a DataList intelligens címkéje alapján hozzon létre egy új ObjectDataSource-t. Mivel termékadatokkal dolgozunk, konfigurálja az ProductsBLL osztály használatára. Az összes termék lekéréséhez válassza a GetProducts() SELECT lapon található metódust.

4. ábra: Az ObjectDataSource konfigurálása az ProductsBLL osztály használatára (kattintson ide a teljes méretű kép megtekintéséhez)

5. ábra: Adja vissza a termékinformációkat a GetProducts() metódus használatával (kattintson ide a teljes méretű kép megtekintéséhez)

A DataList, mint a GridView, nem új adatok beszúrására szolgál; ezért válassza a (Nincs) lehetőséget a BESZÚRÁS lap legördülő listájából. Válassza a (Nincs) lehetőséget is az UPDATE és DELETE fülekhez, mivel a frissítések és a törlések programozott módon lesznek végrehajtva a BLL-n keresztül.

6. ábra: Győződjön meg arról, hogy az ObjectDataSource INSERT, UPDATE és DELETE lapjának Drop-Down listái a (Nincs) értékre vannak állítva (kattintson ide a teljes méretű kép megtekintéséhez)

Az ObjectDataSource konfigurálása után kattintson a Befejezés gombra, és térjen vissza a Tervezőhöz. Ahogy a korábbi példákban láthattuk, az ObjectDataSource-konfiguráció befejezésekor a Visual Studio automatikusan létrehoz egy ItemTemplate legördülő listát, amely megjeleníti az egyes adatmezőket. Cserélje le ezt olyanra ItemTemplate , amely csak a termék nevét és árát jeleníti meg. Emellett állítsa a RepeatColumns tulajdonságot 2 értékre.

Megjegyzés:

Ahogy az Adatok beszúrása, frissítése és törlése című oktatóanyagban is tárgyaltuk, az adatok ObjectDataSource használatával történő módosításakor az architektúra megköveteli, hogy eltávolítsuk a OldValuesParameterFormatString tulajdonságot az ObjectDataSource deklaratív korrektúrából (vagy állítsa vissza az alapértelmezett értékre). {0} Ebben az oktatóanyagban azonban az ObjectDataSource-t csak adatok beolvasására használjuk. Ezért nem kell módosítanunk az ObjectDataSource tulajdonságértékét OldValuesParameterFormatString (bár ez nem árt).

Miután lecserélte az alapértelmezett DataList-et ItemTemplate egy testre szabottra, a lapon lévő deklaratív korrektúra a következőhöz hasonlóan néz ki:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    SelectMethod="GetProducts" TypeName="ProductsBLL"
    OldValuesParameterFormatString="original_{0}">
</asp:ObjectDataSource>

Szánjon egy kis időt a haladás megtekintésére egy böngészőben. Ahogy a 7. ábra mutatja, a DataList két oszlopban jeleníti meg az egyes termékek terméknevét és egységárát.

7. ábra: A termékek nevei és árai megjelennek egy Two-Column Adatlistán (ide kattintva megtekintheti a teljes méretű képet)

Megjegyzés:

A DataList számos tulajdonsággal rendelkezik, amelyek szükségesek a frissítési és törlési folyamathoz, és ezek az értékek megtekintési állapotban vannak tárolva. Ezért az adatok szerkesztését vagy törlését támogató DataList létrehozásakor elengedhetetlen, hogy engedélyezve legyen a DataList-nézet állapota.

Az éles eszű olvasó talán emlékszik, hogy a nézetállapotot letiltottuk, amikor szerkeszthető Rácsnézeteket, Részletes nézeteket és Űrlapnézeteket hoztunk létre. Ennek az az oka, hogy az ASP.NET 2.0 webes vezérlők tartalmazhatnak vezérlőállapotot, amely az állapot visszaállítás utáni megőrzését teszi lehetővé, mint a megtekintési állapot, de elengedhetetlenül fontosnak számít.

A Nézet állapotának letiltása a GridView-ban csupán kihagyja a triviális állapotinformációkat, de fenntartja a vezérlő állapotát (amely magában foglalja a szerkesztéshez és törléshez szükséges állapotot). A ASP.NET 1.x időkeretben létrehozott DataList nem használja a vezérlőállapotot, ezért engedélyezve kell lennie a megtekintési állapotnak. A vezérlőállapot és a nézetállapot céljáról és a nézetállapottól való eltéréséről további információt a Control State vs. View State című témakörben talál.

4. lépés: Szerkesztési felhasználói felület hozzáadása

A GridView vezérlő mezők gyűjteményéből áll (BoundFields, CheckBoxFields, TemplateFields stb.). Ezek a mezők módjuktól függően módosíthatják a megjelenített jelölést. Írásvédett módban például a BoundField szövegként jeleníti meg az adatmező értékét; szerkesztési módban egy TextBox webvezérlőt jelenít meg, amelynek Text tulajdonsága hozzá van rendelve az adatmező értékéhez.

A DataList viszont sablonokkal jeleníti meg az elemeket. A csak olvasható elemek ItemTemplate-tel vannak megjelenítve, míg a szerkesztési módban lévő elemek EditItemTemplate-tel. Ezen a ponton a DataListünk csak egy ItemTemplate tartalmaz. Az elemszintű szerkesztési funkciók támogatásához olyan jelölőt kell hozzáadnunk EditItemTemplate , amely tartalmazza a szerkeszthető elemhez megjelenítendő korrektúrát. Ebben az oktatóanyagban TextBox webvezérlőket használunk a termék nevének és egységárának szerkesztéséhez.

Ez EditItemTemplate deklaratív módon vagy a Tervezőn keresztül hozható létre (a Sablonok szerkesztése lehetőséget választva a DataList intelligens címkéjében). A Sablonok szerkesztése lehetőség használatához először kattintson az intelligens címke Sablonok szerkesztése hivatkozására, majd válassza ki az EditItemTemplate elemet a legördülő listából.

8. ábra: Válassza a DataList-ek EditItemTemplate használatát (kattintson ide a teljes méretű kép megtekintéséhez)

Ezután írja be a Termék neve: és az Ár elemet, majd húzza két TextBox-vezérlőt az eszközkészletből a EditItemTemplate Tervező felületére. Állítsa be a TextBoxes ID tulajdonságait ProductName és UnitPrice értékekre.

9. ábra: Szövegdoboz hozzáadása a termék nevéhez és árához (kattintson ide a teljes méretű kép megtekintéséhez)

A megfelelő termékadatmező-értékeket a két Szövegdoboz tulajdonságaihoz Text kell kötni. A TextBoxes intelligens címkéi között kattintson a DataBindings szerkesztése hivatkozásra, majd társítsa a megfelelő adatmezőt a Text tulajdonsághoz a 10. ábrán látható módon.

Megjegyzés:

Ha az UnitPrice adatmezőt a Price TextBox Text mezőjéhez köti, formázhatja pénznemértékként ({0:C}), általános számként ({0:N}), vagy hagyhatja formázatlanul.

10. ábra: A ProductName és UnitPrice adatai kötése a Text Szövegdobozok tulajdonságaihoz

Figyelje meg, hogy a DataBindings szerkesztése párbeszédpanel a 10. ábrán nem tartalmazza a Kétirányú adatkötés jelölőnégyzetet, amely a GridView-ban vagy a DetailsView-ban lévő TemplateField vagy a FormView-sablon szerkesztésekor jelenik meg. A kétirányú adatkötési funkció lehetővé tette, hogy a bemeneti webvezérlőbe bevitt érték automatikusan hozzá legyen rendelve a megfelelő ObjectDataSource-objektumokhoz InsertParameters , illetve UpdateParameters az adatok beszúrása vagy frissítése során. A DataList nem támogatja a kétirányú adatkötést, amint azt az oktatóanyag későbbi részében látni fogjuk, miután a felhasználó végrehajtotta a módosításait, és készen áll az adatok frissítésére, programozott módon hozzá kell férnünk ezekhez a TextBoxes-tulajdonságokhozText, és át kell adnunk az értékeiket az UpdateProduct osztály megfelelő ProductsBLL metódusának.

Végül hozzá kell adnunk a Frissítés és a Mégse gombot a EditItemTemplate. Ahogy a Master/Detail Using a Bulleted List of Master Records with a Details DataList oktatóanyagban láttuk, amikor egy olyan gombot, LinkButtont vagy ImageButtont, amelynek CommandName tulajdonsága be van állítva, megnyomnak egy Ismétlőben vagy egy DataListben, az Ismétlő vagy a DataList ItemCommand eseménye meghívódik. A DataList esetében, ha a CommandName tulajdonság egy bizonyos értékre van állítva, egy további esemény is felmerülhet. A speciális CommandName tulajdonságértékek többek között a következők:

• A Mégse aktiválja a CancelCommand eseményt
• A szerkesztés kiváltja a EditCommand eseményt
• A frissítés aktiválja az eseményt UpdateCommand

Ne feledje, hogy ezek az események az esemény ItemCommand.

Adja hozzá a EditItemTemplate két gomb webvezérlőjét, amelyek CommandName közül az egyik frissítésre van beállítva, a másik pedig Mégse értékre van állítva. A két gomb webvezérlő hozzáadása után a Tervezőnek az alábbihoz hasonlóan kell kinéznie:

11. ábra: Frissítés és mégse gomb hozzáadása a EditItemTemplateképhez (ide kattintva megtekintheti a teljes méretű képet)

Az EditItemTemplate befejezésével a DataList deklaratív jelölése a következőhöz hasonlóan fog kinézni:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" RepeatColumns="2">
    <ItemTemplate>
        <h5>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>' />
        </h5>
        Price: <asp:Label runat="server" ID="Label1"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' />
        <br />
        <br />
    </ItemTemplate>
    <EditItemTemplate>
        Product name:
            <asp:TextBox ID="ProductName" runat="server"
                Text='<%# Eval("ProductName") %>' /><br />
        Price:
            <asp:TextBox ID="UnitPrice" runat="server"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' /><br />
        <br />
        <asp:Button ID="UpdateProduct" runat="server"
            CommandName="Update" Text="Update" /> 
        <asp:Button ID="CancelUpdate" runat="server"
            CommandName="Cancel" Text="Cancel" />
    </EditItemTemplate>
</asp:DataList>

5. lépés: A vízvezeték hozzáadása szerkesztési módba

Ezen a ponton a DataList rendelkezik egy szerkesztési felülettel, amelyet annak EditItemTemplatealapján határoztunk meg, azonban jelenleg nem lehet, hogy egy felhasználó megtekintse az oldalunkat, és jelezze, hogy szerkeszteni szeretné a termék adatait. Minden termékhez hozzá kell adnunk egy Szerkesztés gombot, amely kattintás után szerkesztési módban jeleníti meg a DataList-elemet. Először adjon hozzá egy Szerkesztés gombot a ItemTemplatetervezőn keresztül vagy deklaratív módon. Ügyeljen arra, hogy a Szerkesztés gomb "Edit" tulajdonságát CommandName Edit értékre állítsa.

Miután hozzáadta ezt a Szerkesztés gombot, szánjon egy kis időt a lap megtekintésére egy böngészőben. Ezzel a kiegészítéssel minden terméklistának tartalmaznia kell egy Szerkesztés gombot.

12. ábra: Frissítési és mégse gombok hozzáadása a EditItemTemplate (kattintson ide a teljes méretű kép megtekintéséhez)

Ha a gombra kattint, az visszalépést okoz, de nem hozza szerkesztési módba a terméklistát. A termék szerkeszthetővé tétele érdekében a következőkre van szükség:

1. Állítsa a DataList tulajdonságátEditItemIndex annak a DataListItem elemnek az indexére, amelynek a Szerkesztés gombjára kattintott.
2. Az adatokat újra hozzárendeli a DataListhez. A DataList újra renderelése után az a DataListItem, amelynek ItemIndex megfelel a DataList eleme EditItemIndex, a saját EditItemTemplate használatával kerül megjelenítésre.

Mivel a DataList-esemény EditCommand a Szerkesztés gombra kattintáskor aktiválódik, hozzon létre egy eseménykezelőt EditCommand a következő kóddal:

protected void DataList1_EditCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to the
    // index of the DataListItem that was clicked
    DataList1.EditItemIndex = e.Item.ItemIndex;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Az EditCommand eseménykezelő második bemeneti paraméterként egy DataListCommandEventArgs típusú objektumot kap, amely tartalmaz egy hivatkozást arra a DataListItem-re, amelynek Szerkesztés gombjára kattintottak (e.Item). Az eseménykezelő először beállítja a DataList EditItemIndex értékét a szerkeszthető ItemIndexDataListItem elemére, majd a DataList adatait újraköti a DataList DataBind() metódusának meghívásával.

Az eseménykezelő hozzáadása után nyissa meg újra a lapot egy böngészőben. A Szerkesztés gombra kattintva szerkeszthetővé válik a kattintott termék (lásd a 13. ábrát).

13. ábra: A Szerkesztés gombra kattintva szerkeszthetővé teszi a terméket (ide kattintva megtekintheti a teljes méretű képet)

6. lépés: A felhasználó módosításainak mentése

A szerkesztett termék Frissítés vagy Mégse gombjára kattintva jelenleg semmi sem történik; A funkció hozzáadásához eseménykezelőket kell létrehoznunk a DataList-ek UpdateCommand és CancelCommand -események számára. Először hozza létre az CancelCommand eseménykezelőt, amely akkor lesz végrehajtva, amikor a szerkesztett termék Mégse gombjára kattint, és feladata a DataList visszajuttatása az előszerkesztési állapotba.

Ahhoz, hogy a DataList az összes elemét írásvédett módban jeleníthesse meg, a következőkre van szükség:

1. Állítsa a DataList s tulajdonságátEditItemIndex egy nem létező DataListItem index indexére. -1 biztonságos választás, mivel az DataListItem indexek 0-nél kezdődnek.
2. Az adatokat újra hozzárendeli a DataListhez. Mivel egyetlen DataListItemItemIndex sem felel meg a DataList EditItemIndex-nek, a teljes DataList írásvédett módban jelenik meg.

Ezek a lépések a következő eseménykezelő kóddal hajthatóak végre:

protected void DataList1_CancelCommand(object source, DataListCommandEventArgs e)
{
    // Set the DataList's EditItemIndex property to -1
    DataList1.EditItemIndex = -1;
    // Rebind the data to the DataList
    DataList1.DataBind();
}

Ezzel a kiegészítéssel a Mégse gombra kattintva a DataList visszakerül az előszerkesztési állapotba.

Az utolsó eseménykezelő, amelyet végre kell hajtanunk, a UpdateCommand eseménykezelő. Ennek az eseménykezelőnek a következőre van szüksége:

1. Programozott módon hozzáférhet a felhasználó által megadott terméknévhez és árhoz, valamint a szerkesztett termékhez ProductID.
2. Indítsa el a frissítési folyamatot a megfelelő UpdateProduct overload meghívásával a ProductsBLL osztályban.
3. Állítsa a DataList s tulajdonságátEditItemIndex egy nem létező DataListItem index indexére. -1 biztonságos választás, mivel az DataListItem indexek 0-nél kezdődnek.
4. Az adatokat újra hozzárendeli a DataListhez. Mivel egyetlen DataListItemItemIndex sem felel meg a DataList EditItemIndex-nek, a teljes DataList írásvédett módban jelenik meg.

Az 1. és a 2. lépés a felhasználó módosításainak mentéséért felelős; A 3. és a 4. lépés a módosítások mentése után visszaadja a DataList előszerkesztési állapotát, és megegyezik az CancelCommand eseménykezelőben végrehajtott lépésekkel.

A frissített terméknév és ár lekéréséhez a FindControl módszerrel programozottan kell hivatkozni a TextBox webvezérlőire a EditItemTemplate. A szerkesztett termék ProductID értékét is le kell szereznünk. Amikor először az ObjectDataSource-t a DataListhez kötöttük, a Visual Studio hozzárendelte a DataList s tulajdonságát DataKeyField az adatforrás elsődleges kulcsértékéhez (ProductID). Ez az érték ezután lekérhető a DataList gyűjteményéből DataKeys . Szánjon egy kis időt annak biztosítására, hogy a DataKeyField tulajdonság valóban be legyen állítva ProductID.

A következő kód implementálja a négy lépést:

protected void DataList1_UpdateCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Read in the product name and price values
    TextBox productName = (TextBox)e.Item.FindControl("ProductName");
    TextBox unitPrice = (TextBox)e.Item.FindControl("UnitPrice");
    string productNameValue = null;
    if (productName.Text.Trim().Length > 0)
        productNameValue = productName.Text.Trim();
    decimal? unitPriceValue = null;
    if (unitPrice.Text.Trim().Length > 0)
        unitPriceValue = Decimal.Parse(unitPrice.Text.Trim(),
            System.Globalization.NumberStyles.Currency);
    // Call the ProductsBLL's UpdateProduct method...
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.UpdateProduct(productNameValue, unitPriceValue, productID);
    // Revert the DataList back to its pre-editing state
    DataList1.EditItemIndex = -1;
    DataList1.DataBind();
}

Az eseménykezelő a gyűjteményből kezdi a szerkesztett termékek ProductID olvasását DataKeys. Ezután a két szövegmezőre EditItemTemplate hivatkozunk, és a Text tulajdonságokat helyi változókban tároljuk, productNameValue és unitPriceValue. A metódussal Decimal.Parse() beolvashatjuk az értéket a UnitPrice Szövegdobozból, így ha a megadott érték pénznemszimbólummal rendelkezik, akkor is helyesen konvertálható értékké Decimal .

Megjegyzés:

A ProductName és UnitPrice Szövegdobozok értékei csak akkor kerülnek hozzárendelésre a productNameValue és unitPriceValue változókhoz, ha a Szövegdobozok szöveg tulajdonságában van megadva érték. Ellenkező esetben a változókhoz a rendszer egy értéket Nothing használ, amely az adatok adatbázis-értékkel NULL való frissítését eredményezi. Ez azt jelzi, hogy a kód az üres sztringeket adatbázisértékekké NULL alakítja, ami a Szerkesztőfelület alapértelmezett viselkedése a GridView, a DetailsView és a FormView vezérlőkben.

Az értékek beolvasása után meghívják az ProductsBLL osztály UpdateProduct metódusát, amely átadja a termék nevét, árát és ProductID. Az eseménykezelő a DataList előzetes szerkesztési állapotba való visszaadásával fejeződik be pontosan ugyanazzal a logikával, mint az CancelCommand eseménykezelőben.

A EditCommand, CancelCommand és UpdateCommand eseménykezelők befejeztével a látogató szerkesztheti a termék nevét és árát. A 14–16. ábrán ez a szerkesztési munkafolyamat működés közben jelenik meg.

14. ábra: Az oldal első megnyitásakor minden termék Read-Only módban van (ide kattintva megtekintheti a teljes méretű képet)

15. ábra: Egy termék nevének vagy árának frissítéséhez kattintson a Szerkesztés gombra (ide kattintva megtekintheti a teljes méretű képet)

16. ábra: Az érték módosítása után kattintson a Frissítés gombra a Read-Only módba való visszatéréshez (kattintson ide a teljes méretű kép megtekintéséhez)

7. lépés: Törlési képességek hozzáadása

A törlési képességek DataList-hez való hozzáadásának lépései hasonlóak a szerkesztési képességek hozzáadásához. Röviden, hozzá kell adnunk egy Törlés gombot ahhoz ItemTemplate , amikor rákattintunk:

1. Beolvassa a ProductID elemet a megfelelő termékben a DataKeys gyűjteményen keresztül.
2. A törlést az osztály s ProductsBLL metódusának DeleteProduct meghívásával hajtja végre.
3. Újraköti az adatokat a DataListhez.

Kezdjük azzal, hogy hozzáadunk egy Törlés gombot a ItemTemplate.

Amikor rákattintanak, a gombok, amelyek CommandName a Szerkesztés, a Frissítés vagy a Mégse, előidézik a DataList ItemCommand eseményét, valamint egy további eseményt is (például a Szerkesztés használatakor a EditCommand eseményt is előidézik). Hasonlóképpen, a DataList bármely Gombja, LinkButtonja vagy ImageButtonja, amelynek CommandName tulajdonsága Delete (Törlés) értékre van állítva, okozza, hogy DeleteCommand esemény bekövetkezzen (együtt a ItemCommand eseménnyel).

Adjon hozzá egy Törlés gombot a Szerkesztés gomb mellett, ItemTemplateés állítsa a tulajdonságát CommandName Törlés értékre. A gomb hozzáadása után a DataList deklaratív szintaxisának a következőképpen kell kinéznie ItemTemplate :

<ItemTemplate>
    <h5>
        <asp:Label runat="server" ID="ProductNameLabel"
            Text='<%# Eval("ProductName") %>' />
    </h5>
    Price: <asp:Label runat="server" ID="Label1"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    <br />
    <asp:Button runat="server" id="EditProduct" CommandName="Edit"
        Text="Edit" />
     
    <asp:Button runat="server" id="DeleteProduct" CommandName="Delete"
        Text="Delete" />
    <br />
    <br />
</ItemTemplate>

Ezután hozzon létre egy eseménykezelőt a DataList-eseményhez DeleteCommand a következő kóddal:

protected void DataList1_DeleteCommand(object source, DataListCommandEventArgs e)
{
    // Read in the ProductID from the DataKeys collection
    int productID = Convert.ToInt32(DataList1.DataKeys[e.Item.ItemIndex]);
    // Delete the data
    ProductsBLL productsAPI = new ProductsBLL();
    productsAPI.DeleteProduct(productID);
    // Rebind the data to the DataList
    DataList1.DataBind();
}

A Törlés gombra kattintva adatküldést okoz, és aktiválja a DataListDeleteCommand eseményt. Az eseménykezelőben a kattintott termék ProductID értéke a DataKeys gyűjteményből érhető el. Ezután a rendszer az s osztály ProductsBLL metódus meghívásával törli a DeleteProduct terméket.

A termék törlése után fontos, hogy újrakonfiguráljuk az adatokat a DataList (DataList1.DataBind()) listához, különben a DataList továbbra is megjeleníti az imént törölt terméket.

Összefoglalás

Bár a DataList nem rendelkezik a GridView által biztosított kattintásalapú szerkesztési és törlési lehetőségekkel, egy rövid kódrészlet segítségével bővíthető ezekkel a funkciókkal. Ebben az oktatóanyagban azt láttuk, hogyan hozhat létre kétoszlopos listát az olyan termékekről, amelyek törölhetők, és amelyek neve és ára szerkeszthető. A szerkesztési és törlési támogatás hozzáadásához be kell írni a megfelelő webes vezérlőket a ItemTemplateEditItemTemplatemegfelelő eseménykezelőkbe, beolvasni a felhasználó által megadott és elsődleges kulcsértékeket, valamint az üzleti logikai réteggel együttműködni.

Bár alapvető szerkesztési és törlési képességeket adtunk hozzá a DataListhez, nem rendelkezik speciálisabb funkciókkal. Például nincs beviteli mező érvényesítése – ha egy felhasználó a "Túl költséges" árat adja meg, a Decimal.Parse kivételt fog dobni, amikor megpróbálja a "Túl költséges" szöveget Decimal-vé konvertálni. Hasonlóképpen, ha probléma merül fel az üzleti logika vagy az adatelérési rétegek adatainak frissítésekor, a felhasználó megjelenik a standard hibaképernyővel. A Törlés gomb bármilyen megerősítése nélkül a termék véletlen törlése túl valószínű.

A jövőbeni oktatóanyagokban látni fogjuk, hogyan javíthatja a szerkesztési felhasználói élményt.

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ülön köszönet

Ezt az oktatóanyag-sorozatot sok hasznos véleményező áttekintette. Az oktatóanyag vezető véleményezői Zack Jones, Ken Pespisa és Randy Schmidt voltak. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

Következő