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

2019-03-19 07:04:55来源：站长之家阅读 ()

在本系列文章中，您将学习如何开发一个简单的 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：第 6 部分，创建添加数据网页

目前为止您了解了如何在 WebMatrix 中创建网站，如何使用样式和布局使网页更小且更容易维护，以及使浏览器能够更快地下载和呈现。您创建了动态的和数据驱动的网页，本部分将介绍如何创建网页来向数据库添加数据。

创建和链接添加网页

使用 WebMatrix，在 Files 工作区中，创建一个新网页并将它命名为“AddData.cshtml”。

删除 WebMatrix 为您创建的网页的默认内容，将它替换为

<h1>Add a New Movie to the database</h1>

现在返回到“dataMovies.cshtml”网页。打开它，它应该类似于以下形式：

以下为引用的内容：

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

var sqlQ = "SELECT * FROM Favorites";

var data = db.Query(sqlQ);

}

<ol>

@foreach(var row in data){

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

}

</ol>

</div>

在结束 </div> 之前，添加下面这行 HTML。如果您还记得，前面某一部分中介绍过这是一个定位标记，HTML 就是通过它定义另一个网页的链接的。

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

运行网站并在浏览器中查看该网页。它应该类似于下图：

单击“Add a new movie”链接，您将转到之前创建的网页。

目前该网页中还没有太多内容。下一步将向其中添加内容。

作为附加练习，您可能注意到“Add a New Movie to the Database”文本与剩余部分具有不同的样式。它是一个 <h1>，但它设置样式的方式与页眉 h1 并不相同。我们看看能不能修复这一问题。（提示，页眉 h1 被视为 <header> 标记的子标记，但它不是。需要向 CSS 文件中添加什么内容才能以相同方式设置样式？）

创建添加电影表格

通常，当使用 HTTP 时，您的浏览器会使用 HTTP 协议中的 GET 谓词向服务器发出请求，从名称可以看出，该谓词从服务器获取信息。您一直都是这么做的，但可能还没认识到这一点，因为使用 GET 是浏览器请求网页的一种隐含方式。HTTP 协议还支持一个名为 POST 的变量，它可用于向服务器发送回信息。

可以看到，拥有动态的应用程序非常好，但下一个逻辑问题是：向服务器发送数据，让服务器对数据执行某项操作，然后返回结果，这有多难？我相信您已见过数百个这样的网站：您键入一些信息，按下提交按钮将该信息发送给服务器。

这类应用程序使用了 HTML 窗体。当单击“提交”时，浏览器使用 POST 谓词将窗体字段中的信息发送到服务器。再一次说明，所有这些操作都是在幕后完成的，您无需执行任何专门的操作来使用它，但让您服务器端的代码知道请求使用了什么样的谓词很有用，这样服务器就可以相应地做出响应。您将了解如何实现此目的，以便将电影添加到数据库。

我们首先从一个非常简单的窗体开始。它不是很美观，但能够顺利完成任务。

1: <h1>Add a New Movie to the Database</h1>

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

3: <p>Name:<input type="text" name="formName" /></p>

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

5: <p>Year:<input type="text" name="formYear" /></p>

6: <p><input type="submit" value="Add Movie" /></p>

7: </form>

这是它的外观。就像我说的，它不是很美观，但稍后我们将创建一些 CSS 来使它更加漂亮。

现在让我们看一下刚才编写来创建此窗体的 HTML。

第一个新内容是 <form》>标记。该标记定义一个窗体，告诉服务器用户何时按下《submit》按钮，窗体中必须显示哪些内容，它所执行的操作将是 HTTP POST。由于 action 参数是空的，所以该网页（也即 AddMove.cshtml）将处理来自窗体的 post。

以下为引用的内容：

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

在 <form> 标记中，您将看到有 3 个 <input> 控件。它们使用 HTML <input> 控件，该控件可以有许多类型设置，在本例中类型为“text”，这会提供一个基本的文本框，用户可以用于输入文本。每个文本框都有一个名称，该名称是一个变量，服务器将使用它存储用户在提交之前输入到文本框中的值。

最后，我们有一个类型为“submit”的 <input> 控件，它定义提交按钮。当用户按下此按钮时，将调用 HTTP POST 操作，用户输入的数据将发送到服务器。

现在如果您按下该按钮，不会发生任何事情。这是因为您还未编写代码来处理来自服务器的回发。接下来将完成此任务。

处理来自窗体的数据

在创建该窗体时，您将 action 参数保留为空，这表明您指定了此网页应该接受窗体提交。

为此，您可以更新“AddMovie.cshtml”网页，添加一些在加载网页时将执行的代码。为此，在网页顶部添加一个代码块，如下所示：

以下为引用的内容：

1: @{

2: // Code to execute

3: }

5: <h1>Add a New Movie to the Database</h1>

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

7: <p>Name:<input type="text" name="formName" /></p>

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

9: <p>Year:<input type="text" name="formYear" /></p>

