Поделиться через

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

  • Статья

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

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

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

Введение

Во всех примерах за последние 28 учебников, если нам нужно было отобразить несколько записей из источника данных, мы обратились к элементу управления GridView. GridView отображает строку для каждой записи в источнике данных, отображая поля данных записи в столбцах. Хотя GridView делает его привязкой для отображения, перелистывать, сортировать, изменять и удалять данные, его внешний вид немного прямоугольный. Кроме того, исправлена разметка, ответственная за структуру GridView. Она включает HTML-код <table> со строкой таблицы (<tr>) для каждой записи и ячейкой таблицы (<td>) для каждого поля.

Чтобы обеспечить большую степень настройки внешнего вида и отображаемой разметки при отображении нескольких записей, ASP.NET 2.0 предлагает элементы управления DataList и Repeater (оба из которых также были доступны в ASP.NET версии 1.x). Элементы управления DataList и Repeater отображают свое содержимое с помощью шаблонов, а не BoundFields, CheckBoxFields, ButtonFields и т. д. Как и GridView, DataList отрисовывается в виде HTML <table>, но позволяет отображать несколько записей источников данных в каждой строке таблицы. С другой стороны, repeater не отображает дополнительную разметку, чем явно указанная, и является идеальным кандидатом, когда требуется точный контроль над разметкой.

В следующих десятках учебников мы рассмотрим создание общих шаблонов отчетов с помощью элементов управления DataList и Repeater, начиная с основ отображения данных с помощью этих шаблонов элементов управления. Мы рассмотрим, как форматировать эти элементы управления, как изменить макет записей источников данных в DataList, распространенные сценарии master и подробных сведений, способы изменения и удаления данных, способов перелистывать записи и т. д.

Шаг 1. Добавление веб-страниц учебника по DataList и Repeater

Прежде чем приступить к работе с этим руководством, давайте добавим ASP.NET страниц, необходимых для работы с этим руководством и несколькими следующими руководствами, посвященными отображению данных с помощью DataList и Repeater. Для начала создайте в проекте папку с именем DataListRepeaterBasics. Затем добавьте следующие пять страниц ASP.NET в эту папку, чтобы все они были настроены для использования master страницы Site.master:

  • Default.aspx
  • Basics.aspx
  • Formatting.aspx
  • RepeatColumnAndDirection.aspx
  • NestedControls.aspx

Создание папки DataListRepeaterBasics и добавление страниц руководства ASP.NET

Рис. 1. Создание DataListRepeaterBasics папки и добавление страниц руководства ASP.NET

Откройте страницу Default.aspx и перетащите SectionLevelTutorialListing.ascx элемент управления "Пользовательский элемент управления" из папки в UserControls область конструктора. В этом пользовательском элементе управления, созданном в руководстве по эталонным страницам и навигации сайта , перечисляется карта сайта и отображаются учебники из текущего раздела в маркированный список.

Добавьте пользовательский элемент управления SectionLevelTutorialListing.ascx в Default.aspx

Рис. 2. Добавление пользовательского SectionLevelTutorialListing.ascx элемента управления в Default.aspx (щелкните для просмотра полноразмерного изображения)

Чтобы маркированный список отображал учебники DataList и Repeater, которые мы создадим, необходимо добавить их на карту сайта. Web.sitemap Откройте файл и добавьте следующую разметку после разметки узла сопоставления сайта Добавление настраиваемых кнопок:

<siteMapNode
    title="Displaying Data with the DataList and Repeater"
    description="Samples of Reports that Use the DataList and Repeater Controls"
    url="~/DataListRepeaterBasics/Default.aspx" >
    <siteMapNode
        title="Basic Examples"
        description="Examines the basics for displaying data using the
                      DataList and Repeater controls."
        url="~/DataListRepeaterBasics/Basics.aspx"  />
    <siteMapNode
        title="Formatting"
        description="Learn how to format the DataList and the Web controls within
                      the DataList and Repeater's templates."
        url="~/DataListRepeaterBasics/Formatting.aspx" />
    <siteMapNode
        title="Adjusting the DataList s Layout"
        description="Illustrates how to alter the DataList's layout, showing
                      multiple data source records per table row."
        url="~/DataListRepeaterBasics/RepeatColumnAndDirection.aspx" />
    <siteMapNode
        title="Nesting a Repeater within a DataList"
        description="Learn how to nest a Repeater within the template of a DataList."
        url="~/DataListRepeaterBasics/NestedControls.aspx" />
