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

по Скотт Митчеллby Scott Mitchell

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

В предыдущих руководствах мы использовали элемент управления GridView для вывода данных.In the preceding tutorials we have used the GridView control to display data. Начиная с этого руководства мы рассмотрим создание общих шаблонов отчетов с помощью элементов управления DataList и Repeater, начиная с основ отображения данных с помощью этих элементов управления.Starting with this tutorial, we look at building common reporting patterns with the DataList and Repeater controls, starting with the basics of displaying data with these controls.

ВведениеIntroduction

Во всех примерах за последние 28 учебников, если нам требовалось отобразить несколько записей из источника данных, который мы включили в элемент управления GridView.In all of the examples throughout the past 28 tutorials, if we needed to display multiple records from a data source we turned to the GridView control. Элемент управления GridView отображает строку для каждой записи в источнике данных, отображая поля данных записей в столбцах.The GridView renders a row for each record in the data source, displaying the record s data fields in columns. Хотя GridView делает его привязкой для отображения, постраничного просмотра, сортировки, редактирования и удаления данных, его внешний вид является угловат.While the GridView makes it a snap to display, page through, sort, edit, and delete data, its appearance is a bit boxy. Кроме того, разметка, ответственная за структуру GridView s, является фиксированной, она включает HTML-<table> со строкой таблицы (<tr>) для каждой записи и ячейку таблицы (<td>) для каждого поля.Moreover, the markup responsible for the GridView s structure is fixed it includes an HTML <table> with a table row (<tr>) for each record and a table cell (<td>) for each field.

Чтобы обеспечить большую степень настройки в виде и визуализации разметки при отображении нескольких записей, ASP.NET 2,0 предлагает элементы управления DataList и Repeater (оба из них также доступны в ASP.NET версии 1. x).To provide a greater degree of customization in the appearance and rendered markup when displaying multiple records, ASP.NET 2.0 offers the DataList and Repeater controls (both of which were also available in ASP.NET version 1.x). Элементы управления DataList и Repeater визуализируют свое содержимое с помощью шаблонов, а не BoundFields, Чеккбоксфиелдс, Буттонфиелдс и т. д.The DataList and Repeater controls render their content using templates rather than BoundFields, CheckBoxFields, ButtonFields, and so on. Как и GridView, DataList отображается как HTML-<table>, но позволяет отображать несколько записей источников данных для каждой строки таблицы.Like the GridView, the DataList renders as an HTML <table>, but allows for multiple data source records to be displayed per table row. С другой стороны, элемент управления Repeater не отображает дополнительную разметку, чем то, что вы явно указали, и является идеальным кандидатом, когда требуется точный контроль над порожденной разметкой.The Repeater, on the other hand, renders no additional markup than what you explicitly specify, and is an ideal candidate when you need precise control over the markup emitted.

В течение следующих десятков материалов или инструкций мы рассмотрим создание общих шаблонов отчетов с помощью элементов управления DataList и Repeater, начиная с основ отображения данных с помощью этих шаблонов элементов управления.Over the next dozen or so tutorials, we'll look at building common reporting patterns with the DataList and Repeater controls, starting with the basics of displaying data with these controls templates. Мы покажем, как форматировать эти элементы управления, изменять макет записей источников данных в DataList, общие сценарии с основными и подробными сведениями, способы изменения и удаления данных, пролистывать записи и т. д.We'll see how to format these controls, how to alter the layout of data source records in the DataList, common master/details scenarios, ways to edit and delete data, how to page through records, and so on.

Шаг 1. Добавление веб-страниц учебника по DataList и RepeaterStep 1: Adding the DataList and Repeater Tutorial Web Pages

Прежде чем приступить к работе с этим руководством, давайте сначала добавим страницы ASP.NET, которые понадобятся для работы с этим руководством, и несколько руководств, посвященных отображению данных с помощью элементов управления DataList и Repeater.Before we start this tutorial, let s first take a moment to add the ASP.NET pages we'll need for this tutorial and the next few tutorials dealing with displaying data using the DataList and Repeater. Начните с создания новой папки в проекте с именем DataListRepeaterBasics.Start by creating a new folder in the project named DataListRepeaterBasics. Затем добавьте в эту папку следующие пять страниц ASP.NET, чтобы все они были настроены для использования главной страницы Site.master:Next, add the following five ASP.NET pages to this folder, having all of them configured to use the master page Site.master:

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

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

Рис. 1. Создание DataListRepeaterBasics папки и добавление страниц Tutorial ASP.NETFigure 1: Create a DataListRepeaterBasics Folder and Add the Tutorial ASP.NET Pages

Откройте страницу Default.aspx и перетащите SectionLevelTutorialListing.ascx пользовательский элемент управления из папки UserControls в область конструктора.Open the Default.aspx page and drag the SectionLevelTutorialListing.ascx User Control from the UserControls folder onto the Design surface. Этот пользовательский элемент управления, созданный в учебнике « главные страницы и Навигация по узлу », перечисляет карту узла и отображает учебники из текущего раздела в маркированном списке.This User Control, which we created in the Master Pages and Site Navigation tutorial, enumerates the site map and displays the tutorials from the current section in a bulleted list.

