Использование элементов управления ListView и DataPager в ASP.NET 3.5: создание дружественного к SEO интерфейса пейджинга

Вступление

Элементы управления GridView, FormView и DetailsView содержат встроенные функции подкачки страниц. Устанавливая несколько свойств, можно автоматически включить любой из этих элементов управления в интерфейс подкачки. Однако ListView не включает в себя встроенную функцию подкачки. Вместо этого Microsoft отделила логику подкачки от ListView и переместила ее в отдельный веб-элемент управления - DataPager. Пролистывание данных с помощью элементов управления ListView и DataPager В предыдущей статье этой серии рассказывалось о том, как использовать DataPager для реализации интерфейса подкачки для ListView.

По умолчанию DataPager отображает кнопки, кнопки LinkButtons или ImageButtons в интерфейсе подкачки для кнопок «Следующая», «Предыдущая», «Первая», «Последняя» и «Цифровая страница». При нажатии эти кнопки вызывают обратную передачу, после чего соответствующий набор записей привязывается к ListView. К сожалению, поисковые системы не могут сканировать сайт с помощью обратных ссылок; вместо этого они используют ссылки, найденные на вашем сайте. Следовательно, поисковая система будет индексировать только первую страницу данных, отображаемых ListView, потому что она не может достичь последующих страниц. Кроме того, пользователи не могут добавить в закладки определенную страницу данных.

Хорошей новостью является то, что довольно легко изменить поведение по умолчанию DataPager. В этой статье показано, как настроить DataPager для использования гиперссылок и строки запроса для просмотра данных ListView (а не обратных передач) для создания SEO-дружественного интерфейса подкачки. Читайте дальше, чтобы узнать больше!

Проблема с обратной передачей

Веб-формы ASP.NET традиционно используют обратные ссылки для выполнения некоторых действий. Обратная передача происходит, когда пользователь щелкает элемент управления Button, LinkButton или ImageButton или когда он выполняет какое-либо клиентское действие, которое было настроено для запуска обратной передачи (например, выбор другого элемента из элемента управления DropDownList, для которого установлено свойство AutoPostBack). Правда). Обратная передача отправляет веб-форму, предлагая браузеру повторно запросить ту же страницу и отправить пары имя / значение элементов <input> в <form>. Затем страница ASP.NET повторно отображается, а полученный HTML-код отправляется обратно в браузер и снова отображается.

Модель обратной передачи хорошо работает для многих сценариев. Однако одним из его недостатков является то, что он не приводит к SEO-дружественному веб - сайту. SEO или Поисковая оптимизация , это практика улучшения качества или количества трафика, который поступает на сайт из поисковых систем. SEO-дружественный веб-сайт - это сайт, HTML-код которого структурирован и выложен таким образом, что увеличивает видимость сайта для поисковой системы. Поисковые системы используют автоматизированные программы для индексации сайта. Эти "сканеры" обычно начинают с посещения домашней страницы сайта, а затем переходят на другие веб-страницы сайта, связанные с главной страницей. Сканеры будут переходить по ссылкам, но не будут отправлять формы. Если у вас есть страница, на которой определенный контент виден только после обратной передачи, тогда эти данные не будут проиндексированы поисковыми системами.

По умолчанию DataPager отображает кнопки, LinkButtons или ImageButtons для интерфейса подкачки. По замыслу эти элементы управления при нажатии вызывают обратную передачу. При обратной передаче DataPager извлекает запрашиваемую страницу данных для отображения и привязывает ее к ListView. С точки зрения конечного пользователя, они нажимают на номер страницы (или одну из кнопок «Первый», «Предыдущий», «Далее», «Последний») и, вуаля, видят соответствующую страницу данных. Проблема заключается в том, что сканеры поисковых систем не могут «нажимать» кнопки в интерфейсе подкачки, и поэтому будет проиндексирована только первая страница результатов. (Это дружественное к SEO поведение также присуще встроенной поддержке пейджинга в элементах управления GridView, FormView и DetailView.)

К счастью, DataPager может генерировать дружественный для SEO элемент управления интерфейсом пейджинга. Как мы увидим на мгновение, установив одно свойство в DataPager, мы можем дать ему команду отображать гиперссылки в интерфейсе подкачки и использовать параметр querystring, чтобы указать, какую страницу данных отображать.

