Отображение нескольких записей в одной строке с помощью элемента управления DataList (VB)

по Скотт Митчелл

Скачивание примера приложения или Загрузка PDF-файла

В этом кратком руководстве мы рассмотрим, как настроить макет DataList с помощью свойств RepeatColumns и RepeatDirection.

Введение

Примеры DataList, представленные в прошлых двух учебниках, подготавливают каждую запись из источника данных в виде строки в HTML-<table>с одним столбцом. Хотя это поведение DataList по умолчанию, очень легко настроить отображение DataList таким образом, чтобы элементы источника данных были распределены по нескольким столбцам, многострочным таблицам. Более того, все элементы источника данных могут отображаться в однострочном DataList.

Макет DataList можно настроить с помощью свойств RepeatColumns и RepeatDirection, которые соответственно указывают количество отображаемых столбцов, а также расположение этих элементов по вертикали или по горизонтали. На рис. 1, например, отображается элемент управления DataList, отображающий сведения о продукте в таблице с тремя столбцами.

элемент управления DataList показывает три продукта в строке

Рисунок 1. в DataList отображается три продукта на строку (щелкните, чтобы просмотреть изображение с полным размером)

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

Шаг 1. Отображение сведений о продукте в элементе управления DataList

Прежде чем исследовать свойства RepeatColumns и RepeatDirection, давайте сначала создадим на нашей странице элемент управления DataList, содержащий сведения о продукте, используя стандартный многострочный макет таблицы с одним столбцом. В этом примере параметр s отображает название продукта, категорию и цену, используя следующую разметку:

<h4>Product Name</h4>
Available in the Category Name store for Price

Мы узнали, как привязать данные к DataList в предыдущих примерах, так что я быстро перейдем к этим шагам. Для начала откройте страницу RepeatColumnAndDirection.aspx в папке DataListRepeaterBasics и перетащите элемент управления DataList с панели элементов в конструктор. Из смарт-тега DataList s выберите создать новый элемент ObjectDataSource и настройте его для извлечения данных из GetProducts метода ProductsBLL классов, выбрав параметр (нет) на вкладках Вставка, обновление и удаление мастера.

После создания и привязки нового элемента управления ObjectDataSource к DataList Visual Studio автоматически создаст ItemTemplate, отображающий имя и значение для каждого поля данных продукта. Измените ItemTemplate либо напрямую с помощью декларативной разметки, либо из параметра изменить шаблоны в смарт-теге DataList, чтобы использовать приведенную выше разметку, заменив Название продукта, название категориии текст цены на элементы управления метками, которые используют соответствующий синтаксис DataBinding для присвоения значений их свойствам Text. После обновления ItemTemplateдекларативная разметка страницы должна выглядеть следующим образом:

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4>
            <asp:Label runat="server" ID="ProductNameLabel"
                Text='<%# Eval("ProductName") %>'></asp:Label>
        </h4>
        Available in the
            <asp:Label runat="server" ID="CategoryNameLabel"
                Text='<%# Eval("CategoryName") %>' />
        store for
            <asp:Label runat="server" ID="UnitPriceLabel"
                Text='<%# Eval("UnitPrice", "{0:C}") %>' />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Обратите внимание, что я включил описатель формата в Eval синтаксис привязки данных для UnitPrice, отформатировать возвращаемое значение как денежную Eval("UnitPrice", "{0:C}").

Уделите время посещению страницы в браузере. Как показано на рис. 2, элемент управления DataList отображается как таблица с одним столбцом и несколькими строками продуктов.

по умолчанию DataList отображается как таблица с одним столбцом и несколькими строками.

Рис. 2. по умолчанию DataList отображается в виде таблицы с одним столбцом и несколькими строками (щелкните, чтобы просмотреть изображение с полным размером)

Шаг 2. изменение направления макета в DataList

Хотя поведение элемента управления DataList по умолчанию заключается в разметке элементов по вертикали в таблице с одним столбцом и несколькими строками, это поведение можно легко изменить с помощью свойстваRepeatDirectionDataList. Свойство RepeatDirection может принимать одно из двух возможных значений: Horizontal или Vertical (значение по умолчанию).

Изменив свойство RepeatDirection с Vertical на Horizontal, DataList отрисовывает свои записи в одной строке, создавая по одному столбцу для каждого элемента источника данных. Чтобы проиллюстрировать этот эффект, щелкните элемент управления DataList в конструкторе, а затем в окно свойств измените свойство RepeatDirection с Vertical на Horizontal. Сразу же после этого конструктор корректирует макет DataList, создавая многострочный интерфейс с несколькими столбцами (см. рис. 3).

