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

2019-03-19 07:05:19来源：站长之家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：第 7 部分，创建编辑数据网页

目前为止，您创建了电影网页，设置了它的样式，将它设计为受数据驱动，随后创建了一个窗体用于向数据库添加电影。下一步将是创建一个非常类似的窗体，用于编辑现有的电影列表。

我们看一下目前为止的应用程序：

可以看到，它有一个电影列表，能够通过底部的链接添加影片。为了建立鼠标悬停效果，我们使用《a》标记将列表中每个电影条目设置为超链接。如果在希望编辑电影时只需使用此超链接，那将非常有用，那么我们看一下如何实现此功能。

创建编辑网页

首先，在 WebMatrix 中创建一个新 CSHTML 网页，将它命名为 EditMovie.cshtml。此网页最终将包含一个窗体，其中填充了所选电影的详细信息，当您更改这些详细信息时，更改将提交回数据库。

将 EditMovie.cshtml 中的默认内容替换为这样一个窗体。该窗体非常类似于在上一部分中创建的窗体。

以下为引用的内容：

<h1>Edit a Movie</h1>

<p>Genre:<input type="text" name="formGenre" /></p>

</form>

从电影列表调用编辑网页

我们现在了解了编辑窗体的基本知识。但是如何使用您所选的特定电影的数据库内容来初始化该窗体？首先，我们看一下如何告诉此网页您希望编辑哪部电影，为此我们必须返回到 dataMovies.cshtml 网页。

您可能还记得，我们按照以下形式编写了一些列表项：

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

超链接不会转到任何地方，因为 href 还仅仅是“#”。我们让超链接转到 EditMovie.cshtml 网页，如下所示：

<li><a href="EditMovie.cshtml ">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

这很不错，但是无论您选择哪部电影，它将总是调用 EditMovie.cshtml，而且此网页不知道您正在编辑哪部电影。但是，ataMovies.cshtml 网页已经知道您编辑的电影，因为您已选择了它，所以您可以将您所选电影的 ID 传递给 EditMovie.cshtml，如下所示：

EditMovie.cshtml?id=<something>

而且由于我们已经知道当前行的 id 是什么（@row.id），我们可以在写出列表时使用 Razor 写出该 ID，按如下形式更改 <li>：

<li><a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYear</a></li>

现在查看 dataMovies.cshtml，会得到以下界面：

它看起来没有任何区别，我们看一下此网页的 HTML 代码。这不是您在 WebMatrix 中看到的 .cshtml 网页，而是服务器（从 cshtml 中的指令）生成并发送给浏览器的 HTML。

在 Internet Explorer 9 中，可以右键单击网页上的任何地方并选择“查看源代码”来查看此代码

以下为引用的内容：

<!DOCTYPE html>

2: <html lang="en">

3: <head>

4: <meta charset="utf-8" />

5: <title>My Favorite Movies</title>

6: <link rel="stylesheet" type="text/css" href="movies-html5.css" />

7: </head>

9: <body>

10: <header>

11: <h1>A list of my Favorite Movies</h1>

12: </header>

13:

14: <div id="movieslist">

15: <ol>

16: <li><a href="EditMovie.cshtml?id=1">It's a wonderful life, Comedy, 1946</a></li>

17: <li><a href="EditMovie.cshtml?id=2">Lord of the Rings, Drama, 2001</a></li>

18: <li><a href="EditMovie.cshtml?id=3">The Fourth World, Anime, 2012</a></li>

19: <li><a href="EditMovie.cshtml?id=4">The Lion King, Family, 1994</a></li>

20: <li><a href="EditMovie.cshtml?id=5">Forrest Gump, Comedy, 1994</a></li>

21: <li><a href="EditMovie.cshtml?id=6">The Million Year Journey, Anime, 2014</a></li>

22: </ol>

23:

24: <a href="AddMovie.cshtml">Add a new movie</a>

25: </div>

26:

27: <footer>

28:

29: This site was built using Microsoft WebMatrix.

30:

31: <a href="http://web.ms/webmatrix">Download it now.</a>

32:

33: </footer>

34:

35: </html>

现在您了解了在创建外观时，如何将此特定行的 ID 值写出到 HTML。现在，当 EditMovie.cshtml 加载时，我们可以获取此 ID 并使用它来查找我们感兴趣的特定记录。

完成编辑网页

我们返回到 EditMovie.cshtml。

还记得之前我们看到，如果在网页顶部放置一个 @{，并在其中写入代码，那么该代码就会在网页加载时执行。在这个位置放置代码来读取网页 URL 中包含的 ID，然后使用该 ID 查找此电影的名称、类型和上映年份，这再好不过了。

当使用我们所使用的语法（即 PageName.cshtml?<Parameter>=<Value>）调用网页时，您可以使用 Request 对象找到参数的值。所以，如果 EditMovie.cshtml?id=6，我们可以使用以下代码：

var id=Request["id"];

此代码要求创建一个局部变量（名为“id”），并使用参数（也为“id”）的值来初始化它。WebMatrix 非常智能，能够根据使用两个 id 的上下文意识到它们是不同的。

现在我们拥有了“id”，我们可以在 SQL“SELECT”查询中使用它来查找该电影的记录。

以下为引用的内容：

1: var id=Request["id"];

2: var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

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

4: var Movie = db.QuerySingle(SQLSELECT,id);

5: var MovieName=Movie.Name;

6: var MovieGenre=Movie.Genre;

7: var MovieYear=Movie.ReleaseYear;

非常简单，对吧？我们说“从 Favorites 选择 *，其中 ID 字段等于我们传入的 ID”，然后对数据库执行该语句。因为我们只想要一条记录，所以我们要求 db.QuerySingle 获取一条记录。

然后执行查询，将 Name、Genre 和 ReleaseYear 值加载到局部变量中。

这样做很好，但问题在于值位于变量中而不是窗体中，用户如何编辑它们呢？答案很简单，请记住此代码是在网页加载之前执行的，所以我们在写出 HTML 之前已拥有变量。而且正因为此，我们可以使用这些值初始化窗体。窗体使用 <input> 字段为我们提供文本框，这些字段支持“value”属性。我们现在可以直接在变量中使用此属性，以便初始化它们。

下面是目前为止该网页的全部代码。

以下为引用的内容：

2: var id=Request["id"];

3: var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

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

5: var Movie = db.QuerySingle(SQLSELECT,id);

6: var MovieName=Movie.Name;

7: var MovieGenre=Movie.Genre;

8: var MovieYear=Movie.ReleaseYear;

9: }

