介绍 ASP.NET 网页 - 显示数据

作者 Tom FitzMacken

本教程介绍如何在 WebMatrix 中创建数据库，以及使用 ASP.NET 网页 (Razor) 时如何在页面中显示数据库数据。 本文假设你已通过 ASP.NET 网页编程简介完成了本系列教程。

学习内容：

• 如何使用 WebMatrix 工具创建数据库和数据库表。
• 如何使用 WebMatrix 工具将数据添加到数据库。
• 如何在页面上显示数据库中的数据。
• 如何在 ASP.NET 网页 中运行 SQL 命令。
• 如何自定义 WebGrid 帮助程序以更改数据显示以及添加分页和排序。

讨论的功能/技术：

• WebMatrix 数据库工具。
• WebGrid 帮手。

所需操作

在上一教程中，你已了解 ASP.NET 网页 (.cshtml 文件) 、Razor 语法的基础知识以及帮助程序。 在本教程中，你将开始创建用于本系列其余部分的实际 Web 应用程序。 该应用是一个简单的电影应用程序，可用于查看、添加、更改和删除有关电影的信息。

完成本教程后，你将能够查看如下所示的电影列表：

但首先，必须创建一个数据库。

数据库简介

本教程仅提供对数据库的简要介绍。 如果你有数据库经验，可以跳过此简短部分。

数据库包含一个或多个包含信息的表，例如，客户、订单和供应商表，或学生、教师、班级和成绩表。 在结构上，数据库表类似于电子表格。 假设有一个典型的通讯簿。 对于通讯簿 (中的每个条目，即，对于) 的每个人，你都有一些信息，例如名字、姓氏、地址、电子邮件地址和电话号码。

(行有时称为 记录，列有时称为 fields.)

对于大多数数据库表，该表必须具有一个包含唯一值的列，例如客户编号、帐号等。 此值称为表 的主键，可用于标识表中的每一行。 在示例中，ID 列是上一示例中所示通讯簿的主键。

在 Web 应用程序中执行的大部分工作包括从数据库中读取信息并在页面上显示信息。 你还经常从用户收集信息并将其添加到数据库，或者修改数据库中已有的记录。 (本教程中将介绍所有这些操作 set.)

数据库工作可能非常复杂，可能需要专业知识。 但是，对于本教程集，你只需要了解基本概念，所有概念都将随你一起解释。

创建数据库

WebMatrix 包含的工具使创建数据库和在数据库中创建表变得容易。 (数据库的结构称为数据库的 schema.) 对于本教程集，你将创建一个数据库中只有一个表 — 电影。

打开 WebMatrix（如果尚未这样做），并打开在上一教程中创建的 WebPagesMovies 网站。

在左窗格中，单击“ 数据库 ”工作区。

功能区将更改以显示与数据库相关的任务。 在功能区中，单击“ 新建数据库”。

WebMatrix (与网站同名的 .sdf 文件（WebPagesMovies.sdf）) 创建SQL Server CE 数据库。 (你不会在此处执行此操作，但你可以将文件重命名为任何你喜欢的内容，只要它具有 .sdf 扩展名.)

创建表

在功能区中，单击“ 新建表”。 WebMatrix 将在新选项卡中打开表设计器。 (如果“新建表”选项不可用，请确保在左侧的树视图中选择新数据库。)

