Использование шаблонов FormView (VB)

2025-04-30

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

Введение

В последних двух руководствах мы узнали, как настроить выходные данные элементов управления GridView и DetailsView с помощью TemplateFields. TemplateFields дает возможность сильно настроить содержимое конкретного поля, но в конце концов GridView и DetailsView имеют довольно прямоугольный внешний вид сетки. Для многих сценариев такой макет сетки идеально подходит, но иногда требуется более гибкий, менее жесткий дисплей. При отображении одной записи такой гибкий макет можно реализовать с помощью элемента управления FormView.

В отличие от DetailsView, FormView не состоит из полей. Невозможно добавить BoundField или TemplateField в FormView. Вместо этого интерфейс FormView отрисовывается с помощью шаблонов. Представьте себе FormView как контроль DetailsView, который содержит один TemplateField. FormView поддерживает следующие шаблоны:

ItemTemplate используется для отрисовки конкретной записи, отображаемой в FormView
HeaderTemplate используется для указания необязательной строки заголовка
FooterTemplate используется для указания необязательной строки нижнего колонтитула
EmptyDataTemplate если в FormView DataSource отсутствуют записи, EmptyDataTemplate используется вместо ItemTemplate для отображения разметки элемента управления.
PagerTemplate можно использовать для настройки интерфейса разбиения по страницам для FormViews с включенным разбиением по страницам
EditItemTemplate / InsertItemTemplate используется для настройки интерфейса редактирования или интерфейса вставки для FormViews, поддерживающих такие функции.

В этом руководстве мы рассмотрим использование элемента управления FormView для представления менее жесткого отображения продуктов. Вместо того чтобы иметь поля для имени, категории, поставщика и т. д., FormView ItemTemplate будет отображать эти значения с помощью сочетания элемента заголовка и элемента <table> (см. рис. 1).

Рис. 1. Формат FormView разрывается из Grid-Like макета, показанного в DetailsView (щелкните, чтобы просмотреть изображение полного размера)

Шаг 1. Привязка данных к FormView

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

Рис. 2. Не удается отобразить FormView в конструкторе, пока ItemTemplate не будет предоставлено (щелкните, чтобы просмотреть полноразмерное изображение)

ItemTemplate можно создать вручную (с помощью декларативного синтаксиса) или автоматически, привязав FormView к элементу управления источника данных через конструктор. Этот автоматически созданный ItemTemplate код содержит HTML-код, который содержит имя каждого поля и элемент управления Label, свойство которого Text привязано к значению поля. Этот подход также автоматически создает элементы InsertItemTemplate и EditItemTemplate, и оба они заполняются элементами управления входными данными для каждого из полей данных, которые возвращает элемент управления источником данных.

Если вы хотите автоматически создать шаблон, в смарт-теге FormView добавьте новый элемент управления ObjectDataSource, который вызывает метод ProductsBLL класса GetProducts(). Это создаст FormView с ItemTemplate, InsertItemTemplate, и EditItemTemplate. В представлении источника удалите InsertItemTemplate и EditItemTemplate , так как мы не заинтересованы в создании FormView, поддерживающей редактирование или вставку. Затем очистите разметку внутри ItemTemplate , чтобы у нас был чистый лист для работы.

Если вы предпочитаете создать ItemTemplate вручную, можно добавить и настроить ObjectDataSource, перетащив его из панели инструментов в редактор. Однако не устанавливайте источник данных FormView из конструктора. Вместо этого перейдите в режим Source и вручную задайте свойству DataSourceID FormView значение ID ObjectDataSource. Затем вручную добавьте ItemTemplate.

Независимо от того, какой подход вы решили принять, на этом этапе декларативная разметка FormView должна выглядеть следующим образом:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1">
    <ItemTemplate>

    </ItemTemplate>
</asp:FormView>

Установите флажок "Включить разбиение по страницам" в смарт-теге FormView; это добавит атрибут AllowPaging="True" в декларативный синтаксис FormView. Кроме того, установите для свойства EnableViewState значение False.

Шаг 2: Определение разметки `ItemTemplate`

Если FormView привязан к элементу управления ObjectDataSource и настроен для поддержки разбиения по страницам, мы готовы указать содержимое для ItemTemplate. Давайте в этом руководстве отобразим имя продукта в заголовке <h3>. После этого давайте будем использовать HTML <table> для отображения оставшихся свойств продукта в таблице с четырьмя столбцами, где первые и третие столбцы перечисляют имена свойств и второй и четвертый список их значений.

Эту разметку можно ввести с помощью интерфейса редактирования шаблона FormView в конструкторе или ввести вручную с помощью декларативного синтаксиса. При работе с шаблонами, как правило, быстрее работать непосредственно с декларативным синтаксисом, но вы можете использовать любой способ, с которым вы наиболее комфортно.

Следующая разметка показывает декларативную разметку FormView после завершения структуры элемента ItemTemplate:

<asp:FormView ID="FormView1" runat="server" DataSourceID="ObjectDataSource1"
    AllowPaging="True" EnableViewState="False">
    <ItemTemplate>
        <hr />
        <h3><%# Eval("ProductName") %></h3>
        <table border="0">
            <tr>
                <td class="ProductPropertyLabel">Category:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("CategoryName") %></td>
                <td class="ProductPropertyLabel">Supplier:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("SupplierName")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Price:</td>
                <td class="ProductPropertyValue"><%# Eval("UnitPrice",
                  "{0:C}") %></td>
                <td class="ProductPropertyLabel">Units In Stock:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsInStock")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Units On Order:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("UnitsOnOrder") %></td>
                <td class="ProductPropertyLabel">Reorder Level:</td>
                <td class="ProductPropertyValue">
                  <%# Eval("ReorderLevel")%></td>
            </tr>
            <tr>
                <td class="ProductPropertyLabel">Qty/Unit</td>
                <td class="ProductPropertyValue">
                  <%# Eval("QuantityPerUnit") %></td>
                <td class="ProductPropertyLabel">Discontinued:</td>
                <td class="ProductPropertyValue">
                    <asp:CheckBox runat="server" Enabled="false"
                      Checked='<%# Eval("Discontinued") %>' />
                </td>
            </tr>
        </table>
        <hr />
    </ItemTemplate>
</asp:FormView>

Обратите внимание, что синтаксис привязки данных — <%# Eval("ProductName") %>например, можно внедрить непосредственно в выходные данные шаблона. То есть нет необходимости назначать его к свойству Text элемента управления Label. Например, у нас есть значение ProductName, отображаемое в элементе <h3>, с помощью <h3><%# Eval("ProductName") %></h3>, которого для продукта Chai будет отображаться как <h3>Chai</h3>.

Классы ProductPropertyLabel и ProductPropertyValue CSS используются для указания стиля имен и значений свойств продукта в <table>. Эти классы CSS определяются Styles.css и вызывают полужирные и выровненные по правому краю имена свойств и добавляют правое заполнение в значения свойств.

Так как в FormView нет доступных CheckBoxFields, для отображения значения Discontinued в виде флажка необходимо добавить собственный элемент управления CheckBox. Свойство Enabled имеет значение False, что делает его доступным только для чтения, а свойство CheckBox Checked привязано к значению Discontinued поля данных.

После завершения ItemTemplate информация о продукте отображается гораздо более естественно. Сравните выходные данные DetailsView из последнего руководства (рис. 3) с выходными данными, которые создает FormView в этом руководстве (рис. 4).

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

Рис. 4. Выходные данные Fluid FormView (щелкните, чтобы просмотреть изображение полного размера)

Сводка

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

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

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

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

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

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

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

Назад Далее

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