Використання ASP.NET 3.5 в ListView і DataPager управління: Створення SEO-Дружній Пейджинговий інтерфейс

Вступ

Елементи керування GridView, FormView і DetailsView містять вбудовану функціональність пошукового виклику. Встановивши декілька властивостей, можна будь-який з цих елементів керування автоматично включати пейджинговий інтерфейс. Однак ListView не містить вбудованих функцій пошукового виклику. Замість цього, Microsoft роз'єднала логіку пейджингового зв'язку з ListView і перенесла його в окремий веб-контроль - DataPager. Переадресування даних за допомогою елементів керування ListView і DataPager Попередня стаття цієї серії досліджувала, як використовувати DataPager для реалізації інтерфейсу пошукового виклику для ListView.

За замовчуванням DataPager надає кнопки, посилання, кнопки ImageButtons в інтерфейсі пошукового виклику для наступних, попередніх, перших, останніх і цифрових кнопок сторінок. Після натискання ці кнопки призводять до зворотного виклику, після чого відповідний набір записів прив'язаний до ListView. На жаль, пошукові системи не можуть сканувати сайт за допомогою зворотних посилань; замість цього вони покладаються на посилання, які вони знаходять на вашому сайті. Отже, пошукова система індексуватиме лише першу сторінку даних, що відображається у ListView, оскільки вона не може досягти наступних сторінок. Крім того, користувачі не можуть додавати закладки до певної сторінки даних.

Доброю новиною є те, що досить легко змінити поведінку даних за замовчуванням. Ця стаття показує, як налаштувати DataPager на використання гіперпосилань і запит на запит до сторінки через дані ListView (а не на зворотній зв'язок) для створення SEO-дружнього інтерфейсу пейджинга. Читайте далі, щоб дізнатися більше!

Проблема з зворотним зв'язком

Web Forms ASP.NET традиційно використовують зворотні посилання для виконання деяких дій. Зворотній зв'язок відбувається, коли користувач натискає елемент керування Button, LinkButton або ImageButton, або коли вони виконують певну дію на стороні клієнта, налаштовану на ініціювання зворотного виклику (наприклад, вибір іншого елемента з елемента управління DropDownList, для якого було встановлено властивість AutoPostBack до True). Зворотній зв'язок подає веб-форму, що спонукає браузер повторно запросити ту ж саму сторінку і надіслати парами ім'я / значення елементів <input> в <form>. Сторінка ASP.NET потім повторно виводиться, отриманий HTML-код буде надіслано назад до браузера та повторно відображено.

Модель зворотного зв'язку працює добре для багатьох сценаріїв. Одна з його недоліків, однак, полягає в тому, що він не призводить до створення SEO-дружнього сайту. SEO або Пошукова оптимізація , це практика підвищення якості або кількості трафіку, який надходить на сайт з пошукових систем. SEO-дружній сайт, чий HTML структурований і викладений таким чином, що збільшує видимість сайту для пошукової системи. Пошукові системи використовують автоматизовані програми для індексування веб-сайту. Ці "сканери" зазвичай починаються з домашньої сторінки сайту, а потім занурюються в інші веб-сторінки на сайті, які пов'язані з домашньої сторінки. Сканери будуть переходити за посиланнями, але вони не надсилатимуть форми. Якщо у вас є сторінка, де певний вміст видно тільки після зворотного зворотного зв'язку, то дані не будуть проіндексовані пошуковими системами.

За замовчуванням DataPager надає кнопки, LinkButtons або ImageButtons для інтерфейсу пошукового виклику. За дизайном ці елементи керування, коли натискаються, викликають зворотний поворот. На зворотній стороні DataPager витягує потрібну сторінку даних для відображення і прив'язує її до ListView. З точки зору кінцевого користувача, вони натискають на номер сторінки (або на одну з кнопок First, Previous, Next, Last) і, вуаля, див. Відповідну сторінку даних. Проблема полягає в тому, що сканери пошукових систем не можуть "натискати" кнопки в інтерфейсі пошукового виклику, тому індексуватиметься лише перша сторінка результатів пошуку. (Ця дружня поведінка SEO- un є невід'ємною частиною вбудованої підтримки пошукового виклику GridView, FormView та DetailView.)

На щастя, DataPager може генерувати SEO-дружній контроль інтерфейсу пейджинга. Як ми побачимо на мить, встановивши єдине властивість в DataPager, ми зможемо доручити йому відображати гіперпосилання в інтерфейсі пошукового виклику і використовувати параметр querystring, щоб вказати, яку сторінку даних потрібно відображати.

Переміщення номера сторінки до QueryString

