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

által Scott Mitchell

PDF letöltése

A rugalmasság érdekében a GridView a Sablonmezőt kínálja, amely sablon használatával jelenik meg. A sablonok tartalmazhatnak statikus HTML-t, webes vezérlőket és adatkötési szintaxist. Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan használhatja a TemplateFieldet a Nagyobb fokú testreszabás eléréséhez a GridView vezérlővel.

Bevezetés

A GridView egy mezőkészletből áll, amely jelzi, hogy a DataSource renderelt kimenet milyen tulajdonságokat tartalmaz, valamint az adatok megjelenítésének módját. A legegyszerűbb mezőtípus a BoundField, amely szövegként jeleníti meg az adatértéket. Más mezőtípusok alternatív HTML-elemek használatával jelenítik meg az adatokat. A Jelölőnégyzetmező például olyan jelölőnégyzetként jelenik meg, amelynek a bejelölt állapota egy adott adatmező értékétől függ; az ImageField egy olyan képet jelenít meg, amelynek képforrása egy megadott adatmezőn alapul. Azok a hivatkozások és gombok, amelyek állapota egy mögöttes adatmező értékétől függ, a HyperLinkField és a ButtonField mezőtípussal jeleníthetők meg.

Bár a CheckBoxField, az ImageField, a HyperLinkField és a ButtonField mezőtípus lehetővé teszi az adatok alternatív nézetét, a formázás tekintetében továbbra is meglehetősen korlátozottak. A Jelölőnégyzetmezők csak egyetlen jelölőnégyzetet jeleníthetnek meg, míg az ImageField csak egyetlen képet jeleníthet meg. Mi a teendő, ha egy adott mezőnek szöveget, jelölőnégyzetet és képet kell megjelenítenie, mindezt különböző adatmezőértékek alapján? Vagy mi a teendő, ha az adatokat a Jelölőnégyzet, a Kép, a HyperLink vagy a Gomb kivételével más webes vezérlővel szeretnénk megjeleníteni? A BoundField emellett egyetlen adatmezőre korlátozza a megjelenítést. Mi a teendő, ha két vagy több adatmezőértéket szeretnénk megjeleníteni egyetlen GridView-oszlopban?

Ennek a rugalmasságnak a kielégítése érdekében a GridView a Sablonmezőt kínálja, amely sablon használatával jelenik meg. A sablonok tartalmazhatnak statikus HTML-t, webes vezérlőket és adatkötési szintaxist. Emellett a TemplateField számos sablonnal rendelkezik, amelyekkel testre szabhatja a megjelenítést különböző helyzetekben. A rendszer például alapértelmezés szerint az ItemTemplate egyes sorok celláját jeleníti meg, de a EditItemTemplate sablon segítségével testre szabhatja a felületet az adatok szerkesztésekor.

Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan használhatja a TemplateFieldet a Nagyobb fokú testreszabás eléréséhez a GridView vezérlővel. Az előző oktatóanyagban láttuk, hogyan szabhatja testre a formázást az alapul szolgáló adatok alapján DataBound és RowDataBound eseménykezelők használatával. A formázást a mögöttes adatok alapján úgy is testre szabhatja, hogy egy sablonból meghívja a formázási módszereket. Ebben az oktatóanyagban is megvizsgáljuk ezt a technikát.

Ebben az oktatóanyagban a TemplateFields használatával testre szabjuk az alkalmazottak listájának megjelenését. Pontosabban felsoroljuk az összes alkalmazottat, de az alkalmazott vezeték- és utóneveit egy oszlopban, a felvétel dátumát egy Naptár vezérlőelemben, valamint egy állapotoszlopot jelenítünk meg, amely azt jelzi, hogy hány napot alkalmaztak a vállalatnál.

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

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

Jelentési forgatókönyvek esetében, ahol a TemplateFields használatával kell testre szabni a megjelenést, a legegyszerűbb, ha először létrehozok egy olyan GridView-vezérlőt, amely csak BoundFields-ként tartalmaz egy mezőt, majd szükség szerint új TemplateFields-t adok hozzá, vagy a meglévő BoundFields-t TemplateFields-re konvertálom. Ezért kezdjük el ezt az oktatóanyagot úgy, hogy hozzáadunk egy GridView-t a laphoz a Tervezőn keresztül, és egy ObjectDataSource-hoz kötjük, amely visszaadja az alkalmazottak listáját. Ezek a lépések létrehoznak egy GridView-t a BoundFields használatával az egyes alkalmazotti mezőkhöz.