добавить пользовательский элемент управления SectionLevelTutorialListing. ascx в Default. aspxAdd the SectionLevelTutorialListing.ascx User Control to Default.aspx

Рис. 2. Добавление пользовательского элемента управления SectionLevelTutorialListing.ascx в Default.aspx (щелкните, чтобы просмотреть изображение с полным размером)Figure 2: Add the SectionLevelTutorialListing.ascx User Control to Default.aspx (Click to view full-size image)

Чтобы в маркированном списке отображались учебники по DataList и Repeater, которые будут созданы, необходимо добавить их на карту узла.In order to have the bulleted list display the DataList and Repeater tutorials we'll be creating, we need to add them to the site map. Откройте файл Web.sitemap и добавьте следующую разметку после разметки узла карт узла "Добавление настраиваемых кнопок":Open the Web.sitemap file and add the following markup after the Adding Custom Buttons site map node markup:

<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.NETFigure 3: Update the Site Map to Include the New ASP.NET Pages

Шаг 2. Отображение сведений о продукте с помощью элемента управления DataListStep 2: Displaying Product Information with the DataList

Как и в FormView, выходные данные элемента управления DataList зависят от шаблонов, а не от BoundFields, Чеккбоксфиелдс и т. д.Similar to the FormView, the DataList control s rendered output depends upon templates rather than BoundFields, CheckBoxFields, and so on. В отличие от FormView, DataList предназначен для показа набора записей, а не одиночные.Unlike the FormView, the DataList is designed to display a set of records rather than a solitary one. Давайте начнем с этого руководства и взглянем на то, как привязать сведения о продукте к DataList.Let s begin this tutorial with a look at binding product information to a DataList. Для начала откройте страницу Basics.aspx в папке DataListRepeaterBasics.Start by opening the Basics.aspx page in the DataListRepeaterBasics folder. Затем перетащите элемент управления DataList с панели элементов в конструктор.Next, drag a DataList from the Toolbox onto the Designer. Как показано на рис. 4, прежде чем указывать шаблоны DataList, конструктор отображает его в виде серого прямоугольника.As Figure 4 illustrates, before specifying the DataList s templates, the Designer displays it as a gray box.

перетащить элемент управления DataList с панели элементов в конструкторDrag the DataList From the Toolbox Onto the Designer

Рис. 4. Перетаскивание элемента управления DataList из панели элементов в конструктор (щелкните, чтобы просмотреть изображение с полным размером)Figure 4: Drag the DataList From the Toolbox Onto the Designer (Click to view full-size image)

Из смарт-тега DataList добавьте новый элемент ObjectDataSource и настройте его на использование метода GetProducts ProductsBLL класса.From the DataList s smart tag, add a new ObjectDataSource and configure it to use the ProductsBLL class s GetProducts method. Так как в этом руководстве мы воссоздадим список DataList только для чтения, установите в раскрывающемся списке значение (нет) на вкладках Вставка, обновление и удаление мастера.Since we re creating a read-only DataList in this tutorial, set the drop-down list to (None) in the wizard s INSERT, UPDATE, and DELETE tabs.

выбрать создание нового элемента управления ObjectDataSourceOpt to Create a New ObjectDataSource

Рис. 5. Создание нового элемента управления ObjectDataSource (щелкните, чтобы просмотреть изображение с полным размером)Figure 5: Opt to Create a New ObjectDataSource (Click to view full-size image)

настроить ObjectDataSource для использования класса ProductsBLLConfigure the ObjectDataSource to Use the ProductsBLL Class

Рис. 6. Настройка ObjectDataSource для использования класса ProductsBLL (щелкните, чтобы просмотреть изображение с полным размером)Figure 6: Configure the ObjectDataSource to Use the ProductsBLL Class (Click to view full-size image)

получить сведения обо всех продуктах с помощью метода ProductsRetrieve Information About All of the Products Using the GetProducts Method

Рис. 7. Получение сведений обо всех продуктах с помощью метода GetProducts (щелкните, чтобы просмотреть изображение с полным размером)Figure 7: Retrieve Information About All of the Products Using the GetProducts Method (Click to view full-size image)

После настройки ObjectDataSource и связывания его с элементом управления DataList через его смарт-тег Visual Studio автоматически создаст в DataList ItemTemplate, отображающий имя и значение каждого поля данных, возвращаемого источником данных (см. разметку ниже).After configuring the ObjectDataSource and associating it with the DataList through its smart tag, Visual Studio will automatically create an ItemTemplate in the DataList that displays the name and value of each data field returned by the data source (see the markup below). Этот вид ItemTemplate по умолчанию аналогичен шаблонам, автоматически создаваемым при привязке источника данных к FormView через конструктор.This default ItemTemplate s appearance is identical to that of the templates automatically created when binding a data source to the FormView through the 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>

Note

