Korzystanie z formantów ListView i DataPager ASP.NET 3.5: Tworzenie przyjaznego dla SEO interfejsu stronicowania

Wprowadzenie

Wszystkie kontrolki GridView, FormView i DetailsView zawierają wbudowane funkcje stronicowania. Ustawiając kilka właściwości, możliwe jest, aby dowolny z tych elementów sterujących automatycznie zawierał interfejs stronicowania. ListView nie zawiera jednak wbudowanej funkcjonalności stronicowania. Zamiast tego Microsoft odłączył logikę stronicowania od ListView i przeniósł ją do osobnego kontrolera WWW - DataPager. Stronicowanie danych za pomocą elementów sterujących ListView i DataPager Wcześniejszy artykuł z tej serii zbadał, jak użyć DataPager do zaimplementowania interfejsu stronicowania dla ListView.

Domyślnie DataPager renderuje przyciski, przyciski LinkButtons lub ImageButtons w interfejsie stronicowania dla przycisków numerycznych stron Następny, Poprzedni, Pierwszy, Ostatni i numeryczny. Po kliknięciu te przyciski powodują odesłanie, w którym to momencie odpowiedni zestaw rekordów zostaje powiązany z ListView. Niestety wyszukiwarki nie mogą indeksować witryny za pomocą postbacków; zamiast tego polegają na linkach, które znajdują na Twojej stronie. W związku z tym wyszukiwarka indeksuje tylko pierwszą stronę danych wyświetlanych przez ListView, ponieważ nie może dotrzeć do kolejnych stron. Ponadto użytkownicy nie mogą tworzyć zakładek do konkretnej strony danych.

Dobrą wiadomością jest to, że łatwo jest zmodyfikować domyślne zachowanie DataPager. W tym artykule pokazano, jak skonfigurować DataPager, aby używał hiperłączy i kwerendy do przeglądania danych ListView (zamiast postbacków) w celu stworzenia przyjaznego SEO interfejsu stronicowania. Czytaj dalej, aby dowiedzieć się więcej!

Problem z postbackami

ASP.NET Web Forms tradycyjnie używają postbacków do wykonywania pewnych czynności. Postback występuje, gdy użytkownik kliknie przycisk Button, przycisk LinkButton lub kontrolkę ImageButton lub gdy wykona jakąś akcję po stronie klienta, która została skonfigurowana do wyzwolenia postbacku (na przykład wybranie innego elementu z kontrolki DropDownList, którego właściwość AutoPostBack została ustawiona do True). Wiadomość zwrotna przesyła formularz internetowy, prosząc przeglądarkę o ponowne zażądanie tej samej strony i wysłanie wraz z parą nazw / wartości elementów <input> w ramach <form>. Strona ASP.NET jest następnie ponownie renderowana, a wynikowy kod HTML jest odsyłany do przeglądarki w celu ponownego wyświetlenia.

Model postback działa dobrze w wielu scenariuszach. Jedną z jej wad jest to, że nie prowadzi do strony przyjaznej dla SEO . SEO lub optymalizacja wyszukiwarki , jest praktyką poprawy jakości lub ilości ruchu, który dociera do witryny z wyszukiwarek. Strona przyjazna SEO to taka, której HTML jest uporządkowany i ułożony w taki sposób, że zwiększa widoczność witryny w wyszukiwarkach. Wyszukiwarki używają zautomatyzowanych programów do indeksowania strony internetowej. Te „roboty” zazwyczaj rozpoczynają się od odwiedzania strony głównej witryny, a następnie zagrzebywania się na innych stronach internetowych, które są połączone ze strony głównej. Przeszukiwacze będą śledzić linki, ale nie będą przesyłać formularzy. Jeśli masz stronę, na której pewne treści są widoczne tylko po odsłonie, dane te nie będą indeksowane przez wyszukiwarki.

