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

来源:站长之家Chinaz.com 时间:2011-03-18 01:47 字体:[ ] 收藏 我要投稿

在本系列文章中,您将学习如何开发一个简单的 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>

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

(责任编辑:中文站长) 本文仅代表作者与中文站长无关。
顶一下
(0)
0%
踩一下
(0)
0%
中文站长投稿必读,作为站长的你,也可以成为写手 10秒注册会员 站长杂谈,最火爆信息交流
相关阅读
最新评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名:

热门阅读

图文排行

推荐阅读

论坛热贴