Помните, что при привязке источника данных к элементу управления FormView через смарт-тег FormView s Visual Studio создает ItemTemplate, InsertItemTemplateи EditItemTemplate.Recall that when binding a data source to a FormView control through the FormView s smart tag, Visual Studio created an ItemTemplate, InsertItemTemplate, and EditItemTemplate. Однако с элементом управления DataList создается только ItemTemplate.With the DataList, however, only an ItemTemplate is created. Это связано с тем, что элемент управления DataList не имеет такой же встроенной поддержки правки и вставки, которая предоставляется FormView.This is because the DataList does not have the same built-in editing and inserting support offered by the FormView. Элемент управления DataList содержит события, связанные с редактированием и удалением, а также поддержку редактирования и удаления, которую можно добавить с помощью фрагмента кода, но нет простой встроенной поддержки, как в элементе управления FormView.The DataList does contain edit- and delete-related events, and editing and deleting support can be added with a bit of code, but there s no simple out-of-the-box support as with the FormView. В следующем учебнике мы покажем, как включить поддержку редактирования и удаления элементов управления DataList.We'll see how to include editing and deleting support with the DataList in a future tutorial.

Подождите немного, чтобы улучшить внешний вид этого шаблона.Let s take a moment to improve the appearance of this template. Вместо того чтобы отображать все поля данных, добавим в s только название продукта, поставщик, категорию, количество на единицу и цену за единицу.Rather than displaying all of the data fields, let s only display the product s name, supplier, category, quantity per unit, and unit price. Кроме того, давайте отображаем имя в заголовке <h4> и разметьте оставшиеся поля, используя <table> под заголовком.Moreover, let s display the name in an <h4> heading and lay out the remaining fields using a <table> beneath the heading.

Чтобы внести эти изменения, можно использовать функции редактирования шаблонов в конструкторе из смарт-тега DataList, щелкнуть ссылку изменить шаблоны или изменить шаблон вручную с помощью декларативного синтаксиса Pages.To make these changes you can either use the template editing features in the Designer from the DataList s smart tag click on the Edit Templates link or you can modify the template manually through the page s declarative syntax. При использовании параметра изменить шаблоны в конструкторе полученная разметка может не соответствовать следующей разметке точно, но при просмотре в браузере он очень похож на снимок экрана, показанный на рис. 8.If you use the Edit Templates option in the Designer, your resulting markup may not match the following markup exactly, but when viewed through a browser should look very similar to the screen shot shown in Figure 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>

Note

В приведенном выше примере используются элементы управления Label, которым свойству Text присвоено значение синтаксиса DataBinding.The example above uses Label Web controls whose Text property is assigned the value of the databinding syntax. Кроме того, можно полностью опустить метки, вводя только синтаксис привязки данных.Alternatively, we could have omitted the Labels altogether, typing in just the databinding syntax. То есть вместо использования <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> можно было бы использовать декларативный синтаксис <%# Eval("CategoryName") %>.That is, instead of using <asp:Label ID="CategoryNameLabel" runat="server" Text='<%# Eval("CategoryName") %>' /> we could have instead used the declarative syntax <%# Eval("CategoryName") %>.

Однако при этом в веб-элементах управления Label предусмотрено два преимущества.Leaving in the Label Web controls, however, offer two advantages. Во первых, он предоставляет более простые средства для форматирования данных на основе данных, как будет показано в следующем руководстве.First, it provides an easier means for formatting the data based on the data, as we'll see in the next tutorial. Во-вторых, параметр Edit Templates (редактирование шаблонов) в конструкторе не отображает декларативный синтаксис привязки данных, который появляется за пределами определенного элемента управления.Second, the Edit Templates option in the Designer doesn t display declarative databinding syntax that appears outside of some Web control. Вместо этого интерфейс Edit Templates разработан для упрощения работы со статической разметкой и веб-элементами управления и предполагает, что все привязки данных будут выполняться с помощью диалогового окна Изменение привязок, доступного из смарт-тегов Web Controls.Instead, the Edit Templates interface is designed to facilitate working with static markup and Web controls and assumes that any databinding will be done through the Edit DataBindings dialog box, which is accessible from the Web controls smart tags.

Таким образом, при работе с элементом управления DataList, который предоставляет возможность редактирования шаблонов с помощью конструктора, я предпочитаю использовать элементы Web Controls Label, чтобы содержимое было доступно через интерфейс редактирование шаблонов.Therefore, when working with the DataList, which provides the option of editing the templates through the Designer, I prefer to use Label Web controls so that the content is accessible through the Edit Templates interface. Как мы увидим чуть ниже, Repeater требует, чтобы содержимое шаблона было изменено из представления исходного кода.As we'll see shortly, the Repeater requires that the template s contents be edited from the Source view. Следовательно, при создании шаблонов Repeater мы часто будем опускать метки Web Controls, если не знать, что нужно отформатировать текст, привязанный к данным, на основе программной логики.Consequently, when crafting the Repeater s templates I'll often omit the Label Web controls unless I know I'll need to format the appearance of the data bound text based on programmatic logic.

каждый из выходных данных продукта отображается с помощью DataList s ItemTemplateEach Product s Output is Rendered Using the DataList s ItemTemplate

Рис. 8. выходные данные каждого продукта отображаются с помощью ItemTemplate DataList s (щелкните, чтобы просмотреть изображение с полным размером)Figure 8: Each Product s Output is Rendered Using the DataList s ItemTemplate (Click to view full-size image)

Шаг 3. улучшение внешнего вида элемента управления DataListStep 3: Improving the Appearance of the DataList

