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

  • Статья

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

Загрузить PDF-файл

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

Введение

Примеры DataList, которые мы видели в предыдущих двух руководствах, отрисовывал каждую запись из источника данных в виде строки в ФОРМАТЕ HTML <table>с одним столбцом . Хотя это поведение 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 из панели элементов на Designer. В смарт-теге DataList выберите создать объект ObjectDataSource и настроить его для извлечения данных из ProductsBLL метода класса , GetProducts выбрав параметр (Нет) на вкладках INSERT, UPDATE и DELETE мастера.

После создания и привязки объекта ObjectDataSource к DataList Visual Studio автоматически создаст ItemTemplate объект , который отображает имя и значение для каждого поля данных продукта. Измените ItemTemplate объект непосредственно с помощью декларативной разметки или из параметра Изменить шаблоны в смарт-теге DataList, чтобы он использовал приведенную выше разметку, заменив текст Название продукта, Название категории и Цена элементами управления Метка, которые используют соответствующий синтаксис привязки данных для присвоения значений своим 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 размещает элементы по вертикали в таблице с одним столбцом и несколькими строками, это поведение можно легко изменить с помощью свойства DataListRepeatDirection. Свойство RepeatDirection может принимать одно из двух возможных значений: Horizontal или Vertical (по умолчанию).

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

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

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

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

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

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

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

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

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

Три продукта отображаются в каждой строке

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

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

Здесь продукты выложены вертикально

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

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

Сводка

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

Об авторе

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

Особая благодарность

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

НазадВперед