通过

演练：使用 FormView Web 服务器控件在网页中显示格式化数据

  • 项目

更新：2007 年 11 月

ASP.NET 提供了多种可用于显示和编辑数据记录的控件。在此演练中，您将使用 FormView 控件，该控件一次处理一个数据记录。FormView 控件的主要功能是允许您通过定义模板自行创建记录布局。通过使用模板，您可以完全控制控件内数据的布局和外观。FormView 控件还支持诸如编辑、插入和删除数据记录等更新。如果数据源向 FormView 控件提供多个记录，则该控件允许您对各记录进行分页。

3fs4k4w4.alert_note(zh-cn,VS.90).gif说明：

还可以使用 DetailsView 控件编辑各数据记录，该控件提供了数据的预定义布局。有关详细信息，请参见DetailsView Web 服务器控件概述。

本演练阐释以下任务：

  • 创建页以显示主/详细信息。

  • 使用 FormView 控件创建任意形式的数据记录布局。

  • 配置 FormView 控件以允许进行编辑。

先决条件

若要完成本演练，您需要：

  • Microsoft Visual Web Developer。

  • SQL Server Northwind 数据库的访问权限。有关下载和安装 SQL Server 示例数据库 Northwind 的信息，请参见位于 Microsoft SQL Server 网站上的“Installing Sample Databases”（安装示例数据库）。

    3fs4k4w4.alert_note(zh-cn,VS.90).gif说明：

    如果需要有关如何登录到运行 SQL Server 的计算机的信息，请与服务器管理员联系。

  • Microsoft 数据访问组件 (MDAC) 2.7 版或更高版本。

    如果您使用的是 Microsoft Windows XP 或 Windows Server 2003，那么您已经有了 MDAC 2.7。但是，如果使用 Microsoft Windows 2000，您可能需要升级您计算机上已经安装的 MDAC。有关更多信息，请参见 MSDN Library 的“Microsoft Data Access Components (MDAC) Installation”（Microsoft 数据访问组件 (MDAC) 安装）。

创建网站

按照下面的步骤创建一个新的网站和网页。

创建文件系统网站

  1. 打开 Visual Web Developer。

  2. 在**“文件”菜单上单击“新建”，然后单击“网站”。如果您使用的是 Visual Web Developer 速成版，则在“文件”菜单上单击“新建网站”**。

    出现**“新建网站”**对话框。

  3. 在**“Visual Studio 已安装的模板”之下单击“ASP.NET 网站”**。

  4. 在**“位置”**框中输入要保存网站页面的文件夹的名称。

    例如，键入文件夹名称“C:\WebSites\FormViewData”。

  5. 在**“语言”**列表中，单击您想使用的编程语言。

  6. 单击**“确定”**。

    Visual Web Developer 创建该文件夹和一个名为 Default.aspx 的新页。

使用下拉列表作为主表

在本部分的演练中，您将向页中添加一个下拉列表，并用一列产品名填充该列表。当用户选择某一产品时，该页将在 FormView 控件中显示该产品的详细信息。