Как и GridView, DataList предлагает ряд свойств, связанных со стилем, таких как Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyleи т. д.Like the GridView, the DataList offers a number of style-related properties, such as Font, ForeColor, BackColor, CssClass, ItemStyle, AlternatingItemStyle, SelectedItemStyle, and so on. При работе с элементами управления GridView и DetailsView мы создали файлы обложки в теме DataWebControls, в которой заранее определены свойства CssClass для этих двух элементов управления и свойство CssClass для некоторых их вложенных свойств (RowStyle, HeaderStyleи т. д.).When working with the GridView and DetailsView controls, we created Skin files in the DataWebControls Theme that pre-defined the CssClass properties for these two controls and the CssClass property for several of their subproperties (RowStyle, HeaderStyle, and so on). Позвольте s сделать то же самое для DataList.Let s do the same for the DataList.

Как обсуждалось в разделе Отображение данных с помощью элемента управления ObjectDataSource , в файле обложки задаются свойства, связанные с внешним видом по умолчанию для веб-элемента. Тема — это коллекция файлов Skin, CSS, Image и JavaScript, которые определяют конкретный внешний вид веб-сайта.As discussed in the Displaying Data With the ObjectDataSource tutorial, a Skin file specifies the default appearance-related properties for a Web control; a Theme is a collection of Skin, CSS, image, and JavaScript files that define a particular look and feel for a website. При отображении данных с помощью учебника по ObjectDataSource мы создали тему DataWebControls (которая реализована в виде папки в папке App_Themes), в которой в настоящее время есть два файла обложки — GridView.skin и DetailsView.skin.In the Displaying Data With the ObjectDataSource tutorial, we created a DataWebControls Theme (which is implemented as a folder within the App_Themes folder) that has, currently, two Skin files - GridView.skin and DetailsView.skin. Добавим третий файл обложки, чтобы указать предварительно определенные параметры стиля для DataList.Let s add a third Skin file to specify the pre-defined style settings for the DataList.

Чтобы добавить файл обложки, щелкните правой кнопкой мыши папку App_Themes/DataWebControls, выберите пункт Добавить новый элемент и выберите в списке параметр файл обложки.To add a Skin file, right-click on the App_Themes/DataWebControls folder, choose Add a New Item, and select the Skin File option from the list. Назовите файл DataList.skin.Name the file DataList.skin.

создать новый файл обложки с именем DataList. SkinCreate a New Skin File Named DataList.skin

Рис. 9. Создание нового файла обложки с именем DataList.skin (щелкните, чтобы просмотреть изображение с полным размером)Figure 9: Create a New Skin File Named DataList.skin (Click to view full-size image)

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

<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.These settings assign the same CSS classes to the appropriate DataList properties as were used with the GridView and DetailsView controls. Используемые здесь классы CSS DataWebControlStyle, AlternatingRowStyle, RowStyleи т. д. определяются в файле Styles.css и были добавлены в предыдущих учебных курсах.The CSS classes used here DataWebControlStyle, AlternatingRowStyle, RowStyle, and so on are defined in the Styles.css file and were added in previous tutorials.

При добавлении этого файла обложки внешний вид DataList обновляется в конструкторе (для просмотра эффектов нового файла обложки может потребоваться обновить представление конструктора). в меню "вид" выберите команду "Обновить".With the addition of this Skin file, the DataList s appearance is updated in the Designer (you may need to refresh the Designer view to see the effects of the new Skin file; from the View menu, choose Refresh). Как показано на рис. 10, каждый чередующийся продукт имеет светло-розовый цвет фона.As Figure 10 shows, each alternating product has a light pink background color.

создать новый файл обложки с именем DataList. SkinCreate a New Skin File Named DataList.skin

Рис. 10. Создание нового файла обложки с именем DataList.skin (щелкните, чтобы просмотреть изображение с полным размером)Figure 10: Create a New Skin File Named DataList.skin (Click to view full-size image)

Шаг 4. изучение DataList s другие шаблоныStep 4: Exploring the DataList s Other Templates

Помимо ItemTemplate, DataList поддерживает шесть других необязательных шаблонов:In addition to the ItemTemplate, the DataList supports six other optional templates:

  • HeaderTemplate если указано, добавляет строку заголовка к выходным данным и используется для визуализации этой строки.HeaderTemplate if provided, adds a header row to the output and is used to render this row
  • AlternatingItemTemplate, используемый для визуализации чередующихся элементовAlternatingItemTemplate used to render alternating items
  • SelectedItemTemplate, используемый для отрисовки выбранного элемента; выбранный элемент является элементом, индекс которого соответствует свойствуSelectedIndex DataList sSelectedItemTemplate used to render the selected item; the selected item is the item whose index corresponds to the DataList s SelectedIndex property
  • EditItemTemplate, используемый для визуализации редактируемого элементаEditItemTemplate used to render the item being edited
  • SeparatorTemplate, если он указан, добавляет разделитель между каждым элементом и используется для отображения этого разделителя.SeparatorTemplate if provided, adds a separator between each item and is used to render this separator
  • FooterTemplate — если предоставлено, добавляет к выходу строку нижнего колонтитула и используется для визуализации этой строки.FooterTemplate - if provided, adds a footer row to the output and is used to render this row