Перемещение номера страницы в QueryString

DataPager включает в себя Свойство QueryStringField это, если установлено, инструктирует DataPager генерировать дружественный для SEO интерфейс пейджинга. Если свойство QueryStringField установлено, DataPager отображает интерфейс подкачки как серию гиперссылок (вместо отображения интерфейса подкачки как серии кнопок, LinkButtons или ImageButtons). В частности, каждая гиперссылка имеет свой атрибут href, установленный на текущий URL, с переданным номером страницы, включенным в поле строки запроса, имя которого является значением свойства QueryStringField.

Например, рассмотрим элемент управления DataPager, который настроен на отображение кнопок «Первая», «Предыдущая», «Следующая» и «Последняя», и что существует пять страниц с пролистываемыми страницами данных. Установка для свойства DataPager QueryStringField значения «PageNumber» приведет к следующей разметке интерфейса подкачки при просмотре первой страницы данных:

<a disabled="disabled"> Первый </a>
<a disabled="disabled"> предыдущий </a>
<a href=" PageName .aspx? PageNumber=2 "> Далее </a>
<a href=" PageName .aspx? PageNumber=5 "> Последний </a>

Поскольку мы просматриваем первую страницу данных, ссылки «Первая» и «Предыдущая» неактивны. Неактивные ссылки отображаются как гиперссылки с набором атрибутов отключен. Следующая ссылка отправляет пользователя на PageName .aspx? PageNumber = 2. Здесь параметр строки запроса PageNumber установлен в 2, но в более общем случае он будет установлен в currentPageNumber + 1. Последняя ссылка отправляет пользователя на пятую и последнюю страницу данных.

Снимок экрана ниже показывает интерфейс подкачки при отображении в виде ссылок. Первая и предыдущая ссылки отображаются в виде текста (а не ссылки), поскольку их отключенные атрибуты установлены.

Если бы пользователь щелкнул ссылку «Далее», браузер запросил бы PageName .aspx? PageNumber = 2. Когда страница отображается, DataPager автоматически проверяет строку запроса на наличие параметра с именем, совпадающим со свойством 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, мы можем значительно улучшить интерфейс подкачки. Для начала давайте расширим интерфейс подкачки, чтобы вместо ссылок «Первая», «Предыдущая», «Следующая» и «Последняя» он также содержал числовые номера страниц. В Пролистывание данных с помощью элементов управления ListView и DataPager мы увидели, как указать пейджинговый интерфейс DataPager через DataPagerFields. DataPager на приведенном выше снимке экрана содержит одно поле DataPagerField, а именно поле пейджера NextPreviousPagerField. Мы также можем добавлять цифровые страницы, используя три поля DataPagerFields:

• NextPreviousPagerField для первого и предыдущего параметров,
• NumericPagerField для числовых страниц и
• NextPreviousPagerField для параметров Next и Last.

Вот декларативная разметка DataPager после того, как эти три DataPagerFields были добавлены и соответствующим образом настроены: <asp: DataPager runat = "server" QueryStringField = "Page" ...>
<Поля>
<asp: NextPreviousPagerField FirstPageText = "& lt; & lt;" ShowFirstPageButton = "True" ShowNextPageButton = "False" />
<asp: NumericPagerField />
<asp: NextPreviousPagerField LastPageText = "& gt; & gt;" ShowLastPageButton = "True" ShowPreviousPageButton = "False" />
</ Fields>
</ Жерех: DataPager>

Обратите внимание, что первый NextPreviousPagerField настроен на то, что для свойства FirstPageText установлено значение "& lt; & lt;", что будет отображать текст << for (а не First). Кроме того, его свойство ShowNextPageButton имеет значение False, чтобы скрыть кнопку «Далее». (Кнопка «Последняя» по умолчанию скрыта.) Точно так же вторая NextPreviousPagerField настроена на подавление кнопки «Предыдущая страница» и отображение текста >> для кнопки «Последняя».

На приведенном ниже снимке экрана показан новый интерфейс подкачки при просмотре через браузер.