Nyissa meg a GridViewTemplateField.aspx lapot, és húzza a GridView-t az eszközkészletből a Tervezőbe. A GridView intelligens címkéje alapján válasszon egy új ObjectDataSource-vezérlőt, amely meghívja az EmployeesBLL osztály metódusát GetEmployees() .

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

A GridView ilyen kötése automatikusan hozzáad egy BoundFieldet az egyes alkalmazotti tulajdonságokhoz: EmployeeID, , LastName, FirstNameTitle, HireDate, ReportsToés Country. Ebben a jelentésben ne foglalkozzunk a EmployeeID, ReportsTo vagy Country tulajdonságok megjelenítésével. A BoundFields eltávolításához a következőkre van lehetőség:

• A Mezők párbeszédpanelen kattintson a GridView intelligens címkéjének Oszlop szerkesztése hivatkozására a párbeszédpanel megjelenítéséhez. Ezután válassza ki a BoundFields elemet a bal alsó listában, és kattintson a piros X gombra a BoundField eltávolításához.
• Szerkessze kézzel a GridView deklaratív szintaxisát a Forrás nézetben, törölje az <asp:BoundField> eltávolítani kívánt BoundField elemét.

Miután eltávolította a EmployeeID, ReportsTo és Country BoundFields elemeket, a GridView jelölésének a következőképpen kell kinéznie:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
          SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
          SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
          SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
          SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Szánjon egy kis időt az előrehaladás megtekintésére egy böngészőben. Ezen a ponton látnia kell egy táblát, amely minden alkalmazotthoz rekordot és négy oszlopot tartalmaz: egyet az alkalmazott vezetéknevéhez, egyet a vezetéknevéhez, egyet a címéhez, egyet pedig a felvétel dátumát.

3. ábra: Az LastNameegyes alkalmazottakhoz tartozó , FirstName, Titleés HireDate mezők jelennek meg (ide kattintva megtekintheti a teljes méretű képet)

2. lépés: Az utó- és vezetéknevek megjelenítése egyetlen oszlopban

Jelenleg minden alkalmazott vezeték- és utóneve külön oszlopban jelenik meg. Jó lehet inkább egyetlen oszlopba egyesíteni őket. Ehhez egy TemplateFieldet kell használnunk. Hozzáadhatunk egy új TemplateFieldet, hozzáadhatjuk hozzá a szükséges jelölő és adatkötési szintaxist, majd törölhetjük a FirstName és LastName BoundFields mezőket, vagy átalakíthatjuk a FirstName BoundFieldet sablonmezővé, szerkeszthetjük a TemplateFieldet, hogy belefoglaljuk az LastName értéket, majd eltávolítsuk a LastName BoundFieldet.

Mindkét megközelítés ugyanazt az eredményt eredményezi, de személy szerint szeretem átalakítani a BoundField-eket TemplateField-ekre, ha lehetséges, mert az átalakítás automatikusan hozzáad egy ItemTemplate és EditItemTemplate webes vezérlőt és adatkötési szintaxist, amelyek utánozzák a BoundField megjelenését és működését. Ennek az az előnye, hogy kevesebb munkát kell végeznünk a TemplateFielddel, mivel a konvertálási folyamat elvégzi a munka egy részét számunkra.

Meglévő BoundField sablonmezővé alakításához kattintson az Oszlopok szerkesztése hivatkozásra a GridView intelligens címkéjén, és hozza létre a Mezők párbeszédpanelt. Válassza ki a bal alsó sarokban lévő listából konvertálni kívánt BoundFieldet, majd kattintson a jobb alsó sarokban található "Mező átalakítása sablonmezővé" hivatkozásra.

4. ábra: BoundField átalakítása sablonmezővé a Mezők párbeszédpanelről (ide kattintva megtekintheti a teljes méretű képet)

