DreamwaverMX и ASP.NET(4)

Автор：Eve Cole Время обновления：2009-05-31 21:06:17

4. Используйте компонент DataList для отображения набора данных.

Связанное введение:

DataList — это расширенный элемент управления Повторитель. Помимо исходных функций Повторителя, он также может устанавливать количество данных, отображаемых в одной строке (RepeatColumn), выбранный шаблон (SelectedItemTemple) и шаблон редактируемого элемента (EditTemplate). Однако DataList упорядочит выходные данные в таблицу и выведет их, а Repeater более лоялен к определению шаблона и не будет добавлять никаких HTML-тегов. (Примечание: для отображения кода все следующие коды имеют пробелы после «<» и перед «>». Приносим извинения за неудобства!)

ШАГ 1Создайте страницу

Страница, которую мы хотим создать, показана ниже. Когда мы щелкнем гиперссылку «Подробности», появится подробная информация, как показано в первом пункте. При нажатии кнопки Закрыть детали будут закрыты и восстановлены в исходном виде.

[Рис. 1-1. Демонстрация страницы]

Начните с выбора данных, которые вы хотите отобразить. Чтобы отобразить данные Европы (т. е. Region_ID=3), мы можем выбрать фильтрацию данных Region_ID=3 в настройках набора данных.

[Рисунок 1-2 Проверка данных]

Используйте элемент управления «Список данных», чтобы создать страницу, на которой кратко отображаются данные. Давайте сначала создадим страницу без данных. Затем выберите «Поведение сервера» на панели «Приложение». Нажмите «+» и выберите DataList.

[Рис. 1-3 Страница выбора DataList]

В появившемся диалоговом окне мы можем добавить шаблоны страниц там, где это необходимо.

u Заголовок: шаблон заголовка

u Элемент: шаблон элемента данных.

u Альтернативный элемент: шаблон перекрестного отображения.