</siteMapNode>

Обновление карты сайта для включения новых страниц ASP.NET

Рис. 3. Обновление карты сайта для включения новых страниц ASP.NET

Шаг 2. Отображение сведений о продукте с помощью DataList

Как и в FormView, отображаемые выходные данные элемента управления DataList зависят от шаблонов, а не BoundFields, CheckBoxFields и т. д. В отличие от FormView, DataList предназначен для отображения набора записей, а не одиночной. Начнем с того, что мы рассмотрим привязку сведений о продукте к DataList. Начните с открытия страницы Basics.aspx в папке DataListRepeaterBasics . Затем перетащите элемент DataList с панели элементов на Designer. Как показано на рисунке 4, перед указанием шаблонов DataList Designer отображает его в виде серого поля.

Перетащите элемент DataList с панели элементов на Designer

Рис. 4. Перетащите список данных с панели элементов на Designer (щелкните для просмотра полноразмерного изображения)

В смарт-теге DataList добавьте новый объект ObjectDataSource и настройте его для использования ProductsBLL метода класса .GetProducts Так как в этом руководстве мы повторно создадим список данных только для чтения, установите для раскрывающегося списка значение (Нет) на вкладках МАСТЕРА INSERT, UPDATE и DELETE.

Выбор для создания объекта ObjectDataSource

Рис. 5. Создание объекта ObjectDataSource (щелкните, чтобы просмотреть полноразмерное изображение)

Настройка ObjectDataSource для использования класса ProductsBLL

Рис. 6. Настройка ObjectDataSource для использования ProductsBLL класса (щелкните для просмотра полноразмерного изображения)

Получение сведений обо всех продуктах с помощью метода GetProducts

Рис. 7. Получение сведений обо всех продуктах с помощью GetProducts метода (щелкните для просмотра полноразмерного изображения)

После настройки ObjectDataSource и связывания его с DataList с помощью смарт-тега Visual Studio автоматически создаст ItemTemplate объект в DataList, который отображает имя и значение каждого поля данных, возвращаемого источником данных (см. разметку ниже). Этот внешний вид по умолчанию ItemTemplate аналогичен внешнему виду шаблонов, автоматически создаваемых при привязке источника данных к FormView с помощью Designer.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        ProductID:       <asp:Label ID="ProductIDLabel" runat="server"
                            Text='<%# Eval("ProductID") %>' /><br />
        ProductName:     <asp:Label ID="ProductNameLabel" runat="server"
                            Text='<%# Eval("ProductName") %>' /><br />
        SupplierID:      <asp:Label ID="SupplierIDLabel" runat="server"
                            Text='<%# Eval("SupplierID") %>' /><br />
        CategoryID:      <asp:Label ID="CategoryIDLabel" runat="server"
                            Text='<%# Eval("CategoryID") %>'/><br />
        QuantityPerUnit: <asp:Label ID="QuantityPerUnitLabel" runat="server"
                            Text='<%# Eval("QuantityPerUnit") %>' /><br />
        UnitPrice:       <asp:Label ID="UnitPriceLabel" runat="server"
                            Text='<%# Eval("UnitPrice") %>' /><br />
        UnitsInStock:    <asp:Label ID="UnitsInStockLabel" runat="server"
                            Text='<%# Eval("UnitsInStock") %>' /><br />
        UnitsOnOrder:    <asp:Label ID="UnitsOnOrderLabel" runat="server"
                            Text='<%# Eval("UnitsOnOrder") %>' /><br />
        ReorderLevel:    <asp:Label ID="ReorderLevelLabel" runat="server"
                            Text='<%# Eval("ReorderLevel") %>' /><br />
        Discontinued:    <asp:Label ID="DiscontinuedLabel" runat="server"
                            Text='<%# Eval("Discontinued") %>' /><br />
        CategoryName:    <asp:Label ID="CategoryNameLabel" runat="server"
                            Text='<%# Eval("CategoryName") %>' /><br />
        SupplierName:    <asp:Label ID="SupplierNameLabel" runat="server"
                            Text='<%# Eval("SupplierName") %>' /><br />
        <br />
    </ItemTemplate>