Мы можем исправить внешний вид с помощью щепотки CSS. NextPreviousPagerField и NumericPagerField имеют свойства, которые позволяют вам назначать класс CSS для ссылок на числовые страницы, для текущей ссылки на числовые страницы и для ссылок «Первая», «Предыдущая», «Следующая» и «Последняя». После установки этих свойств, наряду с установкой для свойства RenderNonBreakingSpacesBetweenControls значения False, чтобы исключить пробел между каждой ссылкой в ​​интерфейсе подкачки, и добавлением необходимых правил CSS, результирующий интерфейс подкачки был преобразован в следующее:

Обратите внимание, как подсвечивается номер текущей страницы. На приведенном выше снимке экрана пользователь просматривает страницу 1, поэтому ссылка «1» имеет красный фон и белый передний план, тогда как другие ссылки в интерфейсе подкачки имеют инвертированные цвета (красный передний план на белом фоне). Кроме того, при наведении курсора мыши на ссылку для пейджинга ее граница и текст становятся черными, а затем слегка выделяются.

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

QueryStringField и RenderDisabledButtonsAsLabels - рассказ об ошибке ASP.NET

Как мы уже рассматривали ранее в этой статье, при отображении ссылок DataPager добавляет атрибут отключенного доступа к гиперссылкам, на которые нельзя щелкать, например, к ссылкам «Первая» и «Предыдущая» при просмотре первой страницы данных. К сожалению, такая разметка не совместима с XHTML, так как строгая реализация XHTML запрещает атрибут disabled в элементе <a>. Класс NextPreviousPagerField имеет Свойство RenderDisabledButtonsAsLabels , что звучит как идеальное решение. К сожалению, это не работает в ASP.NET версии 3.5 - когда свойство QueryStringField в DataPager установлено, RenderDisabledButtonsAsLabels игнорируется. Хорошей новостью является то, что эта ошибка исправлена ​​в .NET 4.0. (Увидеть Использование DataPager с QueryStringField и RenderDisabledButtonsAsLabels для более подробного описания проблемы в ASP.NET 3.5, а также обходного пути.)

В дополнение к нарушению XHTML-совместимости, эта ошибка также затрудняет стилизацию отключенных кнопок. Например, предыдущий снимок экрана показывает первую страницу данных, что означает, что ссылки «Первая» и «Предыдущая» неактивны, но эти ссылки выглядят кликабельными. Конечно, если вы наведете на них курсор мыши, вы быстро увидите, что на них нельзя щелкнуть, но в идеале эти отключенные ссылки будут отображаться по-разному, возможно, с использованием серого цвета текста.

Мой обходной путь в этой ситуации заключался в использовании JQuery , которая представляет собой библиотеку JavaScript, предназначенную для перечисления, проверки и изменения элементов в HTML DOM. В двух словах, страница содержит одну строку кода JavaScript, которая выполняется при загрузке страницы. Этот код JavaScript находит все элементы <a> с атрибутом disabled, которые используют определенный класс CSS (pagerButton), удаляет этот класс, а затем добавляет альтернативный класс CSS (pagerButtonDisabled), который отображает неактивные ссылки с использованием серого цвета текста и удаляет его. границы. (Хотя это не показано выше, я установил свойство ButtonCssClass элемента управления NextPreviousPagerField равным pagerButton, который связывает этот класс CSS с каждой из четырех ссылок First, Previous, Next и Last.)

Вот эта единственная строка кода JavaScript:

$ ( 'A.pagerButton [отключено]') removeClass ( 'pagerButton') addClass ( 'pagerButtonDisabled')..;

После этого интерфейс пейджинга теперь «неактивен» неактивными ссылками на пейджинг, как показано на следующем снимке экрана.

Заключение

По умолчанию DataPager отображает свой интерфейс подкачки с помощью элементов управления Button, LinkButton или ImageButton. Когда посетитель нажимает одну из этих кнопок интерфейса пейджинга, происходит обратная передача и отображается запрошенная страница данных. Хотя эта модель, безусловно, работает, она не ведет к SEO-дружественному сайту. С этой моделью поисковые системы не будут индексировать за пределы первой страницы данных. Хорошая новость заключается в том, что DataPager разработан для отображения SEO-дружественных интерфейсов пейджинга. Устанавливая QueryStringField, DataPager отображает свой интерфейс подкачки как серию ссылок, передавая запрошенный номер страницы через строку запроса.

Удачного программирования!

Вложения