Egyéni formázás adatok alapján (VB)

által Scott Mitchell

PDF letöltése

A GridView, a DetailsView vagy a FormView formátumának a hozzá kötött adatok alapján történő módosítása többféleképpen is elvégezhető. Ebben az oktatóanyagban azt vizsgáljuk meg, hogyan hajthatja végre az adatkötési formázást a DataBound és a RowDataBound eseménykezelők használatával.

Bevezetés

A GridView, a DetailsView és a FormView vezérlők megjelenése számos stílushoz kapcsolódó tulajdonsággal szabható testre. Az olyan tulajdonságok, mint CssClasspéldául a , Font, BorderWidthBorderStyle, BorderColor, Widthés Height, többek között a renderelt vezérlő általános megjelenését határozzák meg. Az olyan tulajdonságok, mint például HeaderStylea , RowStyle, AlternatingRowStyleés mások, lehetővé teszik, hogy ugyanezek a stílusbeállítások vonatkozhassanak az egyes szakaszokra. Hasonlóképpen, ezek a stílusbeállítások mezőszinten is alkalmazhatók.

Sok esetben azonban a formázási követelmények a megjelenített adatok értékétől függnek. Ha például a készleten kívüli termékekre szeretné felhívni a figyelmet, a termékinformációkat listázó jelentés a háttérszínt sárga színre állíthatja azoknál a termékeknél, amelyek UnitsInStock és UnitsOnOrder mezők egyaránt 0-nak hatnak. A drágább termékek kiemeléséhez érdemes lehet félkövér betűtípussal megjeleníteni a 75,00 usd-nél drágább termékek árát.

A GridView, a DetailsView vagy a FormView formátumának a hozzá kötött adatok alapján történő módosítása többféleképpen is elvégezhető. Ebben az oktatóanyagban megvizsgáljuk, hogyan hajtható végre az adatokhoz kötött formázás az DataBound és RowDataBound eseménykezelők használatával. A következő oktatóanyagban egy alternatív megközelítést ismerünk meg.

A DetailsView Control eseménykezelőjénekDataBoundhasználata

Ha az adatok egy DetailsView-hoz vannak kötve, akár adatforrás-vezérlőből, akár a vezérlő tulajdonságához DataSource programozott módon hozzárendelt adatokon keresztül, és meghívják annak metódusát DataBind() , a következő lépések sorozata következik be:

1. Az adat-webvezérlő eseménye DataBinding kigyullad.
2. Az adatok az adat webes vezérlőhöz kötődnek.
3. Az adat-webvezérlő eseménye DataBound kigyullad.

Az egyéni logika közvetlenül az 1. és a 3. lépés után injektálható egy eseménykezelőn keresztül. Ha létrehozunk egy eseménykezelőt az DataBound eseményhez, programozott módon meghatározhatjuk az adat webes vezérlőhöz kötött adatokat, és igény szerint módosíthatjuk a formázást. Ennek szemléltetéséhez hozzunk létre egy DetailsView-t, amely felsorolja a termék általános adatait, de UnitPrice jeleníti meg az értéket, ha az meghaladja a 75,00 USD-t.

1. lépés: A termékinformációk megjelenítése a DetailsView-ban

Nyissa meg a CustomColors.aspx lapot a CustomFormatting mappában, húzzon egy DetailsView vezérlőt az Eszközkészletből a Tervezőbe, állítsa a ID tulajdonság értékét ExpensiveProductsPriceInBoldItalic-ra, és kösse össze egy új ObjectDataSource vezérlővel, amely meghívja az ProductsBLL osztály GetProducts() metódusát. Ennek részletes lépéseit itt kihagyjuk, mivel a korábbi oktatóanyagokban részletesen megvizsgáltuk őket.

