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

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

  • Статья

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

Загрузить 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).

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

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

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

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

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

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Примечание

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

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

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

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

Шаг 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 повторитель использовался для отображения маркированного списка содержимого карты сайта верхнего уровня (базовые отчеты, отчеты о фильтрации, настраиваемое форматирование и т. д.); другой вложенный ретранслятор использовался для отображения дочерних разделов разделов верхнего уровня.
  • В SectionLevelTutorialListing.ascxретранслятор использовался для отображения маркированного списка дочерних разделов текущего раздела карты сайта.

Примечание

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

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

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

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

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

В смарт-теге Repeater есть только один параметр: выберите источник данных. Выберите создание объекта ObjectDataSource и настройте его для использования CategoriesBLL метода класса s 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. Разметка, которая отображается перед ней - <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>

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

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

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

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

Так как повторитель выдает именно разметку, указанную в его шаблонах, неудивительно, что для 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>

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

<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.

НазадВперед