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

WebMatrix进阶教程(6):创建添加数据网页

发表于2011-03-18 09:32| 次阅读| 来源microsoft.com| 0 条评论| 作者microsoft.com

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

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

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

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

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

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

创建和链接添加网页

使用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);   

}

 

<div id="movieslist">

  <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 action="" method="post">

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

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

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

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

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

处理来自窗体的数据

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

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

   1:  @{

   2:    // Code to execute

   3:  }

   4:   

   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>

  12:   

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

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

   1:  @{

   2:    If(IsPost)

   3:    {

   4:      // Do something on the POST

   5:    }

   6:  }

   7:   

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

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

   1:  @{

   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查询。

更多详情请点击:WebMatrix进阶教程(6):创建添加数据网页

0
0
WebMatrix进阶教程(6):创建添加数据网页