При указании HeaderTemplate или FooterTemplateDataList добавляет дополнительную строку верхнего или нижнего колонтитула в отображаемые выходные данные.When specifying the HeaderTemplate or FooterTemplate, the DataList adds an additional header or footer row to the rendered output. Как и в случае с заголовками и нижними колонтитулами GridView s, верхний и нижний колонтитулы в DataList не привязаны к данным.Like with the GridView s header and footer rows, the header and footer in a DataList are not bound to data. Таким образом, любой синтаксис привязки данных в HeaderTemplate или FooterTemplate, пытающийся получить доступ к привязанным данным, вернет пустую строку.Therefore, any databinding syntax in the HeaderTemplate or FooterTemplate that attempts to access bound data will return a blank string.

Note

Как было показано в статье Отображение сводных данных в нижнем колонтитуле GridView s , в то время как строки верхнего и нижнего колонтитула не поддерживают синтаксис привязки данных, сведения, относящиеся к данным, могут быть добавлены непосредственно в эти строки из обработчика RowDataBound GridView s.As we saw in the Displaying Summary Information in the GridView s Footer tutorial, while the header and footer rows don t support databinding syntax, data-specific information can be injected directly into these rows from the GridView s RowDataBound event handler. Этот метод можно использовать для вычисления текущих итогов или другой информации из данных, привязанных к элементу управления, а также для назначения этих сведений нижнему колонтитулу.This technique can be used to both calculate running totals or other information from the data bound to the control as well as assign that information to the footer. Эта же концепция может применяться к элементам управления DataList и Repeater; Единственное различие заключается в том, что для элементов управления DataList и Repeater создается обработчик событий ItemDataBound события (вместо события RowDataBound).This same concept can be applied to the DataList and Repeater controls; the only difference is that for the DataList and Repeater create an event handler for the ItemDataBound event (instead of for the RowDataBound event).

В нашем примере пусть в верхней части списка DataList отображаются сведения о продукте, заголовком <h3>.For our example, let s have the title Product Information displayed at the top of the DataList s results in an <h3> heading. Для этого добавьте HeaderTemplate с соответствующей разметкой.To accomplish this, add a HeaderTemplate with the appropriate markup. В конструкторе это можно сделать, щелкнув ссылку изменить шаблоны в смарт-теге DataList, выбрав шаблон заголовка из раскрывающегося списка и введя текст в раскрывающемся списке стиль (см. рис. 11).From the Designer, this can be accomplished by clicking on the Edit Templates link in the DataList s smart tag, choosing the Header Template from the drop-down list, and typing in the text after picking the Heading 3 option from the style drop-down list (see Figure 11).

добавить HeaderTemplate с текстовыми сведениями о продуктеAdd a HeaderTemplate with the Text Product Information

Рис. 11. Добавление HeaderTemplate со сведениями о продукте (щелкните, чтобы просмотреть изображение с полным размером)Figure 11: Add a HeaderTemplate with the Text Product Information (Click to view full-size image)

Кроме того, это можно добавить декларативно, введя следующую разметку в теги <asp:DataList>:Alternatively, this can be added declaratively by entering the following markup within the <asp:DataList> tags:

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

Чтобы добавить в список продуктов несколько пробелов, добавим SeparatorTemplate, включающую линию между каждым разделом.To add a bit of space between each product listing, let s add a SeparatorTemplate that includes a line between each section. Тег горизонтального правила (<hr>) добавляет такой разделитель.The horizontal rule tag (<hr>), adds such a divider. Создайте SeparatorTemplate так, чтобы он наработал следующую разметку:Create the SeparatorTemplate so that it has the following markup:

<SeparatorTemplate>
    <hr />
</SeparatorTemplate>

Note

Как и HeaderTemplate и FooterTemplates, SeparatorTemplate не привязана к какой-либо записи из источника данных и поэтому не может напрямую обращаться к записям источников данных, привязанным к DataList.Like the HeaderTemplate and FooterTemplates, the SeparatorTemplate is not bound to any record from the data source and therefore cannot directly access the data source records bound to the DataList.

После выполнения этого сложения при просмотре страницы в браузере она должна выглядеть примерно так, как показано на рис. 12.After making this addition, when viewing the page through a browser it should look similar to Figure 12. Обратите внимание на строку заголовка и строку между каждым списком продуктов.Note the header row and the line between each product listing.

DataList включает строку заголовка и горизонтальное правило между каждым списком продуктов.The DataList Includes a Header Row and a Horizontal Rule Between Each Product Listing

Рис. 12. элемент управления DataList содержит строку заголовка и горизонтальное правило между каждым списком продуктов (щелкните, чтобы просмотреть изображение с полным размером).Figure 12: The DataList Includes a Header Row and a Horizontal Rule Between Each Product Listing (Click to view full-size image)

Шаг 5. отрисовка определенной разметки с помощью элемента управления RepeaterStep 5: Rendering Specific Markup with the Repeater Control