10: <p><input type="submit" value="Add Movie" /></p>

11: </form>

之前您已看到第一次调用网页时，实现方式是在浏览器中键入它的地址（或单击 Run 来启动该文件），您的浏览器使用 HTTP GET 谓词请求网页。随后，当按下 Submit 按钮时，由于 action 属性是空的，所以 HTTP POST 操作调用了相同网页。

所以，在您的代码中，您将需要通过某种方式了解是正在使用 GET 获取页面还是正在使用 POST 执行它。幸运的是，.NET Framework 支持检查谓词，而无需分解 HTTP 标头来检查您正在获取的数据类型，只需使用 If（IsPost）检查语句，如果它为 true，则表明用户使用了一个窗体来发布信息。

以下为引用的内容：

2: If(IsPost)

3: {

4: // Do something on the POST

5: }

6: }

当设置该窗体时，您为用户提交的值提供了名称（formName、formGenre、formYear）。当浏览器调用服务器时，它将使用此名称，方法是发送一条包含“formName=something”、“formGenre=something”、“formYear=something”等的消息。

所以，您首先将需要设置一些服务器变量来持有这些值，然后您从 HTTP POST 中读取它们。这比听起来简单得多：）

以下为引用的内容：

2: var MovieName="";

3: var MovieGenre="";

4: var MovieYear="";

5: if(IsPost){

6: MovieName=Request["formName"];

7: MovieGenre=Request["formGenre"];

8: MovieYear=Request["formYear"];

9: }

10: }

在这里可以看到，设置了 3 个变量（MovieName、MovieGenre 和 MovieYear），它们使用用户提交的值进行了初始化。在下一步中，将添加代码来打开数据库并将此信息添加到其中。

添加到数据库

在上一部分中，当从数据库检索数据时，编写一个 SQL“SELECT”查询，它从数据库中选择数据供您读取。在这种情况下，您可以将数据添加到数据库，这会使用 insert 查询。

SQL INSERT 命令使用以下语法

INSERT INTO Table (Column1, Column2, ...ColumnN) VALUES (Value1, Value2, ... ValueN)

我们看一下如何在代码中这样做：

以下为引用的内容：

2: var MovieName="";

3: var MovieGenre="";

4: var MovieYear="";

5: if(IsPost){

6: MovieName=Request["formName"];

7: MovieGenre=Request["formGenre"];

8: MovieYear=Request["formYear"];

9: var SQLINSERT = "INSERT INTO Favorites (Name, Genre, ReleaseYear) VALUES (@1, @2, @3)";

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

11: db.Execute(SQLINSERT, MovieName, MovieGenre, MovieYear);

12: }

13: }

可以看到，我们创建了一个名为 SQLINSERT 的字符串来执行该命令。Razor 允许您在此字符串中指定参数化的值，所以无需尝试向字符串中添加“MovieName”、“MovieGenre”和“MovieYear”的值，我们只需使用 @1、@2 和 @3。当执行该查询时，该框架允许我们替换它们。您也可以“清除”参数之后在将它们输入到查询中。这可以防止人们将 SQL 代码作为参数传递，实施“SQL 注入攻击”。

接下来我们打开数据库，然后在数据库上调用 Execute 方法，告诉它运行此 insert 查询。相应值会被替换并添加到数据库中。

我们在 db.Execute（）之后添加另外一行代码，将用户重定向回他们可以查看最喜爱的电影的网页，他们可以看到所添加的结果。

Response.Redirect（"dataMovies.cshtml"）;

现在运行网页，您将看到建立的窗体。向其中添加一些数据：

单击“Add Movie”按钮，服务器会将数据添加到数据库中，然后将您重定向回列表中查看结果，您可以看到已经添加了新的最喜爱的电影！

重要提示：在本部分中，您看到了如何获取用户输入并将其直接添加到数据库中。在学习基础知识过程中这么做没有问题，但在您部署生产网站之前，必须记住执行以下操作

- 检查输入参数是否为有效数据，为用户提供关于他们输入错误的内容的准确反馈。例如，如果他们没有为“Year”输入良好的值，应该向他们通知这一点，而不是允许将任何信息提交到数据库中

- 在输入参数中检查可能被恶意攻击者用于损坏数据库的值。一种常见的攻击称为“SQL 注入”，其中用户在窗体中发送 SQL 命令，服务器上的代码执行该命令，这可能损坏或泄露私有数据。

可以在以下网站中了解在 WebMatrix 中使用数据库的更多信息： http://www.asp.net/webmatrix/tutorials/5-working-with-data

小结

您现在了解了如何向电影数据库中添加数据。创建了一个 HTML 窗体来处理用户输入，并了解了如何直接向数据库中添加值。然后您了解了在添加数据之后，如何自动将用户重定向回列表网页中，以便查看他们添加的数据。

在下一部分中将更进一步，添加功能来允许用户编辑他们已经拥有的数据。