Jelentésadatok lapozása és rendezése (C#)

által Scott Mitchell

PDF letöltése

A lapozás és a rendezés két nagyon gyakori funkció, amikor adatokat jelenít meg egy online alkalmazásban. Ebben az oktatóanyagban először áttekintjük a rendezés és a lapozás hozzáadását a jelentésekhez, amelyekre a jövőbeni oktatóanyagokban fogunk építeni.

Bevezetés

A lapozás és a rendezés két nagyon gyakori funkció, amikor adatokat jelenít meg egy online alkalmazásban. Ha például ASP.NET könyveket keres egy online könyvesboltban, több száz ilyen könyv lehet, de a keresési eredményeket listázó jelentés oldalanként csak tíz találatot sorol fel. Ezenkívül az eredmények rendezhetők cím, ár, oldalszám, szerzőnév és így tovább. Bár az elmúlt 23 oktatóanyag azt vizsgálta, hogyan hozhat létre különféle jelentéseket, beleértve az adatok hozzáadását, szerkesztését és törlését lehetővé tevő felületeket, nem vizsgáltuk az adatok rendezését, és az egyetlen lapozási példa, amelyet láttunk, a DetailsView és a FormView vezérlőkkel.

Ebben az oktatóanyagban bemutatjuk, hogyan adhat hozzá rendezést és lapozást a jelentésekhez, ami néhány jelölőnégyzet bejelölésével valósítható meg. Sajnos ennek a leegyszerűsítő implementációnak megvannak a maga hátrányai, a rendezési felület hagy egy kis kívánnivalót, és a lapozási rutinok nem alkalmasak a nagy eredményhalmazok hatékony lapozására. A jövőbeli oktatóanyagok bemutatja, hogyan lehet leküzdeni a beépített lapozási és rendezési megoldások korlátait.

1. lépés: A lapozási és rendezési oktatóanyag weblapjainak hozzáadása

Mielőtt elkezdenénk ezt az oktatóanyagot, először szánjunk egy kis időt az oktatóanyaghoz szükséges ASP.NET lapok és a következő három oldal hozzáadására. Először hozzon létre egy új mappát a projektben.PagingAndSorting Ezután adja hozzá a következő öt ASP.NET lapot ehhez a mappához, amelyek mindegyike a mesterlap Site.masterhasználatára van konfigurálva:

• Default.aspx
• SimplePagingSorting.aspx
• EfficientPaging.aspx
• SortParameter.aspx
• CustomSortingUI.aspx

1. ábra: Hozzon létre egy PagingAndSorting mappát, és adja hozzá az oktatóanyagot ASP.NET oldalakhoz

Ezután nyissa meg a Default.aspx lapot, és húzza a SectionLevelTutorialListing.ascx Felhasználói vezérlőt a UserControls mappából a Tervező felületre. Ez a Felhasználói vezérlő, amelyet a Mesterlapok és a Webhelynavigációs oktatóanyagban hoztunk létre, számba adja a webhelytérképet, és megjeleníti ezeket az oktatóanyagokat egy listajeles lista aktuális szakaszában.

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

Ahhoz, hogy a listajeles lista megjelenítse a létrehozandó lapozási és rendezési oktatóanyagokat, fel kell venni őket a webhelytérképre. Nyissa meg a Web.sitemap fájlt, és adja hozzá a következő korrektúrát a webhelytérkép csomópontjának szerkesztése, beszúrása és törlése után:

<siteMapNode title="Paging and Sorting" url="~/PagingAndSorting/Default.aspx"
    description="Samples of Reports that Provide Paging and Sorting Capabilities">
    <siteMapNode url="~/PagingAndSorting/SimplePagingSorting.aspx"
        title="Simple Paging & Sorting Examples"
        description="Examines how to add simple paging and sorting support." />
    <siteMapNode url="~/PagingAndSorting/EfficientPaging.aspx"
        title="Efficiently Paging Through Large Result Sets"
        description="Learn how to efficiently page through large result sets." />
    <siteMapNode url="~/PagingAndSorting/SortParameter.aspx"
        title="Sorting Data at the BLL or DAL"
        description="Illustrates how to perform sorting logic in the Business Logic
        Layer or Data Access Layer." />
    <siteMapNode url="~/PagingAndSorting/CustomSortingUI.aspx"
        title="Customizing the Sorting User Interface"
        description="Learn how to customize and improve the sorting user interface." />
</siteMapNode>

3. ábra: A webhelytérkép frissítése az új ASP.NET lapok belefoglalására

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

Mielőtt ténylegesen megvalósítanánk a lapozási és rendezési képességeket, először hozzunk létre egy szabványos, nem rendezhető, nem lapozható GridView-t, amely felsorolja a termékinformációkat. Ezt a feladatot már sokszor elvégeztük ebben az oktatóanyag-sorozatban, így ezeknek a lépéseknek ismerősnek kell lenniük. Először nyissa meg a SimplePagingSorting.aspx lapot, húzzon egy GridView-vezérlőt az eszközkészletből a Tervezőre, és állítsa be a tulajdonságának ID értékét Products-re. Ezután hozzon létre egy új ObjectDataSource-t, amely a ProductsBLL osztály s GetProducts() metódusával adja vissza az összes termékinformációt.

4. ábra: Információk lekérése az összes termékről a GetProducts() metódus használatával

Mivel ez a jelentés írásvédett jelentés, nem szükséges az ObjectDataSource-ok Insert(), Update(), vagy Delete() metódusainak megfeleltetése a megfelelő ProductsBLL metódusokhoz; ezért az UPDATE, INSERT és DELETE lapok legördülő listájából válassza a (Nincs) lehetőséget.

5. ábra: Válassza a (Nincs) lehetőséget a Drop-Down listában a FRISSÍTÉS, BESZÚRÁS és TÖRLÉS lapon

Ezután szabjuk testre a GridView mezőit, hogy csak a termékek nevei, szállítói, kategóriái, árai és megszűnt állapotai jelenjenek meg. Emellett bármilyen mezőszintű formázási módosítást végezhet, például módosíthatja a HeaderText tulajdonságokat, vagy pénznemként formázhatja az árat. A módosítások után a GridView deklaratív korrektúrája a következőhöz hasonlóan fog kinézni:

<asp:GridView ID="Products" runat="server" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False">
    <Columns>
        <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="UnitPrice" HeaderText="Price"
            SortExpression="UnitPrice" DataFormatString="{0:C}"
            HtmlEncode="False" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued"
            SortExpression="Discontinued" />
    </Columns>
</asp:GridView>

A 6. ábra az eddig elért eredményeket mutatja, amikor egy böngészőben tekintjük meg. Vegye figyelembe, hogy az oldal az összes terméket egy képernyőn jeleníti meg, amelyen az egyes termékek neve, kategóriája, szállítója, ára és megszűnt állapota látható.

6. ábra: Mindegyik termék szerepel a listában (kattintson ide a teljes méretű kép megtekintéséhez)

3. lépés: Lapozási támogatás hozzáadása

Az összes termék egy képernyőn való listázása túlterheltséghez vezethet, ha a felhasználó átolvasja az adatokat. Az eredmények kezelhetőbbé tétele érdekében az adatokat kisebb adatoldalakra bonthatjuk, és lehetővé tesszük, hogy a felhasználó egyszerre egy oldalon haladjon végig az adatokon. Ehhez egyszerűen jelölje be a Lapozás engedélyezése jelölőnégyzetet a GridView intelligens címkéje alapján (ezzel beállítja a GridView tulajdonságátAllowPagingtrue).

7. ábra: Jelölje be a Lapozás engedélyezése jelölőnégyzetet lapozási támogatás hozzáadásához (kattintson ide a teljes méretű kép megtekintéséhez)

A lapozás engedélyezése korlátozza a laponként megjelenített rekordok számát, és lapozófelületet ad hozzá a GridView-hoz. A 7. ábrán látható alapértelmezett lapozófelület oldalszámok sorozata, amely lehetővé teszi, hogy a felhasználó gyorsan navigáljon az egyik adatoldalról a másikra. Ennek a lapozási felületnek ismerősnek kell lennie, ahogy azt a korábbi oktatóanyagokban a DetailsView és a FormView vezérlők lapozási támogatásának hozzáadásakor láttuk.

A DetailsView és a FormView vezérlő is csak egyetlen rekordot jelenít meg oldalanként. A GridView azonban konzultál a tulajdonságávalPageSize annak meghatározásához, hogy hány rekord jelenjen meg oldalanként (ez a tulajdonság alapértelmezés szerint 10 értékű).

Ez a GridView, DetailsView és FormView lapozófelület a következő tulajdonságok használatával szabható testre:

• PagerStylea lapozófelület stílusadatait jelzi; megadhatja az olyan beállításokat, mint a BackColor, ForeColor, CssClassHorizontalAlignstb.

• PagerSettings olyan tulajdonságokat tartalmaz, amelyek testre szabhatják a lapozófelület funkcióit; PageButtonCount A lapozófelületen megjelenített numerikus oldalszámok maximális számát jelzi (az alapértelmezett érték 10); a Mode tulajdonság azt jelzi, hogy a lapozófelület hogyan működik, és a következő értékre állítható be:

  • NextPrevious a Következő és az Előző gombot jeleníti meg, amely lehetővé teszi a felhasználó számára, hogy egyszerre egy oldalt előre vagy hátra léptetsen
  • NextPreviousFirstLast a Következő és az Előző gomb mellett az Első és az Utolsó gomb is megtalálható, így a felhasználó gyorsan áttérhet az adatok első vagy utolsó oldalára
  • Numeric oldalszámok sorozatát jeleníti meg, így a felhasználó azonnal bármelyik oldalra ugorhat
  • NumericFirstLast az oldalszámok mellett az Első és az Utolsó gombot is tartalmazza, így a felhasználó gyorsan áttérhet az adatok első vagy utolsó oldalára; az Első/Utolsó gomb csak akkor jelenik meg, ha az összes numerikus oldalszám nem fér el

Ezenkívül a GridView, a DetailsView és a FormView mind azokat a PageIndexPageCount tulajdonságokat kínálja, amelyek az aktuálisan megtekintett oldalt és az adatoldalak teljes számát jelzik. A PageIndex tulajdonság indexelése 0-tól kezdődik, ami azt jelenti, hogy az adatok PageIndex első oldalának megtekintésekor 0 lesz. PageCount1-nél kezdődik a számlálás, ami azt jelenti, hogy PageIndex a 0 és PageCount - 1a 0 közötti értékekre korlátozódik.

Szánjunk egy kis időt a GridView lapozási felületének alapértelmezett megjelenésének javítására. Tegyük fel, hogy a lapozófelületet jobbra igazítjuk világosszürke háttérrel. Ahelyett, hogy ezeket a tulajdonságokat közvetlenül a GridView PagerStyle tulajdonságán keresztül állítanánk be, hozzunk létre egy Styles.css nevű CSS-osztályt, és rendeljük hozzá a PagerRowStylePagerStyle tulajdonságát a témánkon keresztül. Először nyissa meg Styles.css és adja hozzá a következő CSS-osztálydefiníciót:

.PagerRowStyle
{
    background-color: #ddd;
    text-align: right;
}

Ezután nyissa meg a GridView.skin fájlt a DataWebControls mappán belüli App_Themes mappában. Ahogy a Mesterlapok és a Webhelynavigáció oktatóanyagban is bemutattuk, a bőrfájlok segítségével megadhatja egy webvezérlő alapértelmezett tulajdonságértékét. Ezért bővítse a meglévő beállításokat úgy, hogy az PagerStyle s CssClass tulajdonságot PagerRowStyle állítsa. Emellett konfiguráljuk úgy a lapozófelületet, hogy legfeljebb öt numerikus oldalgomb jelenjen meg a NumericFirstLast lapozófelület használatával.

<asp:GridView runat="server" CssClass="DataWebControlStyle">
   <AlternatingRowStyle CssClass="AlternatingRowStyle" />
   <RowStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedRowStyle CssClass="SelectedRowStyle" />
   <PagerStyle CssClass="PagerRowStyle" />
   <PagerSettings Mode="NumericFirstLast" PageButtonCount="5" />
</asp:GridView>

A lapozás felhasználói felülete

A 8. ábrán az weblap látható, amikor böngészőn keresztül megtekintették, miután a GridView "Lapozás engedélyezése" jelölőnégyzetét bejelölték, és a PagerStyle és PagerSettings konfigurációkat a GridView.skin fájlon keresztül elvégezték. Figyelje meg, hogy csak tíz rekord jelenik meg, és a lapozófelület azt jelzi, hogy az első adatoldalt tekintjük meg.

8. ábra: Ha a lapozás engedélyezve van, egyszerre csak a rekordok egy részhalmaza jelenik meg (kattintson ide a teljes méretű kép megtekintéséhez)

Amikor a felhasználó az oldalszámozási felületen az egyik oldalszámra kattint, megjelenik egy postback, és az oldal újra betöltődik, amely a kért oldal rekordjait jeleníti meg. A 9. ábrán az adatok végső oldalának megtekintése utáni eredmények láthatók. Figyelje meg, hogy az utolsó oldal csak egy rekorddal rendelkezik; Ennek az az oka, hogy összesen 81 rekord van, ami oldalanként nyolc 10 rekordot eredményez, valamint egy magányos rekordot tartalmazó oldalt.

9. ábra: Ha rákattint egy oldalszámra, az újratöltődést okoz, és megjeleníti a rekordok megfelelő részhalmazát (ide kattintva megtekintheti a teljes méretű képet)

Lapozási munkafolyamat Server-Side

Amikor a végfelhasználó rákattint egy gombra a lapozófelületen, elindul a postback, és megkezdődik a következő kiszolgálóoldali munkafolyamat:

1. A GridView s (vagy DetailsView vagy FormView) PageIndexChanging esemény kigyullad
2. Az ObjectDataSource újrakéri az összes adatot a BLL-ből; a GridView s PageIndex és PageSize a tulajdonságértékek segítségével állapítható meg, hogy a BLL-ből visszaadott rekordokat milyen módon kell megjeleníteni a GridView-ban
3. A GridView PageIndexChanged eseménye aktiválódik

A 2. lépésben az ObjectDataSource újrakéri az összes adatot az adatforrásból. Ezt a lapozási stílust gyakran alapértelmezett lapozásnak nevezik, mivel amikor a AllowPaging tulajdonságot true értékre állítjuk, alapértelmezés szerint ez a lapozási viselkedés kerül alkalmazásra. Az alapértelmezett lapozás esetén az adat-webvezérlő naiv módon lekéri az egyes adatoldalak összes rekordját, annak ellenére, hogy a rendszer valójában csak a rekordok egy részhalmazát jeleníti meg a böngészőnek küldött HTML-fájlban. Ha az adatbázis adatait nem gyorsítótárazza a BLL vagy az ObjectDataSource, az alapértelmezett lapozás nem működik megfelelően nagy eredményhalmazok vagy több egyidejű felhasználóval rendelkező webalkalmazások esetében.

A következő oktatóanyagban az egyéni lapozás implementálását vizsgáljuk meg. Egyéni lapozással kifejezetten utasíthatja az ObjectDataSource-t, hogy csak a kért adatoldalhoz szükséges rekordok pontos készletét kérje le. Ahogy el tudja képzelni, az egyéni lapozás nagy mértékben javítja a lapozás hatékonyságát a nagy eredményhalmazokon keresztül.

Megjegyzés:

Bár az alapértelmezett lapozás nem megfelelő, ha elég nagy eredményhalmazokon vagy sok egyidejű felhasználóval rendelkező webhelyeken lapoz, vegye figyelembe, hogy az egyéni lapozás több módosítást és erőfeszítést igényel a megvalósításhoz, és nem olyan egyszerű, mint egy jelölőnégyzet ellenőrzése (ahogy az alapértelmezett lapozás). Ezért az alapértelmezett lapozás ideális választás lehet kis, alacsony forgalmú webhelyekhez, vagy viszonylag kis eredményhalmazokon keresztüli lapozáshoz, mivel sokkal egyszerűbb és gyorsabb implementálás.

Ha például tudjuk, hogy soha nem lesz 100-nál több termék az adatbázisunkban, az egyéni lapozás minimális teljesítménynövekedését valószínűleg ellensúlyozza a megvalósításhoz szükséges erőfeszítés. Ha azonban egy nap több ezer vagy több tízezer termékünk lesz, az egyéni lapozás nem implementálása nagyban akadályozná az alkalmazás méretezhetőségét.

4. lépés: A lapozási felület testreszabása

Az adat webes vezérlői számos olyan tulajdonságot biztosítanak, amelyek a felhasználói lapozási élmény fokozására használhatók. A PageCount tulajdonság például azt jelzi, hogy hány oldal van, a tulajdonság pedig PageIndex az aktuális meglátogatott lapot jelzi, és beállíthatja, hogy gyorsan áthelyezze a felhasználót egy adott lapra. Ha be szeretné szemléltetni, hogyan használhatja ezeket a tulajdonságokat a felhasználói lapozási élmény javítása érdekében, adjunk hozzá egy Címke webvezérlőt a lapunkhoz, amely tájékoztatja a felhasználót arról, hogy melyik lapot látogatja éppen, valamint egy DropDownList vezérlőt, amely lehetővé teszi számukra, hogy gyorsan ugorjanak egy adott lapra.

Először vegyen fel egy Címke webvezérlőt a lapra, állítsa be annak ID tulajdonságát PagingInformation értékre, és törölje annak Text tulajdonságát. Ezután hozzon létre egy eseménykezelőt a GridView-eseményhez DataBound , és adja hozzá a következő kódot:

protected void Products_DataBound(object sender, EventArgs e)
{
    PagingInformation.Text = string.Format("You are viewing page {0} of {1}...",
        Products.PageIndex + 1, Products.PageCount);
}

Ez az eseménykezelő hozzárendeli a PagingInformation Címke Text tulajdonságát egy üzenethez, amely tájékoztatja a felhasználót arról, hogy éppen hányadik oldalt látogatja meg a teljes oldalszámból Products.PageIndex + 1 (1-et adunk hozzá a Products.PageCount tulajdonsághoz, mert Products.PageIndex 0-tól kezdve van indexelve). A címke tulajdonságát a Text eseménykezelőben osztottam ki, és nem a DataBound eseménykezelőben, mert a PageIndexChanged esemény minden alkalommal bekövetkezik, amikor az adatok a GridView-hoz vannak kötve, míg a DataBound eseménykezelő csak az oldalindex módosításakor történik. Ha a GridView kezdetben az első oldallátogatáskor kötött adatokkal rendelkezik, az PageIndexChanging esemény nem aktiválódik (míg az DataBound esemény igen).

Ezzel a kiegészítéssel a felhasználó számára megjelenik egy üzenet, amely jelzi, hogy melyik oldalt látogatja éppen, és összesen hány oldalnyi adat van.

10. ábra: Az aktuális oldalszám és az oldalak teljes száma jelenik meg (ide kattintva megtekintheti a teljes méretű képet)

A Címke vezérlőelem mellett adjunk hozzá egy DropDownList-vezérlőt is, amely a GridView-ban listázza az oldalszámokat, és az aktuálisan megtekintett oldal van kijelölve. Az ötlet az, hogy a felhasználó gyorsan átugorhat az aktuális lapról egy másikra, ha egyszerűen kiválasztja az új lapindexet a Legördülő listából. Először adjon hozzá egy DropDownList-et a Tervezőhöz, állítsa be a ID tulajdonságát PageList értékre, majd válassza az AutoPostBack engedélyezése opciót az intelligens címke opciói közül.

Ezután térjen vissza az DataBound eseménykezelőhöz, és adja hozzá a következő kódot:

// Clear out all of the items in the DropDownList
PageList.Items.Clear();
// Add a ListItem for each page
for (int i = 0; i < Products.PageCount; i++)
{
    // Add the new ListItem
    ListItem pageListItem = new ListItem(string.Concat("Page ", i + 1), i.ToString());
    PageList.Items.Add(pageListItem);
    // select the current item, if needed
    if (i == Products.PageIndex)
        pageListItem.Selected = true;
}

Ez a kód a PageList legördülő lista elemeinek törlésével kezdődik. Ez feleslegesnek tűnhet, mivel nem várható, hogy a lapok száma megváltozik, de más felhasználók egyszerre használják a rendszert, rekordokat adhatnak hozzá vagy távolíthatnak el a Products táblából. Az ilyen beszúrások vagy törlések megváltoztathatják az adatoldalak számát.

Ezután ismét létre kell hoznunk az oldalszámokat, és alapértelmezés szerint ki kell választanunk azt, amelyik az aktuális GridView-ra PageIndex leképez. Ezt egy 0-tól PageCount - 1-ig terjedő ciklussal hajtjuk végre, hozzáadunk egy új ListItem minden iterációban, és beállítjuk a Selected tulajdonságát igazra, ha az aktuális iterációs index megegyezik a GridView PageIndex tulajdonságával.

Végül létre kell hoznunk egy eseménykezelőt a DropDownList s SelectedIndexChanged eseményhez, amely minden alkalommal aktiválódik, amikor a felhasználó egy másik elemet választ a listából. Az eseménykezelő létrehozásához egyszerűen kattintson duplán a Tervező legördülő listájára, majd adja hozzá a következő kódot:

protected void PageList_SelectedIndexChanged(object sender, EventArgs e)
{
    // Jump to the specified page
    Products.PageIndex = Convert.ToInt32(PageList.SelectedValue);
}

A 11. ábrán látható, hogy a GridView PageIndex tulajdonságának módosítása miatt az adatok visszapattannak a GridView-ba. A GridView eseménykezelőjében DataBound a megfelelő DropDownList ListItem van kiválasztva.

11. ábra: A felhasználó automatikusan a hatodik oldalra kerül, amikor kiválasztja a 6. oldal Drop-Down listaelemet (ide kattintva megtekintheti a teljes méretű képet)

5. lépés: A Bi-Directional rendezési támogatás hozzáadása

A kétirányú rendezési támogatás hozzáadása olyan egyszerű, mint a lapozási támogatás hozzáadása, egyszerűen ellenőrizze a GridView intelligens címkéjének Rendezés engedélyezése beállítását (amely a GridView tulajdonságot a következőre AllowSortingállítja). Ez a GridView mezőinek minden fejlécét LinkButtonokként jeleníti meg, amelyek kattintáskor visszajelzést okoznak, és növekvő sorrendben visszatérítik a kattintott oszlop szerint rendezett adatokat. Ha ismét ugyanarra a fejlécre kattint, a LinkButton újra rendezi az adatokat csökkenő sorrendben.

Megjegyzés:

Ha nem gépelt adathalmazt, hanem egyéni adatelérési réteget használ, előfordulhat, hogy a GridView intelligens címkéjében nincs engedélyezve a rendezés engedélyezése. Csak a rendezést natívan támogató adatforrásokhoz kötött GridViews rendelkezik ezzel a jelölőnégyzetel. A típusos adathalmaz beépített rendezési támogatást nyújt, mivel az ADO.NET DataTable egy Sort metódust biztosít, amely meghíváskor a megadott feltételek alapján rendezi a DataTable DataRows-t.

Ha a DAL nem ad vissza olyan objektumokat, amelyek natív módon támogatják a rendezést, konfigurálnia kell az ObjectDataSource-t, hogy rendezési információkat adjon át az üzleti logikai rétegnek, amely rendezheti az adatokat, vagy a DAL szerint rendezheti az adatokat. Egy későbbi oktatóanyagban bemutatjuk, hogyan rendezheti az adatokat az üzleti logika és az adatelérési rétegek között.

A rendezési LinkButtonok HTML-hivatkozásokként jelennek meg, amelyek aktuális színei (a nem látogatott hivatkozás esetén kék, illetve a meglátogatott hivatkozáshoz sötétvörös) ütköznek a fejlécsor háttérszínével. Ehelyett az összes fejlécsor-hivatkozást fehér színben jelenítsük meg, függetlenül attól, hogy meglátogatták-e őket. Ezt úgy teheti meg, hogy hozzáadja a következőket az Styles.css osztályhoz:

.HeaderStyle a, .HeaderStyle a:visited
{
    color: White;
}

Ez a szintaxis azt jelzi, hogy a Fejlécstílus osztályt használó elemen belül a hiperhivatkozások megjelenítéséhez fehér szöveget kell használni.

A CSS hozzáadása után, amikor böngészőben látogatja meg az oldalt, a képernyőnek a 12. ábrához hasonlóan kell kinéznie. A 12. ábra különösen az Ár mező fejléchivatkozásának kattintása utáni eredményeket jeleníti meg.

12. ábra: Az eredményeket az egységár növekvő sorrendben rendezte (kattintson ide a teljes méretű kép megtekintéséhez)

A rendezési munkafolyamat vizsgálata

Minden GridView mező a BoundField, a CheckBoxField, a TemplateField stb. mezőhöz tartozik egy SortExpression tulajdonság, amely azt a kifejezést jelzi, amelyet az adatok rendezéséhez kell használni, amikor a mező rendezési fejléchivatkozására kattint. A GridView is rendelkezik egy SortExpression tulajdonság. Amikor egy rendezési fejléc LinkButton elemére kattintanak, a GridView hozzárendeli annak mezőjének SortExpression értékét a tulajdonságához SortExpression. Ezután az adatok újra lekérhetők az ObjectDataSource-ból, és a GridView tulajdonsága SortExpression szerint lesznek rendezve. Az alábbi lista azokat a lépéseket ismerteti, amelyek akkor következnek be, amikor egy végfelhasználó egy GridView-ban rendezi az adatokat:

1. A GridView-rendezési esemény kigyullad
2. A GridView tulajdonság SortExpression annak a mezőnek a SortExpression beállítására van beállítva, amelyre a LinkButton rendezési fejlécre kattintott
3. Az ObjectDataSource újra lekéri az összes adatot a BLL-ből, majd a GridView s használatával rendezi az adatokat SortExpression
4. A GridView tulajdonsága PageIndex 0-ra visszaáll, ami azt jelenti, hogy a felhasználó az adatok rendezésekor visszakerül az első oldalra (feltételezve, hogy a lapozás támogatása implementálva lett)
5. A GridView eseményeSorted kigyullad

Az alapértelmezett lapozáshoz hasonlóan az alapértelmezett rendezési beállítás is újra lekéri az összes rekordot a BLL-ből. Ha lapozás nélküli rendezést használ, vagy ha az alapértelmezett lapozással történő rendezést használja, nem lehet megkerülni ezt a teljesítménybeli találatot (az adatbázis adatainak gyorsítótárazásával). Azonban, ahogy egy későbbi oktatóanyagban látni fogjuk, az adatok hatékonyan rendezhetők egyéni lapozáskor.

Amikor az ObjectDataSource-t a GridView intelligens címkével rendelkező legördülő listáján keresztül a GridView-hoz köti, minden GridView-mező automatikusan a SortExpression tulajdonsággal rendelkezik, amely hozzá van rendelve az osztály adatmezőjének ProductsRow nevéhez. Például a ProductName BoundField SortExpression be van állítva ProductName, ahogyan az a következő deklaratív jelölésben látható.

<asp:BoundField DataField="ProductName" HeaderText="Product"
    SortExpression="ProductName" />

Egy mező konfigurálható úgy, hogy ne legyen rendezhető a tulajdonsága SortExpression törlésével (üres sztringhez rendelve). Ennek szemléltetéséhez képzelje el, hogy nem akartuk, hogy ügyfeleink ár szerint rendezik a termékeinket. A UnitPrice BoundField tulajdonság SortExpression eltávolítható a deklaratív markup vagy a Mezők párbeszédpanelen keresztül (amely a GridView intelligens címkéjének Oszlopok szerkesztése linkre kattintva érhető el).

13. ábra: Az eredményeket az egységár növekvő sorrendben rendezte

Miután eltávolította a SortExpression tulajdonságot a UnitPrice BoundFieldhez, a fejléc szövegként jelenik meg hivatkozás helyett, ezáltal megakadályozza, hogy a felhasználók ár szerint rendezzék az adatokat.

14. ábra: A SortExpression tulajdonság eltávolításával a felhasználók már nem rendezhetik a termékeket ár szerint (ide kattintva megtekintheti a teljes méretű képet)

A GridView programozott rendezése

A GridView tartalmát programozott módon is rendezheti a GridView Sort metódusával. Egyszerűen adja meg a rendezéshez szükséges SortExpression értéket együtt a SortDirection (Ascending vagy Descending), és a GridView adatai újrarendeződnek.

Tegyük fel, hogy azért kikapcsoltuk a rendezést UnitPrice szerint, mert aggódtunk, hogy ügyfeleink egyszerűen csak a legalacsonyabb árú termékeket vásárolják meg. Szeretnénk azonban ösztönözni őket, hogy vásárolják meg a legdrágább termékeket, ezért szeretnénk, ha ár szerint rendeznék a termékeket, de csak a legdrágább ártól a legkevésbé.

Ennek végrehajtásához adjon hozzá egy Button webvezérlőelemet a laphoz, állítsa a ID tulajdonságát SortPriceDescending értékre, és a Text tulajdonságát "Ár szerinti rendezés" értékre. Ezután hozzon létre egy eseménykezelőt a Button s Click eseményhez, ha duplán kattint a Gomb vezérlőelemre a Tervezőben. Adja hozzá a következő kódot az eseménykezelőhöz:

protected void SortPriceDescending_Click(object sender, EventArgs e)
{
    // Sort by UnitPrice in descending order
    Products.Sort("UnitPrice", SortDirection.Descending);
}

Erre a gombra kattintva a felhasználó az első oldalra kerül, és a termékeket ár szerint rendezi, a legdrágábbtól a legkevésbé költségesig (lásd a 15. ábrát).

15. ábra: A gombra kattintva megrendeli a termékeket a legdrágábbtól a legkisebbig (ide kattintva megtekintheti a teljes méretű képet)

Összefoglalás

Ebben az oktatóanyagban bemutattuk, hogyan valósítható meg az alapértelmezett lapozási és rendezési képességek, amelyek mindegyike ugyanolyan egyszerű volt, mint egy jelölőnégyzet ellenőrzése! Amikor egy felhasználó adatokat rendez vagy lapokat rendez, egy hasonló munkafolyamat bontakozik ki:

1. Postback történik
2. Az adatweb vezérlő előzetes szintű eseményeket indít (PageIndexChanging vagy Sorting)
3. Az ObjectDataSource az összes adatot újra lekéri
4. Az adat-webvezérlő szint utáni eseménytüzek (PageIndexChanged vagy Sorted)

Bár az egyszerű lapozás és rendezés megvalósítása könnyű, több erőfeszítést kell tenni a hatékonyabb egyéni lapozás, illetve a lapozási vagy rendezési felület továbbfejlesztése érdekében. A jövőbeli oktatóanyagok ezeket a témaköröket ismertetik.

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övetkező