Megosztás a következőn keresztül:

Egyéni gombok a DataList és a Repeater (VB) alkalmazásban

által Scott Mitchell

PDF letöltése

Ebben az oktatóanyagban létrehozunk egy felületet, amely egy Repeaterrel listázza a rendszer kategóriáit, és minden kategóriához biztosítunk egy gombot, amely a társított termékeket jeleníti meg egy Felsorolásos Lista vezérlővel.

Bevezetés

Az elmúlt tizenhét DataList és Repeater oktatóanyag során írásvédett példákat hoztunk létre, valamint szerkesztési és törlési példákat készítettünk. A DataListen belüli szerkesztési és törlési képességek megkönnyítése érdekében olyan gombokat adtunk hozzá a DataList s-hez ItemTemplate , amelyek kattintáskor visszavételt okoztak, és a gomb CommandName tulajdonságának megfelelő DataList-eseményt eredményeztek. Ha például hozzáad egy gombot a ItemTemplate-hoz, egy Szerkesztés tulajdonságértékkel, akkor ez a DataList CommandName eseményének aktiválódását eredményezi a postback során; egy Törlés tulajdonságértéket viselő gomb pedig a EditCommand-kal, a CommandName eseményt váltja ki.

A Szerkesztés és törlés gomb mellett a DataList és az Repeater 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 létrehozunk egy felületet, amely egy Repeater használatával listázja a kategóriákat a rendszerben. Az Ismétlés vezérlő minden kategória számára egy gombot kap, amely a pontozott lista vezérlővel jeleníti meg a kategória társított termékeit (lásd az 1. ábrát).

A Termékek megjelenítése hivatkozásra kattintva megjelenítheti a kategória termékeit egy listajeles listában

1. ábra: A Termékek megjelenítése hivatkozásra kattintva megjelenítheti a kategória termékeit egy listajeles listában (ide kattintva megtekintheti a teljes méretű képet)

1. lépés: Az Egyéni gomb oktatóanyag weblapjainak hozzáadása

Mielőtt megnézzük, hogyan adhatunk hozzá egyéni gombot, 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.CustomButtonsDataListRepeater 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

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

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 CustomButtonsDataListRepeater 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. Adja hozzá ezt a felhasználói vezérlőt Default.aspx a Megoldáskezelőből a lap Tervező nézetébe húzva.

Adja hozzá a SectionLevelTutorialListing.ascx felhasználói vezérlőt a Default.aspx

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 után a DataList és a Repeater <siteMapNode> használatával:

<siteMapNode
    url="~/CustomButtonsDataListRepeater/Default.aspx"
    title="Adding Custom Buttons to the DataList and Repeater"
    description="Samples of DataList and Repeater Reports that Include
                  Buttons for Performing Server-Side Actions">
    <siteMapNode
        url="~/CustomButtonsDataListRepeater/CustomButtons.aspx"
        title="Using Custom Buttons in the DataList and Repeater's Templates"
        description="Examines how to add custom Buttons, LinkButtons,
                      or ImageButtons within templates." />
</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.

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

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

2. lépés: A kategóriák listájának hozzáadása

Ebben az oktatóanyagban létre kell hoznunk egy Repeatert, amely felsorolja az összes kategóriát, valamint egy Termék megjelenítése hivatkozásgombot, amely kattintáskor megjeleníti a társított kategória termékeit egy listajeles listában. Először hozzunk létre egy egyszerű repeatert, amely felsorolja a rendszer kategóriáit. Először nyissa meg a CustomButtons.aspx lapot a CustomButtonsDataListRepeater mappában. Húzzon egy Repeater vezérlőt az Eszköztárból a Tervezőre, és állítsa be a tulajdonságát ID a következőre Categories: Ezután hozzon létre egy új adatforrás-vezérlőt az Repeater intelligens címkéből. Pontosabban hozzon létre egy új ObjectDataSource-vezérlőt, CategoriesDataSource amely az osztály CategoriesBLL metódusából választja ki az GetCategories() adatait.

Az ObjectDataSource konfigurálása a CategoriesBLL class s GetCategories() metódus használatára

5. ábra: Az ObjectDataSource konfigurálása az CategoriesBLL osztály GetCategories() metódusának használatára (ide kattintva megtekintheti a teljes méretű képet)

A DataList vezérlővel ellentétben, amelyhez a Visual Studio az adatforrás alapján létrehoz egy alapértelmezettet ItemTemplate , a Repeater s sablonjait manuálisan kell definiálni. Ezenkívül a Repeater-sablonokat deklaratív módon kell létrehozni és szerkeszteni (azaz a Repeater intelligens címkéjében nincs sablonszerkesztés lehetőség).

Kattintson a bal alsó sarokban található Forrás fülre, és adjon hozzá egy ItemTemplate olyan elemet, amely megjeleníti a kategória nevét egy <h3> elemben, és annak leírását egy bekezdéscímkében; tartalmazzon egy SeparatorTemplate vízszintes szabályt (<hr />) az egyes kategóriák között. Adjon hozzá egy LinkButtont is, amelynek Text tulajdonsága a Termékek megjelenítése értékre van állítva. A lépések elvégzése után a lap deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