Folytassa, és alakítsa át a FirstName BoundFieldet sablonmezővé. A módosítás után nincs érzékelhető különbség a Tervezőben. Ennek az az oka, hogy a BoundField sablonmezővé alakításával létrehoz egy TemplateFieldet, amely megőrzi a BoundField megjelenését és hangulatát. Annak ellenére, hogy jelenleg nincs vizuális különbség a Tervezőben, ez a konvertálási folyamat felváltotta a BoundField deklaratív szintaxisát - <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> a következő TemplateField szintaxisra:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Mint látható, a TemplateField két olyan sablonból ItemTemplate áll, amelyek egy olyan címkével rendelkeznek, amelynek Text tulajdonsága az FirstName adatmező értékére van beállítva, valamint egy EditItemTemplate TextBox-vezérlő, amelynek Text tulajdonsága szintén az FirstName adatmezőre van állítva. Az adatkötés szintaxisa – <%# Bind("fieldName") %> azt jelzi, hogy az adatmező fieldName a megadott webvezérlő tulajdonsághoz van kötve.

Ha hozzá szeretné adni a LastName adatmező értékét ehhez a Sablonmezőhöz, hozzá kell adnia egy másik Címke webvezérlőt a ItemTemplate területéhez, és a Text tulajdonságát a LastName értékhez kell kötnie. Ez kézzel vagy a Tervezőn keresztül is elvégezhető. Ehhez egyszerűen adja hozzá a megfelelő deklaratív szintaxist a ItemTemplate-hez.

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Ha a Tervezőn keresztül szeretné hozzáadni, kattintson a GridView intelligens címkéjének Sablonok szerkesztése hivatkozására. Ekkor megjelenik a GridView sablonszerkesztő felülete. Ezen a felületen az intelligens címke a GridView sablonjainak listája. Mivel jelenleg csak egy TemplateField-ünk van, a legördülő listában csak azok a sablonok szerepelnek, amelyek a FirstName TemplateFieldhez tartoznak, valamint a EmptyDataTemplate és PagerTemplate sablonok. Ha EmptyDataTemplate meg van adva, a sablon a GridView kimenetének megjelenítésére szolgál, ha nincs eredmény a GridView-hoz kötött adatokban; ha PagerTemplatemeg van adva, a rendszer a lapozást támogató GridView lapozófelületének megjelenítésére szolgál.

5. ábra: A GridView sablonjai szerkeszthetők a tervezőn keresztül (ide kattintva megtekintheti a teljes méretű képet)

A LastName megjelenítéséhez a FirstName sablonmezőben, húzza a Címke vezérlőelemet az eszközkészletből a FirstName sablonmező ItemTemplate részébe a GridView sablonszerkesztő felületén.

6. ábra: Címke webvezérlő hozzáadása a FirstName TemplateField ItemTemplate eleméhez (ide kattintva megtekintheti a teljes méretű képet)

Ezen a ponton a Sablonmezőhöz hozzáadott Címke web vezérlőelem tulajdonsága Text "Label" (Címke) értékű. Ezt úgy kell módosítanunk, hogy ez a tulajdonság inkább az LastName adatmező értékéhez legyen kötve. Ehhez kattintson a Címke vezérlőelem intelligens címkéjére, és válassza a DataBindings szerkesztése lehetőséget.

7. ábra: Válassza az Adatkötések szerkesztése lehetőséget a címkén lévő okos címkéjéből (kattintson ide a teljes méretű kép megtekintéséhez)

Ekkor megjelenik a DataBindings párbeszédpanel. Itt kiválaszthatja azt a tulajdonságot, amely részt kíván venni az adatkötésben a bal oldali listából, és kiválaszthatja azt a mezőt, amelybe az adatokat a jobb oldali legördülő listából szeretné kötni. Válassza ki a Text tulajdonságot balról, a LastName mezőt pedig jobbról, és kattintson az OK gombra.

8. ábra: A tulajdonság kötése Text az LastName adatmezőhöz (ide kattintva megtekintheti a teljes méretű képet)

Megjegyzés:

A DataBindings párbeszédpanelen jelezheti, hogy kétirányú adatkötést szeretne-e végrehajtani. Ha ezt a jelölőnégyzetet nem jelöli be, akkor <%# Eval("LastName")%> szintaxis kerül felhasználásra <%# Bind("LastName")%> helyett. Az oktatóanyag bármelyik megközelítése megfelelő. A kétirányú adatkötés fontossá válik az adatok beszúrása és szerkesztése során. Az adatok egyszerű megjelenítéséhez azonban mindkét megközelítés egyformán jól működik. A jövőbeli oktatóanyagokban részletesen tárgyaljuk a kétirányú adatkötést.

Szánjon egy kis időt a lap megtekintésére egy böngészőben. Mint látható, a GridView továbbra is négy oszlopot tartalmaz; Az FirstName oszlop azonban most már az adatmező és az FirstName adatmező LastName felsorolja.

9. ábra: Mind a FirstName, mind a LastName értékek egyetlen oszlopban vannak feltüntetve (ide kattintva megtekintheti a teljes méretű képet)

Az első lépés végrehajtásához távolítsa el a LastName BoundFieldet, és nevezze át a FirstName TemplateField tulajdonságát HeaderText névre. A módosítások után a GridView deklaratív korrektúrája az alábbihoz hasonlóan fog kinézni:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="" Title" />
        <asp:BoundField DataField="HireDate" HeaderText="
            HireDate" SortExpression="" HireDate" />
    </Columns>
</asp:GridView>

10. ábra: Minden alkalmazott vezeték- és utóneve megjelenik egy oszlopban (ide kattintva megtekintheti a teljes méretű képet)

3. lépés: A Naptár vezérlőelem használata aHiredDatemező megjelenítéséhez

Az adatmező értékének megjelenítése szövegként a GridView-ban ugyanolyan egyszerű, mint a BoundField használata. Bizonyos forgatókönyvek esetében azonban az adatok a legjobban egy adott webes vezérlővel fejeződnek ki a szöveg helyett. Az adatok megjelenítésének ilyen testreszabása a TemplateFields használatával lehetséges. Például ahelyett, hogy az alkalmazott munkadátumát szövegként jelenítenénk meg, megjeleníthetnénk egy naptárt ( a Naptár vezérlőelem használatával), kiemelve a felvétel dátumát.

Ehhez először konvertálja a HiredDate BoundFieldet sablonmezővé. Egyszerűen lépjen a GridView intelligens címkéjére, és kattintson az Oszlopok szerkesztése hivatkozásra, és hozza létre a Mezők párbeszédpanelt. Válassza ki a HiredDate BoundField elemet, és kattintson a "Mező konvertálása Sablonmezővé"gombra.

11. ábra: A BoundField sablonmezővé alakítása HiredDate (ide kattintva megtekintheti a teljes méretű képet)

Ahogy a 2. lépésben láttuk, a BoundField helyett egy Olyan TemplateField lesz, amely tartalmaz egy ItemTemplate címkét és EditItemTemplate egy szövegmezőt, amelynek Text tulajdonságai az adatkötési szintaxissal HiredDatevannak kötve az <%# Bind("HiredDate")%> értékhez.

Ha a szöveget Naptár vezérlőelemre szeretné cserélni, szerkessze a sablont a Címke eltávolításával és egy Naptár vezérlőelem hozzáadásával. A Tervezőben válassza a Sablonok szerkesztése lehetőséget a GridView intelligens címkéjén, és válassza ki a HireDate Sablonmező ItemTemplate a legördülő listából. Ezután törölje a Címke vezérlőt, és húzzon egy Naptár vezérlőelemet az Eszközkészletből a sablonszerkesztő felületre.

12. ábra: Naptár vezérlőelem hozzáadása a HireDate Sablonmezőhöz ItemTemplate (ide kattintva megtekintheti a teljes méretű képet)

Ezen a ponton a GridView minden sora tartalmaz egy Naptár vezérlőelemet a HiredDate TemplateFieldben. Az alkalmazott tényleges HiredDate értéke azonban nincs beállítva sehol a Naptár vezérlőelemben, ezért az egyes Naptár vezérlőelemek alapértelmezés szerint az aktuális hónapot és dátumot jelenítik meg. Ennek orvoslásához minden alkalmazottat HiredDate hozzá kell rendelnünk a Naptár vezérlőelem SelectedDate és VisibleDate tulajdonságaihoz.

A Naptár vezérlőelem intelligens címkéjében válassza a „DataBindings szerkesztése” lehetőséget. Ezután kösse össze mindkettőt SelectedDate és VisibleDate a tulajdonságokat az HiredDate adatmezővel.

13. ábra: A SelectedDate és VisibleDate tulajdonságok kötése az HiredDate adatmezőhöz (kattintson ide a teljes méretű kép megtekintéséhez)

Megjegyzés:

A Naptár vezérlőelem kijelölt dátumának nem feltétlenül kell láthatónak lennie. Előfordulhat például, hogy egy naptárban 1999. augusztus 1-je van a kiválasztott dátumnak, de az aktuális hónapot és évet jeleníti meg. A kijelölt dátumot és a látható dátumot a Naptár vezérlőelem SelectedDate és VisibleDate tulajdonságai határozzák meg. Mivel ki szeretnénk jelölni az alkalmazott tulajdonságát és biztosítani szeretnénk, hogy látható legyen, mindkét tulajdonságot az HiredDate adatmezőhöz kell kötnünk.