</asp:DataList>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
    OldValuesParameterFormatString="original_{0}"
    SelectMethod="GetProducts" TypeName="ProductsBLL">
</asp:ObjectDataSource>

Примечание

Помните, что при привязке источника данных к элементу управления FormView с помощью смарт-тега FormView Visual Studio создает ItemTemplate, InsertItemTemplateи EditItemTemplate. Однако при использовании DataList создается только ItemTemplate объект . Это связано с тем, что DataList не имеет такой же встроенной поддержки редактирования и вставки, что и FormView. DataList содержит события, связанные с редактированием и удалением, а поддержку редактирования и удаления можно добавить с помощью немного кода, но простой встроенной поддержки, как в FormView, нет. В следующем руководстве мы рассмотрим, как включить поддержку редактирования и удаления с помощью DataList.

Давайте улучшаем внешний вид этого шаблона. Вместо отображения всех полей данных можно отобразить только название продукта, поставщика, категорию, количество на единицу и цену за единицу. Кроме того, давайте выведем имя в заголовке <h4> и выложим остальные поля, используя под заголовком <table> .

Чтобы внести эти изменения, можно либо использовать функции редактирования шаблонов в Designer из смарт-тега DataList щелкните ссылку Изменить шаблоны, либо вы можете изменить шаблон вручную с помощью декларативного синтаксиса страницы. Если вы используете параметр Изменить шаблоны в Designer, результирующая разметка может не точно соответствовать следующей разметке, но при просмотре в браузере должна выглядеть очень похоже на снимок экрана, показанный на рисунке 8.

<asp:DataList ID="DataList1" runat="server" DataKeyField="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <ItemTemplate>
        <h4><asp:Label ID="ProductNameLabel" runat="server"
            Text='<%# Eval("ProductName") %>' /></h4>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td><asp:Label ID="CategoryNameLabel" runat="server"
                    Text='<%# Eval("CategoryName") %>' /></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td><asp:Label ID="SupplierNameLabel" runat="server"
                    Text='<%# Eval("SupplierName") %>' /></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit:</td>
                <td><asp:Label ID="QuantityPerUnitLabel" runat="server"
                    Text='<%# Eval("QuantityPerUnit") %>' /></td>
                <td class="ProductPropertyLabel">Price:</td>
                <td><asp:Label ID="UnitPriceLabel" runat="server"
                    Text='<%# Eval("UnitPrice", "{0:C}") %>' /></td>
            </tr>
        </table>
    </ItemTemplate>
</asp:DataList>

Примечание

В приведенном выше примере используются веб-элементы управления Label, свойству которых Text присваивается значение синтаксиса привязки данных. Кроме того, мы могли бы полностью опустить метки, введя только синтаксис привязки данных. То есть вместо использования <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> мы могли бы использовать декларативный синтаксис <%# Eval("CategoryName") %>.

Тем не менее, если оставить в элементах управления Label Web, это дает два преимущества. Во-первых, это упрощает форматирование данных на основе данных, как показано в следующем руководстве. Во-вторых, параметр Изменить шаблоны в Designer не отображает декларативный синтаксис привязки данных, который отображается за пределами некоторых веб-элементов управления. Вместо этого интерфейс редактирования шаблонов предназначен для упрощения работы со статической разметкой и веб-элементами управления и предполагает, что привязка данных будет выполняться через диалоговое окно Изменение привязки данных, доступное из смарт-тегов веб-элементов управления.