10:

11: <h1>Edit a Movie</h1>

12: <form action="" method="post">

13: <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

14: <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

15: <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

16: <p><input type="submit" value="Edit Movie" /></p>

17: </form>

现在当运行网页时，您可以看到它使用了 Movie 值进行初始化。首先运行 dataMovies.cshtml，如下所示：

然后，选择一部电影。您可以从上面的屏幕截图中看到，我选择了“The Fourth World”，它使用 id 值 3 调用 EditMovie.cshtml。

该网页然后加载，如下所示：

您可以在文本框中键入信息来更改任何值，但是当单击“Edit Movie”时不会发生任何事情。您可能还记得，在上一部分中的“Add Movie”网页上，该按钮会触发一次需要处理的窗体提交，也就是一个 HTTP POST（而不是在从超链接调用网页时发生的 HTTP GET）。

之前执行此任务的方式是使用 if（IsPost）代码块，我们在此处也同样这么做。

以下为引用的内容：

1: if(IsPost){

2: MovieName=Request["formName"];

3: MovieGenre=Request["formGenre"];

4: MovieYear=Request["formYear"];

5: }

窗体为 Name、Genre 和 Release Year 使用值 formName、formGenre 和 formYear（我添加了前缀“f”来表明它们来自窗体）。这些值在 Request 对象中传递。如果用户以任何方式编辑了这些值，新值将在这里显示，所以我们可以使用它们更新数据库。

要更新数据库，可以使用 SQL“UPDATE”命令，它具有以下语法：

UPDATE table SET column=value, column=value, column=value... WHERE key=value

所以，在我们的示例中，我们已经知道有 3 列可以更新 ID 的值，下面是创建查询和执行它的代码：

以下为引用的内容：

1: var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

2: db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

这段代码使用 SQL 参数（@0、@1 等，不要与标记 Razor 块开头的“@”混淆）使 SQL 更易于读取。记住 @ 值依次替换为了 db.Execute（）代码中的值，所以在本例中 MovieName 为 @0，MovieGenre 为 @1，等等。

最后，编辑电影之后，最好重定向回列表网页，使我们能够看到编辑结果，实现动态更新。在添加电影网页中执行相同操作。下面是代码：

以下为引用的内容：

Response.Redirect("dataMovies.cshtml");

为方便起见，这里给出了 EditMovies.cshtml 网页的完整代码：

以下为引用的内容：

2: var id=Request["id"];

3: var SQLSELECT = "SELECT * FROM Favorites where ID=@0";

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

5: var Movie = db.QuerySingle(SQLSELECT,id);

6: var MovieName=Movie.Name;

7: var MovieGenre=Movie.Genre;

8: var MovieYear=Movie.ReleaseYear;

10: if(IsPost){

11: MovieName=Request["formName"];

12: MovieGenre=Request["formGenre"];

13: MovieYear=Request["formYear"];

14: var SQLUPDATE = "UPDATE Favorites Set Name=@0, Genre=@1, ReleaseYear=@2 WHERE id=@3";

15: db.Execute(SQLUPDATE, MovieName, MovieGenre, MovieYear,id);

16: Response.Redirect("dataMovies.cshtml");

17: }

18: }

19:

20: <h1>Edit a Movie</h1>

21: <form action="" method="post">

22: <p>Name:<input type="text" name="formName" value="@MovieName" /></p>

23: <p>Genre:<input type="text" name="formGenre" value="@MovieGenre" /></p>

24: <p>Year:<input type="text" name="formYear" value="@MovieYear" /></p>

25: <p><input type="submit" value="Edit Movie" /></p>

26: </form>

现在看一下运行它时会发生什么。假设您首先打开了 dataMovies.cshtml 网页，选择了编辑一部电影，您应该看到如下界面：

如果现在编辑“Year”值，从 2012 更改为 2011，单击 Edit Movie 按钮之后，数据库将会更新，您将重定向到列表屏幕，现在在其中可以看到上映年份为 2011。

现在您已成功编辑了数据库中的一条记录！

小结

当创建数据驱动的网站时，重要的是不要仅为用户提供查看和添加记录的能力，还要为它提供编辑它们的能力。在这一部分中，您看到了使用 WebMatrix 实现此目的是多么容易，只需创建一个编辑网页，通过参数来使用期望的记录初始化此网页。您了解了如何使用 Razor 代码，使用来自数据库的正确值初始化窗体，然后接受包含任何更新值的 HTTP POST 并将它们写回数据库。完成之后，您就会被从窗体重定向到列表并立即看到更新。在下一步中，将执行一项合理的事情，那就是为用户提供从数据库中删除记录的能力.

标签：

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