Amikor megtekinti a lapot egy böngészőben, a naptár ekkor megjeleníti az alkalmazott alkalmazotti dátum hónapját, és kiválasztja az adott dátumot.

14. ábra: Az alkalmazott a HiredDate Naptár vezérlőelemben jelenik meg (ide kattintva megtekintheti a teljes méretű képet)

Megjegyzés:

Az eddig látott példákkal ellentétben ebben az oktatóanyagban nem állítottunk be EnableViewState tulajdonságot False ehhez a GridView-hoz. Ennek a döntésnek az az oka, hogy a Naptár vezérlőelem dátumára kattintva visszalépés történik, és a naptár kijelölt dátumát az imént kattintott dátumra állítja. Ha azonban a GridView nézetállapota le van tiltva, a GridView adatai visszakerülnek a mögöttes adatforrásba, ami miatt a naptár kijelölt dátuma vissza lesz állítva az alkalmazottéra HireDate, felülírva a felhasználó által kiválasztott dátumot.

Ebben az oktatóanyagban ez egy nem lényeges vita, mivel a felhasználó nem tudja frissíteni az alkalmazott HireDate. A Naptár vezérlőelemet célszerű úgy konfigurálni, hogy a dátumok ne legyenek kijelölhetők. Ettől függetlenül ez az oktatóanyag azt mutatja, hogy bizonyos körülmények között a megtekintési állapotot engedélyezni kell bizonyos funkciók biztosításához.

4. lépés: Azon napok száma, amelyeken az alkalmazott dolgozott a vállalatnál

Eddig két TemplateFields-alkalmazást láttunk:

• Két vagy több adatmező értékének kombinálása egy oszlopban, és
• Adatmező értékének kifejezése szöveg helyett webes vezérlővel

A TemplateFields harmadik használata a GridView alapjául szolgáló adatok metaadatainak megjelenítésére szolgál. Az alkalmazottak munkadátumainak megjelenítése mellett például érdemes lehet egy olyan oszlopot is használni, amely megjeleníti, hogy hány napot töltöttek a feladaton.

A TemplateFields egy másik használata akkor fordul elő, ha a mögöttes adatokat másként kell megjeleníteni a weblapjelentésben, mint az adatbázisban tárolt formátumban. Tegyük fel, hogy a Employees táblában volt egy Gender mező, amely a karaktert M tárolta, vagy F hogy jelezze az alkalmazott nemét. Ha ezeket az információkat egy weblapon jeleníti meg, érdemes lehet a nemet "Férfi" vagy "Nő" értékként megjeleníteni, szemben az "M" vagy az "F" értékkel.

Mindkét forgatókönyv kezelhető úgy, hogy létrehoz egy formázási metódust a ASP.NET lap kód mögötti osztályában (vagy egy külön, metódusként Shared implementált osztálytárban), amelyet a sablon hív meg. Az ilyen formázási metódust a rendszer a sablonból hívja meg a korábban látott adatkötési szintaxissal. A formázási módszer tetszőleges számú paramétert tartalmazhat, de sztringet kell visszaadnia. Ez a visszaadott sztring az a HTML, amelyet beillesztenek a sablonba.

A koncepció szemléltetéséhez egészítsük ki az oktatóanyagot, hogy megjelenítsünk egy oszlopot, amely felsorolja az alkalmazott által a feladaton töltött napok teljes számát. Ez a formázási módszer egy Northwind.EmployeesRow objektumot fogad be, és visszaadja az alkalmazott foglalkoztatási napjainak számát sztringként. Ez a módszer hozzáadható az ASP.NET lap kód mögötti osztályához, de meg kell jelölni Protected vagy Public, hogy elérhető legyen a sablonból.

Protected Function DisplayDaysOnJob(employee As Northwind.EmployeesRow) As String
    ' Make sure HiredDate is not NULL... if so, return "Unknown"
    If employee.IsHireDateNull() Then
        Return "Unknown"
    Else
        ' Returns the number of days between the current
        ' date/time and HireDate
        Dim ts As TimeSpan = DateTime.Now.Subtract(employee.HireDate)
        Return ts.Days.ToString("#,##0")
    End If
End Function