Поэтому при работе с DataList, который предоставляет возможность редактирования шаблонов с помощью Designer, я предпочитаю использовать веб-элементы управления Label, чтобы содержимое было доступно через интерфейс редактирования шаблонов. Как мы увидим вскоре, repeater требует, чтобы содержимое шаблона было изменено в представлении источника. Следовательно, при создании шаблонов Repeater я часто пропускаю элементы управления Label Web, если не знаю, что мне потребуется отформатировать внешний вид текста, привязанного к данным, на основе программной логики.

Каждый вывод продукта отрисовывается с помощью элемента ItemTemplate в DataList

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

Шаг 3. Улучшение внешнего вида DataList

Как и GridView, DataList предлагает ряд свойств, связанных со стилем, таких как Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyleи т. д. При работе с элементами управления GridView и DetailsView мы создали файлы обложки в DataWebControls theme, которые предварительно определили CssClass свойства этих двух элементов управления и CssClass свойство для нескольких их вложенных свойств (RowStyle, , HeaderStyleи т. д.). Давайте сделаем то же самое для DataList.

Как описано в руководстве По отображению данных с помощью ObjectDataSource , файл Skin задает свойства веб-элемента управления по умолчанию, связанные с внешним видом. Тема — это коллекция файлов Обложки, CSS, изображений и JavaScript, которые определяют особый внешний вид веб-сайта. В руководстве По отображению данных с помощью ObjectDataSource мы создали DataWebControls тему (реализованную в виде папки в папке App_Themes ), которая в настоящее время содержит два файла обложки : GridView.skin и DetailsView.skin. Добавим третий файл обложки, чтобы указать предварительно определенные параметры стиля для DataList.

Чтобы добавить файл обложки, щелкните правой кнопкой мыши папку App_Themes/DataWebControls , выберите Добавить новый элемент и выберите в списке параметр Файл обложки. Задайте файлу имя DataList.skin.

Снимок экрана: окно добавления нового элемента с введенным default.skin в качестве нового имени файла Skin.

Рис. 9. Создание нового файла обложки с именем DataList.skin (щелкните, чтобы просмотреть полноразмерное изображение)

Используйте следующую разметку DataList.skin для файла:

<asp:DataList runat="server" CssClass="DataWebControlStyle">
   <AlternatingItemStyle CssClass="AlternatingRowStyle" />
   <ItemStyle CssClass="RowStyle" />
   <HeaderStyle CssClass="HeaderStyle" />
   <FooterStyle CssClass="FooterStyle" />
   <SelectedItemStyle CssClass="SelectedRowStyle" />
</asp:DataList>

Эти параметры назначают те же классы CSS соответствующим свойствам DataList, которые использовались с элементами управления GridView и DetailsView. Классы CSS, используемые здесь DataWebControlStyle, AlternatingRowStyle, RowStyleи т. д., определены в Styles.css файле и были добавлены в предыдущих руководствах.

После добавления этого файла обложки внешний вид DataList обновляется в Designer (может потребоваться обновить представление Designer, чтобы увидеть эффекты нового файла обложки; в меню Вид выберите Обновить). Как показано на рисунке 10, каждый чередующийся продукт имеет светло-розовый цвет фона.

Снимок экрана, показывающий, как новый файл обложки обновляет внешний вид DataList в Designer.

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

Шаг 4. Изучение других шаблонов DataList

Помимо ItemTemplate, DataList поддерживает шесть других необязательных шаблонов:

  • HeaderTemplate При указании добавляет строку заголовка к выходным данным и используется для отрисовки этой строки.
  • AlternatingItemTemplate используется для отрисовки чередующихся элементов
  • SelectedItemTemplateиспользуется для отрисовки выбранного элемента; выбранный элемент — это элемент, индекс которого соответствует свойству DataList SelectedIndex
  • EditItemTemplate используется для отрисовки редактируемого элемента
  • SeparatorTemplate Если он указан, добавляет разделитель между каждым элементом и используется для отрисовки этого разделителя.
  • FooterTemplate — при указании добавляет строку нижнего колонтитула в выходные данные и используется для отрисовки этой строки.