DataPager містить a Властивість QueryStringField якщо, якщо встановлено, інструктує DataPager генерувати SEO-дружній інтерфейс пейджинга. Якщо встановлено властивість QueryStringField, DataPager перетворює інтерфейс пошукового виклику у вигляді серії гіперпосилань (замість того, щоб відображати інтерфейс пошукового виклику як серію кнопок, LinkButtons або ImageButtons). Зокрема, кожна гіперпосилання має свій атрибут href, встановлений на поточну URL-адресу, з номером сторінки, що передається, включеним до поля querystring, ім'я якого є властивістю властивості QueryStringField.

Наприклад, розглянемо елемент керування DataPager, який налаштований для показу кнопок First, Previous, Next і Last, і що існує п'ять загальних сторінок даних, що проходять через них. Встановлення властивості QueryStringField для DataPager для "PageNumber" призведе до наступної розмітки інтерфейсу пейджинга при перегляді першої сторінки даних:

<a disabled="disabled"> Перший </a>
<a disabled="disabled"> Попередній </a>
<a href=" PageName .aspx? PageNumber=2 "> Далі </a>
<a href=" PageName .aspx? PageNumber=5 "> Останній </a>

Оскільки ми переглядаємо першу сторінку даних, посилання Перша та Попередня неактивні. Неактивні посилання відображаються як гіперпосилання з набором атрибутів disabled. Посилання Наступне посилає користувачеві на ім'я сторінки .aspx? PageNumber = 2. Параметр PageNumber querystring встановлений на 2, але в більшості випадків він буде встановлений на currentPageNumber + 1. Посилання останнього пересилає користувача на п'яту і останню сторінку даних.

Знімок екрана нижче показує інтерфейс підкачки під час візуалізації як посилання. Перша та попередня посилання відображаються як текст (а не посилання), оскільки встановлені їх атрибути.

Якщо користувачеві потрібно натиснути наступне посилання, браузер буде запитувати ім'я .aspx? PageNumber = 2. Коли сторінка візуалізується, DataPager автоматично перевіряє запит querystring для параметра, названого таким же, як його властивість QueryStringField (в даному випадку, "PageNumber"). Оскільки це поле запитів має значення 2, DataPager автоматично завантажує другу сторінку даних у ListView. На цей раз інтерфейс підкачки буде відображати наступну розмітку:

<a href=" PageName .aspx? PageNumber=1 "> Спочатку </a>
<a href=" PageName .aspx? PageNumber=1 "> Попередній </a>
<a href=" PageName .aspx? PageNumber=3 "> Далі </a>
<a href=" PageName .aspx? PageNumber=5 "> Останній </a>

І це все! Створення SEO-дружнього DataPager є простим, як встановлення його властивості QueryStringField до певного значення. З цією зміною пошукові системи можуть індексувати більше, ніж лише першу сторінку даних. Окрім того, відвідувачі можуть додавати закладки до певної сторінки даних або надсилати URL-адресу на певну сторінку даних своєму другу або колезі.

Підвищення інтерфейсу користувача пошукового виклику

Інтерфейс користувальницького виклику, показаний на екрані вище, залишає бажати кращого. Встановивши кілька властивостей і додавши посипання CSS, ми можемо значно поліпшити інтерфейс пейджинга. Для початку, давайте розширимо інтерфейс пейджингового зв'язку, так що замість того, щоб включати лише посилання First, Previous, Next і Last, він також містить числові сторінки. В Переадресування даних за допомогою елементів керування ListView і DataPager ми бачили, як вказати інтерфейс пошукового виклику DataPager через DataPagerFields. DataPager на знімку екрана вище містив одне поле DataPagerField, а саме поле пейджера NextPreviousPagerField. Ми можемо також додати числові сторінки, використовуючи три DataPagerFields:

• Параметр NextPreviousPagerField для першого та попереднього параметрів,
• NumericPagerField для числових сторінок і
• NextPreviousPagerField для наступного і останнього варіантів.

Ось декларативна розмітка DataPager після додавання цих трьох DataPagerFields і відповідного налаштування: <asp: DataPager runat = "server" QueryStringField = "Сторінка" ...>
<Польові>
<asp: NextPreviousPagerField FirstPageText = "& lt; & lt;" ShowFirstPageButton = "True" ShowNextPageButton = "False" />
<asp: NumericPagerField />
<asp: NextPreviousPagerField LastPageText = "& gt; & gt;" ShowLastPageButton = "True" ShowPreviousPageButton = "False" />
</Fields>
</ asp: DataPager>

Зверніть увагу, що перший параметр NextPreviousPagerField налаштований на те, щоб властивість FirstPageText встановлювалася на "& lt; & lt;", яка відображатиме текст << for (а не First). Крім того, його властивість ShowNextPageButton має значення False, щоб приховати кнопку Next. (Кнопка "Останній" прихована за замовчуванням.) Аналогічно, другий NextPreviousPagerField налаштований для припинення кнопки "Попередня сторінка" і для відображення тексту >> для кнопки "Останній".

