使用 FormView 的模板 (VB)

作者 :Scott Mitchell

下载 PDF

与 DetailsView 不同,FormView 不由字段组成。 而是使用模板呈现 FormView。 在本教程中,我们将探讨如何使用 FormView 控件来呈现不太严格的数据显示。

简介

在最后两个教程中,我们了解了如何使用 TemplateFields 自定义 GridView 和 DetailsView 控件的输出。 TemplateField 允许对特定字段的内容进行高度自定义,但最终 GridView 和 DetailsView 都具有相当盒装的网格外观。 在许多情况下,此类网格式布局是理想的,但有时需要更流畅、更僵化的显示。 显示单个记录时,可以使用 FormView 控件进行这种流畅布局。

与 DetailsView 不同,FormView 不由字段组成。 不能将 BoundField 或 TemplateField 添加到 FormView。 而是使用模板呈现 FormView。 将 FormView 视为包含单个 TemplateField 的 DetailsView 控件。 FormView 支持以下模板:

  • ItemTemplate 用于呈现 FormView 中显示的特定记录
  • HeaderTemplate 用于指定可选的标题行
  • FooterTemplate 用于指定可选的页脚行
  • EmptyDataTemplate 当 FormView 缺少 DataSource 任何记录时, EmptyDataTemplate 将代替 ItemTemplate 来呈现控件的标记
  • PagerTemplate 可用于自定义启用了分页的 FormView 的分页界面
  • EditItemTemplate / InsertItemTemplate 用于自定义支持此类功能的 FormView 的编辑界面或插入界面

在本教程中,我们将探讨如何使用 FormView 控件来呈现不太严格的产品显示。 FormView 的 ItemTemplate 不使用名称、类别、供应商等字段,而是使用标头元素和 <table> (的组合显示这些值,请参阅图 1) 。

FormView 从 DetailsView 中看到的 Grid-Like 布局

图 1:在 Details Grid-Like View (单击以查看全尺寸图像)

步骤 1:将数据绑定到 FormView

打开页面,FormView.aspx将“工具箱”中的 FormView 拖动到Designer。 首次添加 FormView 时,它显示为灰色框,指示我们需要 ItemTemplate

在提供 ItemTemplate 之前,无法在Designer中呈现 FormView

图 2:在提供 (单击查看全尺寸图像) 之前,无法在DesignerItemTemplate中呈现 FormView

ItemTemplate可以通过声明性语法) 手动 (创建 ,也可以通过Designer将 FormView 绑定到数据源控件来自动创建 。 此自动创建的 ItemTemplate 包含列出每个字段的名称的 HTML,以及一个标签控件,其 Text 属性绑定到字段的值。 此方法还自动创建 InsertItemTemplateEditItemTemplate,这两者都由数据源控件返回的每个数据字段的输入控件填充。

如果要自动创建模板,请从 FormView 的智能标记添加一个新的 ObjectDataSource 控件,用于调用 ProductsBLL 类的 GetProducts() 方法。 这将创建包含 、 InsertItemTemplateEditItemTemplateItemTemplateFormView。 从“源”视图中删除 InsertItemTemplateEditItemTemplate ,因为我们对创建支持编辑或插入的 FormView 不感兴趣。 接下来,清除 中的 ItemTemplate 标记,以便我们可以从中获取一个干净的石板。

如果想要手动生成 ItemTemplate ,可以通过将 ObjectDataSource 从“工具箱”拖动到Designer来添加和配置 ObjectDataSource。 但是,不要从Designer设置 FormView 的数据源。 而是转到“源”视图,手动将 FormView 的 DataSourceID 属性设置为 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> 在四列表中显示剩余的产品属性,其中第一列和第三列列出属性名称,第二列和第四列列出其值。

此标记可以通过Designer中的 FormView 模板编辑界面输入,也可以通过声明性语法手动输入。 使用模板时,我通常会发现直接使用声明性语法会更快,但可以随意使用你最熟悉的任何技术。

以下标记显示 的 结构完成后的 ItemTemplateFormView 声明性标记:

<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 属性。 例如,我们使用 ProductName 在 元素<h3><%# Eval("ProductName") %></h3><h3>显示值,对于产品,Chai 将呈现为 <h3>Chai</h3>

ProductPropertyLabelProductPropertyValue CSS 类用于指定 中的<table>产品属性名称和值的样式。 这些 CSS 类在 中 Styles.css 定义,导致属性名称加粗且右对齐,并在属性值中添加右填充。

由于 FormView 中没有可用的 CheckBoxField,因此为了将 Discontinued 值显示为复选框,必须添加自己的 CheckBox 控件。 属性 Enabled 设置为 False,使其为只读,并且 CheckBox 的 Checked 属性绑定到数据字段的值 Discontinued

完成后 ItemTemplate ,产品信息以更流畅的方式显示。 将上一教程 (图 3) 中的 DetailsView 输出与本教程中 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 年以来一直从事 Microsoft Web 技术工作。 Scott 担任独立顾问、培训师和作家。 他的最新书是 山姆斯在24小时内 ASP.NET 2.0自学。 可以在 上联系 mitchell@4GuysFromRolla.com他, 也可以通过他的博客联系到他,该博客可在 http://ScottOnWriting.NET中找到。

特别感谢

本教程系列由许多有用的审阅者查看。 本教程的首席审阅者是 E.R. Gilmore。 有兴趣查看我即将发布的 MSDN 文章? 如果是,请在 处放置一行 mitchell@4GuysFromRolla.com。