При указании HeaderTemplate или FooterTemplateDataList добавляет дополнительную строку верхнего или нижнего колонтитула в отображаемые выходные данные. Как и в случае со строками верхнего и нижнего колонтитулов GridView, верхний и нижний колонтитулы в DataList не привязаны к данным. Таким образом, любой синтаксис привязки данных в HeaderTemplate или FooterTemplate , который пытается получить доступ к связанным данным, вернет пустую строку.

Примечание

Как мы видели в руководстве по отображению сводных сведений в нижнем колонтитуле GridView , хотя строки верхнего и нижнего колонтитулов не поддерживают синтаксис привязки данных, сведения о данных можно внедрять непосредственно в эти строки из обработчика RowDataBound событий GridView. Этот метод можно использовать для вычисления итогов выполнения или других сведений из данных, привязанных к элементу управления, а также для назначения этих сведений нижнему колонтитулу. Эту же концепцию можно применить к элементам управления DataList и Repeater; единственное отличие заключается в том, что для DataList и Repeater создают обработчик событий для ItemDataBound события (а не для RowDataBound события).

В нашем примере давайте заголовок Сведения о продукте отображается в верхней части результатов DataList в заголовке <h3> . Для этого добавьте с соответствующей разметкой HeaderTemplate . На Designer это можно сделать, щелкнув ссылку Изменить шаблоны в смарт-теге DataList, выбрав шаблон заголовка в раскрывающемся списке и введя текст после выбора параметра Заголовок 3 в раскрывающемся списке стиль (см. рис. 11).

Добавление шаблона заголовка с текстовыми сведениями о продукте

Рис. 11. Добавление с текстовой HeaderTemplate информацией о продукте (щелкните, чтобы просмотреть полноразмерное изображение)

Кроме того, это можно добавить декларативно, введя следующую разметку в тегах <asp:DataList> :

<HeaderTemplate>
   <h3>Product Information</h3>
</HeaderTemplate>

Чтобы добавить немного места между каждым описанием продуктов, добавим SeparatorTemplate , который содержит строку между каждым разделом. Тег горизонтального правила (<hr>) добавляет такой разделитель. Создайте , SeparatorTemplate чтобы у него была следующая разметка:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Примечание

HeaderTemplate Как и FooterTemplates, SeparatorTemplate объект не привязан ни к одной записи из источника данных и поэтому не может напрямую получить доступ к записям источника данных, привязанным к DataList.

После этого добавления при просмотре страницы в браузере она должна выглядеть примерно так, как на рис. 12. Обратите внимание на строку заголовка и строку между каждым описанием продукта.

DataList включает строку заголовков и горизонтальное правило между каждым описанием продукта

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

Шаг 5. Отрисовка конкретной разметки с помощью элемента управления Repeater

Если вы используете представление или источник в браузере при посещении примера DataList на рис. 12, вы увидите, что DataList выдает HTML-код <table> , содержащий строку таблицы (<tr>) с одной ячейкой таблицы (<td>) для каждого элемента, привязанного к DataList. Фактически эти выходные данные идентичны тем, которые будут выданы из GridView с одним TemplateField. Как мы увидим в следующем руководстве, DataList позволяет дополнительно настраивать выходные данные, позволяя отображать несколько записей источников данных в каждой строке таблицы.

Что делать, если вы не хотите создавать HTML <table>? Для полного и полного контроля над разметкой, созданной веб-элементом управления данными, необходимо использовать элемент управления Repeater. Как и DataList, повторитель создается на основе шаблонов. Однако repeater предлагает только следующие пять шаблонов:

  • HeaderTemplate При указании добавляет указанную разметку перед элементами
  • ItemTemplate используется для отрисовки элементов
  • AlternatingItemTemplate Если указано, используется для отрисовки чередующихся элементов
  • SeparatorTemplate При указании добавляет указанную разметку между каждым элементом.
  • FooterTemplate — при указании добавляет указанную разметку после элементов.