свойство RepeatDirection определяет направление расположения элементов DataList

Рис. 3. свойство RepeatDirection определяет направление расположения элементов DataList (щелкните, чтобы просмотреть изображение с полным размером)

При отображении небольших объемов данных таблица с одной строкой и несколькими столбцами может быть идеальным средством для максимального увеличения объема экрана. Однако для больших объемов данных одна строка потребует много столбцов, при этом элементы, которые можно заменять на экране, перемещаются вправо. На рис. 4 показаны продукты при подготовке к просмотру в DataList с одной строкой. Так как существует множество продуктов (свыше 80), пользователю придется прокручивать направо, чтобы просмотреть сведения о каждом из этих продуктов.

для достаточно больших источников данных, для одного столбца DataList потребуется горизонтальная прокрутка

Рис. 4. для достаточно больших источников данных для одного столбца DataList потребуется горизонтальная прокрутка (щелкните, чтобы просмотреть изображение с полным размером)

Шаг 3. Отображение данных в многоколоночном, многострочном столбце

Для создания многостолбцового DataList с несколькими строками необходимо задать для свойстваRepeatColumns число отображаемых столбцов. По умолчанию свойство RepeatColumns имеет значение 0, которое приведет к отображению всех элементов DataList в одной строке или столбце (в зависимости от значения свойства RepeatDirection).

В нашем примере пусть для каждой строки таблицы отображается три продукта. Поэтому присвойте свойству RepeatColumns значение 3. После внесения этого изменения просмотрите результаты в браузере. Как показано на рис. 5, продукты теперь перечислены в таблице с тремя столбцами и несколькими строками.

для каждой строки отображаются три продукта

Рис. 5. Отображение трех продуктов для каждой строки (щелкните, чтобы просмотреть изображение с полным размером)

Свойство RepeatDirection влияет на расположение элементов в DataList. На рис. 5 показаны результаты со свойством RepeatDirection, для которого задано значение Horizontal. Обратите внимание, что первые три продукта Chai, меня и Анисид сируп располагаются слева направо, сверху вниз. Следующие три продукта (начиная с Chef Anton's s Cajun) отображаются в строке под первыми тремя. При изменении свойства RepeatDirection обратно на Verticalэти продукты размещается сверху вниз, слева направо, как показано на рис. 6.

здесь продукты располагаются вертикально

Рис. 6. здесь продукты располагаются вертикально (щелкните, чтобы просмотреть изображение с полным размером).

Количество строк, отображаемых в результирующей таблице, зависит от количества записей, привязанных к DataList. Точно то же самое — от общего числа элементов источника данных, деленного на значение свойства RepeatColumns. Так как в настоящее время таблица Products содержит продукты 84, которые делятся на 3, количество строк составляет 28. Если количество элементов в источнике данных и значение свойства RepeatColumns не являются кратными, то последняя строка или столбец будет содержать пустые ячейки. Если RepeatDirection имеет значение Vertical, то последний столбец будет содержать пустые ячейки. Если RepeatDirection Horizontal, то в последней строке будут сонаходиться пустые ячейки.

Сводка

Элемент управления DataList по умолчанию перечисляет свои элементы в таблице с одним столбцом и несколькими строками, которая имитирует макет элемента управления GridView с одним TemplateField. Хотя этот макет по умолчанию приемлем, можно максимально увеличить масштаб экрана, отображая несколько элементов источника данных в каждой строке. Для этого достаточно установить свойство RepeatColumns DataList s в число отображаемых столбцов в каждой строке. Кроме того, свойство DataList RepeatDirection можно использовать для указания того, следует ли располагать содержимое многостолбцовой таблицы, многострочной, горизонтально и сверху вниз или вертикально сверху вниз, слева направо.

Об авторе

Скотт Митчелл, автор семи книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями Майкрософт с 1998. Скотт работает как независимый консультант, преподаватель и модуль записи. Его последняя книга — Sams обучать себя ASP.NET 2,0 за 24 часа. Он доступен по адресу mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.

Специальная благодарность

Эта серия руководств была рассмотрена многими полезными рецензентами. Специалист по интересу для этого руководства был Джон суру. Хотите ознакомиться с моими будущими статьями MSDN? Если это так, расположите строку в mitchell@4GuysFromRolla.com.