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

  • Статья

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

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

В отличие от 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 можно использовать для настройки интерфейса разбиения по страницам для FormView с включенным разбиением по страницам
  • EditItemTemplate / InsertItemTemplate используется для настройки интерфейса редактирования или вставки интерфейса для FormView, поддерживающих такие функции

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

FormView выходит из макета Grid-Like, который можно увидеть в DetailsView

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

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

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

Представление FormView не может быть отрисовывается в Designer, пока не указан элемент ItemTemplate

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

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

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

Если вы хотите создать ItemTemplate объект вручную, можно добавить и настроить ObjectDataSource, перетащив его с панели элементов на Designer. Однако не устанавливайте источник данных FormView из Designer. Вместо этого перейдите в представление Источник и вручную задайте для свойства ID FormView DataSourceID значение 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 в Designer или вручную с помощью декларативного синтаксиса. При работе с шаблонами обычно быстрее работать непосредственно с декларативным синтаксисом, но вы можете использовать любой способ, который вам больше всего устраивает.

В следующей разметке показана декларативная разметка 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 CSS и ProductPropertyValue используются для указания стиля имен и значений свойств продукта в <table>. Эти классы CSS определяются в Styles.css и приводят к тому, что имена свойств будут выделены полужирным шрифтом и выровнены по правому краю, а к значениям свойств добавляется правая отступ.

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

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

Выходные данные с жесткими сведениямиПросмотр

Рис. 3. Выходные данные Жесткого просмотра сведений (щелкните для просмотра полноразмерного изображения)

Выходные данные Fluid FormView

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

Сводка

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

Как мы видели в этом руководстве, FormView обеспечивает более гибкий макет при отображении одной записи. В будущих руководствах мы рассмотрим элементы управления DataList и Repeater, которые обеспечивают тот же уровень гибкости, что и FormsView, но могут отображать несколько записей (например, 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.

НазадВперед