u Редактировать элемент: изменить шаблон ((не отображается по умолчанию, он должен отображаться через ответ на событие)

u Выбранный элемент: шаблон, отображаемый после выбора (он также должен отображаться посредством ответа на событие).

u Разделитель: отдельный шаблон

u Нижний колонтитул: шаблон нижней части таблицы

[Рис. 1-4. Диалоговое окно «Редактирование списка данных»]
Мы можем создать необходимый шаблон, добавив HTML-код в «Содержание», а также можем нажать кнопку

кнопка для добавления элементов данных. После нажатия кнопки откроется диалоговое окно элемента данных, позволяющее выбрать необходимые данные. И добавьте его в поле ввода «Содержание».

< %# DataBinder.Eval(Container.DataItem, «элемент данных») % >

Код используется для отображения данных.

[Рис. 1-5 Добавление элементов данных]

Чтобы добиться эффекта предварительного просмотра, сначала добавьте код: Название местоположения в заголовок. Используется для отображения заголовка. Добавьте код в элемент:

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % > используйте Location_name в качестве заголовка каждого элемента.

Добавьте код в альтернативный элемент

< fontcolor="#0000FF" >< %#DataSet1.FieldValue("LOCATION_NAME",Container)% >

Отображение данных разными цветами шрифта.

Хотя выбранный элемент не может быть отображен сразу, нам также следует записать код для последующего вызова. следующее:

Адрес:

< %# DataSet1.FieldValue("АДРЕС", Контейнер) % >

 

Город:

< %# DataSet1.FieldValue("CITY", Container) % >

 

Телефон:

< %# DataSet1.FieldValue("ТЕЛЕФОН", Контейнер) % >

 

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

[Рис. 1-6, первоначальный предварительный просмотр]
Одно из различий между DataList и Repeater заключается в том, что вы можете настроить одну строку для отображения нескольких данных, которые можно настроить в окне редактирования DataList.

[Рис. 1-7. Настройка одной строки для отображения нескольких данных]

При выборе параметра «Использовать разрывы строк» просто используется тег для разделения данных. Выберите «Использовать таблицу» для вывода в форме таблицы, и вы можете определить количество данных, отображаемых в одной строке, установив столбцы таблицы.

ШАГ2 Напишите код

Выбранный элемент должен отображаться через события, поэтому нам нужно создать кнопку для запуска события.

j Добавьте LinkButton для генерации событий. Переместите курсор между <ItemTemplate> и </ItemTemplate> в окне исходного кода, щелкните дополнительные теги.

, выберите элемент управления asp:LinkButton во всплывающем диалоговом окне.

[Рис. 2-1. Диалоговое окно выбора тега]

В диалоговом окне «Редактировать LinkButton» задайте свойства LinkButton. Введите имя: Деталь в поле ввода идентификатора.

Введите «Подробно» в имени команды для команды, которая генерирует событие, и введите «Подробно» в диалоговом окне «Текст» (будет отображено).

[Рис. 2-2 Окно редактирования LinkButton]

Затем выберите нужный цвет в макете и нажмите «ОК», чтобы сгенерировать код.

< asp:LinkButton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:LinkButton >

Чтобы добиться такого эффекта при перекрестном отображении, нам нужно вставить один и тот же код в <AlternatingItemTemplate> и </AlternatingItemTemplate>.
При этом, чтобы закрыть шаблон выбора всплывающего окна, также необходимо сгенерировать команду, поэтому необходимо добавить еще одну кнопку Ссылка. Для этого необходимо вставить код в <SelectedItemTemplate></SelectedItemTemplate>:

< asp:LinkButton BackColor="#FFFFFF" CommandName="Закрыть" ForeColor="#000000" ID="Закрыть" runat="server" Text="Закрыть" >< /asp:LinkButton >

kЧто касается команды, нам также необходимо использовать программу для ее интерпретации. На самом деле процесс несложный, и нужно добавить лишь небольшой объем кода. Добавьте следующий код в <head><//head>:

<script Language="VB" runat="server" >

Sub DataList_ItemCommand (отправитель как объект, e как DataListCommandEventArgs)

Если e.CommandSource.CommandName="Подробно" Тогда

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Закрыть" Тогда

DataList1.SelectedIndex=-1

Конец, если

DataList1.DataBind()

Конец субтитра

</ /скрипт >

Программа может получить команду (CommandName) при нажатии кнопки LinkButton, чтобы определить программу, которую необходимо выполнить. Если для свойства SelectedIndex объекта DataList установлено значение e.Item.ItemIndex, откроется страница SelectedItemTemplate. Если команда Close и для свойства SelectedIndex DataList установлено значение -1 (то есть элемент данных не выбран), DataList будет использовать шаблон элемента ItemTemplate для отображения этого элемента данных.

Также добавьте фрагмент кода в <asp:DataList>.

OnItemCommand="DataList_ItemCommand"

Объявить связь с сегментом программы DataList_ItemCommand.

Нажмите «F12» для предварительного просмотра, и на странице отобразится ожидаемый эффект.

[Рис. 2-3. Окончательная предварительная версия]
Прилагается исходный код основного сегмента программы:

Sub DataList_ItemCommand (отправитель как объект, e как DataListCommandEventArgs)

Если e.CommandSource.CommandName="Подробно" Тогда

DataList1.SelectedIndex=e.Item.ItemIndex

ElseIf e.CommandSource.CommandName="Закрыть" Тогда

DataList1.SelectedIndex=-1

Конец, если

DataList1.DataBind()

Конец субтитра

< форма runat="сервер" >

< asp:DataList id="DataList1"

runat="сервер"

Повторить столбцы = "1"

RepeatDirection="Вертикально"

ПовторитьLayout="Поток"

DataSource="< %# DataSet1.DefaultView % >"

OnItemCommand="DataList_ItemCommand" >

<Шаблон заголовка>

Имя местоположения </HeaderTemplate >

<Шаблон элемента>

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >

</ItemTemplate >

< AlternatingItemTemplate >

< %# DataSet1.FieldValue("LOCATION_NAME", Container) % >

</шрифт>

< asp:linkbutton BackColor="#FFFFFF" CommandName="Detail" ForeColor="#000000" ID="Detail" runat="server" Text="Detail" >< /asp:linkbutton >< /AlternatingItemTemplate >

<SelectedItemTemplate>Адрес:

< %# DataSet1.FieldValue("АДРЕС", Контейнер) % >

 

Город:

< %# DataSet1.FieldValue("CITY", Container) % >

 

Телефон:

< %# DataSet1.FieldValue("ТЕЛЕФОН", Контейнер) % >

 

< asp:LinkButton BackColor="#FFFFFF" CommandName="Закрыть" ForeColor="#000000" ID="Закрыть" runat="server" Text="Закрыть" >< /asp:LinkButton >

</SelectedItemTemplate >

</asp:DataList >

</форма>

DataList также имеет шаблон для редактирования элемента, который в основном используется для обновления данных. Эта книга будет представлена в следующем разделе.