Mivel a HiredDate mező tartalmazhat NULL adatbázis-értékeket, először meg kell győződnünk arról, hogy az érték nem NULL lesz a számítás előtt. Ha az HiredDate érték az NULL, egyszerűen az "Ismeretlen" sztringet adjuk vissza, ha nem NULL, kiszámítjuk az aktuális idő és az HiredDate érték közötti különbséget, és visszaadjuk a napok számát.

A metódus használatához meg kell hívnunk azt a GridView-ban található TemplateFieldből a databinding szintaxis használatával. Először adjon hozzá egy új TemplateFieldet a GridView-hoz a GridView intelligens címkéjének Oszlop szerkesztése hivatkozására kattintva, és adjon hozzá egy új Sablonmezőt.

15. ábra: Új sablonmező hozzáadása a GridView-hoz (kattintson ide a teljes méretű kép megtekintéséhez)

Állítsa be az új TemplateField HeaderText tulajdonságát "Days on the Job" értékre, és ItemStyleHorizontalAlign tulajdonságát Center értékre. Ha a sablonból szeretné meghívni a DisplayDaysOnJob metódust, adjon hozzá egy ItemTemplate elemet, és használja az alábbi adatkötési szintaxist:

<%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
    Northwind.EmployeesRow)) %>

Container.DataItema .-DataRowViewhoz kötött DataSourcerekordnak megfelelő GridViewRow objektumot ad vissza. A Row tulajdonság az erősen gépelt Northwind.EmployeesRowértéket adja vissza, amelyet a DisplayDaysOnJob metódusnak ad át. Ez az adatkötési szintaxis közvetlenül az ItemTemplate alábbi deklaratív szintaxisban jelenhet meg, vagy hozzárendelhető egy Text Címke web vezérlőelem tulajdonságához.

Megjegyzés:

Másik lehetőségként, ahelyett hogy egy EmployeesRow példánnyal adnánk át az értéket, egyszerűen átadhatnánk a HireDate értéket <%# DisplayDaysOnJob(Eval("HireDate")) %> használatával. A Eval metódus azonban egy Object értéket ad vissza, ezért módosítanunk kell a DisplayDaysOnJob metódus aláírását, hogy elfogadjunk egy Object típusú bemeneti paramétert. Nem vetíthetjük vakon a Eval("HireDate") hívást DateTime-re, mert a HireDate táblázat Employees oszlopa NULL értékeket tartalmazhat. Ezért el kell fogadnunk egy Object bemeneti paramétert a DisplayDaysOnJob metódushoz, ellenőrizni kell, hogy rendelkezik-e adatbázis-értékkel NULL (amelyet a használatával Convert.IsDBNull(objectToCheck)lehet elérni), majd ennek megfelelően kell haladnunk.

Ezen finomságok miatt úgy döntöttem, hogy az egész EmployeesRow példányt átadom. A következő oktatóanyagban egy illőbb példát láthatunk a Eval("columnName") bemeneti paraméter formázási metódusba való továbbítására szolgáló szintaxis használatára.

Az alábbiakban a GridView deklaratív szintaxisa látható a TemplateField hozzáadása után, és a DisplayDaysOnJob metódus meghívása a ItemTemplate-ből.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name"
          SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="" Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate" SortExpression="
            HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
                </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
                    Northwind.EmployeesRow)) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

A 16. ábra a befejezett oktatóanyagot mutatja be, amikor egy böngészőben tekinti meg.

16. ábra: Az alkalmazott által a feladaton töltött napok száma jelenik meg (ide kattintva megtekintheti a teljes méretű képet)

Összefoglalás

A GridView vezérlő TemplateFieldje nagyobb rugalmasságot tesz lehetővé az adatok megjelenítésében, mint a többi mezővezérlő esetében. A TemplateFields ideális 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

Az adatok megjelenítésének testreszabása mellett a TemplateFields az adatok szerkesztéséhez és beszúrásához használt felhasználói felületek testreszabására is használható, ahogy a későbbi oktatóanyagokban is látni fogjuk.

A következő két oktatóanyag folytatja a sablonok feltárását, kezdve a TemplateFields egy DetailsView-ban való használatával. Ezt követően a FormView-hoz fordulunk, amely mezők helyett sablonokat használ, hogy nagyobb rugalmasságot biztosítson az adatok elrendezésében és szerkezetében.

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 Teach Yourself ASP.NET 2.0 24 óra alatt. Elérhető itt 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ő