在本系列文章中，您将学习如何开发一个简单的 Web 应用程序来管理您最喜爱的电影列表。尽管它很简单，但它将展示完整的 Web 应用程序的许多功能，包括使用数据库存储数据，提供让用户向数据库添加数据、编辑和删除数据的功能。（您可能听说过 CRUD – 创建、检索、更新、删除，现在您将学习如何在 WebMatrix 中实现这些操作！）
您还将学习如何通过 WebDeploy 和 WebMatrix 中的主机供应商来部署应用程序！
访问webmatrix专区，了解更详细的动态 https://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 中的默认内容替换为这样一个窗体。该窗体非常类似于在上一部分中创建的窗体。
以下为引用的内容：Edit a Movie
Name:
Genre:
Year:
|
从电影列表调用编辑网页
我们现在了解了编辑窗体的基本知识。但是如何使用您所选的特定电影的数据库内容来初始化该窗体？首先，我们看一下如何告诉此网页您希望编辑哪部电影，为此我们必须返回到 dataMovies.cshtml 网页。
您可能还记得，我们按照以下形式编写了一些列表项：
| li>a href="#">@row.Name, @row.Genre, @row.ReleaseYeara>li> |
超链接不会转到任何地方，因为 href 还仅仅是“#”。我们让超链接转到 EditMovie.cshtml 网页，如下所示：
| li>a href="EditMovie.cshtml ">@row.Name, @row.Genre, @row.ReleaseYeara>li> |
这很不错，但是无论您选择哪部电影，它将总是调用 EditMovie.cshtml，而且此网页不知道您正在编辑哪部电影。但是，ataMovies.cshtml 网页已经知道您编辑的电影，因为您已选择了它，所以您可以将您所选电影的 ID 传递给 EditMovie.cshtml，如下所示：
| EditMovie.cshtml?id= |
而且由于我们已经知道当前行的 id 是什么（@row.id），我们可以在写出列表时使用 Razor 写出该 ID，按如下形式更改
| li>a href="EditMovie.cshtml?id=@row.id">@row.Name, @row.Genre, @row.ReleaseYeara>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 Moviestitle> 6: link rel="stylesheet" type="text/css" href="movies-html5.css" /> 7: head> 8: 9: body> 10: header> 11: h1>A list of my Favorite Moviesh1> 12: header> 13: 14: div id="movieslist"> 15: ol> 16: li>a href="EditMovie.cshtml?id=1">It's a wonderful life, Comedy, 1946a>li> 17: li>a href="EditMovie.cshtml?id=2">Lord of the Rings, Drama, 2001a>li> 18: li>a href="EditMovie.cshtml?id=3">The Fourth World, Anime, 2012a>li> 19: li>a href="EditMovie.cshtml?id=4">The Lion King, Family, 1994a>li> 20: li>a href="EditMovie.cshtml?id=5">Forrest Gump, Comedy, 1994a>li> 21: li>a href="EditMovie.cshtml?id=6">The Million Year Journey, Anime, 2014a>li> 22: ol> 23: 24: a href="AddMovie.cshtml">Add a new moviea> 25: div> 26: 27: footer> 28: 29: This site was built using Microsoft WebMatrix. 30: 31: a href="https://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?
=）调用网页时，您可以使用 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 之前已拥有变量。而且正因为此，我们可以使用这些值初始化窗体。窗体使用 字段为我们提供文本框，这些字段支持“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 Movieh1> 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; 9: 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 Movieh1> 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 并将它们写回数据库。完成之后，您就会被从窗体重定向到列表并立即看到更新。在下一步中，将执行一项合理的事情，那就是为用户提供从数据库中删除记录的能力.