在水印显示“输入表名”) 顶部 (文本框中，输入“电影”。

表名下的窗格是定义各个列的位置。 对于本教程中的 “电影 ”表，仅创建几个列： ID、 标题、 流派和 年份。

在“ 名称 ”框中，输入“ID”。 在此处输入值将激活新列的所有控件。

按 Tab 切换到 “数据类型” 列表，然后选择 “int”。此值指定 ID 列将包含整数 (数字) 数据。

注意

此处不再 () ，但你可以使用标准 Windows 键盘手势在此网格中导航。 例如，可以在字段之间按 Tab 键，只需开始键入以选择列表中的项，等等。

按 Tab 键在 “默认值 ”框 (，即将其留空) 。 按 Tab 切换到“主键检查框，然后选择它。 此选项告知数据库 ID 列将包含标识单个行的数据。 (也就是说，每一行在 ID 列中都有一个唯一值，可用于查找该行。)

选择“ 是标识” 选项。 此选项告知数据库应为每个新行自动生成下一个序列号。 (仅当还选择了“是主密钥”选项时，“标识”选项才有效。)

单击下一个网格行，或按 Tab 两次以完成当前行。 任一手势保存当前行并启动下一行。 请注意， “默认值” 列现在显示 Null。 (Null 是默认值的默认值，因此可以说。)

定义完新 ID 列后，设计器将如下图所示：

若要创建下一列，请单击“ 名称” 列中的框。 为列输入“标题”，然后选择 nvarchar 作为 “数据类型 ”值。 nvarchar 的“var”部分告知数据库，此列的数据将是一个字符串，其大小可能因记录而异。 (“n”前缀表示“national”，表示字段可以保存任何字母表或书写系统的字符数据，也就是说，字段保存 Unicode data.)

选择 nvarchar 时，将显示另一个框，可在其中输入字段的最大长度。 输入 50，假设在本教程中使用任何电影标题的长度不超过 50 个字符。

跳过 默认值 并清除 “允许 Null” 选项。 不希望数据库允许将任何没有标题的电影输入到数据库中。

完成后移动到下一行时，设计器如下图所示：

重复这些步骤以创建名为“Genre”的列（长度除外），将其设置为仅 30。

创建另一个名为“Year”的列。对于数据类型，请选择 nchar (而不是 nvarchar) 并将长度设置为 4。 对于该年份，你将使用 4 位数字（如“1995”或“2010”），因此不需要大小可变的列。

完成的设计如下所示：

按 Ctrl+S 或单击“快速访问”工具栏中的“ 保存 ”按钮。 通过关闭选项卡关闭数据库设计器。

添加一些示例数据

在本系列教程的后面部分，你将创建一个页面，可在其中在窗体中输入新电影。 但是，现在，可以添加一些示例数据，然后可以在页面上显示。

请注意，在 WebMatrix 的 “数据库 ”工作区中，有一个树显示之前创建的 .sdf 文件。 打开新 .sdf 文件的 节点，然后打开 “表” 节点。

右键单击“ 电影 ”节点，然后选择“ 数据”。 WebMatrix 将打开一个网格，可在其中输入 Movies 表的数据：

单击“ 标题” 列并输入“哈利遇见莎莉时”。 移动到“ 流派 ”列 (可以使用 Tab 键) 并输入“浪漫喜剧”。 移动到“ 年份 ”列并输入“1989”：

按 Enter，WebMatrix 将保存新电影。 请注意， ID 列已填充。

输入另一个电影 (例如“随风而去”、“戏剧”、“1939”) 。 再次填充 ID 列：

输入第三个电影 (，例如“鬼怪”、“喜剧”) 。 作为试验，将 “年份 ”列留空，然后按 Enter。 由于未选择 “允许 Null” 选项，数据库将显示错误：

单击“ 确定 ”返回并修复“Ghostbusters”的年份为 1984) 的条目 (，然后按 Enter。

填写几部电影，直到有 8 个左右。 (输入 8 可以更轻松地在以后使用分页。但是，如果这太多，现在只输入几个。) 实际数据并不重要。

如果输入了所有电影且没有任何错误，则 ID 值是连续的。 如果尝试保存不完整的电影记录，则 ID 号可能不是连续的。 如果是这样，没关系。 这些数字没有任何固有的含义，唯一重要的是它们在 Movies 表中是唯一的。

关闭包含数据库设计器的选项卡。

现在，你可以转向在网页上显示此数据。

使用 WebGrid 帮助程序在页面中显示数据

若要在页面中显示数据，需使用 WebGrid 帮助程序。 此帮助程序在网格或表格中生成显示 (行和列) 。 如你所看到的，你将能够使用格式和其他功能来优化网格。

若要运行网格，必须编写几行代码。 这几行将用作在本教程中执行的所有数据访问的一种模式。

注意

实际上，在页面上显示数据有很多选项;帮助 WebGrid 者只是一个。 我们之所以选择本教程，是因为这是显示数据的最简单方法，而且相当灵活。 在下一个教程集中，你将了解如何使用更“手动”的方式来处理页面中的数据，这使你可以更直接地控制如何显示数据。

在 WebMatrix 的左窗格中，单击“ 文件” 工作区。

创建的新数据库位于 App_Data 文件夹中。 如果该文件夹尚不存在，WebMatrix 会为新数据库创建该文件夹。 (如果之前安装了 helpers，则文件夹可能已存在。)

在树视图中，选择网站的根目录。 必须选择网站的根目录;否则，新文件可能会添加到 App_Data 文件夹中。

在功能区中，单击“ 新建”。 在 “选择文件类型 ”框中，选择“ CSHTML”。

在“ 名称 ”框中，将新页面命名为“Movies.cshtml”：

单击“确定”按钮。 WebMatrix 打开一个新文件，其中包含一些主干元素。 首先，你将编写一些代码以从数据库获取数据。 然后，向页面添加标记以实际显示数据。

编写数据查询代码

在页面顶部的 和 } 字符之间@{输入以下代码。 (请确保在左大括号和右大括号之间输入此代码)

var db = Database.Open("WebPagesMovies");
var selectedData = db.Query("SELECT * FROM Movies");
var grid = new WebGrid(source: selectedData);

第一行打开前面创建的数据库，这始终是对数据库执行操作之前的第一步。 告知 Database.Open 要打开的数据库的方法名称。 请注意，名称中不包含 .sdf 。 方法 Open 假定它正在查找 .sdf 文件 (即 WebPagesMovies.sdf) ，并且 .sdf 文件位于 App_Data 文件夹中。 (前面我们注意到， App_Data 文件夹是保留的;此方案是 ASP.NET 对此名称做出假设的地方之一。)

打开数据库时，对它的引用将放入名为 的 db变量中。 (可命名为 anything.) 变量 db 是最终与数据库交互的方式。

第二行实际使用 Query 方法提取数据库数据。 请注意此代码的工作原理：db变量具有对打开的数据库的引用，使用变量 (db.Query) 调用 Query 方法db。

查询本身是一个 SQL Select 语句。 (有关 SQL 的一些背景信息，请参阅稍后的说明。) 在 语句中， Movies 标识要查询的表。 *字符指定查询应返回表中的所有列。 (还可以单独列出列，用逗号分隔)

查询的结果（如果有）将返回并在 变量中 selectedData 提供。 同样，变量可以命名为任何内容。

最后，第三行告知 ASP.NET 要使用帮助程序 WebGrid 实例。 使用 关键字 (keyword) 创建 (实例化) 帮助程序对象new，并通过 selectedData 变量向其传递查询结果。 新的 WebGrid 对象以及数据库查询的结果在 变量中 grid 可用。 稍后需要该结果才能在页面中实际显示数据。

在此阶段，数据库已打开，你已获取所需的数据，并且你已准备好 WebGrid 使用该数据的帮助程序。 接下来是在页面中创建标记。

提示

结构化查询语言 (SQL)

SQL 是大多数关系数据库中用于管理数据库中数据的语言。 它包含用于检索和更新数据的命令，以及用于创建、修改和管理数据库表中的数据的命令。 SQL 不同于 C#) 等编程语言 (。 使用 SQL，你可以告诉数据库你想要什么，而数据库的工作是找出如何获取数据或执行任务。 下面是一些 SQL 命令及其用途的示例：

Select * From Movies

SELECT ID, Name, Price FROM Product WHERE Price > 10.00 ORDER BY Name

第一个Select语句从 Movies 表中获取) 指定*的所有列 (。

第二 Select 个语句从 “产品 ”表中的“价格”列值大于 10 的记录中提取 ID、Name 和 Price 列。 命令根据 Name 列的值按字母顺序返回结果。 如果没有记录与价格条件匹配，该命令将返回空集。

INSERT INTO Product (Name, Description, Price) VALUES ('Croissant', 'A flaky delight', 1.99)

此命令将新记录插入 Product 表中，将“名称”列设置为“唐纳德”，将“说明”列设置为“片状的喜悦”，将价格设置为 1.99。

请注意，指定非数值时，该值括在单引号 (而不是双引号中，如 C#) 中所示。 在文本或日期值周围使用这些引号，而不是在数字周围使用引号。

DELETE FROM Product WHERE ExpirationDate < '01/01/2008'

此命令删除 Product 表中过期日期列早于 2008 年 1 月 1 日的记录。 (命令假定 Product 表具有此类列，当然。) 日期在此处以 MM/DD/YYYY 格式输入，但应以用于区域设置的格式输入。

Insert和 Delete 命令不返回结果集。 相反，它们返回一个数字，告知该命令影响了多少条记录。

对于 (插入和删除记录) 等操作，请求操作的进程必须具有数据库中的相应权限。 这就是为什么对于生产数据库，在连接到数据库时通常需要提供用户名和密码。

有几十个 SQL 命令，但它们都遵循类似于此处看到的命令的模式。 可以使用 SQL 命令创建数据库表、计算表中的记录数、计算价格以及执行更多操作。

添加标记以显示数据

在 元素内 <head> ，将 <title> 元素的内容设置为“Movies”：

<head>
    <meta charset="utf-8" />
    <title>Movies</title>
</head>

在 <body> 页面的 元素内，添加以下内容：

<h1>Movies</h1>
<div>
    @grid.GetHtml()
</div>

就这么简单。 变量 grid 是之前在代码中创建对象时创建 WebGrid 的值。

在 WebMatrix 树视图中，右键单击页面，然后选择“ 在浏览器中启动”。 你将看到类似于此页面的内容：

单击列标题链接可按该列进行排序。 能够通过单击标题进行排序是 WebGrid 帮助程序内置的一项功能。

顾名思义，该方法 GetHtml 生成显示数据的标记。 默认情况下， GetHtml 方法会生成 HTML <table> 元素。 (如果需要，可以通过在浏览器中查看页面的源来验证呈现。)

修改网格的外观

WebGrid像你刚才那样使用帮助程序很容易，但生成的显示是普通的。 帮助 WebGrid 程序具有各种选项，可用于控制数据的显示方式。 本教程中有太多内容需要探讨，但本部分将介绍其中一些选项。 本系列的后续教程中将介绍一些其他选项。

指定要显示的各个列

若要开始，可以指定仅显示某些列。 默认情况下，如你所见，网格显示 Movies 表中的所有四列。

在 Movies.cshtml 文件中，将刚刚添加的 @grid.GetHtml() 标记替换为以下内容：

@grid.GetHtml(
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

若要告诉帮助程序要显示哪些列，请包含 columns 方法的参数 GetHtml 并传入列集合。 在集合中，指定要包含的每个列。 通过包括 grid.Column 对象来指定要显示的单个列，并传入所需的数据列的名称。 (这些列必须包含在 SQL 查询结果中 ， WebGrid 帮助程序无法显示 query 未返回的列。)

再次在浏览器中启动 Movies.cshtml 页面，这次你会看到如下所示的显示， (请注意，) 没有显示 ID 列：

更改网格的外观

还有相当多的选项用于显示列，其中一些选项将在本集中的后续教程中介绍。 现在，本部分将介绍将网格作为一个整体设置样式的方法。

<head>在页面的 节中，紧跟在结束</head>标记之前，添加以下<style>元素：

<style type="text/css">
  .grid { margin: 4px; border-collapse: collapse; width: 600px; }
  .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
  .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
  .alt { background-color: #E8E8E8; color: #000; }
</style>

此 CSS 标记定义名为 grid、 head等的类。 还可以将这些样式定义放在单独的 .css 文件中，并将其链接到页面。 (事实上，本教程的后面部分将设置) 但是，为了简化本教程，它们位于显示数据的同一页中。

现在，你可以获取 WebGrid 帮助程序来使用这些样式类。 例如，帮助程序具有许多属性 (， tableStyle) 仅用于此目的 - 你为它们分配 CSS 样式类名，并且该类名作为帮助程序呈现的标记的一部分呈现。

更改 grid.GetHtml 标记，使其现在如下所示：

@grid.GetHtml(
    tableStyle: "grid",
    headerStyle: "head",
    alternatingRowStyle: "alt",
    columns: grid.Columns(
        grid.Column("Title"),
        grid.Column("Genre"),
        grid.Column("Year")
    )
)

此处的新增功能是已向 GetHtml 方法添加了 tableStyle、 headerStyle和 alternatingRowStyle 参数。 这些参数已设置为你刚才添加的 CSS 样式的名称。

运行页面，此时会看到一个看起来比以前平淡得多的网格：

若要查看方法生成的内容 GetHtml ，可以在浏览器中查看页面的源。 此处我们不会详细介绍，但重要的是，通过指定参数（如 tableStyle），你会导致网格生成 HTML 标记，如下所示：

<table class="grid">

标记 <table> 中添加了一个 class 属性，该属性引用前面添加的 CSS 规则之一。 此代码显示基本模式 - 方法的不同参数 GetHtml 允许引用方法随后生成的 CSS 类以及标记。 你对 CSS 类执行的操作由你决定。

添加分页

作为本教程的最后一个任务，你将向网格添加分页。 现在一次显示所有电影是没有问题的。 但是，如果你添加了数百部电影，页面显示将变得很长。

在页面代码中，将创建 WebGrid 对象的行更改为以下代码：

var grid = new WebGrid(source: selectedData, rowsPerPage: 3);

与之前唯一的区别是，你添加了一个 rowsPerPage 设置为 3 的参数。

运行页面。 网格一次显示 3 行，以及导航链接，用于浏览数据库中的电影：

即将推出下一步

在下一教程中，你将了解如何使用 Razor 和 C# 代码在表单中获取用户输入。 你将向“电影”页面添加一个搜索框，以便可以按标题或流派查找电影。

完整电影列表页面

@{
    var db = Database.Open("WebPagesMovies");
    var selectedData = db.Query("SELECT * FROM Movies");
    var grid = new WebGrid(source: selectedData, rowsPerPage: 3);
}

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Movies</title>
        <style type="text/css">
          .grid { margin: 4px; border-collapse: collapse; width: 600px; }
          .grid th, .grid td { border: 1px solid #C0C0C0; padding: 5px; }
          .head { background-color: #E8E8E8; font-weight: bold; color: #FFF; }
          .alt { background-color: #E8E8E8; color: #000; }
        </style>
    </head>
    <body>
        <h1>Movies</h1>
        <div>
            @grid.GetHtml(
                tableStyle: "grid",
                headerStyle: "head",
                alternatingRowStyle: "alt",
                columns: grid.Columns(
                    grid.Column("Title"),
                    grid.Column("Genre"),
                    grid.Column("Year")
                )
            )
        </div>
    </body>
</html>

其他资源

• 使用 Razor 语法进行 ASP.NET Web 编程简介

上一页下一页