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> <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl01','')">2</a> <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl02','')">3</a> <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl03','')">4</a> <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl04','')">5</a> <a href="javascript:__doPostBack('ListView1$ctl02$ctl00$ctl05','')">...</a> </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> <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=2">2</a> <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=3">3</a> <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=4">4</a> <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=5">5</a> <a href="/SeoFriendlyPagerSample/Default.aspx?Oldal=6">...</a> </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 -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.