Использование элементов управления ListView и DataPager в ASP.NET 3.5 - Создание DataPager и определение его DataPagerFields

ОГЛАВЛЕНИЕ

Создание DataPager и определение его DataPagerFields

Реализация интерфейса, поддерживающего страничную организацию, при помощи элементов управления ListView и DataPager не так легка, как кажется на первый взгляд. Приложение в конце статьи включает в себя два примера DataPager, которые мы обсудим в данной статье.

Для начала добавьте и настройте элемент управления ListView таким образом, чтобы он отображал данные в таком формате, какой вам необходим. Далее, чтобы добавить возможность перелистывания, добавьте один или более элементов управления DataPager на страницу, расположив их где вам угодно. DataPager может быть расположен в LayoutTemplate элемента ListView или где-либо еще на странице, за пределами элемента управления.

После добавления DataPager, он появится в режиме Visual Studio Design в качестве серого прямоугольника, так как нам еще необходимо указать которые DataPagerField необходимо использовать. Чтобы настроить DataPagerFields щелкните по ссылке Edit Pager Fields (Редактировать поля) из смарт-тега DataPager. Это выведет на экран диалоговое окно Fields (см. ниже). Здесь вы можете указать какие DataPagerFields необходимо добавить и их соответствующие свойства. В диалоговом окне Fields я добавил NextPreviousPagerField и установил свойство ButtonType в Button (поэтому оно отобразит интерфейс перелистывания в качестве кнопок, то есть элементов управления Button, вместо использования стандартных ссылок (LinkButtons)), а также свойства ShowFirstPageButton и ShowLastPageButton в True - тем самым они будут включены вместе с кнопками Next (Следующая) и Previous (Предыдущая).


После нажатия кнопки OK для закрытия диалогового окна Fields, декларативная разметка элемента DataPager обновляется и уже включает в себя информацию DataPagerField. Более того, Designer отображает интерфейс перелистывания в качестве кнопок First/Previous/Next/Last.

Существуют еще два свойства DataPager, которые нам необходимо установить до того, как страницу можно будет использовать. Нам необходимо указать с каким ListView оперирует DataPager. Для этого установите свойство PagedControlID элемента DataPager в ID элемента ListView на странице. Далее, установите свойство PageSize элемента DataPager таким образом, чтобы оно содержало в себе число записей, которые необходимо отобразить на одной странице в ListView (по умолчанию значение равно 10). После того, как вы сделаете все данные изменения, декларативная разметка вашего DataPager должна выглядеть следующим образом:

<asp:DataPager ID="ProductListPagerSimple" runat="server"
   PagedControlID="ProductList" PageSize="5">
   <Fields>
      <asp:NextPreviousPagerField ButtonType="Button" ShowFirstPageButton="True"
                  ShowLastPageButton="True" />
   </Fields>
</asp:DataPager> 

Имея данный интерфейс перелистывания посетите страницу в обозревателе. Как демонстрирует следующий скриншот, ListView отображает всего 5 записей на одной странице (потому, что свойство PageSize установлено 5). Более того, кнопки First (первая) и Previous (последняя) не активированы поскольку мы находимся на первой странице.


Интерфейс перелистывания на данном изображении отображен прямо над информацией ListView. Помните о том, что один единственный ListView может включать в себя несколько элементов управления DataPager. Мы можем модифицировать интерфейс перелистывания таким образом, чтобы он также отображался в нижней части ListView просто добавив элемент управления DataPager под ListView и установив его свойства PagedControlID и PageSize в те же значения, которые содержит другой элемент управления DataPager.