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

2025-05-04

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

Введение

Примеры DataList, которые мы видели в последних двух руководствах, отображали каждую запись из источника данных в виде строки в ФОРМАТЕ HTML <table>с одним столбцом. Хотя это поведение DataList по умолчанию, очень легко настроить отображение DataList, чтобы элементы источника данных распределялись по многоколоночной таблице с несколькими строками. Кроме того, возможно отобразить все элементы источника данных в одном строке и нескольких столбцах в DataList.

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

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

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

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

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

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

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

После создания и привязки нового ObjectDataSource к DataList Visual Studio автоматически создаст элемент ItemTemplate, отображающий имя и значение для каждого из полей данных продукта. ItemTemplate Настройте либо непосредственно через декларативную разметку, либо из параметра "Изменить шаблоны" в смарт-теге DataList, чтобы он использовал разметку, показанную выше, заменив имя продукта, имя категориии цену на элементы управления Label, использующие соответствующий синтаксис привязки данных для назначения значений их 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 отображается как одноколоночная таблица продуктов с несколькими строками.

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

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

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

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

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

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

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

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

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

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

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

Свойство RepeatDirection влияет на способ размещения элементов в DataList. На рисунке 5 показаны результаты, когда свойству RepeatDirection присвоено значение Horizontal. Обратите внимание, что первые три продукта Chai, Chang и Aniseed Syrup расположены слева направо, сверху вниз. Следующие три продукта (начиная с Каджунской приправы шеф-повара Антона) появляются в строке под первыми тремя. Изменение свойства RepeatDirection обратно на Vertical, однако, размещает эти продукты сверху вниз и слева направо, как иллюстрировано на рисунке 6.

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

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

Сводка

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

Сведения о авторе

Скотт Митчелл, автор семи книг ASP/ASP.NET и основатель 4GuysFromRolla.com, работает с технологиями Microsoft Web с 1998 года. Скотт работает независимым консультантом, тренером и писателем. Его последняя книга — Sams Teach Yourself ASP.NET 2.0 за 24 часа. С ним можно связаться по адресу mitchell@4GuysFromRolla.com.

Особое спасибо кому

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

Назад Далее