Miután az ObjectDataSource-t a DetailsView-hoz kötötte, szánjon egy kis időt a mezőlista módosítására. Úgy döntöttem, hogy eltávolítom a ProductID, SupplierID, CategoryID, , UnitsInStock, , UnitsOnOrder, , ReorderLevelés Discontinued átneveztem és újraformáltam a többi BoundFields-et. Én is töröltem a Width és a Height beállításokat. Mivel a DetailsView csak egyetlen rekordot jelenít meg, engedélyezni kell a lapozást annak érdekében, hogy a végfelhasználó az összes terméket megtekinthesse. Ehhez jelölje be a Lapozás engedélyezése jelölőnégyzetet a DetailsView intelligens címkéjében.

1. ábra: 1. ábra: Jelölje be a Lapozás engedélyezése jelölőnégyzetet a DetailsView intelligens címkéjében (kattintson ide a teljes méretű kép megtekintéséhez)

A módosítások után a DetailsView korrektúra a következő lesz:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" 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" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Szánjon egy kis időt a lap kipróbálására a böngészőben.

2. ábra: A DetailsView vezérlő egyszerre egy terméket jelenít meg (kattintással megtekintheti a teljes méretű képet)

2. lépés: Az adatok értékének programozott meghatározása a DataBound Eseménykezelőben

Ahhoz, hogy az árat félkövér dőlt betűtípussal jelenítsük meg azoknak a termékeknek, amelyek UnitPrice értéke meghaladja a 75,00 USD-t, először programozott módon meg kell határoznunk az UnitPrice értéket. A DetailsView esetében ez az eseménykezelőben DataBound végezhető el. Az eseménykezelő létrehozásához kattintson a Tervező DetailsView elemére, majd lépjen a Tulajdonságok ablakra. Ha nem látható, nyomja le az F4 billentyűt, vagy nyissa meg a Nézet menüt, és válassza a Tulajdonságok ablak menüt. A Tulajdonságok ablakban kattintson a villámgyors ikonra a DetailsView eseményeinek listázásához. Ezután kattintson duplán az DataBound eseményre, vagy írja be a létrehozni kívánt eseménykezelő nevét.

3. ábra: Eseménykezelő létrehozása az DataBound eseményhez

Megjegyzés:

Eseménykezelőt is létrehozhat a ASP.NET lap kódrészletéből. A lap tetején két legördülő lista található. Válassza ki az objektumot a bal oldali legördülő listából, és a létrehozni kívánt eseményt a jobb oldali legördülő listából, majd a Visual Studio automatikusan létrehozza a megfelelő eseménykezelőt.

Ha ezt megteszi, automatikusan létrehozza az eseménykezelőt, és arra a kódrészre viszi, ahol azt hozzáadták. Ezen a ponton a következőt fogja látni:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound
End Sub

A DetailsView-hoz kötött adatok a DataItem tulajdonságon keresztül érhetők el. Ne feledje, hogy vezérlőink egy erősen típusos DataTable-hoz vannak kötve, amely erősen típusos DataRow példányok gyűjteményéből áll. Ha a DataTable a DetailsView-hoz van kötve, a DataTable első DataRow-értéke hozzá lesz rendelve a DetailsView tulajdonságához DataItem . DataItem A tulajdonság egy objektumhoz DataRowView van rendelve. A DataRowViewRow tulajdonságának használatával hozzáférhetünk a mögöttes DataRow-objektumhoz, amely valójában egy ProductsRow példány. Miután birtokunkban van ez a ProductsRow példány, egyszerűen meg tudjuk vizsgálni az objektum tulajdonságértékeit, hogy döntést hozzunk.

Az alábbi kód bemutatja, hogyan állapítható meg, hogy a UnitPrice DetailsView vezérlőelemhez kötött érték nagyobb-e, mint 75,00 USD:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
    End If
End Sub

Megjegyzés:

Mivel a UnitPrice lehet NULL érték az adatbázisban, először ellenőrizzük, hogy nem NULL értékkel foglalkozunk-e, mielőtt hozzáférnénk a ProductsRowUnitPrice tulajdonságához. Ez az ellenőrzés azért fontos, mert ha megkíséreljük elérni a UnitPrice tulajdonságot, amikor NULL értéke van, akkor az ProductsRow objektum StrongTypingException kivételt fog eredményezni.

