TemplateFields használata a DetailsView vezérlőben (VB)

által Scott Mitchell

PDF letöltése

A DetailsView vezérlővel ugyanazok a TemplateFields-képességek is elérhetők a GridView-nal. Ebben az oktatóanyagban egyszerre egy terméket jelenítünk meg a TemplateFieldst tartalmazó DetailsView használatával.

Bevezetés

A TemplateField nagyobb rugalmasságot kínál az adatok renderelésében, mint a BoundField, a CheckBoxField, a HyperLinkField és más adatmező-vezérlők. Az előző oktatóanyagban a TemplateField gridView-ban való használatát vizsgáltuk a következőkhöz:

• Több adatmezőérték megjelenítése egy oszlopban. Pontosabban, mind a FirstName mezők, mind a LastName mezők egy GridView-oszlopba lettek kombinálva.
• Egy másik webvezérlővel kifejezheti az adatmező értékét. Láttuk, hogyan jelenítheti meg az HiredDate értéket naptárvezérlővel.
• Állapotinformációk megjelenítése az alapul szolgáló adatok alapján. Bár a Employees táblázat nem tartalmaz olyan oszlopot, amely azt adja vissza, hogy az alkalmazott hány napot töltött a feladaton, az előző oktatóanyag GridView-példájában egy TemplateField és formázási módszer használatával jeleníthettük meg ezeket az információkat.

A DetailsView vezérlővel ugyanazok a TemplateFields-képességek is elérhetők a GridView-nal. Ebben az oktatóanyagban egyszerre egy terméket jelenítünk meg egy DetailsView használatával, amely két TemplateFields-et tartalmaz. Az első TemplateField egyetlen DetailsView sorba egyesíti a , UnitPriceés UnitsInStock az UnitsOnOrderadatmezőket. A második TemplateField megjeleníti a Discontinued mező értékét, de formázási módszerrel jeleníti meg az "IGEN" értéket, ha Discontinued igen True, és ellenkező esetben a "NEM" értéket.

1. ábra: A megjelenítés testreszabásához két sablonmező használható (ide kattintva megtekintheti a teljes méretű képet)

Lássunk hozzá!

1. lépés: Az adatok kötése a DetailsView-hoz

Ahogy az előző oktatóanyagban is szó volt róla, a TemplateFields használata során gyakran a legegyszerűbb a Csak BoundFieldset tartalmazó DetailsView vezérlő létrehozásával kezdeni, majd új TemplateFields-elemeket hozzáadni, vagy szükség szerint sablonmezőkké alakítani a meglévő BoundFieldeket. Ezért indítsa el ezt az oktatóanyagot úgy, hogy hozzáad egy DetailsView-t a laphoz a Tervezőn keresztül, és egy ObjectDataSource-hoz köti, amely visszaadja a termékek listáját. Ezek a lépések létrehoznak egy DetailsView-t a BoundFields használatával a termék nem logikai értékmezőihez, és egy CheckBoxFieldet az egy logikai érték mezőhöz (megszűnt).

Nyissa meg a DetailsViewTemplateField.aspx lapot, és húzzon egy DetailsView-t az eszközkészletből a Tervezőbe. A DetailsView intelligens címkéje alapján adjon hozzá egy új ObjectDataSource-vezérlőt, amely meghívja az ProductsBLL osztály metódusát GetProducts() .

2. ábra: Adjon hozzá egy új ObjectDataSource-vezérlőt, amely meghívja a GetProducts() metódust (kattintson ide a teljes méretű kép megtekintéséhez)

Ebben a jelentésben távolítsa el a ProductID, SupplierID, CategoryID, és ReorderLevel BoundFields mezőket. Ezután rendezze úgy a BoundFieldeket, hogy a CategoryName és SupplierName BoundFields közvetlenül a ProductName BoundField után jelenjen meg. Tetszés szerint módosíthatja a HeaderText BoundFields tulajdonságait és formázási tulajdonságait. A GridView-hez hasonlóan ezek a BoundField szintű módosítások a Mezők párbeszédpanelen (a DetailsView intelligens címkéjén a Mezők szerkesztése hivatkozásra kattintva) vagy a deklaratív szintaxison keresztül is végrehajthatók. Végül törölje a DetailsView Height és Width tulajdonságértékeit, így a DetailsView vezérlő a megjelenített adatok alapján bővülhet, és jelölje be az intelligens címke Lapozás engedélyezése jelölőnégyzetét.