Знімок екрана нижче показує новий інтерфейс пейджингового виклику при перегляді через браузер.

Ми можемо підібрати зовнішній вигляд з дрібкою CSS. Параметри NextPreviousPagerField і NumericPagerField мають властивості, які дозволяють призначити клас CSS числовим посиланням на сторінки, поточне числове посилання на сторінку, а також посилання First, Previous, Next і Last. Після встановлення цих властивостей, а також встановлення властивості RenderNonBreakingSpacesBetweenControls на False, щоб пропустити пробіл між кожним посиланням в інтерфейсі пошукового виклику і додавши необхідні правила CSS, отриманий інтерфейс пейджинга був перетворений на наступне:

Зверніть увагу на те, як виділено поточний номер сторінки. У наведеному вище знімку екрану користувач переглядає сторінку 1, тому посилання "1" має червоний фон і білий передній план, тоді як інші посилання в інтерфейсі пошукового виклику мають інвертовані кольори (червоний передній план на білому фоні). Крім того, при наведенні курсору миші на пейджингову зв'язок її межа і текст стають чорними, тонко виділяючи його.

Завантаження, доступне в кінці цієї статті, містить повні правила CSS та параметри властивостей, необхідні для реалізації вищевказаного інтерфейсу пошукового виклику.

QueryStringField і RenderDisabledButtonsAsLabels - розповідь про помилку ASP.NET

Як ми вивчали раніше в цій статті, при візуалізації посилань DataPager додає атрибут, що відключається, до гіперпосилань, які не можна натискати, наприклад, посилання "Перше" та "Попереднє" при перегляді першої сторінки даних. На жаль, така розмітка не є сумісною з XHTML, оскільки сувора реалізація XHTML забороняє виключений атрибут елемента <a>. Клас NextPreviousPagerField має a Властивість RenderDisabledButtonsAsLabels , що звучить як ідеальне рішення. На жаль, це не працює в ASP.NET версії 3.5 - коли властивість DataPager QueryStringField встановлено, RenderDisabledButtonsAsLabels ігнорується. Доброю новиною є те, що ця помилка виправлена ​​в .NET 4.0. (Подивитися Використання DataPager як з QueryStringField, так і з RenderDisabledButtonsAsLabels більш детальний опис проблеми в ASP.NET 3.5, а також обхідний шлях.)

На додаток до порушення дотримання XHTML, ця помилка також ускладнює розробку інвалідних кнопок по-різному. Наприклад, попередній знімок екрана показує першу сторінку даних, а це означає, що посилання "Перше" та "Попереднє" неактивні, але ці посилання відображаються за кліками. Звичайно, якщо ви наведіть курсор миші на них, ви швидко побачите, що їх не можна натиснути, але в ідеалі ці відключені посилання відображатимуться по-іншому, можливо, за допомогою сірого кольору тексту.

Моє обхідне положення в цій ситуації полягало в тому, щоб використовувати трохи jQuery , яка є бібліотекою JavaScript, призначеною для перерахування, перевірки та модифікації елементів у DOM DOM. Коротко кажучи, сторінка включає в себе один рядок коду JavaScript, який виконується при завантаженні сторінки. Цей код JavaScript знаходить всі елементи <a> з відключеним атрибутом, який використовує певний клас CSS (pagerButton), видаляє цей клас, а потім додає альтернативний клас CSS (pagerButtonDisabled), який відображає неактивні посилання за допомогою кольору сірого тексту та видалення. кордон. (Хоча це не показано вище, я встановив властивість елемента керування NextPreviousPagerField ButtonCssClass в pagerButton, який пов'язує цей клас CSS з кожним з чотирьох посилань First, Previous, Next і Last.)

Ось один рядок коду JavaScript:

$ ('a.pagerButton [вимкнено]'). removeClass ('pagerButton'). addClass ('pagerButtonDisabled');

Завдяки цьому, інтерфейс пейджингового виклику тепер "висвітлює" неактивні пейджингові посилання, як показано на наступному знімку екрана.

Висновок

За замовчуванням DataPager перетворює свій інтерфейс пейджинга за допомогою кнопок Button, LinkButton або ImageButton. Коли відвідувач натискає одну з цих кнопок інтерфейсу пошукового виклику, виникає зворотній зв'язок і відображається потрібна сторінка даних. Хоча ця модель, безумовно, працює, вона не призводить до SEO-дружнього сайту. За допомогою цієї моделі пошукові системи не індексуватимуться за першу сторінку даних. Хороша новина полягає в тому, що DataPager призначений для візуалізації дружніх до SEO інтерфейсів. Встановивши QueryStringField, DataPager перетворює свій пейджинговий інтерфейс у вигляді ряду посилань, передаючи запитуваний номер сторінки через запит.

Щасливе програмування!

Додатки