3. lépés: A UnitPrice-érték formázása a DetailsView-ban

Ezen a ponton megállapíthatjuk, hogy a UnitPrice DetailsView-hoz kötött érték értéke meghaladja-e a 75,00 USD-t, de azt még nem tudjuk, hogyan módosíthatja programozott módon a DetailsView formázását ennek megfelelően. Ha módosítani szeretné a DetailsView egy teljes sorának formázását, programozott módon elérheti a sort DetailsViewID.Rows(index), míg egy adott cella módosításához használja a DetailsViewID.Rows(index).Cells(index)-t. Miután hivatkoztunk a sorra vagy a cellára, a stílushoz kapcsolódó tulajdonságok beállításával módosíthatjuk a megjelenését.

A sor programozott eléréséhez ismernie kell a sor indexét, amely 0-nál kezdődik. A UnitPrice sor a DetailsView ötödik sora, így 4-es indexet kap, és programozott módon elérhetővé ExpensiveProductsPriceInBoldItalic.Rows(4) teszi. Ezen a ponton a teljes sor tartalma félkövér, dőlt betűtípussal jeleníthető meg a következő kóddal:

ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Font.Italic = True

Azonban ez mind a címkét (Ár), mind az értéket félkövér és dőlt betűstílussá változtatja. Ha csak a félkövér és dőlt értéket szeretnénk megadni, akkor ezt a formázást a sor második cellájába kell alkalmaznunk, amely az alábbi módon valósítható meg:

ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Bold = True
ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).Font.Italic = True

Mivel az oktatóanyagaink eddig stíluslapokat használtak a renderelt korrektúra és a stílussal kapcsolatos információk tiszta elkülönítésének fenntartásához, ahelyett, hogy a fent látható stílustulajdonságokat állítanál be, inkább használjunk CSS-osztályt. Nyissa meg a Styles.css stíluslapot, és adjon hozzá egy új CSS-osztályt ExpensivePriceEmphasis a következő definícióval:

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

Ezután az DataBound eseménykezelőben állítsa a cella tulajdonságát CssClass a következőre ExpensivePriceEmphasis: . Az alábbi kód az DataBound eseménykezelőt teljes egészében megjeleníti:

Protected Sub ExpensiveProductsPriceInBoldItalic_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles ExpensiveProductsPriceInBoldItalic.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(ExpensiveProductsPriceInBoldItalic.DataItem, _
            System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice > 75 Then
       ExpensiveProductsPriceInBoldItalic.Rows(4).Cells(1).CssClass = _
            "ExpensivePriceEmphasis"
    End If
End Sub

A 75,00 dollárnál kevesebbe kerülő Chai megtekintésekor az ár normál betűtípussal jelenik meg (lásd a 4. ábrát). A 97,00 usd értékű Mishi Kobe Niku megtekintésekor azonban az ár félkövér, dőlt betűtípussal jelenik meg (lásd az 5. ábrát).

4. ábra: A 75,00 usd-nél kisebb árak normál betűtípussal jelennek meg (ide kattintva megtekintheti a teljes méretű képet)

5. ábra: A drága termékek árai félkövér, dőlt betűtípussal jelennek meg (kattintson ide a teljes méretű kép megtekintéséhez)

A FormView Control eseménykezelőjénekDataBoundhasználata

A FormView-hoz kötött mögöttes adatok meghatározásának lépései megegyeznek az eseménykezelő DetailsView-hoz használtéval DataBound , a DataItem tulajdonságot a vezérlőhöz kötött megfelelő objektumtípusra vetik, és meghatározzák a folytatás módját. A FormView és a DetailsView azonban különbözik abban, hogyan történik a felhasználói felület megjelenésének frissítése.

A FormView nem tartalmaz BoundFields elemet, ezért nem tartalmazza a gyűjteményt Rows . Ehelyett a FormView sablonokból áll, amelyek statikus HTML-, webvezérlők és adatkötési szintaxis kombinációját tartalmazhatják. A FormView stílusának módosítása általában magában foglalja egy vagy több webes vezérlő stílusának módosítását a FormView sablonjaiban.

Ennek szemléltetéséhez használjunk egy FormView-t a termékek listázására, mint az előző példában, de ezúttal csak a termék nevét és a készletben lévő egységeket jelenítsük meg piros betűkészlettel, ha az kisebb vagy egyenlő 10-nél.

4. lépés: A termékinformációk megjelenítése a FormView-ban

Adjon hozzá egy FormView-t a CustomColors.aspx DetailsView alatti laphoz, és állítsa be a tulajdonságát ID a következőre LowStockedProductsInRed: . A FormView kötése az előző lépésből létrehozott ObjectDataSource vezérlőhöz. Ezzel létrehoz egy ItemTemplate, EditItemTemplateés InsertItemTemplate a FormView-t. Távolítsa el a EditItemTemplate és InsertItemTemplate, és egyszerűsítse le a ItemTemplate, hogy csak a ProductName és UnitsInStock értékeket tartalmazza, amelyek mindegyike saját, megfelelően elnevezett címkevezérlőkben szerepel. A korábbi példában szereplő DetailsView-hez hasonlóan a Lapozás engedélyezése jelölőnégyzetet is jelölje be a FormView intelligens címkéjében.

A módosítások után a FormView jelölőjének a következőhöz hasonlóan kell kinéznie:

<asp:FormView ID="LowStockedProductsInRed" runat="server"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Vegye figyelembe, hogy a ItemTemplate következőket tartalmazza:

• Statikus HTML a "Product:" és a "Units In Stock:" szöveget, valamint a <br /> és <b> elemeket.
• Webvezérlők a két címkevezérlő, ProductNameLabel és UnitsInStockLabel.
• A databinding szintaxisa<%# Bind("ProductName") %> és <%# Bind("UnitsInStock") %> szintaxisa, amely a mezők értékeit a Text a Label vezérlőelemek tulajdonságainak rendeli.

5. lépés: Az adatok értékének programozott meghatározása a DataBound Eseménykezelőben

A FormView korrektúrája befejeződött, a következő lépés az, hogy programozott módon állapítsa meg, hogy az UnitsInStock érték 10-nél kisebb vagy egyenlő-e. Ez pontosan ugyanúgy történik a FormView-ban, mint a DetailsView-ban. Először hozzon létre egy eseménykezelőt a FormView eseményéhez DataBound .

6. ábra: Az DataBound eseménykezelő létrehozása

Az eseménykezelő a FormView tulajdonságot DataItem egy ProductsRow példányra veti, és meghatározza, hogy az UnitsInPrice érték olyan-e, hogy piros betűtípussal kell megjelenítenünk.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
        End If
    End If
End Sub

6. lépés: A UnitsInStockLabel címkevezérlő formázása a FormView ItemTemplate elemében

Az utolsó lépés a megjelenített UnitsInStock érték formázása piros betűtípussal, ha az érték 10 vagy kevesebb. Ahhoz, hogy ezt megvalósítsuk, programozott módon hozzá kell férnünk a UnitsInStockLabel vezérlőhöz a ItemTemplate-ben, és be kell állítanunk a stílustulajdonságait úgy, hogy a szöveg piros színnel jelenjen meg. Ha egy webvezérlőt szeretne elérni egy sablonban, használja az FindControl("controlID") alábbihoz hasonló módszert:

Dim someName As WebControlType = _
    CType(FormViewID.FindControl("controlID"), WebControlType)

A példánkban egy olyan Címke vezérlőelemhez szeretnénk hozzáférni, amelynek ID értéke UnitsInStockLabel, így használnánk:

Dim unitsInStock As Label = _
    CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

Miután programozott hivatkozással rendelkezünk a webvezérlőre, szükség szerint módosíthatjuk a stílussal kapcsolatos tulajdonságait. A korábbi példához hasonlóan létrehoztam egy CSS-osztályt a(z) Styles.css-ban LowUnitsInStockEmphasis névvel. Ha ezt a stílust a Címke web vezérlőelemre szeretné alkalmazni, annak tulajdonságát CssClass ennek megfelelően állítsa be.

Protected Sub LowStockedProductsInRed_DataBound _
    (sender As Object, e As System.EventArgs) _
    Handles LowStockedProductsInRed.DataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(LowStockedProductsInRed.DataItem, System.Data.DataRowView).Row, _
            Northwind.ProductsRow)
    If Not product.IsUnitsInStockNull() AndAlso product.UnitsInStock <= 10 Then
        Dim unitsInStock As Label = _
            CType(LowStockedProductsInRed.FindControl("UnitsInStockLabel"), Label)

        If unitsInStock IsNot Nothing Then
            unitsInStock.CssClass = "LowUnitsInStockEmphasis"
        End If
    End If