Если вы выполняете представление или источник из браузера при просмотре примера DataList на рис. 12, вы увидите, что DataList выдает <table> HTML, содержащий строку таблицы (<tr>) с одной ячейкой таблицы (<td>) для каждого элемента, привязанного к DataList.If you do a View/Source from your browser when visiting the DataList example from Figure 12, you'll see that the DataList emits an HTML <table> that contains a table row (<tr>) with a single table cell (<td>) for each item bound to the DataList. На самом деле эти выходные данные идентичны тому, что получится из GridView с одним TemplateField.This output, in fact, is identical to what would be emitted from a GridView with a single TemplateField. Как можно будет увидеть в следующем учебном курсе, DataList допускает дальнейшую настройку выходных данных, позволяя нам отображать несколько записей источников данных в каждой строке таблицы.As we'll see in a future tutorial, the DataList does allow further customization of the output, enabling us to display multiple data source records per table row.

Но если вы не хотите создавать HTML-<table>?What if you don t want to emit an HTML <table>, though? Для общего и полного управления разметкой, создаваемой веб-элементом управления данными, необходимо использовать элемент управления Repeater.For total and complete control over the markup generated by a data Web control, we must use the Repeater control. Как и в DataList, элемент управления Repeater создается на основе шаблонов.Like the DataList, the Repeater is constructed based upon templates. Однако Repeater предлагает только следующие пять шаблонов:The Repeater, however, only offers the following five templates:

  • HeaderTemplate если предоставлено, добавляет указанную разметку перед элементами.HeaderTemplate if provided, adds the specified markup before the items
  • ItemTemplate, используемые для отрисовки элементовItemTemplate used to render items
  • AlternatingItemTemplate, если он задан, используется для визуализации чередующихся элементовAlternatingItemTemplate if provided, used to render alternating items
  • SeparatorTemplate, если оно предоставлено, добавляет указанную разметку между каждым элементом.SeparatorTemplate if provided, adds the specified markup between each item
  • FooterTemplate — если предоставлено, добавляет указанную разметку после элементов.FooterTemplate - if provided, adds the specified markup after the items

В ASP.NET 1. x элемент управления Repeater обычно использовался для вывода маркированного списка, данные которого получены из источника данных.In ASP.NET 1.x, the Repeater control was commonly used to display a bulleted list whose data came from some data source. В этом случае HeaderTemplate и FooterTemplates будут содержать открывающие и закрывающие теги <ul> соответственно, а ItemTemplate будет содержать элементы <li> с синтаксисом DataBinding.In such a case, the HeaderTemplate and FooterTemplates would contain the opening and closing <ul> tags, respectively, while the ItemTemplate would contain <li> elements with databinding syntax. Этот подход по-прежнему можно использовать в ASP.NET 2,0, как мы видели в двух примерах на главных страницах и в учебнике по переходу на сайт.This approach can still be used in ASP.NET 2.0 as we saw in two examples in the Master Pages and Site Navigation tutorial:

  • На главной странице Site.master используется Repeater для отображения маркированного списка содержимого карт узла верхнего уровня (базовый отчет, фильтрация отчетов, настраиваемое форматирование и т. д.). другой вложенный элемент Repeater использовался для вывода дочерних разделов разделов верхнего уровня.In the Site.master master page, a Repeater was used to display a bulleted list of the top-level site map contents (Basic Reporting, Filtering Reports, Customized Formatting, and so on); another, nested Repeater was used to display the children sections of the top-level sections
  • В SectionLevelTutorialListing.ascxдля отображения маркированного списка дочерних разделов текущего раздела схемы веб-узла используется элемент Repeater.In SectionLevelTutorialListing.ascx, a Repeater was used to display a bulleted list of the children sections of the current site map section

Note

В ASP.NET 2,0 появился новый элемент управления "маркированный", который можно привязать к элементу управления источником данных, чтобы отобразить простой маркированный список.ASP.NET 2.0 introduces the new BulletedList control, which can be bound to a data source control in order to display a simple bulleted list. При использовании элемента управления маркированными списками не нужно указывать ни один из HTML-страниц, связанных со списком; Вместо этого мы просто обозначаем поле данных, которое будет отображаться как текст для каждого элемента списка.With the BulletedList control we do not need to specify any of the list-related HTML; instead, we simply indicate the data field to display as the text for each list item.

Repeater служит в качестве веб-элемента управления для перехвата всех данных.The Repeater serves as a catch all data Web control. Если существующего элемента управления, создающего необходимую разметку, не существует, можно использовать элемент управления Repeater.If there is not an existing control that generates the needed markup, the Repeater control can be used. Чтобы проиллюстрировать использование элемента управления Repeater, давайте, чтобы список категорий отображался над элементом управления DataList, созданным на шаге 2.To illustrate using the Repeater, let s have the list of categories displayed above the Product Information DataList created in Step 2. В частности, пусть категории отображаются в HTML-<table> одной строки с каждой категорией, отображаемой в виде столбца в таблице.In particular, let s have the categories displayed in a single-row HTML <table> with each category displayed as a column in the table.

Чтобы сделать это, начните с перетаскивания элемента управления Repeater с панели инструментов в конструктор над элементом DataList сведений о продукте.To accomplish this, start by dragging a Repeater control from the Toolbox onto the Designer, above the Product Information DataList. Как и в элементе управления DataList, элемент управления Repeater первоначально отображается как серый прямоугольник, пока его шаблоны не определены.As with the DataList, the Repeater initially displays as a gray box until its templates have been defined.