创建和填充下拉列表

  1. 切换到或打开 Default.aspx 页。如果您使用已创建的网站，则请添加或打开可以在此演练中使用的页。

  2. 切换到“设计”视图。

  3. 在该页中键入“显示产品信息”。

  4. 从**“工具箱”的“标准”**组中，将一个 DropDownList 控件拖到该页上。

  5. 如果未显示**“DropDownList 任务”菜单，则请右击“DropDownList”控件，然后单击“显示智能标记”**。

  6. 在**“DropDownList 任务”菜单中，选择“启用 AutoPostBack”**复选框。

  7. 单击**“选择数据源”打开“数据源配置向导”**。

  8. 在**“选择数据源”列表中，单击“<新建数据源>”**。

  9. 单击**“数据库”**。

    这指定您要从支持 SQL 语句的数据库中获取数据。

    在**“为数据源指定 ID”**框中，将显示默认的数据源控件名称。可以保留此名称。

  10. 单击**“确定”**。

    向导将显示一页，在该页中可以选择连接。

  11. 单击**“新建连接”**按钮。

    随即出现**“添加连接”**对话框。

    • 如果**“数据源”列表未显示“Microsoft SQL Server (SqlClient)”，则请单击“更改”，然后在“更改数据源”对话框中选择“Microsoft SQL Server”**。

    • 如果出现**“选择数据源”页，则请在“数据源”列表中选择要使用的数据源类型。在此演练中，数据源的类型为“Microsoft SQL Server”。在“数据提供程序”列表中，单击“用于 SQL Server 的 .NET Framework 数据提供程序”，然后单击“继续”**。

  12. 在**“添加连接”**对话框中，执行以下操作：

    1. 在**“服务器名称”**框中，输入运行 SQL Server 的计算机的名称。

    2. 对于登录凭据，请选择适合访问正在运行的 SQL Server 数据库的选项（集成安全性或特定 ID 和密码），并根据需要输入用户名和密码。如果输入了密码，请选择**“保存密码”**复选框。

    3. 选择**“选择或输入数据库名称”**按钮，然后输入 Northwind。

    4. 单击**“测试连接”，并在确保连接生效时单击“确定”**。

    此时将返回到向导，其中填充了连接信息。

  13. 单击**“下一步”**。

  14. 确保选中**“是，将此连接另存为”复选框，然后单击“下一步”**。（可以保留默认的连接字符串名称。）

    该向导显示一页，从该页中您可以指定要从数据库中检索的数据。

  15. 单击**“指定来自表或视图的列”**。

  16. 在**“名称”列表中单击“产品”**。

  17. 在**“列”下，选择“ProductID”和“ProductName”**。

  18. 单击**“下一步”**。

  19. 单击**“测试查询”**以确保正在检索所需的数据。

  20. 单击**“完成”**。

    此时将返回到向导。

  21. 在**“选择要在 DropDownList 中显示的数据字段”列表中，单击“ProductName”**。

  22. 从**“为 DropDownList 的值选择数据字段”列表中，选择“ProductID”**。

    这指定当选择某一项时，ProductID 字段将作为该项的值返回。

  23. 单击**“确定”**。

在继续之前，请测试下拉列表。

测试下拉列表

  1. 按 Ctrl+F5 运行该页。

  2. 显示该页后，检查下拉列表。

  3. 选择一个产品名称，确保列表执行回发。

添加 FormView 控件

现在将添加一个 FormView 控件来显示产品详细信息。FormView 控件从您添加到页中的另一个数据源控件中获取数据。第二个数据源控件包含一个参数化查询，该查询可为当前在 DropDownList 控件中选定的项获取产品记录。

添加 FormView 控件

  1. 从**“工具箱”的“数据”组中，将一个“FormView”**控件拖到该页上。

  2. 如果未显示**“FormView 任务”菜单，则请右击“FormView”控件，然后单击“显示智能标记”**。

  3. 在**“FormView 任务”菜单的“选择数据源列表”中，单击“<新建数据源>”**。

    出现**“数据源配置向导”**对话框。

  4. 单击**“数据库”**。

    FormView 控件将与 DropDownList 控件从相同的表中获取数据。

    在**“为数据源指定 ID”**框中，将显示默认的数据源控件名称。可以保留此名称。

  5. 单击**“确定”**。

    **“配置数据源”**向导启动。

  6. 从**“应用程序连接数据库应使用哪个数据连接?”**列表中，选择您在本演练的前面创建并存储的连接。

  7. 单击**“下一步”**。

    向导将显示一页，在该页中可以创建 SQL 语句。

  8. 从**“指定来自表或视图的列”下的“名称”列表中，选择“产品”**。

  9. 在**“列”框中，选择“ProductID”、“ProductName”和“UnitPrice”**。

  10. 单击**“WHERE”**按钮。

    显示**“添加 WHERE 子句”**对话框。

  11. 从**“列”列表中，选择“ProductID”**。

  12. 从**“运算符”列表中，选择“=”**。

  13. 从**“源”列表中，选择“控件”**。

  14. 在**“参数属性”的“控件 ID”列表中，选择“DropDownList1”**。

    前面两个步骤指定查询将从您前面添加的 DropDownList 控件中获取产品 ID 的搜索值。

  15. 单击**“添加”**。

  16. 单击**“确定”关闭“添加 WHERE 子句”**对话框。

  17. 单击**“高级”**。

    出现**“高级 SQL 生成选项”**对话框。

  18. 选择**“生成 INSERT、UPDATE 和 DELETE 语句”**复选框。

    此选项将使向导基于您所配置的 Select 语句创建 SQL 更新语句。在本向导的后面，您将使用 FormView 控件来编辑和插入记录，这需要使用数据源控件中的更新语句。

  19. 单击**“确定”**。

  20. 单击**“下一步”**。

  21. 在“预览”页中，单击**“测试查询”**。

    向导将显示一个对话框，提示您输入一个要在 WHERE 子句中使用的值。

  22. 在**“值”框中键入“4”，然后单击“确定”**。

    出现产品信息。

  23. 单击**“完成”**。

