订阅软件研发RSS CSDN首页> 软件研发

WebMatrix进阶教程(7):创建编辑数据网页

发表于2011-03-21 19:58| 次阅读| 来源microsoft.com| 0 条评论| 作者microsoft.com

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

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

导读:Microsoft WebMatrix是一个免费的工具,可用于创建、自定义和在Internet上发布网站。

WebMatrix使您能够轻松创建网站。您可以从一个开源应用程序(比如WordPressJoomla、 DotNetNukeOrchard)开始,WebMatrix会为您处理下载、安装和配置这些应用程序的任务。或者您可以使用许多内置的模板自行编写代码,这些模板有助于您迅速上手。无论您做何选择,WebMatrix都提供了您的网站运行所需的一切内容,包括Web服务器、数据库和框架。通过在您的开发桌面使用与您将在Web主机上使用的相同堆栈,将网站上线的过程变得既轻松又顺利。

您可以从http://web.ms/webmatrix下载它。

现在您只需花几个小时便可学会使用WebMatrixCSSHTMLHTML5ASP.NETSQL、数据库等知识以及如何编写简单的Web应用程序。内容如下:

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

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

创建编辑网页

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

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

<h1>Edit a Movie</h1>

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

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

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

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

    <p><input type="submit" value="Edit Movie" /></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中,可以右键单击网页上的任何地方并选择“查看源代码”来查看此代码

 1:  <!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>

   8:   

   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>

  36:   

现在您了解了在创建外观时,如何将此特定行的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”属性。我们现在可以直接在变量中使用此属性,以便初始化它们。

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

   1:  @{

   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>

  18:   

现在当运行网页时,您可以看到它使用了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:  }

   6:   

窗体为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网页的完整代码:

   1:  @{

   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 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>

更多详情请点击:WebMatrix进阶教程(7):创建编辑数据网页

0
0
WebMatrix进阶教程(7):创建编辑数据网页