Добавление элемента Repeater в конструкторAdd a Repeater to the Designer

Рис. 13. Добавление элемента Repeater в конструктор (щелкните, чтобы просмотреть изображение с полным размером)Figure 13: Add a Repeater to the Designer (Click to view full-size image)

В смарт-теге Repeater s есть только один параметр: выберите источник данных.There s only one option in the Repeater s smart tag: Choose Data Source. Необходимо создать новый элемент ObjectDataSource и настроить его для использования метода GetCategories CategoriesBLL класса.Opt to create a new ObjectDataSource and configure it to use the CategoriesBLL class s GetCategories method.

создать новый элемент управления ObjectDataSourceCreate a New ObjectDataSource

Рис. 14. Создание нового элемента управления ObjectDataSource (щелкните, чтобы просмотреть изображение с полным размером)Figure 14: Create a New ObjectDataSource (Click to view full-size image)

настроить ObjectDataSource для использования класса CategoriesBLLConfigure the ObjectDataSource to Use the CategoriesBLL Class

Рис. 15. Настройка ObjectDataSource для использования класса CategoriesBLL (щелкните, чтобы просмотреть изображение с полным размером)Figure 15: Configure the ObjectDataSource to Use the CategoriesBLL Class (Click to view full-size image)

получить сведения обо всех категориях с помощью метода CategoriesRetrieve Information About All of the Categories Using the GetCategories Method

Рис. 16. Получение сведений обо всех категориях с помощью метода GetCategories (щелкните, чтобы просмотреть изображение с полным размером)Figure 16: Retrieve Information About All of the Categories Using the GetCategories Method (Click to view full-size image)

В отличие от DataList, Visual Studio не создает ItemTemplate автоматически для элемента управления Repeater после его привязки к источнику данных.Unlike the DataList, Visual Studio does not automatically create an ItemTemplate for the Repeater after binding it to a data source. Более того, шаблоны Repeater не могут быть настроены с помощью конструктора и должны быть заданы декларативно.Furthermore, the Repeater s templates cannot be configured through the Designer and must be specified declaratively.

Чтобы отобразить категории в виде однострочного <table> со столбцом для каждой категории, нам нужен элемент Repeater для создания разметки, аналогичной следующей:To display the categories as a single-row <table> with a column for each category, we need the Repeater to emit markup similar to the following:

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

Так как текст <td>Category X</td> — это повторяющаяся часть, она появится в элементе Repeater s ItemTemplate.Since the <td>Category X</td> text is the portion that repeats, this will appear in the Repeater s ItemTemplate. Разметка, которая появляется перед <table><tr>, будет помещена в HeaderTemplate, а конечная разметка </tr></table> — помещается в FooterTemplate.The markup that appears before it - <table><tr> - will be placed in the HeaderTemplate while the ending markup - </tr></table> - will placed in the FooterTemplate. Чтобы ввести эти параметры шаблона, перейдите к декларативной части страницы ASP.NET, нажав кнопку Источник в левом нижнем углу и введя следующий синтаксис:To enter these template settings, go to the declarative portion of the ASP.NET page by clicking on the Source button in the lower left corner and type in the following syntax:

<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 создает точную разметку, указанную в шаблонах, ничего больше, ничего не меньше.The Repeater emits the precise markup as specified by its templates, nothing more, nothing less. На рис. 17 показан вывод данных Repeater при просмотре в браузере.Figure 17 shows the Repeater s output when viewed through a browser.

<таблице HTML с одной строкой> список каждой категории в отдельном столбцеA Single-Row HTML <table> Lists Each Category in a Separate Column

Рис. 17. HTML-<table> одной строки содержит каждую категорию в отдельном столбце (щелкните, чтобы просмотреть изображение с полным размером)Figure 17: A Single-Row HTML <table> Lists Each Category in a Separate Column (Click to view full-size image)

Шаг 6. улучшение внешнего вида элемента RepeaterStep 6: Improving the Appearance of the Repeater

Так как Repeater создает точную разметку, указанную в шаблонах, она должна не задуматься о том, что для Repeater нет свойств, связанных с стилем.Since the Repeater emits precisely the markup specified by its templates, it should come as no surprise that there are no style-related properties for the Repeater. Чтобы изменить внешний вид содержимого, созданного Repeater, необходимо вручную добавить требуемое содержимое HTML или CSS непосредственно в шаблоны Repeater s.To alter the appearance of the content generated by the Repeater, we must manually add the needed HTML or CSS content directly to the Repeater s templates.

В нашем примере пусть столбцы категории имеют альтернативные цвета фона, например с чередованием строк в DataList.For our example, let s have the category columns alternate background colors, like with the alternating rows in the DataList. Для этого необходимо присвоить RowStyle классу CSS каждому элементу Repeater и классу AlternatingRowStyle CSS к каждому альтернативному элементу Repeater с помощью шаблонов ItemTemplate и AlternatingItemTemplate, вот так:To accomplish this, we need to assign the RowStyle CSS class to each Repeater item and the AlternatingRowStyle CSS class to each alternating Repeater item through the ItemTemplate and AlternatingItemTemplate templates, like so:

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