End Sub

Megjegyzés:

A DetailsView vagy GridView vezérlőkben a FindControl("controlID") használatakor alkalmazható az a szintaxis, amely programozott módon a webvezérlőn keresztül éri el a vezérlőt, majd beállítja annak stílushoz kapcsolódó tulajdonságait. A TemplateFieldst a következő oktatóanyagban vizsgáljuk meg.

A 7. ábra a FormView-t mutatja egy 10-nél nagyobb értékű termék UnitsInStock megtekintésekor, míg a 8. ábrán szereplő termék értéke 10-nél kisebb.

7. ábra: A megfelelően nagy készlettel rendelkező termékeknél nincs egyéni formázás (kattintson ide a teljes méretű kép megtekintéséhez)

8. ábra: A készletszámban szereplő egységek pirossal jelennek meg azoknál a termékeknél, amelyek értéke 10 vagy kevesebb (kattintson ide a teljes méretű kép megtekintéséhez)

Formázás a GridView eseményévelRowDataBound

Korábban megvizsgáltuk a DetailsView és a FormView vezérlő által a databinding során végighaladt lépések sorrendjét. Tekintsük át újra ezeket a lépéseket frissítőként.

1. Az adat-webvezérlő eseménye DataBinding kigyullad.
2. Az adatok az adat webes vezérlőhöz kötődnek.
3. Az adat-webvezérlő eseménye DataBound kigyullad.

Ez a három egyszerű lépés elegendő a DetailsView és a FormView esetében, mivel csak egyetlen rekordot jelenítenek meg. A GridView esetében, amely az összes hozzá kötött rekordot jeleníti meg (nem csak az első), a 2. lépés egy kicsit nagyobb szerepet játszik.

A 2. lépésben a GridView felsorolja az adatforrást, és minden rekordhoz létrehoz egy példányt GridViewRow , és az aktuális rekordot hozzá köti. A GridView-hoz hozzáadott minden egyes GridViewRow eseményhez két esemény lesz hozzáadva:

• RowCreated a létrehozás után GridViewRow aktiválódik
• Aktiválódik, miután az aktuális rekord hozzá lett kötve a RowDataBound-hoz/csatlakozva van.

A GridView esetében az adatkötést a következő lépések sorozata írja le pontosabban:

1. A GridView eseménye DataBinding kigyullad.

2. Az adatok a GridView-hoz kötődnek.

   Az adatforrás minden rekordja esetében

   1. GridViewRow Objektum létrehozása
   2. Az esemény indítása RowCreated
   3. A rekordot kötni a GridViewRow-hoz
   4. Az esemény indítása RowDataBound
   5. Adja hozzá a GridViewRow-t a Rows gyűjteményhez

3. A GridView eseménye DataBound kigyullad.

A GridView egyes rekordjainak formátumának testreszabásához létre kell hoznunk egy eseménykezelőt az RowDataBound eseményhez. Ennek szemléltetéséhez adjunk hozzá egy GridView-t az CustomColors.aspx oldalhoz, amely felsorolja az egyes termékek nevét, kategóriáját és árát, kiemelve azokat a termékeket, amelyek ára 10,00 dollárnál kevesebb, sárga háttérszínnel.

7. lépés: Termékadatok megjelenítése a GridView-ban