在 FormView 控件中自定义布局

使用 FormView 控件的原因是您可以定义它所显示的记录的布局。在本部分演练中，您将通过编辑模板来自定义记录布局。对于您的布局，将使用 HTML 表。

设置布局格式

  1. 单击选择**“FormView”**控件，然后拖动控件右侧的尺寸柄，使该控件与当前页宽度相同。

  2. 拖动控件底部的尺寸柄，将控件的高度更改为约 400 像素。（准确的高度并不重要。）

  3. 右击该控件，单击**“编辑模板”，然后单击“ItemTemplate”**。

    控件重新以项模板编辑模式显示。项模板包含静态文本和用于在页运行时显示数据记录的控件。默认情况下，Visual Web Developer 使用数据源中每个数据列的数据绑定 Label 控件来填充项模板。此外，Visual Web Developer 还为用作标题的每个标签生成静态文本。

    生成的模板还具有三个分别带有**“编辑”、“删除”和“新建”**文本的 LinkButton 控件。

  4. 将插入点置于项模板的顶部，按几次 Enter 以留出空间，然后在模板顶部键入“产品详细信息”作为标题。

  5. 将光标置于控件和静态文本下方，然后在**“表”菜单中单击“插入表”**。

    现在创建 HTML 表作为文本和控件的容器。

  6. 在**“插入表”对话框中，将“行数”设置为 4，并将“列数”**设置为 2。

  7. 单击**“确定”关闭“插入表”**对话框。

  8. 选择表中的所有单元格，然后在**“表”菜单上选择“单元格格式”**。

    将显示**“单元格属性”**对话框。

  9. 将**“宽度”设置为 35 像素 (px)，并将“高度”**设置为 30 像素 (px)。

  10. 单击**“确定”关闭“单元格属性”**对话框。

  11. 将**“ProductIdLabel”**控件拖动到右上角的单元格中。

  12. 将**“ProductNameLabel”**控件拖动到右侧第二个单元格中。

  13. 将**“UnitPriceLabel”**控件拖动到右侧第三个单元格中。

  14. 在左侧的列中，键入要用作 Label 控件标题的静态文本。例如，在**“ProductIdLabel”**控件旁边的单元格中，键入“ID”。可以按您的意愿键入任意标题文本。

  15. 右击左侧列，单击**“选择”，然后单击“列”**。

  16. 在“属性”窗口中，将**“对齐”设置为“右”**，以使标题文本右对齐。

  17. 选择右侧列并拖动其右侧边框，以使表宽度足以显示长的产品名。

  18. 选择 Visual Web Developer 生成的文本（例如，文本**“ProductID”**）并将其删除。

  19. 右击**“FormView”控件的标题栏并单击“结束模板编辑”**。

    模板编辑器关闭，控件以您刚创建的布局显示。

测试 FormView 控件

现在可以测试布局。

测试 FormView 控件

  1. 按 Ctrl+F5 运行该页。

  2. 在 DropDownList 控件中，单击一个产品名。

    FormView 控件显示有关该产品的详细信息。

  3. 选择另一个产品，并确认 FormView 控件显示该产品的详细信息。

  4. 关闭浏览器。

向 FormView 控件添加“编辑”和“插入”功能

FormView 控件可以显示各个记录，并支持编辑、删除和插入功能。

在本部分的演练中，您将添加编辑当前所显示记录的功能。要编辑记录，需要定义包含文本框（还可能包含其他控件）的另一个模板。

