Английская версия: http://dflying.dflying.net/1/archive/127_paging_your_list_using_aspnet_atlas_pagenavigator_control.html .
В этой серии я представлю некоторые более продвинутые элементы управления в Atlas Sys.UI.Data, в том числе:
Sys.UI.Data.ListView. : Отобразить данные списка с помощью элемента управления ASP.NET Atlas ListView.
Sys.UI.Data.ItemView: отображение отдельных данных из коллекции с помощью элемента управления ASP.NET Atlas ItemView.
Sys.UI.Data.DataNavigator: используйте элемент управления ASP.NET Atlas PageNavigator для реализации постраничной навигации на стороне клиента.
Sys.UI.Data.SortBehavior: продолжение следует
Sys.UI.Data.XSLTView: продолжение следует Это третья статья: используйте элемент управления ASP.NET Atlas PageNavigator для реализации постраничной навигации на стороне клиента и размещения всех записей на одной странице. это определенно не очень хорошая идея, особенно если у вас сотни или тысячи записей. Вашим пользователям приходится продолжать перетаскивать полосу прокрутки или даже нажимать Control+F, чтобы найти нужный им контент, что приведет к очень плохому пользовательскому опыту. Теперь будет гораздо удобнее отображать данные в подкачке. Некоторые серверные элементы управления ASP.NET имеют встроенные возможности разбиения по страницам и навигации по страницам, например DataGrid и GridView. Аналогично, клиентский элемент управления Atlas Sys.UI.Data.DataNavigator также предоставляет аналогичные функции, что значительно повысит эффективность нашей разработки.
Элемент управления DataNavigator будет работать с элементом управления DataView (см.: Введение в элемент управления в пространстве имен Atlas Sys.Data — DataView и DataFilter). Мы знаем, что элемент управления DataView не предоставляет методов, связанных с навигацией по страницам, поэтому мы можем только напрямую установить его свойство pageIndex для реализации навигации. Хотя это и несложно, во многих случаях это не очень хорошая идея, поскольку многие нерадивые разработчики вроде меня часто забывают проверить граничное значение pageIndex, вызывая ненужные проблемы. Это одна из причин, по которой Atlas предоставляет элемент управления DataNavigator. Элемент управления DataNavigator будет служить прокси для элемента управления DataView и предоставлять простой в использовании интерфейс навигации по страницам.
Объект DataNavigator имеет только один атрибут:
dataView: ссылка на объект DataView. Этот DataNavigator применит к нему операцию навигации по страницам. Вы всегда должны указывать это свойство.
Кроме того, чтобы использовать элемент управления DataNavigator, вам также необходимо предоставить некоторым кнопкам Atlas некоторые указанные свойства CommandName для запуска соответствующих операций навигации по страницам. Родительскому свойству этих кнопок должно быть присвоено значение этого элемента управления DataNavigator, чтобы гарантировать, что DataNavigator может захватывать команды, выдаваемые этими кнопками.
Вы можете указать атрибут CommandName вашей кнопки в виде следующих пяти строк, каждая из которых имеет разное значение:
страница: преобразует индекс текущей страницы в значение, указанное в аргументе команды. С помощью этой команды мы можем быстро изменить индекс страницы.
следующая страница: переход на следующую страницу (если следующая страница существует).
Предыдущая страница: переход на предыдущую страницу (если предыдущая страница существует).
первая страница: переход на первую страницу.
последняя страница: переход на последнюю страницу.
Хорошо, скучное введение, такое как MSDN, на этом закончилось, давайте познакомимся с использованием DataNavigator на примере.
Сначала нам нужно предоставить веб-службу, чтобы страница Атласа могла ее использовать. Веб-служба вернет 100 записей. Ниже приведен код этого веб-сервиса, который очень прост для понимания и не будет здесь повторяться.
Веб-сервис
использование системы;
использование System.Collections;
использование System.Collections.Generic;
использование System.ComponentModel;
использование System.IO;
использование System.Web;
использование System.Web.Caching;
использование System.Web.Services;
использование System.Web.Services.Protocols;
использование Microsoft.Web.Services;
//
// Для простоты этот пример демонстрирует хранение и манипулирование
// объекты данных в памяти также можно использовать.
//
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
общедоступный класс MyDataService: DataService
{
статический список<Entry> _data;
статический объект _dataLock = новый объект();
данные частного статического списка <Entry>;
{
получать
{
если (_data == ноль)
{
блокировка (_dataLock)
{
если (_data == ноль)
{
_data = новый список<Entry>();
для (int я = 0; я <100; я++)
{
_data.Add(new Entry(i, "Dflying " + i.ToString(), string.Format(" Dflying{0}@dflying.net ", i.ToString())));
}
}
}
}
вернуть _данные;
}
}
[DataObjectMethod(DataObjectMethodType.Select)]
публичная запись[] SelectRows()
{
вернуть MyDataService.Data.ToArray();
}
}
Запись публичного класса
{
частная строка _name;
частная строка _email;
частный int _id
[DataObjectField (правда, правда)]
общедоступный внутренний идентификатор
{
получить {вернуть _id}
установить { _id = значение }
}
[DataObjectField(ложь)]
[DefaultValue("Новая строка")]
общедоступная строка Имя
{
получить {вернуть _имя;
установить { _name = значение }
}
[DataObjectField(ложь)]
[Значение По умолчанию("")]
общедоступная строка Электронная почта
{
получить {вернуть _электронную почту}
установить { _email = значение }
}
Публичная запись()
{
_ид = -1;
}
Публичная запись (int id, имя строки, описание строки)
{
_id = идентификатор;
_имя = имя;
_email = описание;
}
}
Затем на странице ASPX нам необходимо рассмотреть и определить следующие четыре части:
элемент управления ScriptManager, содержащий файлы сценариев, связанные с Atlas Framework, необходимые для страницы. Обычно это то, что должна включать каждая страница Атласа.
Заполнитель div (идентификатор — dataContents, см. код). Atlas разместит здесь визуализированный ListView с разбивкой на страницы.
Элемент div (элемент управления DataNavigator) в качестве контейнера и содержащийся в нем набор кнопок (командных кнопок) используются для реализации функций навигации по страницам.
Скрытый элемент div, используемый для размещения шаблона ListView.
Ниже приведен код четырех вышеуказанных частей. Что касается шаблона элемента управления ListView, обратитесь к моей статье: Использование элемента управления ASP.NET Atlas ListView для отображения данных списка.
<!-- Менеджер сценариев -->
<atlas:ScriptManager runat="server" ID="scriptManager" />
<!-- Элемент для постраничного ListView (контейнер) -->
<div id="dataContents">
</div>
<!-- PageNavigator -->
<div id="pageNavigator">
<input type="button" id="btnFirstPage" value="<<" />
<input type="button" id="btnPrevPage" value="<" />
<span id="lblPageNumber"></span> / <span id="lblPageCount"></span>
<input type="button" id="btnNextPage" value=">" />
<input type="button" id="btnLastPage" value=">>" />
</div>
<!-- Шаблоны -->
<div style="видимость: скрыто; отображение: нет">
<table id="myList_layoutTemplate" border="1" cellpadding="3" style="width:20em;">
<голова>
<тр>
<td><span>Нет.</span></td>
<td><span>Имя</span></td>
<td><span>Электронная почта</span></td>
</tr>
</тхед>
<!-- Повторить шаблон -->
<tbody id="myList_itemTemplateParent">
<!-- Повтор шаблона элемента -->
<tr id="myList_itemTemplate">
<td><span id="lblIndex" /></td>
<td><span id="lblName" /></td>
<td><span id="lblEmail" /></td>
</tr>
</tbody>
</таблица>
<!-- Пустой шаблон -->
<div id="myList_emptyTemplate">
Нет данных
</div>
</div>
Наконец, пришло время написать определение XML-скрипта для Atlas, которое состоит из следующих пяти частей:
Часть 1: Источник данных клиентского элемента управления Atlas, используемый для получения данных из веб-службы, которую мы определили выше.
<dataSource id="dataSource" autoLoad="true" serviceURL="MyDataService.asmx" />
Часть 2. Элемент управления DataView (см. «Введение в элементы управления в пространстве имен Atlas Sys.Data — DataView и DataFilter»), используемый для разбивки по страницам 100 фрагментов данных, полученных в первой части.
<dataView id="view" pageSize="12">
<привязки>
<binding dataContext="dataSource" dataPath="data" property="data" />
</привязки>
</dataView>
Часть 3. Элемент управления ListView (см.: Использование элемента управления ASP.NET Atlas ListView для отображения данных списка), используемый для отображения данных с разбивкой на страницы.
<listView id="dataContents" itemTemplateParentElementId="myList_itemTemplateParent" >
<привязки>
<binding dataContext="view" dataPath="filteredData" property="data"/>
</привязки>
<макеттемплате>
<templatelayoutElement="myList_layoutTemplate"/>
</layoutTemplate>
<itemTemplate>
<template layoutElement="myList_itemTemplate">
<label id="lblIndex">
<привязки>
<binding dataPath="$index" Transform="Добавить" свойство="текст"/>
</привязки>
</метка>
<label id="lblName">
<привязки>
<binding dataPath="Name" property="text"/>
</привязки>
</метка>
<label id="lblEmail">
<привязки>
<binding dataPath="Email" property="text"/>
</привязки>
</метка>
</шаблон>
</itemTemplate>
<пустой шаблон>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Часть 4. Кнопки управления и команд DataNavigator. Обратите внимание, что здесь у нас есть четыре кнопки, каждая из которых имеет свой атрибут CommandName, который также соответствует операции DataNavigator над DataView. В то же время родительские свойства этих кнопок устанавливаются для этого объекта DataNavigator.
<dataNavigator id="pageNavigator" dataView="view"/>
<button id="btnFirstPage" родитель="pageNavigator" команда="FirstPage" />
<button id="btnPrevPage" родитель="pageNavigator" команда="Предыдущая страница">
<привязки>
<binding property="enabled" dataPath="hasPreviousPage"/>
</привязки>
</кнопка>
<button id="btnNextPage" родитель="pageNavigator" команда="NextPage">
<привязки>
<binding property="enabled" dataPath="hasNextPage"/>
</привязки>
</кнопка>
<button id="btnLastPage" родитель="pageNavigator" команда="LastPage" />
Часть 5: Две этикетки, показывающие общее количество страниц и серийный номер текущей страницы соответственно.
<label id="lblPageNumber">
<привязки>
<binding dataContext="view" property="text" dataPath="pageIndex" Transform="Add"/>
</привязки>
</метка>
<label id="lblPageCount">
<привязки>
<binding dataContext="view" property="text" dataPath="pageCount"/>
</привязки>
</метка>
Хорошо, протестируйте это в браузере:
