系列教程使用微软WebMatrix进行Web开发(5)

2019-03-19 07:05:48来源：站长之家Chinaz.com 阅读 ()

在本系列文章中，您将学习如何开发一个简单的 Web 应用程序来管理您最喜爱的电影列表。尽管它很简单，但它将展示完整的 Web 应用程序的许多功能，包括使用数据库存储数据，提供让用户向数据库添加数据、编辑和删除数据的功能。（您可能听说过 CRUD – 创建、检索、更新、删除，现在您将学习如何在 WebMatrix 中实现这些操作！）

您还将学习如何通过 WebDeploy 和 WebMatrix 中的主机供应商来部署应用程序！

访问webmatrix专区，了解更详细的动态 http://www.chinaz.com/zt/webmatrix/

内容

第 1 部分：向您介绍 WebMatrix 以及如何安装和使用它。

第 2 部分：指导您使用 WebMatrix 创建您的第一个网页。

第 3 部分：让您熟悉 CSS 和样式表，使您可以使自己的页面更加美观。

第 4 部分：介绍布局，以及如何为各个页面中的相同代码使用 WebMatrix 中的布局。

第 5 部分：介绍数据，您将学习如何在网页中使用数据库，以及使网页更加动态。

第 6 部分：介绍如何构建一个页面来让用户可以向数据库添加数据，使您的网站可以呈现该数据。

第 7 部分：介绍如何在一个页面中编辑数据库，实现更改的自动更新。

第 8 部分：最终完成该应用程序，向您展示如何为数据创建删除页面。

第 9 部分：介绍如何使用 WebMatrix 将网站发布到 Internet.

Web 开发 101：第 5 部分，使用数据

在本系列文章中，目前为止您了解了如何使用 WebMatrix 创建 HTML 网页，如何使用级联样式表（CSS）有效设置网页的样式，以及如何使用 WebMatrix 中内置的布局功能和“Razor”语法来将您的注意力集中在网页的内容上，而不是分散到其他杂事上。

在本章中，我们将介绍如何转变您已在使用的静态电影列表，我们将使其动态化。实际来讲，无需使用 HTML 手动编写电影列表，我们会将它们放在一个数据库中，我们还会让 WebMatrix 读取该数据库并为我们生成 HTML。通过这种方式，我们可以轻松更改数据库，以及自动更新网页。

在 WebMatrix 中创建数据库

首先，在 WebMatrix 中找到“Databases”工作区并打开它。在窗口中央，您将看到选项“Add a Database to your site”。

选择此选项，WebMatrix 将创建一个名为“Movies.sdf”的新数据库。如果您的网站有一个不同的名称，比如“foo”，WebMatrix 将基于该名称创建一个数据库（也即 foo.sdf）。

您将在窗口左侧的数据库资源管理器中看到该数据库：

向数据库添加表

在窗口顶部，您将看到一个工具功能区，其中显示了您可以对数据库执行的不同操作，包括创建表和查询，以及迁移到其他数据库。从此功能区，选择“New Table”工具。如果选择它时未发生任何事情，请确保您在数据库资源管理器中选择了 Movies.sdf。

WebMatrix 将为您创建表并打开列编辑器。这允许您在数据库表中创建新列。在数据库词汇中，记录指的是特定实体的所有数据。所以，举例而言，一个人的数据可能是他的姓名、年龄、地址和电话号码记录。列是各个数据部分的值，无论它们位于哪个记录中。所以，在上面的示例中，Name 将是一列，Age 也是。

所以，对于我们的电影，我们将创建一个类似于下图的数据库：

首先，我们创建 ID。ID 是特定记录的标识符。您无需拥有 ID，尤其是对于这样的简单数据库，但是创建 ID 是一种很好的做法。当您构建更加复杂的数据库时，您将发现它们对于跟踪和查询数据非常重要。

在列编辑器中，如下图所示，填写详细信息：

这会为该列提供名称“id”，并将它指定为一个编号（bigint），该编号必须有一个值（将 Allow Nulls 设置为 False）。然后它指定该字段为一个 ID，这表示我们告诉了数据库我们将此字段用作 ID。这样做的好处是，只要我们向数据库添加新记录，它就会自动更新 ID，所以我们无需担忧如何跟踪最新添加的内容、获得它的 ID 并计算出新记录。

现在我们表明了此字段是主键。再次说明，“主键”是一个数据库词汇。键是数据库中具有特殊值的列，通常是您在挑选记录时希望使用的主要内容。数据库使用它们来简化数据的查找。例如，您的工作场所可能为您分配了一个员工编号。此编号使得很容易跟踪您，因为搜索编号“333102”可能比搜索员工“Nizhoni Benally”简单得多，尤其是在您企业中拥有大量员工时。这使您的员工编号成为了用于查找您的键。您可以在数据中使用许多键，主键应该视为最重要的一个。

所以，当在数据库中记录电影时，我们将为每个电影提供一个 ID，我们将该 ID 设置为主键。

使用功能区中的“New Column”按钮创建另外 3 列。您将在表中看到 3 个未命名的空白列。

选择第一个空白行，将它命名为“Name”，将数据类型设置为“ntext”。确保“Is Identity”和“Is Primary Key”为 False。

对于第二个空白行，将它命名为“ReleaseYear”并将它的数据类型保持为“bigint”。

对于第三个空白行，将它命名为“Genre”并将它的数据类型设置为“ntext”。

按下 WebMatrix 标题栏中的保存按钮保存表。

您将看到一个对话框，要求输入表的名称。将它命名为“Favorites”。

您将看到在窗口左侧显示了该表。

向表添加数据

在此资源管理器中双击该表，该表将打开，其中没有任何数据。

将光标放在 Name 字段中并向其中键入一个值。完成之后，按下键盘上的 Tab 键移动到下一个字段（Release Year），为它提供一个值并按 Tab 键，为 Genre 提供一个值。

当再次按下 Tab 键时，您将看到 id 字段中拥有编号“1”。在此列中不输入任何内容，让数据库输入内容，这是一种不错的想法。您会看到光标现在位于字段中，所以再此按下 Tab 键返回到 Name 字段。

多次重复这些步骤输入一些电影。下面是我们目前使用的 4 部电影。

创建使用数据的网页

在上一篇文章中，您看到了网站使用了布局来创建 HTML <head>、样式、正文以及其他内容。如果您是按照本文所述步骤操作的，那么您就已经设置了一个 _siteLayout.cshtml 和一个 _PageStart.cshtml。如果您没有，此代码的剩余内容将不会生效，您将需要返回执行第 3 部分中的步骤才能使它们生效。

使用布局的一个好处是，您现在仅需要编写特定网页的特定代码，模板上的 @RenderBody（）调用会将它注入到完整的页面中。

记住这一点之后，创建一个新 CSTHML 网页并将它命名为 dataMovies.cshtml。

将此网页中的所有代码替换为我们目前为止使用的静态 HTML

以下为引用的内容：

1: <div id="movieslist">

2: <ol>

3: <li><a href="#">It's a wonderful life</a></li>

4: <li><a href="#">Lord of the Rings</a></li>

5: <li><a href="#">The Fourth World</a></li>

6: <li><a href="#">The Lion King</a></li>

7: </ol>

8: </div>

仔细分析此代码，您将看到它是一个 <div>，指定了一个列表 <ol>。

该静态列表中包含 4 项。如果我们想要第 5 项，可以添加一个新 <li></li> 条目。

当从数据库拉取数据时，网页不知道数据库中有多少项，所以它将必须生成“n”个 <li></li> 元素，其中“n”是数据库中的记录数量。这非常适合于代码循环，稍后您将编写这样一个循环。

但是在这么做之前，首先需要告诉页面数据库的信息。在 dataMovies.cshtml 的顶部，输入以下代码：

以下为引用的内容：

1: @{

2: var db= Database.Open("Movies");

3: var sqlQ = "SELECT * FROM Favorites";

4: var data = db.Query(sqlQ);

5: }

您可能还记得上一部分中的“@”符号，它用于告诉服务器下面的代码是它将执行的 Razor 代码。在本例中，我们拥有许多行代码，所以无需在每行代码前面添加“@”，可以使用 @{，然后编写所有代码，最后输入 } 结束代码块。

如果您使用 Java、C++、C 或 C# 编写代码，您可能认识它们，它们就是所谓的“花括号”。

我们逐行看一下此代码：

var db= Database.Open（“Movies”）;

“var”表示变量，这是一个包含数据的可寻址项。该代码告诉服务器打开名为“Movies”的数据库，将对此数据库的引用存储在我们称为“db”的变量中。

var sqlQ = “SELECT * FROM Favorites”;

然后这行代码创建一个名为 sqlQ 的变量，将 SQL 命令“SELECT * FROM Favorites”存储在其中。

当使用数据库时，常常使用一种名为“结构化查询语言”（SQL）的语言来查找您想要的数据。实际上，它不仅仅能够查询数据，还可用于插入新数据，您在后面的部分中将看到，但现在我们仅使用它来获取数据。

当从数据库获取数据时，经常使用“SELECT”命令。语法是“SELECT <某种内容> FROM <某个地方> WHERE <条件>”

<某种内容> 可以是一个字段列表或表示“所有内容”的通配符（*）字符，我们没有设置条件，所以“SELECT * FROM Favorites”命令要求数据库获取 Favorites 表中的所有列和所有记录。

var data = db.Query（sqlQ）;

这使网页上的主要操作。前面您打开了数据库并使用变量“db”引用了它。WebMatrix 非常智能，能够知道您打开的是数据库，WebMatrix 中的数据库对象包含您可以调用的许多函数（通常称为“方法”）。其中一种是“Query”方法，它运行一条 SQL 命令。您将该命令作为一个字符串传递给它，数据库执行它，返回一组记录。然后会将这一组记录加载到名为“data”的变量中。现在我们拥有了自己的数据，可以对它执行一些有趣的操作了。

以下为引用的内容：

2: var db= Database.Open("Movies");

3: var sqlQ = "SELECT * FROM Favorites";

4: var data = db.Query(sqlQ);

5: }

6: <div id="movieslist">

7: <ol>

8: <li><a href="#">It's a wonderful life</a></li>

9: <li><a href="#">Lord of the Rings</a></li>

10: <li><a href="#">The Fourth World</a></li>

11: <li><a href="#">The Lion King</a></li>

12: </ol>

13: </div>

我们已从数据库获取了数据，但还未对它执行任何操作。我们的网页上仍然是静态 HTML。我们更改一下这些 HTML。

首先，删除除 /<li> 字段外的所有内容，使您的 <ul> 类似于：

1:<ul>

2: <li><a href="#">It's a wonderful life</a></li>

3: </ul>

还记得在前面我们说过，如果有“n”条数据库记录，我们的列表中就应该有“n”个条目。这可以使用循环来实现，那么我们现在编写一个循环。

使用“Razor”，使用 @ 符号添加代码，编写的循环将类似于：

以下为引用的内容：

<ul>

2: @foreach(var row in data)

3: {

4: <li><a href="#">It's a wonderful life</a></li>

5: }

6: </ul>

这段代码告诉服务器计算数据中的行数，针对每一行编写一个 <li> 标记。

当然，得到的结果将是编写 4 次“It’s a wonderful life”，因为我的数据库中有 4 个条目。

服务器仅知道它被告知的操作，该代码告诉它写出数据中每行的电影题目。

让我们变得更加智能一些。我们真正想做的是，对于数据中的每一行，写出该行中的电影名称。换句话说，丢掉内容“It’s a wonderful life”并将它替换为循环目前正在查看的行中的电影名称。

当创建数据库时，您将包含电影名称的列命名为“Name”，您已经知道当前的记录名为“row”，所以可以推算出值 row.Name 将包含电影的名称。

因此，如果您将代码更改为以下内容：

以下为引用的内容：

<ul>

2: @foreach(var row in data)

3: {

4: <li><a href="#">@row.Name</a></li>

5: }

6: </ul>

现在会告诉服务器，对于数据中的每一行，将该行中的“Name”字段写入到《li》元素中，我们看一下它的外观：

您可以看到我们再次显示了所有电影！

现在网页是动态的，它基于数据库中的数据来加载电影，我们向数据库添加另一个电影并看看会发生什么。

返回到数据库编辑器，打开 Favorites 表，添加一个新数据行，如下所示：

然后运行网页。无需编写任何 HTML，列表上即可显示新的电影。

如果您之前像这样使用内联语言编写过代码，您可能会注意到 WebMatrix 非常智能，我在《li》中以内联方式添加内容时，它将写出该内容。我无需编写命令告诉它“写出 row.Name”或执行任何类似操作，我只是在希望出现“@row.Name”的地方添加了它。它使编辑和维护 CSHTML 文件比 PHP 等语言简单得多，在这些语言中需要使用“《？php echo（row.Name）;》”或类似内容。

这还使我能够无缝地将动态和静态内容混合在一起。例如，如果我将代码更改为：

以下为引用的内容：

1: <div id="movieslist">

2: <ol>

3: @foreach(var row in data){

4: <li><a href="#">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

5: }

6: </ol>

7: </div>

结果将是静态 HTML（逗号）和动态的数据库驱动内容（字段）的无缝集成，如下所示：

这样，您就创建了您的第一个数据驱动的动态网页。非常简单！

小结

在这一部分中，您获取目前为止创建的电影列表，将它转换为数据驱动的动态网站。您创建了一个 SQL Server Compact 数据库，它包含一个表，表中包含您最喜爱的电影，然后您了解了如何编写代码来从数据库中获取电影，并以 HTML 的形式将它们的详细信息写到浏览器上。与第三部分介绍的布局功能相结合，您可以看到为此功能创建 CSHTML 网页非常简单。

在下一部分中将介绍下一步 – 在您允许用户向数据库添加电影，并且他们不能像您一样访问 WebMatrix 源代码时该如何做。您将了解如何创建 Web 界面来允许该他们使用自己的浏览器键入详细信息，然后您编写的代码会将这些详细信息加载到数据库中，网站会迅速更新来反映更改！

在下一部分中，您将了解如何创建一个网页来允许用户向您的网站添加数据。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有