向 FormView 控件添加编辑功能

  1. 右击**“FormView”控件，单击“编辑模板”，然后单击“EditItemTemplate”**。

    此时出现模板编辑器，并显示 EditItemTemplate 属性，该属性定义控件处于编辑模式时记录的布局。Visual Web Developer 使用不是键的每个数据列的 TextBox 控件填充编辑模板，并为标题添加静态文本。这与生成项模板的方式相似，区别在于在编辑模式中，Visual Web Developer 会生成文本框。

    和以前一样，生成的模板具有**“更新”和“取消”**LinkButton 控件，这些控件用于在编辑时保存和丢弃更改。

  2. 或者，也可以按照之前在本演练中使用项模板的方式添加布局表和安排控件。

  3. 右击**“FormView”控件，单击“编辑模板”，然后单击“InsertItemTemplate”**。

    与使用 EditItemTemplate 属性时相同，Visual Web Developer 将自动创建标签和 TextBox 控件的模板布局。当用户要向“产品”表中插入新记录时，将显示这些控件。生成的模板还具有**“插入”和“取消”**LinkButton 控件。

  4. 或者，也可以按照使用编辑项模板的方式添加布局表和安排控件。

  5. 右击**“FormView”控件并单击“结束模板编辑”**。

    3fs4k4w4.alert_security(zh-cn,VS.90).gif安全说明：

    ASP.NET 网页中的用户输入可能包括恶意的客户端脚本。默认情况下，ASP.NET 网页会验证用户输入，以确保输入不包括脚本或 HTML 元素。只要启用了此验证，就不需要显式检查用户输入中的脚本或 HTML 元素。有关更多信息，请参见脚本侵入概述。

测试编辑和插入功能

现在可以测试编辑和插入功能。

测试 FormView 控件的编辑功能

  1. 按 Ctrl+F5 运行该页。

  2. 在 DropDownList 控件中选择一种产品。

    产品详细信息出现在 FormView 控件中。

  3. 单击**“编辑”**。

    FormView 控件切换到编辑模式。

  4. 对产品名或单价进行更改。

  5. 单击**“更新”**。

    记录被保存，并且 FormView 控件切换到显示模式。显示中将反映更改。

  6. 选择不同的产品。

  7. 单击**“编辑”**。

  8. 对产品名进行更改。

  9. 单击**“取消”**。

    确认更改未保存。

测试 FormView 控件的插入功能

  1. 在 FormView 控件中单击**“新建”**。

    FormView 控件切换到插入模式，并显示两个空文本框。

  2. 输入新产品名和价格，然后单击**“插入”**。

    该记录保存在数据库中，并且 FormView 控件切换到显示 (ItemTemplate) 视图。

    3fs4k4w4.alert_note(zh-cn,VS.90).gif说明：

    新记录并未显示在下拉列表中。您将在下一节中添加该功能。

在下拉列表中重新显示更新的产品名

页现在允许您在“产品”数据库表中查看、编辑或删除记录。但是，下拉列表尚未与您在 FormView 控件中所做的更改同步。例如，如果插入新的“产品”记录，则除非关闭并重新打开页，否则下拉列表将不显示新记录。此外，该页最初显示“产品”表中的第一条记录，这可能不是您所期望的。

可以添加一些代码来解决这些小问题。在这一部分演练中，您将执行以下操作：

  • 在用户编辑或插入记录时更新下拉列表。

  • 当页首次显示时，向下拉列表中添加文本“(选择)”，然后在用户做出第一个选择时将该文本删除。

在编辑或插入记录时更新下拉列表

  1. 在页的“设计”视图中，选择**“FormView”**控件。

  2. 在“属性”窗口中，单击**“事件”**按钮以显示 FormView 控件的事件的列表。

  3. 双击**“ItemInserted”**框。

    Visual Web Developer 切换到代码编辑视图并为 ItemInserted 事件创建处理程序。

  4. 将下面突出显示的代码添加到事件处理程序中。

    Protected Sub FormView1_ItemInserted(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewInsertedEventArgs) _
   Handles FormView1.ItemInserted
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemInserted(object sender, 
        FormViewInsertedEventArgs e)
{
    DropDownList1.DataBind();
}

    在插入新记录后，代码将运行。它将下拉列表重新绑定到“产品”表，从而可刷新列表的内容。

  5. 切换到“设计”视图。（如果您使用的是代码隐藏页，则请切换到 Default.aspx 页，然后切换到“设计”视图。）

  6. 在“属性”窗口中，单击**“事件”**按钮以显示 FormView 控件的事件的列表。

  7. 双击**“ItemUpdated”**框。

    Visual Web Developer 切换到代码编辑视图并为 ItemUpdated 事件创建事件处理程序。

  8. 添加下面突出显示的代码。

    Protected Sub FormView1_ItemUpdated(ByVal sender As Object, _
   ByVal e As System.Web.UI.WebControls.FormViewUpdatedEventArgs) _
   Handles FormView1.ItemUpdated
      DropDownList1.DataBind()