В ASP.NET 1.x элемент управления Repeater обычно использовался для отображения маркированного списка, данные которого поступили из какого-либо источника данных. В этом случае HeaderTemplate и FooterTemplates будут содержать открывающий и закрывающий <ul> теги соответственно, а — ItemTemplate<li> элементы с синтаксисом привязки данных. Этот подход по-прежнему можно использовать в ASP.NET 2.0, как мы видели в двух примерах руководства по эталонным страницам и навигации по сайтам :

  • Site.master На странице master повторитель использовался для отображения маркированного списка содержимого карты сайта верхнего уровня (базовые отчеты, отчеты фильтрации, настраиваемое форматирование и т. д.); другой вложенный repeater использовался для отображения дочерних разделов разделов верхнего уровня.
  • В SectionLevelTutorialListing.ascxдля отображения маркированного списка дочерних разделов текущего раздела карты сайта использовался repeater.

Примечание

ASP.NET 2.0 представлен новый элемент управления BulletedList, который можно привязать к элементу управления источником данных для отображения простого маркированного списка. В элементе управления BulletedList не нужно указывать html-код, связанный со списком; Вместо этого мы просто указываем поле данных для отображения в виде текста для каждого элемента списка.

Repeater служит веб-элементом управления "Перехват всех данных". Если нет элемента управления, создающего необходимую разметку, можно использовать элемент управления Repeater. Чтобы проиллюстрировать использование repeater, давайте рассмотрим список категорий, отображаемый над списком данных сведений о продукте, созданным на шаге 2. В частности, пусть категории отображаются в однострочном HTML-коде <table> , при этом каждая категория отображается в виде столбца в таблице.

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

Добавление повтора в Designer

Рис. 13. Добавление ретранслятора в Designer (щелкните для просмотра полноразмерного изображения)

В смарт-теге Repeater есть только один параметр: Выбрать источник данных. Создайте объект ObjectDataSource и настройте его для использования CategoriesBLL метода класса .GetCategories

Создание объекта ObjectDataSource

Рис. 14. Создание объекта ObjectDataSource (щелкните для просмотра полноразмерного изображения)

Настройка ObjectDataSource для использования класса CategoriesBLL

Рис. 15. Настройка ObjectDataSource для использования CategoriesBLL класса (щелкните для просмотра полноразмерного изображения)

Получение сведений обо всех категориях с помощью метода GetCategories

Рис. 16. Получение сведений обо всех категориях с помощью GetCategories метода (щелкните для просмотра полноразмерного изображения)

В отличие от DataList, Visual Studio не создает элемент ItemTemplate для repeater автоматически после привязки его к источнику данных. Кроме того, шаблоны Repeater не могут быть настроены с помощью Designer и должны быть указаны декларативно.

Чтобы отобразить категории в виде одной строки <table> со столбцом для каждой категории, необходимо, чтобы повторитель выпустит следующую разметку:

<table>
   <tr>
      <td>Category 1</td>
      <td>Category 2</td>
      ...
      <td>Category N</td>
   </tr>
</table>

<td>Category X</td> Так как текст является частью, которая повторяется, он будет отображаться в ItemTemplate repeater s. Разметка, которая отображается перед ней , <table><tr> будет помещена HeaderTemplate в , а конечная разметка - </tr></table> будет помещена FooterTemplateв . Чтобы ввести эти параметры шаблона, перейдите в декларативную часть страницы ASP.NET, нажав кнопку Источник в левом нижнем углу и введите следующий синтаксис:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table>
            <tr>
    </HeaderTemplate>
    <ItemTemplate>
                <td><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <FooterTemplate>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

Repeater выдает точную разметку, указанную в его шаблонах, ни больше, ни меньше. На рисунке 17 показаны выходные данные Repeater при просмотре в браузере.

Таблица HTML Single-Row <> Списки каждой категории в отдельном столбце