A módosítások elvégzése után a DetailsView vezérlő deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="Price"
          SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock"
          HeaderText="Units In Stock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder"
          HeaderText="Units On Order" SortExpression="UnitsOnOrder" />
        <asp:CheckBoxField DataField="Discontinued"
          HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Szánjon egy kis időt az oldal megtekintésére egy böngészőben. Ezen a ponton egyetlen terméknek (Chai) kell megjelennie, amelyben a termék neve, kategóriája, szállítója, ára, készleten lévő egységei, rendelési egységei és megszűnt állapota látható.

3. ábra: A termék részletei BoundFields sorozat használatával jelennek meg (ide kattintva megtekintheti a teljes méretű képet)

2. lépés: Az ár, a készleten lévő egységek és a rendelésen lévő egységek egy sorba egyesítése

A DetailsView a UnitPrice, UnitsInStock, és UnitsOnOrder mezők sorával rendelkezik. Ezeket az adatmezőket egyetlen sorba egyesíthetjük a TemplateFielddel egy új TemplateField hozzáadásával, vagy a meglévők UnitPriceUnitsInStockés UnitsOnOrder a BoundFieldek sablonmezővé alakításával. Bár én személy szerint inkább átalakítom a meglévő BoundFields-eket, gyakoroljunk egy új TemplateField hozzáadásával.

Először kattintson a Mezők szerkesztése hivatkozásra a DetailsView intelligens címkéjén a Mezők párbeszédpanel megjelenítéséhez. Ezután adjon hozzá egy új TemplateFieldet, és állítsa a tulajdonságát HeaderText "Ár és készlet" értékre, és helyezze át az új TemplateFieldet úgy, hogy az a UnitPrice BoundField fölé legyen helyezve.

4. ábra: Új sablonmező hozzáadása a DetailsView vezérlőhöz (ide kattintva megtekintheti a teljes méretű képet)

Mivel ez az új TemplateField a , UnitPriceés UnitsInStock a UnitsOnOrderBoundFields alkalmazásban jelenleg megjelenített értékeket tartalmazza, távolítsuk el őket.

A lépés utolsó feladata az ItemTemplate ár- és készletsablonmező jelölőjének meghatározása, amely a Tervező DetailsView sablonszerkesztő felületén vagy a vezérlő deklaratív szintaxisán keresztül végezhető el. A GridView-hez hasonlóan a DetailsView sablonszerkesztő felülete is elérhető az intelligens címke Sablonok szerkesztése hivatkozására kattintva. Itt kiválaszthatja a szerkeszteni kívánt sablont a legördülő listából, majd hozzáadhatja a webvezérlőket az Eszközkészletből.

Ebben az oktatóanyagban először adjon hozzá egy Címke vezérlőelemet az Ár és készlet sablonmezőhöz ItemTemplate. Ezután kattintson a "DataBindings szerkesztése" hivatkozásra a címke webes vezérlő intelligens címkéjén, és kösse a Text tulajdonságot a UnitPrice mezőhöz.

5. ábra: A címke tulajdonságának kötése Text az UnitPrice adatmezőhöz (kattintson ide a teljes méretű kép megtekintéséhez)

Az ár pénznemként való formázása

Ezzel a kiegészítéssel a webes címkevezérlő az "Ár és Készlet TemplateField"-re mostantól csak a kiválasztott termék árát jeleníti meg. A 6. ábra egy képernyőfelvételt jelenít meg az eddigi fejlődésünkről, amikor egy böngészőben tekintjük meg.

6. ábra: Az Ár és a Készlet sablonmező megjeleníti az árat (ide kattintva megtekintheti a teljes méretű képet)

Vegye figyelembe, hogy a termék ára nem pénznemként van formázva. BoundField esetén a formázás úgy lehetséges, hogy a HtmlEncode tulajdonságot False-re, míg a DataFormatString tulajdonságot {0:formatSpecifier}-ra állítja. A TemplateField esetében azonban minden formázási utasítást meg kell adni az adatkötési szintaxisban, vagy az alkalmazás kódjában valahol meghatározott formázási módszer használatával (például a ASP.NET lap kód mögötti osztályában).

A Címke web vezérlőelemben használt adatkötési szintaxis formázásának megadásához térjen vissza a DataBindings párbeszédpanelre a Címke intelligens címkéjének DataBindings szerkesztése hivatkozására kattintva. A formázási utasításokat közvetlenül a Formátum legördülő listában adhatja meg, vagy kiválaszthatja a megadott formázási sztringek egyikét. A BoundField tulajdonságához DataFormatString hasonlóan a formázás a következővel {0:formatSpecifier}van megadva: .

