Keresőbarát lapozás

A ListView vezérlőt többek között azért szeretjük, mert korrektül kézben lehet vele tartani a generált HTML kódot. Ha túl sok adatot szeretnénk vele megjeleníteni, akkor tipikusan DataPagert ragasztunk hozzá. De nézte már meg valaki, hogy mit művel a DataPager a generált HTML kódban?

Megmutatom, íme egy egyszerű lista megjelenítés lapozással:

    <asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1">
        <ItemTemplate>
                <li><%# Eval("Title") %></li>
        </ItemTemplate>
        <LayoutTemplate>
            <ul runat="server">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </ul>
            <div>
                <asp:DataPager runat="server">
                    <Fields>
                        <asp:NumericPagerField />
                    </Fields>
                </asp:DataPager>
            </div>
        </LayoutTemplate>
    </asp:ListView>

A lista valóban szép lesz, de a lapozós részből ez kerül az oldalba:

    <div>
        <span>
            <span>1</span>&nbsp;
            <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl01','')">2</a>&nbsp;
            <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl02','')">3</a>&nbsp;
            <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl03','')">4</a>&nbsp;
            <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl04','')">5</a>&nbsp;&nbsp;
            <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl05','')">...</a>&nbsp;
        </span>
    </div>

Biztos megvan ennek is a szépsége, az azonban szinte biztos, hogy a kereső robotok ezeket a linkeket nem fogják bejárni, így nem fogunk tudni ráguglizni a további oldalakon lévő tartalmakra.

A megoldás a QueryStringField tulajdonság alkalmazása a DataPagerben:

    <asp:DataPager runat="server" QueryStringField="Oldal">
        <Fields>
            <asp:NumericPagerField />
        </Fields>
    </asp:DataPager>

Ebbe a tulajdonságba egy tetszőleges sztringet írhatunk, ami meg fog jelenni az URL-ben, például így:

http://localhost/SeoFriendlyPagerSample/Default.aspx?Oldal=5

A HTML kódban pedig így:

    <div>
        <span>
            <span>1</span>&nbsp;
            <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=2">2</a>&nbsp;
            <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=3">3</a>&nbsp;
            <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=4">4</a>&nbsp;
            <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=5">5</a>&nbsp;&nbsp;
            <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=6">...</a>&nbsp;
        </span>
    </div>

A dolog nyilván akkor válik igazán érdekessé, ha egy oldalon több lapozó vagy lapozandó vezérlő is van. Ha külön akarjuk kezelni őket, akkor nekünk kell gondoskodni arról, hogy a QueryStringField értéke különböző legyen. Gyanítom, hogy ezért nincs bekapcsolva ez a funkció alapértelmezés szerint…

Ami pedig a rengeteg &nbsp;-t illeti, a NumericPagerField RenderNonBreakingSpacesBetweenControls tulajdonságával ezek megszűntethetőek. Ebben az esetben a CurrentPageLabelCssClass és a NumericButtonCssClass tulajdonságokkal tudjuk az egyes linkek stílusát – például távolságát – megadni.

A kapcsolódó forráskód letölthető az MSDN Kompetencia Központ oldaláról.

 

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s