Рис. 17. Html-Single-Row <table> Списки каждая категория в отдельном столбце (щелкните для просмотра полноразмерного изображения)

Шаг 6. Улучшение внешнего вида ретрансляторов

Так как repeater выдает именно разметку, указанную в его шаблонах, неудивительно, что для repeater нет свойств, связанных со стилем. Чтобы изменить внешний вид содержимого, созданного repeater, необходимо вручную добавить необходимое содержимое HTML или CSS непосредственно в шаблоны Repeater.

В нашем примере у столбцов категорий будут альтернативные цвета фона, например чередующиеся строки в DataList. Для этого необходимо назначить RowStyle класс CSS каждому элементу Repeater, а AlternatingRowStyle класс CSS — каждому чередующимся элементу Repeater с помощью ItemTemplate шаблонов и AlternatingItemTemplate , например:

<ItemTemplate>
    <td class="RowStyle"><%# Eval("CategoryName") %></td>
</ItemTemplate>
<AlternatingItemTemplate>
    <td class="AlternatingRowStyle"><%# Eval("CategoryName") %></td>
</AlternatingItemTemplate>

Давайте также добавим строку заголовка к выходным данным с текстом Категории продуктов. Так как мы не знаем, сколько столбцов будет состоять в результате <table> , самый простой способ создать строку заголовка, которая гарантированно охватывает все столбцы, — использовать два<table> элемента . Первая <table> строка будет содержать две строки, строку заголовка и строку, которая будет содержать вторую, одну строку <table> со столбцом для каждой категории в системе. То есть мы хотим создать следующую разметку:

<table>
   <tr>
      <th>Product Categories</th>
   </tr>
   <tr>
      <td>
         <table>
            <tr>
               <td>Category 1</td>
               <td>Category 2</td>
               ...
               <td>Category N</td>
            </tr>
         </table>
      </td>
   </tr>
</table>

Следующие и HeaderTemplateFooterTemplate приводят к нужной разметке:

<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource2"
    EnableViewState="False">
    <HeaderTemplate>
        <table cellpadding="0" cellspacing="0">
            <tr>
                <th class="HeaderStyle">Product Categories</th>
            </tr>
            <tr>
                <td>
                    <table cellpadding="4" cellspacing="0">
                        <tr>
    </HeaderTemplate>
    <ItemTemplate>
                            <td class="RowStyle"><%# Eval("CategoryName") %></td>
    </ItemTemplate>
    <AlternatingItemTemplate>
                            <td class="AlternatingRowStyle">
                                <%# Eval("CategoryName") %></td>
    </AlternatingItemTemplate>
    <FooterTemplate>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </FooterTemplate>
</asp:Repeater>

На рисунке 18 показан ретранслятор после внесения этих изменений.

Столбцы категории, чередующиеся в цвете фона и включает строку заголовка

Рис. 18. Чередующиеся столбцы категорий в цвете фона и включает строку заголовка (щелкните для просмотра полноразмерного изображения)

Сводка

Хотя элемент управления GridView позволяет легко отображать, изменять, удалять, сортировать и перелистывать данные, внешний вид очень прямоугольный и похожий на сетку. Для большего контроля над внешним видом необходимо обратиться к элементам управления DataList или Repeater. Оба этих элемента управления отображают набор записей с помощью шаблонов вместо BoundFields, CheckBoxFields и т. д.

DataList отображается в виде HTML-кода <table> , который по умолчанию отображает каждую запись источника данных в одной строке таблицы так же, как GridView с одним TemplateField. Однако, как мы увидим в следующем руководстве, DataList позволяет отображать несколько записей в каждой строке таблицы. Ретранслятор, с другой стороны, строго выдает разметку, указанную в своих шаблонах; он не добавляет дополнительную разметку и поэтому обычно используется для отображения данных в html-элементах, отличных от <table> (например, в маркированных списках).

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

Счастливое программирование!

Об авторе

Скотт Митчелл (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.

Вперед