Adjon hozzá egy GridView-t a FormView alá az előző példából, és állítsa a tulajdonságát ID a következőre HighlightCheapProducts: . Mivel már van egy ObjectDataSource-unk, amely az oldalon található összes terméket visszaadja, kösse hozzá a GridView-t. Végül szerkessze a GridView BoundFields elemét, hogy csak a termékek nevét, kategóriáit és árait tartalmazza. A módosítások után a GridView jelölőjének a következőképpen kell kinéznie:

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

A 9. ábrán a böngészőn keresztüli megtekintés során elért előrehaladásunk látható.

9. ábra: A GridView felsorolja az egyes termékek nevét, kategóriáját és árát (ide kattintva megtekintheti a teljes méretű képet)

8. lépés: Az adatok értékének programozott meghatározása a RowDataBound eseménykezelőben

Amikor a ProductsDataTable a GridView-hoz van kötve, a ProductsRow példányok felsorolásra kerülnek, és minden ProductsRow esetében egy GridViewRow jön létre. A GridViewRow tulajdonságát hozzárendeljük a konkrét DataItem-hoz, majd a GridView ProductRow eseménykezelője meghívásra kerül. A GridView-hoz kötött egyes termékek értékének meghatározásához UnitPrice létre kell hoznunk egy eseménykezelőt a GridView eseményéhez RowDataBound . Ebben az eseménykezelőben megvizsgálhatjuk az UnitPrice aktuális GridViewRow értéket, és formázási döntést hozhatunk az adott sorhoz.

Ez az eseménykezelő ugyanazokkal a lépések sorozatával hozható létre, mint a FormView és a DetailsView.

10. ábra: Eseménykezelő létrehozása a GridView eseményéhez RowDataBound

Ha ilyen módon hozza létre az eseménykezelőt, a következő kód automatikusan hozzáadódik a ASP.NET oldal kódrészletéhez:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

End Sub

Amikor az RowDataBound esemény aktiválódik, az eseménykezelő a második paramétereként egy olyan típusú GridViewRowEventArgsobjektumot ad át, amelynek neve egy Rowtulajdonság. Ez a tulajdonság egy hivatkozást ad vissza a GridViewRow elemre, amelyet éppen most kötöttek össze az adatokkal. Az ProductsRow példány eléréséhez, amely a GridViewRow-hez van kötve, a DataItem tulajdonságot így használjuk:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    Dim product As Northwind.ProductsRow = _
        CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
    If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
    End If
End Sub

Az eseménykezelő használatakor RowDataBound fontos szem előtt tartani, hogy a GridView különböző típusú sorokból áll, és hogy ez az esemény minden sortípus esetében aktiválva van. A GridViewRowtípust a tulajdonsága RowType határozza meg, és a lehetséges értékek egyikével rendelkezhet:

• DataRow egy olyan sor, amely a GridView-ból származó rekordhoz van kötve DataSource
• EmptyDataRow a sor, amely akkor jelenik meg, ha a GridView DataSource üres
• Footer az élőláb sor; akkor jelenik meg, ha a GridView tulajdonsága ShowFooter a következőre van állítva: True
• Header a fejlécsor; akkor jelenik meg, ha a GridView ShowHeader tulajdonsága az alapértelmezett értékre True van állítva
• Pager Olyan GridView-k esetében, amelyek lapozást valósítanak meg, a sor, amely a lapozó felületet jeleníti meg
• Separator nem a GridView-hoz van használva, hanem a RowType tulajdonságai által használt DataList és Repeater vezérlők esetében, ami két adatokat kezelő webes vezérlő, amelyről a jövőbeni oktatóanyagokban fogunk beszélni.

Mivel a EmptyDataRow, Header, Footer és Pager sorok nincsenek DataSource rekordhoz társítva, a Nothing tulajdonságuk értéke mindig DataItem lesz. Ezért, mielőtt megpróbálnánk dolgozni a jelenlegi GridViewRowDataItem tulajdonsággal, először meg kell győződnünk arról, hogy egy DataRow-vel van dolgunk. Ez úgy valósítható meg, hogy a(z) GridViewRowRowType tulajdonságát ellenőrizzük:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
        End If
    End If