UnitPrice A mezőhöz használja a megadott pénznemformázást a megfelelő legördülő lista értékének kiválasztásával vagy kézzel történő beírással{0:C}.

7. ábra: Az ár formázása pénznemként (ide kattintva megtekintheti a teljes méretű képet)

Deklaratív módon a formázási specifikáció második paraméterként van megadva a Bind vagy Eval metódusokban. Az imént a Tervezőn keresztül végrehajtott beállítások a következő adatkötési kifejezést eredményezik a deklaratív korrektúrában:

<asp:Label ID="Label1" runat="server" Text='<%# Eval("UnitPrice", "{0:C}") %>'/>

A fennmaradó adatmezők hozzáadása a Sablonmezőhöz

Ezen a ponton az Ár és készlet sablonmezőben megjelenítettük és formáztuk az UnitPrice adatmezőt, de még meg kell jeleníteni az UnitsInStock és UnitsOnOrder mezőket. Jelenítsük meg ezeket az ár alatti sorban, zárójelben. A Tervező sablonszerkesztő felületéről az ilyen korrektúra hozzáadható úgy, hogy a kurzort a sablonba helyezi, és egyszerűen beírja a megjelenítendő szöveget. Másik lehetőségként ez a korrektúra közvetlenül a deklaratív szintaxisban is megadható.

Adja hozzá a statikus korrektúrát, a Címke webvezérlőket és az adatkötési szintaxist, hogy az Ár és készlet sablonmező az ár- és készletinformációkat a következőképpen jelentesse meg:

Egységár
(Raktáron / Rendelésen:UnitsInStock / UnitsOnOrder)

A feladat elvégzése után a DetailsView deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName"
          HeaderText="Product" SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName"
          HeaderText="Supplier" ReadOnly="True"
          SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:TemplateField HeaderText="Price and Inventory">
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                  Text='<%# Eval("UnitPrice", "{0:C}") %>'></asp:Label>
                <br />
                <strong>
                (In Stock / On Order: </strong>
                <asp:Label ID="Label2" runat="server"
                  Text='<%# Eval("UnitsInStock") %>'></asp:Label>
                <strong>/</strong>
                <asp:Label ID="Label3" runat="server"
                  Text='<%# Eval("UnitsOnOrder") %>'>
                </asp:Label><strong>)</strong>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:CheckBoxField DataField="Discontinued"
           HeaderText="Discontinued" SortExpression="Discontinued" />
    </Fields>
</asp:DetailsView>

Ezekkel a módosításokkal az ár- és készletinformációkat egyetlen DetailsView sorba összesítettük.

