使用FormView的模板14

简介

前两篇教程中，我们了解了如何使用 TemplateFields 定制 GridView 和 DetailsView 控件的输出。使用 TemplateField 可以对特定字段的内容进行高度定制，但最终 GridView 和 DetailsView 的外观都是中规中矩的网格风格。这种网格状的布局对于很多场景来说已经是比较理想的了，但更多时候还需要更为灵活的显示布局。如果显示的是单条记录，可以使用 FormView 控件定制此类灵活的布局。

FormView 不像 DetailsView ，它不由字段组成，因此无法向 FormView 添加 BoundField 或TemplateField 。FormView 是通过 模板呈现的。将 FormView 想象为包含一个 TemplateField 的 DetailsView 控件。FormView 支持如下模板 ：

• ItemTemplate ：用于呈现 FormView 中显示的特定记录；
• HeaderTemplate ：用于指定可选的标题行；
• FooterTemplate ：用户指定可选的页脚行；
• EmptyDataTemplate ：FormView 的 DataSource 没有任何记录时 ， 使用 EmptyDataTemplate 代替 ItemTemplate 呈现控件的标记；
• PagerTemplate ：可用于定制启用了分页的 FormView 的分页界面；
• EditItemTemplate / InsertItemTemplate ：用于为启用了编辑或插入功能的 FormView 定制编辑界面或插入界面。

本篇教程中，我们将介绍如何使用 FormView 控件以更灵活的方式显示产品。FormView 的 ItemTemplate 将不包含单独的名称、类别、供货商等信息，而是使用一个合并的标题元素及 <table> 显示这些值（见图 1 ）。

图1 ：FormView 突破了DetailsView 所显示的网格状视图

步骤1 ：将数据绑定到FormView

打开FormView.aspx 页面并从 Toolbox 拖动一个 FormView 到设计器中。首次添加 FormView 时，它将显示为一个灰色框，提示我们需要一个 ItemTemplate 。

图2 ：必须添加一个 ItemTemplate 才能在设计器中显示 FormView

ItemTemplate 可以手动创建（ 通过声明式语法 ），也可通过在设计器中将 FormView 绑定到一个数据源控件自动创建。这个自动创建的 ItemTemplate 包含 HTML ，列出每个字段的名称，以及一个 Text 属性绑定到此字段值的 Label 控件。此方法还将自动创建一个 InsertItemTemplate 和 EditItemTemplate ，二者的数据源控件返回的每个数据字段都用输入控件的输入值进行赋值。

自动创建模板的方法为，从FormView 的智能标记中添加一个新的 ObjectDataSource 控件，该控件调用ProductsBLL 类的 GetProducts() 方法。这将创建含有 ItemTemplate 、InsertItemTemplate 和 EditItemTemplate 的 FormView 。由于我们不需要创建支持编辑或插入操作的 FormView ，因此从 Source 视图中移除 InsertItemTemplate 和 EditItemTemplate 。接下来，清除 ItemTemplate 中的标记以便于操作。

如果您选择手动创建 ItemTemplate ，可以从 Toolbox 中拖动 ObjectDataSource 到设计器，进行添加和配置。但请勿从设计器中设置 FormView 的数据源，而应进入 Source 视图，手动将 FormView 的 DataSourceID 属性设为 ObjectDataSource 的 ID 值，然后再手动添加 ItemTemplate 。

无论使用哪种方法，操作完成后FormView 的声明式标记都应如下所示 ：

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

花点时间在 FormView 的智能标记中选中 Enable Paging 复选框。这将为 FormView 的声明式语法添加 AllowPaging="True" 属性。再将 EnableViewState 属性设为 False。

步骤 2：定义 ItemTemplate 的标记

将 FormView 绑定到 ObjectDataSource 控件且设置为支持分页后，接下来就可以为 ItemTemplate 指定内容了。本教程中，将把产品名称显示在 <h3> 标题中。然后，我们将通过一个 HTML <table> ，将其他的产品属性显示在一个 4 列的表中。第1、3列为属性名称，第2、4列为属性值。

相应的标记可以通过设计器中的 FormView 的模板编辑界面输入，也可通过声明式语法手动输入。笔者发现用声明式语法操作模板往往效率更高。当然还是建议您选择自己喜欢的方式。

下列标记为完成 ItemTemplate 结构后的 FormView 的声明式语法：

<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") %> ）可直接注入模板的输出，即不需指定到某个 Label 控件的 Text 属性。例如，我们使用 <h3><%# Eval("ProductName") %></h3> 将 ProductName 值显示在一个 <h3> 元素中，对于产品 Chai 将呈现为 <h3>Chai</h3> 。

ProductPropertyLabel 和 ProductPropertyValue 这两个 CSS 类用于指定产品名称和值在 <table> 中的样式。CSS 类在 Styles.css 中定义，将属性名称设为加粗字体、右对齐，并正确填充属性值。

由于FormView 没有可用的 CheckBoxFields ，我们必须自行添加一个CheckBox 控件，以将 Discontinued 值显示为一个复选框。Enabled 属性设为 False 使其为只读，且 CheckBox 的 Checked 属性绑定到 Discontinued 数据字段的值。

完成ItemTemplate 后，产品信息显示方式更为灵活。比较上一篇教程的DetailsView 输出（ 图 3 ）与本教程生成的 FormView （ 图 4 ） 。

图3 ：表格状的 DetailsView 输出

图4 ：流畅的 DetailsView 输出

小结

使用TemplateFields 可以定制 GridView 和DetailsView 控件的网格形式输出效果。需要用较灵活的方式显示单条记录时，FormView 是一个理想的选择。与 DetailsView 一样， FormView 从其 DataSource 呈现单条记录。但不同的是后者只包含模板，而不支持字段。

如本教程中介绍的那样，FormView 为单条记录的显示提供了更为灵活的布局方式。后面的教程中还将介绍 DataList 和 Repeater 控件。它们与 FormsView 一样提供了较大的灵活性，而且可以显示多条记录（这点与 GridView 相似）。

快乐编程！