End Sub

9. lépés: A sárga sor kiemelése, ha az Egységár értéke kisebb, mint 10,00 USD

Az utolsó lépés az egész GridViewRow programozott kiemelése, ha az UnitPrice adott sor értéke kisebb, mint 10,00 USD. A GridView-sorok vagy -cellák elérésének szintaxisa megegyezik a DetailsView-nal GridViewID.Rows(index) a teljes sor eléréséhez egy GridViewID.Rows(index).Cells(index) adott cellához való hozzáféréshez. Azonban, amikor az RowDataBound eseménykezelő elindul, a lekötött GridViewRow még nincs hozzáadva a GridView Rows gyűjteményéhez. Ezért a Sorok gyűjtemény használatával nem férhet hozzá az aktuális GridViewRow példányhoz az RowDataBound eseménykezelőből.

GridViewID.Rows(index)Ehelyett hivatkozhatunk az aktuális GridViewRow példányra az eseménykezelőben a RowDataBound használatávale.Row. Vagyis annak érdekében, hogy kiemeljük az aktuális GridViewRow példányt az RowDataBound eseménykezelőből, a következőt használnánk:

e.Row.BackColor = System.Drawing.Color.Yellow

Inkább ne közvetlenül a GridViewRowBackColor tulajdonságát állítsuk be, hanem maradjunk a CSS-osztályok használatánál. Létrehoztam egy CSS-osztályt, AffordablePriceEmphasis amely sárga színre állítja a háttérszínt. A befejezett RowDataBound eseménykezelő a következő:

Protected Sub HighlightCheapProducts_RowDataBound _
    (sender As Object, e As System.Web.UI.WebControls.GridViewRowEventArgs) _
    Handles HighlightCheapProducts.RowDataBound

    If e.Row.RowType = DataControlRowType.DataRow Then
        Dim product As Northwind.ProductsRow = _
            CType(CType(e.Row.DataItem, System.Data.DataRowView).Row, Northwind.ProductsRow)
        If Not product.IsUnitPriceNull() AndAlso product.UnitPrice < 10 Then
            e.Row.CssClass = "AffordablePriceEmphasis"
        End If
    End If
End Sub

11. ábra: A legkedvezőbb árú termékek sárga színűek (kattintson ide a teljes méretű kép megtekintéséhez)

Összefoglalás

Ebben az oktatóanyagban láthattuk, hogyan formázható a GridView, a DetailsView és a FormView a vezérlőhöz kötött adatok alapján. Ehhez létrehoztunk egy eseménykezelőt az DataBound eseményekhez RowDataBound , ahol az alapul szolgáló adatokat megvizsgáltuk, és szükség esetén formázási módosítást végeztünk. A DetailsView-hoz vagy a FormView-hoz kötött adatok eléréséhez az eseménykezelőben használjuk a DataItemDataBound tulajdonságot; a GridView esetében minden GridViewRow egyes példány tulajdonsága DataItem tartalmazza az adott sorhoz kötött adatokat, amelyek az RowDataBound eseménykezelőben érhetők el.

Az adat webes vezérlő formázásának programozott módon történő módosításának szintaxisa a webes vezérlőtől és a formázandó adatok megjelenítésétől függ. A DetailsView és a GridView vezérlők esetében a sorok és cellák egy sorszámindex segítségével érhetők el. A sablonokat használó FormView esetében a FindControl("controlID") metódust gyakran használják egy webvezérlő megkeresésére a sablonon belül.

A következő oktatóanyagban azt vizsgáljuk meg, hogyan használhat sablonokat a GridView és a DetailsView használatával. Emellett egy másik technikát is láthatunk a formázás testreszabásához az alapul szolgáló adatok alapján.

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 fő véleményezői E.R. Gilmore, Dennis Patterson és Dan Jagers voltak. Szeretné áttekinteni a közelgő MSDN-cikkeimet? Ha igen, írj egy sort a mitchell@4GuysFromRolla.com-ra.

ElőzőKövetkező