AJAX Repeater control (перевод)

Repeater control создаёт ItemTemplate, HeaderTemplate,FooterTemplate, AlternatingItemTemplate и SeperatorTemplate используяjavascript для вывода данных из XMLHTTP запроса.

XMLHttp и AJAX помогут вам использовать в вашем приложении трюкикоторые недоступны в обычном HTML, но ваш код может быстро статьнепонятным, трудным если вы заранее не спланируете ваш подход должнымобразом. Я ещё помню тот день, когда писал труднопонятный код,классически строя таблицы в asp. Всё меняется с использованиемконтролов наподобие repeater control, и, код даталиста, в asp.netтеперь можно сделать чистым и понятным для разработчика.

AJAX происходит ещё со времён классического asp 1999-2000 годов,многие ребята работали над собственными версиями паттернов и frameworksразработанными с использованием технологии AJAX. Есть JavasScriptбиблиотека, которая содержит много прототипов AJAX(]]>http://prototype.conio.net]]>), но они всё ещё не так полезны, удобны,чтобы помочь нам отобразить табличные данные с удобством которое мыполучем когда используем контрол наподобие repeater control.

Что котрол делает?

Я сделал возможным объявление его программно в javascript коде иустановку его свойств таких как ItemTemplate, HeaderTemplate,FooterTemplate, AlternatingItemTemplate и SeperatorTemplate.

У контрола есть свойство DataSource, с которым я могу связать XML полученный из XMLHTTP запроса.

Контрол способен использовать данные из аттрибутов и из InnerXMLисточника данных XML и он также может вызывать внешний javascriptметод, если это необходимо для манипулирования данными перед отрисовкой.

Когда я вызываю DataBind метод контрола - он будет рендерить себя в специальный HtmlElement определённый как HostControlID.

Что необходимо?

Для краткости, я предложу что у нас есть handler employees.ashx который возвращает xml, следующей XML структуры.

 
   
      8/27/1992 12:00:00 AM
      Paolo
      Accorti
   
 
  …

Мы будем использовать prototype.js скрипт, который получает данныеиз handler и отправляет их в RepeaterControl. Если у вас нет этойбиблиотеки, то я настоятелно рекомедую вам обзавестись ей.

Внутри javascript RepeaterControl

Ниже приведены три DataBinding выражения, которые используются в контроле.

1. {@AttributeName} для связываения аттрибутов. Например {@ID} - результат “PMA42628M”
2. {$NodeName} для связывания значений нод, например {$Name} - результат “Paolo”
3. {Eval(formatDate({$HireDate}))} вызывает javascript функцию formatDate(’8/27/1992 12:00:00 AM’) - результат в “8-27-1992″

Код делает следющие вещи.

1. Добавляет HeaderTemplate в результат.
2. Просматривает XML результирующие ноды, доступные в источнике данных.
3. Проверяет текущее количество строк и выбирает или ItemTemplate или AlternatingItemTemplate,
4. Используя регулярные выражения заменяет {@} выражения и {$} выражения на соотвествующие данные из XML.
5. Используя регулярные выражения применяет {Eval} выражения к данным.
6. Применяет SeparatorTemplate к строкам кроме последней.
7. Добавляет FooterTemplate в результат.
8. Рендерит результат в специальный HtmlElement.

Внутри страницы

Html разметка содержит два главных элемента.

1. Div в который рендериться таблица.
2. Кнопка, при нажатии которой срабатывает событие, которое вызывет XMLHttp и связывает данные с нашим RepeaterControl.

javascript содержит следующее

1. Объявление RepeaterControl, которые уставнавливает свои шаблоны и свойства.
2. LoadData функцию, которая вызывается для кнопки, LoadData функцияиспользует prototype.js и делает XMLHttp запрос и передаёт управлениенад результатом другой javascript функции называемой dataReceived.
3. dataReceived функция связывает данные полученные из XMLHttp запрос в RepeaterControl.
4. И javascript функцию formateDate, которая сделанна также, и помогает форматировать данные в более презентабильный вид.

Этот рисунок показывает конечный результат.

Рисунок 1: Пример AJAX RepeaterControl

Исходники и как запустить пример на вашей машине.

Исходники содержит следующие файлы.

1. Пример страницы на которой используется RepeaterControl - default.htm
2. Сам RepeaterControl - RepeaterControl.js
3. Handler, который возвращает XML - Emplayees.ashx
4. Библиотека прототипов - prototype.js
5. Стили default.css

Переместите исходные файлы в любую директорию и установитеconnection string в employees.ashx для вашей доступной базы данных SQLсервера. Если у вас нет возможности работать с базой данных, тогдапросто замените employees.ashx на xml файл и внесите необходимыеизменения в default.htm.

Вывод.

Я всё ещё эксперементирую с подходами использования контроловнаподобие этого, которые рендерят различные виды данных из javascript,я всё ещё не уверен, что этот подход к программированию будет работатьдолго. Расскажите мне о вашем подходе.

Исходники: RepeaterControl 
Автор: Jigar Desai. 30 января, 2006 года.
Источник: ]]>http://www.c-sharpcorner.com/Upload]]>File/desaijm/AJAXRepeaterControl01302006213655PM/AJAXRepeaterControl.aspx

]]>http://nicolay-ignatov.livejournal.com]]>

Наш подход - это использование Microsoft Atlas

Не работает.

не используйте!