<asp:Repeater ID="Categories" DataSourceID="CategoriesDataSource"
    runat="server">
    <ItemTemplate>
        <h3><%# Eval("CategoryName") %></h3>
        <p>
            <%# Eval("Description") %>
            [<asp:LinkButton runat="server" ID="ShowProducts">
                Show Products</asp:LinkButton>]
        </p>
    </ItemTemplate>
    <SeparatorTemplate><hr /></SeparatorTemplate>
</asp:Repeater>
<asp:ObjectDataSource ID="CategoriesDataSource" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetCategories" TypeName="CategoriesBLL">
</asp:ObjectDataSource>

A 6. ábrán az oldal látható, ha egy böngészőben tekinti meg. Minden kategória neve és leírása megjelenik a listában. A Termékek megjelenítése gombra kattintva visszalépést okoz, de még nem hajt végre semmilyen műveletet.

Minden kategória neve és leírása megjelenik, valamint egy Termék megjelenítése hivatkozásgomb

6. ábra: Megjelenik az egyes kategóriák neve és leírása, valamint a Termékek megjelenítése hivatkozásgomb (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: Server-Side logika végrehajtása, amikor a Termékek megjelenítése hivatkozásgombra kattint

Ha egy DataList vagy Repeater sablonban lévő gombra, LinkButtonra vagy ImageButtonra kattint, visszapostolás történik, és a DataList vagy a Repeater ItemCommand eseménye aktiválódik. Az ItemCommand esemény mellett a DataList vezérlő egy másik, konkrétabb eseményt is kiválthat, ha a gombnak a CommandName tulajdonsága a fenntartott sztringek (Törlés, Szerkesztés, Mégse, Frissítés vagy Kijelölés) egyikére van beállítva, de az ItemCommand esemény mindig aktiválódik.

Amikor egy gombra kattint egy DataList vagy Repeater alkalmazásban, gyakran át kell adnunk, hogy melyik gombra kattintottunk (abban az esetben, ha több gomb is lehet a vezérlőn belül, például a Szerkesztés és a Törlés gomb), és esetleg további információkat (például annak az elemnek az elsődleges kulcsértékét, amelyre a gombra kattintott). A Gomb, a LinkButton és az ImageButton két tulajdonságot biztosít, amelyek értékeit a rendszer átadja az ItemCommand eseménykezelőnek:

  • CommandName egy sztring, amely általában a sablon egyes gombainak azonosítására szolgál
  • CommandArgument gyakran használják bizonyos adatmezők értékének tárolására, például az elsődleges kulcs értékének tárolására

Ebben a példában állítsa a LinkButton s tulajdonságot CommandName ShowProducts értékre, és kösse az aktuális rekord elsődleges kulcsértékét CategoryID a tulajdonsághoz a CommandArgument databinding szintaxis CategoryArgument='<%# Eval("CategoryID") %>'használatával. A két tulajdonság megadása után a LinkButton deklaratív szintaxisának a következőképpen kell kinéznie:

<asp:LinkButton runat="server" CommandName="ShowProducts"
    CommandArgument='<%# Eval("CategoryID") %>' ID="ShowProducts">
    Show Products</asp:LinkButton>

Ha a gombra kattint, egy postback történik, és a DataList vagy a Repeater ItemCommand eseménye lefut. Az eseménykezelő megkapja az s gomb CommandName és CommandArgument értékeit.

Hozzon létre egy eseménykezelőt az Repeater s ItemCommand eseményhez, és jegyezze fel az eseménykezelőnek átadott második paramétert (neve).e Ez a második paraméter típusa RepeaterCommandEventArgs a következő négy tulajdonsággal rendelkezik:

  • CommandArgumenta kattintott gomb tulajdonság értéke CommandArgument
  • CommandName a gomb s tulajdonságának CommandName értéke
  • CommandSource a kattintott gombvezérlőre mutató hivatkozás
  • Item a RepeaterItem-re mutató hivatkozás, amely tartalmazza a kattintott gombot; minden az ismétlőhöz kötött rekord RepeaterItem formájában jelenik meg

Mivel a kiválasztott kategória CategoryID a CommandArgument tulajdonságon keresztül kerül átadásra, a ItemCommand eseménykezelőben lekérhetjük a kiválasztott kategóriához társított termékek készletét. Ezek a termékek ezután a BulletedList vezérlőelemhez köthetők a ItemTemplate (még hozzáadandó) területen. Ezután már csak a Felsorolásjelként formázott lista hozzáadása, az ItemCommand eseménykezelőben való hivatkozása, illetve a kiválasztott kategória termékkészletének hozzá kötése marad, amit a 4. lépésben fogunk kezelni.

Megjegyzés:

A DataList eseménykezelője ItemCommand egy olyan típusú DataListCommandEventArgsobjektumot ad át, amely ugyanazt a négy tulajdonságot kínálja, mint az RepeaterCommandEventArgs osztály.

4. lépés: A kijelölt kategória termékeinek megjelenítése listajeles listában

A kiválasztott kategória termékei tetszőleges számú vezérlővel megjeleníthetők az Repeater s-ben ItemTemplate . Hozzáadhatunk egy másik beágyazott repeatert, egy DataListet, egy DropDownListet, egy GridView-t stb. Mivel azonban listajeles listaként szeretnénk megjeleníteni a termékeket, a Listajeles lista vezérlőt fogjuk használni. Visszatérve a CustomButtons.aspx lap deklaratív jelöléséhez, adjon hozzá egy Pontozott lista vezérlőt a ItemTemplate Termékek megjelenítése LinkButton után. Állítsa be a felsorolásokat s IDProductsInCategory értékre. A Listajeles lista megjeleníti az adatmező értékét, amelyet a DataTextField tulajdonság határoz meg; mivel ez a vezérlő termékinformációkat fog tartalmazni, állítsa a DataTextField tulajdonságot az ProductName értékre.

<asp:BulletedList ID="ProductsInCategory" DataTextField="ProductName"
    runat="server"></asp:BulletedList>

Az eseménykezelőben hivatkozzon erre a ItemCommand vezérlőre e.Item.FindControl("ProductsInCategory") , és kösse azt a kiválasztott kategóriához társított termékkészlethez.

Protected Sub Categories_ItemCommand _
    (source As Object, e As RepeaterCommandEventArgs) _
    Handles Categories.ItemCommand
    If e.CommandName = "ShowProducts" Then
        ' Determine the CategoryID
        Dim categoryID As Integer = Convert.ToInt32(e.CommandArgument)
        ' Get the associated products from the ProudctsBLL and
        ' bind them to the BulletedList
        Dim products As BulletedList = _
            CType(e.Item.FindControl("ProductsInCategory"), BulletedList)
        Dim productsAPI As New ProductsBLL()
        products.DataSource = productsAPI.GetProductsByCategoryID(categoryID)
        products.DataBind()
    End If
End Sub

Mielőtt bármilyen műveletet végrehajtanál az ItemCommand eseménykezelőben, érdemes először ellenőrizni a bejövő CommandNameértékeket. Mivel az ItemCommand eseménykezelő bármelyik gombra kattintva aktiválódik, ha a sablonban több gomb is található, az CommandName érték használatával állapítsa meg, hogy milyen műveletet kell elvégeznie. Az itt való CommandName ellenőrzése értelmetlen, mivel csak egyetlen gombunk van, de ez egy jó gyakorlat. Ezután a kiválasztott kategória CategoryID értékét kiolvassuk a CommandArgument tulajdonságból. A sablon BulletedList vezérlőelemére ezután hivatkozik, és a ProductsBLL osztály GetProductsByCategoryID(categoryID) metódusának eredményeihez van kötve.

A DataListben található gombokat használó korábbi oktatóanyagokban, például az Adatok szerkesztésének és törlésének áttekintésében meghatároztuk egy adott elem elsődleges kulcsértékét a DataKeys gyűjteményen keresztül. Bár ez a megközelítés jól működik a DataList használatával, az ismétlő nem rendelkezik tulajdonsággal DataKeys . Ehelyett alternatív módszert kell használnunk az elsődleges kulcs értékének megadásához, például a gomb CommandArgument tulajdonságán keresztül, vagy az elsődleges kulcs értékének hozzárendelésével egy rejtett Label webvezérlőhöz a sablonon belül, és az érték visszaolvasása az eseménykezelőben a ItemCommand használatával e.Item.FindControl("LabelID").

Az ItemCommand eseménykezelő befejezése után szánjon egy kis időt a lap tesztelésére egy böngészőben. Ahogy a 7. ábrán látható, a Termékek megjelenítése hivatkozásra kattintva visszajelzést okoz, és megjeleníti a kiválasztott kategória termékeit egy pontozott listában. Vegye figyelembe továbbá, hogy ezek a termékinformációk akkor is megmaradnak, ha más kategóriákban a Termékek megjelenítése hivatkozásra kattint.

Megjegyzés:

Ha módosítani szeretné a jelentés viselkedését, hogy egyszerre csak az egyetlen kategória termékei jelenjenek meg, egyszerűen állítsa a Listajeles lista vezérlőelem tulajdonságát EnableViewState a következőre False: .

A listajeles lista a kijelölt kategória termékeinek megjelenítésére szolgál

7. ábra: A listajeles lista a kijelölt kategória termékeinek megjelenítésére szolgál (ide kattintva megtekintheti a teljes méretű képet)

Összefoglalás

A DataList és az Repeater vezérlők tetszőleges számú gombot, LinkButtont vagy ImageButtont tartalmazhatnak a sablonjaikban. Az ilyen gombok kattintáskor visszaküldést okoznak, és kiváltják az ItemCommand eseményt. Ha egyéni kiszolgálóoldali műveletet szeretne társítani egy kattintásra kijelölt gombra, hozzon létre egy eseménykezelőt az ItemCommand eseményhez. Ebben az eseménykezelőben először ellenőrizze a bejövő CommandName értéket annak megállapításához, hogy melyik gombra kattintott. További információk opcionálisan a gomb tulajdonságán CommandArgument keresztül is megadhatóak.

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ője Dennis Patterson volt. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

Előző

  • Last updated on