Давайте также добавим к выходу строку заголовка с использованием текстовых категорий продуктов.Let s also add a header row to the output with the text Product Categories. Поскольку мы не понимаем, сколько столбцов будет состоять в итоговой <table>, самый простой способ создать строку заголовка, которая гарантированно охватывает все столбцы, — использовать две <table> s.Since we don t know how many columns our resulting <table> will be comprised of, the simplest way to generate a header row that is guaranteed to span all columns is to use two <table> s. Первая <table> будет содержать две строки заголовка и строку, которая будет содержать вторую однострочную <table> со столбцом для каждой категории в системе.The first <table> will contain two rows the header row and a row that will contain the second, single-row <table> that has a column for each category in the system. То есть мы хотим создать следующую разметку:That is, we want to emit the following markup:

<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 приводят к желаемой разметке:The following HeaderTemplate and FooterTemplate result in the desired markup:

<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 показан элемент Repeater после внесения этих изменений.Figure 18 shows the Repeater after these changes have been made.

столбцы категорий в альтернативном цвете и включает строку заголовкаThe Category Columns Alternate in Background Color and Includes a Header Row

Рис. 18. столбцы категорий, которые относятся к цвету фона и включают строку заголовка (щелкните, чтобы просмотреть изображение с полным размером)Figure 18: The Category Columns Alternate in Background Color and Includes a Header Row (Click to view full-size image)

СводкаSummary

Хотя элемент управления GridView упрощает отображение, изменение, удаление, сортировку и детализацию данных, внешний вид является очень угловатным и в виде сетки.While the GridView control makes it easy to display, edit, delete, sort, and page through data, the appearance is very boxy and grid-like. Чтобы лучше контролировать внешний вид, необходимо включить элементы управления DataList или Repeater.For more control over the appearance, we need to turn to either the DataList or Repeater controls. Оба этих элемента управления отображают набор записей с помощью шаблонов вместо BoundFields, Чеккбоксфиелдс и т. д.Both of these controls display a set of records using templates instead of BoundFields, CheckBoxFields, and so on.

Элемент управления DataList готовится к просмотру как <table> HTML, который по умолчанию отображает каждую запись источника данных в одной строке таблицы, как и GridView с одним TemplateField.The DataList renders as an HTML <table> that, by default, displays each data source record in a single table row, just like a GridView with a single TemplateField. Как мы увидим в следующем учебном курсе, элемент управления DataList позволяет отображать несколько записей в каждой строке таблицы.As we will see in a future tutorial, however, the DataList does permit multiple records to be displayed per table row. С другой стороны, Repeater строго создает разметку, указанную в ее шаблонах. Он не добавляет дополнительную разметку и, таким образом, обычно используется для вывода данных в HTML-элементах, отличных от <table> (например, в маркированном списке).The Repeater, on the other hand, strictly emits the markup specified in its templates; it does not add any additional markup and therefore is commonly used to display data in HTML elements other than a <table> (such as in a bulleted list).

Хотя элементы управления DataList и Repeater обеспечивают большую гибкость в отображаемых выходных данных, у них нет многих встроенных функций, имеющихся в GridView.While the DataList and Repeater offer more flexibility in their rendered output, they lack many of the built-in features found in the GridView. Как мы рассмотрим в предстоящих руководствах, некоторые из этих функций могут быть подключены обратно, не требуя слишком больших усилий, но при этом следует помнить, что использование DataList или Repeater вместо GridView ограничивает возможности, которые можно использовать без реализации этих функций. степень.As we'll examine in upcoming tutorials, some of these features can be plugged back in without too much effort, but do keep in mind that using the DataList or Repeater in lieu of the GridView does limit the features you can use without having to implement those features yourself.

Поздравляем с программированием!Happy Programming!

Об автореAbout the Author

Скотт Митчелл, автор семи книг по ASP/ASP. NET и основатель 4GuysFromRolla.com, работал с веб-технологиями Майкрософт с 1998.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Скотт работает как независимый консультант, преподаватель и модуль записи.Scott works as an independent consultant, trainer, and writer. Его последняя книга — Sams обучать себя ASP.NET 2,0 за 24 часа.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Он доступен по адресу mitchell@4GuysFromRolla.com.He can be reached at mitchell@4GuysFromRolla.com. или через его блог, который можно найти по адресу http://ScottOnWriting.NET.or via his blog, which can be found at http://ScottOnWriting.NET.

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

Эта серия руководств была рассмотрена многими полезными рецензентами.This tutorial series was reviewed by many helpful reviewers. Потенциальные рецензенты для этого руководства: Яааков yaakov Ellis), основными рецензентами, Рэнди Шмидт и Стейси парк.Lead reviewers for this tutorial were Yaakov Ellis, Liz Shulok, Randy Schmidt, and Stacy Park. Хотите ознакомиться с моими будущими статьями MSDN?Interested in reviewing my upcoming MSDN articles? Если это так, расположите строку в mitchell@4GuysFromRolla.com.If so, drop me a line at mitchell@4GuysFromRolla.com.