End Sub

    [C#]

    protected void FormView1_ItemUpdated(object sender, 
    FormViewUpdatedEventArgs e)
{
    DropDownList1.DataBind();
}

    在更新记录后，代码将运行。它将下拉列表重新绑定到“产品”表，从而可刷新列表的内容。

  9. 按 Ctrl+F5 运行该页。

  10. 编辑某一记录的产品名，单击**“更新”**，然后检查下拉列表以确保显示更新的名称。

  11. 插入新产品记录，单击**“插入”**，然后检查下拉列表以确保新名称已添加至列表中。

最后一个步骤是更改下拉列表，以显示“(选择)”并仅在用户做出选择后显示 FormView 控件。

向 DropDownList 控件添加选择项

  1. 在“设计”视图中，双击页的空白部分。

    Visual Web Developer 将为页的 Load 事件创建事件处理程序。

  2. 在处理程序中，添加下面突出显示的代码。

    [Visual Basic]

    Protected Sub Page_Load(ByVal sender As Object, _
        ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then        FormView1.Visible = False    End If
End Sub

    [C#]

    protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        FormView1.Visible = false;
    }
}

    页运行时，代码将运行。它首先进行测试以确定这是否为回发；如果不是，则为第一次运行页。如果不是回发，则代码将隐藏 FormView 控件，因为您希望仅当用户显式选择记录以进行查看或编辑时才显示该控件。

  3. 在页的“设计”视图中，选择**“DropDownList”**控件。

  4. 在“属性”窗口的**“项”**框中，单击省略号 (...)。

    出现**“ListItem 集合编辑器”**对话框。

  5. 单击**“添加”**创建新项。

  6. 在**“ListItem 属性”下的“文本”**框中，键入“(选择)”。

  7. 单击**“确定”关闭“ListItem 集合编辑器”**对话框。

  8. 在“属性”框中，将**“AppendDataBoundItems”**设置为 true。

    在数据绑定过程中填充下拉列表时，产品信息将添加至您所定义的**“(选择)”**项。

  9. 在“属性”窗口中，单击**“事件”**按钮以显示 DropDownList 控件的事件的列表。

  10. 双击**“SelectedIndexChanged”**框。

  11. 添加下面突出显示的代码。

    [Visual Basic]

    Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender _
    As Object, ByVal e As System.EventArgs) _
    Handles DropDownList1.SelectedIndexChanged
        If DropDownList1.Items(0).Text = "(Select)" Then            DropDownList1.Items.RemoveAt(0)        End If        FormView1.Visible = True
End Sub

    [C#]

    protected void DropDownList1_SelectedIndexChanged(object sender, 
    EventArgs e)
{
    if(DropDownList1.Items[0].Text == "(Select)")    {        DropDownList1.Items.RemoveAt(0);    }    FormView1.Visible = true;
}

    当用户在 DropDownList 控件中选择项时，代码将运行。它将删除您前面添加的“(选择)”项（首先检查以确保它存在），因为在用户第一次选择一项后，您不再需要提示他们选择项。代码还将显示（取消隐藏）FormView 控件，以便用户可以看到他们所选择的记录。

  12. 按 Ctrl+F5 运行该页。

    该页只显示下拉列表，并显示单词**“(选择)”**。

  13. 在列表中选择一项。

    该项显示在 FormView 控件中。

  14. 检查下拉列表，注意列表中不再有单词**“(选择)”**。

后续步骤

此演练演示了使用 FormView 控件用自定义布局显示和编辑各个数据记录的基本步骤。通过 FormView 控件可以执行比本演练中所实现的更为复杂的格式设置。此外，还可以为其他模式（包括选择模式和插入模式）以及随记录显示的页眉和页脚创建模板。有关使用 FormView 的其他情况，请参见以下内容：

为 FormView Web 服务器控件创建模板

使用 FormView Web 服务器控件修改数据

请参见

概念

FormView Web 服务器控件概述

参考

DetailsView Web 服务器控件概述