8. ábra: Az ár- és készletinformációk egyetlen sorban jelennek meg (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: A megszűnt mezőadatok testreszabása

A Products tábla oszlopa Discontinued egy bitérték, amely jelzi, hogy a termék megszűnt-e. Amikor egy DetailsView -t (vagy GridView-t) egy adatforrás-vezérlőhöz köt, a logikai érték mezői (például Discontinued: CheckBoxFields), míg a nem logikai értékmezők (például ProductID, ProductNamestb.) BoundFieldsként lesznek implementálva. A Jelölőnégyzetmező letiltott jelölőnégyzetként jelenik meg, amely be van jelölve, ha az adatmező értéke Igaz, és nincs bejelölve máskülönben.

A CheckBoxField helyett érdemes lehet inkább megjeleníteni a szöveget, amely jelzi, hogy a termék megszűnt-e. Ehhez eltávolíthatjuk a CheckBoxFieldet a DetailsView nézetből, majd hozzáadhatunk egy BoundFieldet, amelynek DataField a tulajdonsága a következőre van állítva Discontinued. Szánjon egy kis időt erre. A módosítás után a DetailsView megjeleníti a "True" (Igaz) szöveget a megszűnt termékeknél, a "False" (Hamis) szöveget pedig a még aktív termékeknél.

9. ábra: Az Igaz és a Hamis sztringek a megszüntetett állapot megjelenítésére szolgálnak (kattintson ide a teljes méretű kép megtekintéséhez)

Tegyük fel, hogy nem a „True” vagy a „False” értéket akartuk használni, hanem az „IGEN” és „NEM” értéket. Az ilyen testreszabás egy TemplateField és egy formázási módszer segítségével végezhető el. A formázási módszer tetszőleges számú bemeneti paramétert tartalmazhat, de a HTML-t (sztringként) vissza kell adnia a sablonba való beszúráshoz.

Adjon hozzá egy formázási módszert a DetailsViewTemplateField.aspx lap kód mögötti DisplayDiscontinuedAsYESorNO osztályához, amely fogadja az Northwind.ProductsRow objektumot bemeneti paraméterként, és sztringet ad vissza. Az előző oktatóanyagban leírtaknak megfelelően ezt a metódust úgy kell megjelölni, hogy ProtectedPublic elérhető legyen a sablonból.

Protected Function DisplayDiscontinuedAsYESorNO(discontinued As Boolean) As String
    If discontinued Then
        Return "YES"
    Else
        Return "NO"
    End If
End Function

Ez a metódus ellenőrzi a bemeneti paramétert (discontinued), és "IGEN" értéket ad vissza, ha nem True.

Megjegyzés:

Az előző oktatóanyagban vizsgált formázási módszerben felidézzük, hogy egy olyan adatmezőt adtunk át, amely tartalmazhat NULL s-t, ezért ellenőrizni kellett, hogy az alkalmazott HiredDate tulajdonságának értéke adatbázis-értékkel NULL rendelkezik-e a EmployeesRowtulajdonság HiredDate elérése előtt. Itt nincs szükség ilyen ellenőrzésre, mivel az Discontinued oszlophoz soha nem rendelhetők hozzá adatbázisértékek NULL . A metódus ezért is fogad el logikai bemeneti paramétert ahelyett, hogy el kellene fogadnia egy ProductsRow példányt vagy egy Object típusú paramétert.

Miután ez a formázási módszer befejeződött, már csak annyi teendő van, hogy meghívjuk a TemplateField megfelelő ItemTemplate eleméből. A TemplateField létrehozásához távolítsa el a Discontinued BoundFieldet, és adjon hozzá egy új TemplateFieldet, vagy konvertálja a Discontinued BoundFieldet sablonmezővé. Ezután a deklaratív korrektúranézetben szerkessze a TemplateFieldet, hogy csak egy ItemTemplate-et tartalmazzon, amely meghívja a DisplayDiscontinuedAsYESorNO metódust, és az aktuális ProductRow példány Discontinued tulajdonságának értékét adja át. Ez a Eval metóduson keresztül érhető el. Pontosabban a TemplateField jelölésének a következőképpen kell kinéznie:

<asp:TemplateField HeaderText="Discontinued" SortExpression="Discontinued">
    <ItemTemplate>
        <%#DisplayDiscontinuedAsYESorNO(Convert.ToBoolean(Eval("Discontinued")))%> 
    </ItemTemplate>
</asp:TemplateField>

Ez a DisplayDiscontinuedAsYESorNO metódus meghívását eredményezi, amikor a DetailsView renderelődik, ezáltal átvéve a ProductRow példány Discontinued értékét. Mivel a Eval metódus egy Object típusú értéket ad vissza, de a DisplayDiscontinuedAsYESorNO metódus egy Boolean típusú paramétert vár, a metódus Eval visszatérési értékét Boolean-ra vetjük. A DisplayDiscontinuedAsYESorNO metódus ezután a kapott értéktől függően "IGEN" vagy "NEM" értéket ad vissza. A visszaadott érték jelenik meg ebben a DetailsView sorban (lásd a 10. ábrát).

10. ábra: Az IGEN vagy a NEM érték jelenik meg a megszűnt sorban (ide kattintva megtekintheti a teljes méretű képet)

Összefoglalás

A DetailsView vezérlő TemplateFieldje nagyobb rugalmasságot tesz lehetővé az adatok megjelenítésében, mint a többi mezővezérlő esetében, és ideális az olyan helyzetekhez, amikor:

• Több adatmezőt kell megjeleníteni egy GridView-oszlopban
• Az adatok a legjobban webes vezérlővel fejezhetőek ki egyszerű szöveg helyett
• A kimenet az alapul szolgáló adatoktól függ, például metaadatok megjelenítésétől vagy az adatok újraformázásától

Bár a TemplateFields nagyobb rugalmasságot biztosít a DetailsView mögöttes adatainak renderelésében, a DetailsView kimenete továbbra is kissé dobozosnak tűnik, mivel minden mező sorként jelenik meg egy HTML-ben <table>.

A FormView vezérlő nagyobb rugalmasságot biztosít a renderelt kimenet konfigurálásához. A FormView nem tartalmaz mezőket, hanem csak egy sor sablont (ItemTemplatestbEditItemTemplateHeaderTemplate.). A következő oktatóanyagban bemutatjuk, hogyan használhatja a FormView-t a renderelt elrendezés még nagyobb vezérlésére.

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

ElőzőKövetkező