Domyślnie DataPager renderuje przyciski, przyciski LinkButtons lub ImageButtons dla interfejsu stronicowania. Z założenia kontrolki te po kliknięciu powodują odesłanie. Na postbacku DataPager pobiera żądaną stronę danych do wyświetlenia i wiąże ją z ListView. Z perspektywy użytkownika końcowego klikają na numer strony (lub jeden z przycisków Pierwszy, Poprzedni, Następny, Ostatni) i, voila, zobacz odpowiednią stronę danych. Problem polega na tym, że roboty indeksujące wyszukiwarki nie mogą „klikać” przycisków w interfejsie stronicowania, dlatego indeksowana będzie tylko pierwsza strona wyników. (To przyjazne dla SEO zachowanie jest również nieodłącznym elementem wbudowanej obsługi stronicowania GridView, FormView i DetailView).

Na szczęście DataPager może wygenerować przyjazną dla SEO kontrolę interfejsu stronicowania. Jak zobaczymy na chwilę, ustawiając jedną właściwość w DataPager, możemy polecić jej renderowanie hiperłączy w interfejsie stronicowania i użycie parametru querystring do wskazania strony danych do wyświetlenia.

Przenoszenie numeru strony do QueryString

DataPager zawiera a Właściwość QueryStringField który, jeśli jest ustawiony, instruuje aplikację DataPager do generowania przyjaznego dla SEO interfejsu stronicowania. Jeśli ustawiona jest właściwość QueryStringField, DataPager renderuje interfejs stronicowania jako serię hiperłączy (zamiast renderować interfejs stronicowania jako serię Przycisków, Przycisków Link lub Przycisków Obrazu). W szczególności każde hiperłącze ma swój atrybut href ustawiony na bieżący adres URL z numerem strony przekazanym w polu kwerendy, którego nazwa jest wartością właściwości QueryStringField.

Rozważmy na przykład formant DataPager, który jest skonfigurowany do wyświetlania przycisków Pierwszy, Poprzedni, Następny i Ostatni, oraz że istnieje pięć stron stronicowanych danych. Ustawienie właściwości QueryStringField obiektu DataPager na „PageNumber” spowoduje wyświetlenie następującego znacznika interfejsu stronicowania podczas przeglądania pierwszej strony danych:

<a disabled="disabled"> Najpierw </a>
<a disabled="disabled"> Poprzedni </a>
<a href=" PageName .aspx? PageNumber=2 "> Dalej </a>
<a href=" PageName .aspx? PageNumber=5 "> Ostatni </a>

Ponieważ przeglądamy pierwszą stronę danych, linki Pierwszy i Poprzedni są nieaktywne. Nieaktywne łącza są renderowane jako hiperłącza z wyłączonym zestawem atrybutów. Łącze Następny wysyła użytkownika do nazwy strony .aspx? PageNumber = 2. W tym przypadku parametr querystring PageNumber jest ustawiony na 2, ale bardziej ogólnie byłby ustawiony na currentPageNumber + 1. Ostatni link wysyła użytkownika do piątej i ostatniej strony danych.

Zrzut ekranu poniżej pokazuje interfejs stronicowania, gdy jest renderowany jako łącza. Linki Pierwszy i Poprzedni są renderowane jako tekst (a nie łącze), ponieważ ich wyłączone atrybuty są ustawione.

Jeśli użytkownik kliknie łącze Dalej, przeglądarka zażąda nazwy strony .aspx? PageNumber = 2. Gdy strona jest renderowana, DataPager automatycznie sprawdza querystring pod kątem parametru o nazwie takiej samej jak jego właściwość QueryStringField (w tym przypadku „PageNumber”). Ponieważ to pole kwerendy ma wartość 2, DataPager automatycznie załaduje drugą stronę danych do ListView. Tym razem interfejs stronicowania wyświetli następujący znacznik:

<a href=" PageName .aspx? PageNumber=1 "> Najpierw </a>
<a href=" PageName .aspx? PageNumber=1 "> Poprzedni </a>
<a href=" PageName .aspx? PageNumber=3 "> Dalej </a>
<a href=" PageName .aspx? PageNumber=5 "> Ostatni </a>

