Английская версия: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html
В этой серии я представлю некоторые из более продвинутых элементов управления в Atlas Sys.UI.Data, в том числе:
Sys.UI.Data.ListView : Отобразить данные списка с помощью элемента управления ASP.NET Atlas ListView.
Sys.UI.Data.ItemView: продолжение следует.
Sys.UI.Data.DataNavigator: Продолжение следует.
Sys.UI.Data.XSLTView: Продолжение следует. Эта статья — первая из них: Использование элемента управления ASP.NET Atlas ListView для отображения данных списка.
В большинстве современных веб-программ нам необходимо отображать пользователю некоторые данные списка. Серверный элемент управления GridView в ASP.NET предоставляет эту функцию, а клиентский элемент управления ListView в Atlas также может предоставлять аналогичные функции на стороне клиента и работать в режиме AJAX. Хотя вы можете использовать традиционный элемент управления GridView плюс UpdatePanel Atlas для обеспечения той же операции AJAX, эта реализация менее эффективна и не является «чистым» подходом Atlas. Вместо этого рекомендуется использовать клиентский элемент управления ListView Atlas. Не волнуйтесь, элемент управления ListView в Atlas так же прост, как и GridView, и во многих концепциях они схожи, например, в ItemTemplate. Однако следует отметить, что текущая IDE не обеспечивает интеллектуальную функцию восприятия сценариев Atlas. Кроме того, сценарии Atlas не имеют проверок во время компиляции, поэтому при написании кода следует быть особенно осторожным.
При использовании ListView вам следует предоставить ему несколько необходимых шаблонов (Template), чтобы сообщить Atlas, как отображать ваш контент. В ListView имеются следующие шаблоны:
LayoutTemplate: этот шаблон используется для визуализации контейнера, содержащего элементы списка (например, с помощью тега <table>), заголовка списка (например, с помощью тега <thead>), хвост и т. д. Вы должны указать шаблон макета для ListView. И этот шаблон должен содержать шаблон itemTemplate и, при необходимости, шаблон separatorTemplate.
itemTemplate: этот шаблон используется для отображения элемента в списке (например, с помощью тега <tr>). Этот шаблон необходимо поместить в LayoutTemplate.
separatorTemplate: этот шаблон используется для отображения элемента-разделителя между элементами в списке (например, с помощью тега <hr>). Этот шаблон необходимо поместить в LayoutTemplate.
пустой шаблон.: этот шаблон используется для отображения ListView, когда элементы не существуют. В настоящее время в объекте DataSource, связанном с ListView, может не быть элементов, или он может находиться в процессе получения с сервера.
В ListView также есть несколько свойств:
itemCssClass: указывает класс CSS элемента элемента.
AlternatingItemCssClass: класс CSS элемента элемента, который определяет интервал.
selectedItemCssClass: указывает класс CSS выбранного элемента.
separatorCssClass: указывает класс CSS, который разделяет элементы.
itemTemplateParentElementId: этот атрибут указывает родительский элемент itemTemplate и separatorTemplate. Таким образом, элементы itemTemplate и separatorTemplate могут отображаться повторно.
Хорошо, давайте воспользуемся примером, чтобы проиллюстрировать, как использовать элемент управления ListView:
сначала мы пишем веб-службу, которая возвращает DataTable в .NET. Обратите внимание, что здесь мы унаследуем базовый класс Microsoft.Web.Services.DataService и добавим атрибут DataObjectMethod, определенный в пространстве имен System.ComponentModel, к методу службы. В начале метода службы мы используем System.Threading.Thread.Sleep(2000) для имитации 2-секундной сетевой задержки, чтобы можно было увидеть содержимое пустого шаблона.
[WebService(Namespace = " http://tempuri.org/ ")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
открытый класс MyService: Microsoft.Web.Services.DataService {
[DataObjectMethod(DataObjectMethodType.Select)]
общедоступная таблица данных GetListData()
{
System.Threading.Thread.Sleep(2000);
DataTable dt = новый DataTable("MyListData");
dt.Columns.Add("Имя", typeof(строка));
dt.Columns.Add("Электронная почта", typeof(строка));
Строка данных новая строка;
для (int я = 0; я <5; ++i)
{
newRow = dt.NewRow();
newRow["Name"] = string.Format("Полет {0}", i);
newRow["Email"] = string.Format(" Dflying{0}@dflying.net ", i);
dt.Rows.Add(newRow);
}
вернуть DT;
}
}
Затем добавьте необходимые элементы управления/теги на страницу ASP.NET: <atlas:ScriptManager ID="ScriptManager1" runat="server" />
<!-- Элемент для myList (контейнер) -->
<div id="myList"></div>
<!-- Элементы макета -->
<div style="display: none;">
</div>
В приведенный выше тег мы добавили три тега: обязательный элемент управления ScriptManager. Элемент div с идентификатором myList позволяет Atlas разместить здесь визуализированный ListView. Скрытый элемент div, определяющий наш шаблон. Элементы этого скрытого элемента div не видны на странице и используются только для предоставления Atlas необходимых шаблонов.
Мы добавляем следующий шаблон ListView в этот скрытый элемент div:
<!-- Шаблон макета -->
<table id="myList_layoutTemplate" border="1" cellpadding="3">
<голова>
<тр>
<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>
<!-- Шаблон элемента-разделителя -->
<tr id="myList_separatorTemplate">
<td colspan="3">Разделитель</td>
</tr>
</tbody>
</таблица>
<!-- Пустой шаблон -->
<div id="myList_emptyTemplate">
Нет данных
</div>
В приведенном выше коде вы можете увидеть все четыре упомянутых мной шаблона. Также укажите идентификатор для каждого шаблона, который будет использоваться в объявлении сценария Atlas ниже. В этом примере я буду отображать ListView как HTML-таблицу, но, к сожалению, разделенные элементы будут некрасивыми (пустая строка).
Наконец, добавьте на страницу оператор сценария Atlas:
<dataSource id="listDataSource" autoLoad="true" serviceURL="MyService.asmx" />
<listView id="myList" itemTemplateParentElementId="myList_itemTemplateParent">
<привязки>
<binding dataContext="listDataSource" dataPath="data" property="data" />
</привязки>
<макеттемплате>
<template layoutElement="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>
<separatorTemplate>
<template layoutElement="myList_separatorTemplate" />
</separatorTemplate>
<пустой шаблон>
<template layoutElement="myList_emptyTemplate"/>
</emptyTemplate>
</listView>
Здесь я добавил объект DataSource клиента Atlas для получения данных из веб-службы. Мы не будем здесь много говорить о DataSource (о нем можно рассказать в последующих статьях). Давайте посмотрим на определение, связанное с ListView: в определении ListView мы указываем атрибут itemTemplateParentElementId. Затем внутри ListView определяется сегмент привязки для привязки данных, полученных из источника данных, к ListView. Мы также определили четыре сегмента шаблона, каждый из которых использует LayoutElement для связи с четырьмя шаблонами, определенными выше. Обратите внимание, что для первого элемента управления меткой в шаблоне LayoutTemplate мы указали преобразователь Add в его привязке, чтобы изменить порядок, начиная с 0 и начиная с 1 (для Atlas Transformer см. мою статью: http://dflying.cnblogs. com/archive/2006/04/05/367908.html ).
Все готово, давайте запустим.