I to wszystko! Tworzenie przyjaznego SEO DataPagera jest prostym ustawieniem jego właściwości QueryStringField na pewną wartość. Dzięki tej zmianie wyszukiwarki mogą indeksować więcej niż tylko pierwszą stronę danych. Ponadto odwiedzający mogą dodać zakładkę do konkretnej strony danych lub wysłać adres URL do określonej strony danych do znajomego lub kolegi.

Ulepszanie interfejsu użytkownika stronicowania

Interfejs użytkownika stronicowania pokazany na powyższym zrzucie ekranu pozostawia wiele do życzenia. Ustawiając kilka właściwości i dodając kropkę CSS, możemy znacznie poprawić interfejs stronicowania. Na początek ulepszmy interfejs stronicowania, aby zamiast tylko dołączać linki Pierwsze, Poprzednie, Następne i Ostatnie, zawiera również numeryczne numery stron. W Stronicowanie danych za pomocą elementów sterujących ListView i DataPager widzieliśmy, jak określić interfejs stronicowania DataPager poprzez DataPagerFields. DataPager na powyższym zrzucie ekranu zawierał jedno pole DataPagerField, a mianowicie pole pagera NextPreviousPagerField. Możemy również dodawać strony numeryczne za pomocą trzech pól DataPagerField:

• Pole NextPreviousPagerField dla pierwszej i poprzedniej opcji,
• Pole NumericPagerField dla stron numerycznych i
• Pole NextPreviousPagerField dla opcji Next i Last.

Oto deklaratywny znacznik DataPager po dodaniu i skonfigurowaniu tych trzech pól DataPagerField: <asp: DataPager runat = "serwer" QueryStringField = "Strona" ...>
<Fields>
<asp: NextPreviousPagerField FirstPageText = "& lt; & lt;" ShowFirstPageButton = "True" ShowNextPageButton = "False" />
<asp: NumericPagerField />
<asp: NextPreviousPagerField LastPageText = "& gt; & gt;" ShowLastPageButton = "True" ShowPreviousPageButton = "False" />
</Fields>
</ asp: DataPager>

Zauważ, że pierwsza NextPreviousPagerField jest skonfigurowana tak, że właściwość FirstPageText jest ustawiona na „& lt; & lt;”, co spowoduje wyświetlenie tekstu << dla (a nie Pierwszego). Ponadto właściwość ShowNextPageButton jest ustawiona na False, aby ukryć przycisk Dalej. (Ostatni przycisk jest domyślnie ukryty.) Podobnie, druga NextPreviousPagerField jest skonfigurowana tak, aby wyłączyć przycisk Poprzednia strona i wyświetlić tekst >> dla ostatniego przycisku.

Zrzut ekranu poniżej pokazuje nowy interfejs stronicowania podczas przeglądania przez przeglądarkę.

Możemy podchwycić wygląd szczyptą CSS. Pola NextPreviousPagerField i NumericPagerField mają właściwości, które umożliwiają przypisanie klasy CSS do odnośników do stron numerycznych, do bieżącego łącza do strony numerycznej oraz do łączy Pierwszy, Poprzedni, Następny i Ostatni. Po ustawieniu tych właściwości wraz z ustawieniem właściwości RenderNonBreakingSpacesBetweenControls na False, tak aby pominąć odstęp między każdym linkiem w interfejsie stronicowania i dodaniem niezbędnych reguł CSS, wynikowy interfejs stronicowania został przekształcony w następujące elementy:

Zauważ, jak podświetlony jest bieżący numer strony. Na powyższym zrzucie ekranu użytkownik przegląda stronę 1, dlatego łącze „1” ma czerwone tło i biały pierwszy plan, podczas gdy inne łącza w interfejsie stronicowania mają odwrócone kolory (czerwony pierwszy plan na białym tle). Również po najechaniu kursorem myszy na łącze stronicowania jego obramowanie i tekst stają się czarne, delikatnie je podkreślając.

Plik do pobrania dostępny na końcu tego artykułu zawiera pełne reguły CSS i ustawienia właściwości potrzebne do wdrożenia powyższego interfejsu stronicowania.

QueryStringField i RenderDisabledButtonsAsLabels - opowieść o błędzie ASP.NET

Jak już wcześniej opisaliśmy w tym artykule, podczas renderowania odsyłaczy DataPager dodaje wyłączony atrybut do hiperłączy, które nie są klikalne, takich jak linki Pierwszy i Poprzedni podczas przeglądania pierwszej strony danych. Niestety, taki znacznik nie jest zgodny z XHTML, ponieważ ścisła implementacja XHTML uniemożliwia wyłączony atrybut elementu <a>. Klasa NextPreviousPagerField ma Właściwość RenderDisabledButtonsAsLabels , co brzmi jak idealne rozwiązanie. Niestety, nie działa to w wersji 3.5 programu ASP.NET - po ustawieniu właściwości QueryStringField obiektu DataPager wartość RenderDisabledButtonsAsLabels jest ignorowana. Dobrą wiadomością jest to, że ten błąd został naprawiony w .NET 4.0. (Widzieć Używanie DataPagera zarówno z QueryStringField, jak i RenderDisabledButtonsAsLabels bardziej szczegółowy opis problemu w ASP.NET 3.5, a także obejście problemu.)

Oprócz złamania zgodności z XHTML, ten błąd sprawia, że ​​trudniej jest mieć wyłączone przyciski stylizowane inaczej. Na przykład poprzedni zrzut ekranu pokazuje pierwszą stronę danych, co oznacza, że ​​linki Pierwszy i Poprzedni są nieaktywne, ale linki te wydają się klikalne. Oczywiście, jeśli najedziesz kursorem myszy na nie, szybko zauważysz, że nie można ich kliknąć, ale najlepiej byłoby, gdyby te wyłączone linki były wyświetlane inaczej, prawdopodobnie w kolorze szarym.

Moim obejściem w tej sytuacji było użycie odrobiny jQuery , która jest biblioteką JavaScript przeznaczoną do wyliczania, sprawdzania i modyfikowania elementów w HTML DOM. W skrócie strona zawiera pojedynczy wiersz kodu JavaScript, który jest wykonywany po załadowaniu strony. Ten kod JavaScript znajduje wszystkie elementy <a> z wyłączonym atrybutem, który używa określonej klasy CSS (pagerButton), usuwa tę klasę, a następnie dodaje alternatywną klasę CSS (pagerButtonDisabled), która wyświetla nieaktywne linki przy użyciu szarego koloru tekstu i usuwa granica. (Chociaż nie pokazano tego powyżej, ustawiłem właściwość ButtonCssClass formantu NextPreviousPagerField na pagerButton, która kojarzy tę klasę CSS z każdym z czterech linków Pierwszy, Poprzedni, Następny i Ostatni).

Oto ta pojedyncza linia kodu JavaScript:

$ ('a.pagerButton [disabled]'). removeClass ('pagerButton'). addClass ('pagerButtonDisabled');

W takim przypadku interfejs stronicowania „wyszarza” nieaktywne łącza stronicowania, jak pokazano na poniższym zrzucie ekranu.

Wniosek

Domyślnie DataPager renderuje swój interfejs stronicowania za pomocą przycisków Button, LinkButton lub ImageButton. Gdy odwiedzający kliknie jeden z tych przycisków interfejsu stronicowania, pojawia się komunikat zwrotny i wyświetlana jest żądana strona danych. Chociaż ten model z pewnością działa, nie prowadzi do strony przyjaznej dla SEO. W tym modelu wyszukiwarki nie będą indeksować poza pierwszą stroną danych. Dobrą wiadomością jest to, że DataPager jest zaprojektowany do tworzenia przyjaznych dla SEO interfejsów stronicowania. Ustawiając QueryStringField, DataPager renderuje swój interfejs stronicowania jako serię łączy, przekazując żądany numer strony przez kwerendę.

Szczęśliwe programowanie!

Załączniki