系列教程 使用微软WebMatrix进行Web开发(4)
2019-03-19 07:05:50来源: 站长之家Chinaz.com 阅读 ()
在本系列文章中,您将学习如何开发一个简单的 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:第 4 部分,使用布局
目前为止,您了解了如何使用 WebMatrix 创建一个非常简单的网页,此网页如何在多种不同的浏览器中运行,以及如何使用 CSS 样式来使基本的网页更加美观。
在本章中,您将更进一步,开始使用服务器编程。您可能习惯于客户端编程,比如构建在电话、桌面上运行的应用程序或者甚至在浏览器内运行的 JavaScript 应用程序。服务器编程的重要区别在于,许多应用程序代码不在客户端设备上运行。相反,最终用户的操作会向服务器发起网页请求,如果该网页是“活动”网页,服务器将运行代码并使用该代码生成将发送给浏览器的 HTML 标记和值。然后浏览器呈现此 HTML,用户会看到显示的结果。
随着您技能的不断提升,您将发现有时候将代码混搭在一起会很有用,一些代码在浏览器上运行(通常使用 JavaScript 或 Silverlight 等富 Internet 应用程序 (RIA) 技术),剩余代码在服务器上运行。
WebMatrix 为网页编程引入了 Razor 语法,它提供的一项功能非常强大,但非常简单,那就是布局引擎。在本文中我们将介绍使用布局功能将所有常见的 HTML(比如 <head> 和页脚内容)放在一个位置并为您的网页自动生成这些内容,这样当构建网页(比如电影列表)时,该网页的文件将仅拥有该网页的主要内容,您可以添加并完全控制剩余内容。
创建使用 Razor 的 CSHTML 网页
目前为止,您创建了使用 .HTM 或 .HTML 扩展名的 HTML 网页。这些是静态网页,所以浏览器调用它们的地址时,服务器会将它们和它们的内容发送给浏览器。服务器不会以任何方式处理该网页。
您可能听说过“动态”网页,这些网页是服务器基于 HTML 以及在服务器上运行来确定应该如何构建网页的代码所构建的,构建的内容将 HTML 化。动态网页能够实现真正强大的使用场景,本系列的后续内容将使用它们。除此之外,它们将允许您将电影存储到数据库中,让服务器利用数据库中的数据生成您网页的内容,您无需直接在 HTML 网页上编写电影标题,也无需在希望更改列表时更改网页。
在本节中,您将创建第一个动态网页。
在 WebMatrix 中,动态网页具有 .CSHTML 或 .VBHTML 扩展名。它们实际上是 HTML 文件,包含使用 C# (CS) 或 Visual Basic (VB) 编写的内联代码,这从扩展名可以看出。我将使用 CSHTML 文件,这样能够使用 C# 语言在网页上编写内联代码。执行此操作的方法,以及支持在 HTML 内部执行此操作的语法具有昵称“Razor”。
我们创建一个动态网页。
使用 WebMatrix,在 Files 工作区中,创建一个名为 movies.cshtml 的新 CSHTML 网页:
WebMatrix 将创建一个网页,它看起来像一个基本的 HTML 网页。将此网页的内容替换为以下内容:
1: <div id="movieslist"> 2: <ol> 3: <li><a href="#">It's a wonderful life</a></li> 4: <li><a href="#">Lord of the Rings</a></li> 5: <li><a href="#">The Fourth World</a></li> 6: <li><a href="#">The Lion King</a></li> 7: </ol> 8: </div> |
这段代码是不是看起来很奇怪?代码中没有 <HTML>标记,没有 <HEAD> 或 <BODY>标记,但它仍然能生效!或者至少能基本生效。运行它,您将看到以下界面:
页眉和页脚
上面的网页非常类似于我们之前创建的网页,但是让我们将网页页眉定义为 HTML 中包含电影列表的 <div> 之前的所有内容,将页脚定义为 HTML 中包含电影列表的<div> 之后的所有内容。不要将此与您到目前为止一直使用的 default.html 网页的 《header》 和 《footer》 标记混淆了。
创建一个名为“PageHeader.cshtml”的新网页,将 default.html 中 moviesList <div> 上方的所有内容复制到它之中。它应该类似于:
以下为引用的内容: 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: <body> 9: <header> 10: <h1>A list of my Favorite Movies</h1> 11: </header> |
类似地,创建一个名为“PageFooter.cshtml”的新网页,将 default.html 中 moviesList <div> 下方的所有内容复制到它之中。它应该类似于:
以下为引用的内容: 1: <footer> 2: This site was built using Microsoft WebMatrix. 3: <a href="http://web.ms/webmatrix">Download it now.</a> 4: </footer> 5: </html> |
使用 Razor 动态添加页眉和页脚
现在您创建了这两个网页,接下来使用“‘Razor”编写第一部分服务器代码。WebMatrix 通过使用“@”字符,突出了 HTML 和“Razor”代码之间的区别。将此字符放在指示服务器如何操作的任何代码行之前。
例如,以下命令:
@RenderPage(“pagename”) 将导致服务器从“pagename”加载 HTML 并将它放在当前文件中的此位置。所以对于我们的示例,如果将 movies.cshtml 更改为:
以下为引用的内容: 1: @RenderPage("PageHeader.cshtml") 2: <div id="movieslist"> 3: <ol> 4: <li><a href="#">It's a wonderful life</a></li> 5: <li><a href="#">Lord of the Rings</a></li> 6: <li><a href="#">The Fourth World</a></li> 7: <li><a href="#">The Lion King</a></li> 8: </ol> 9: </div> 10: @RenderPage("PageFooter.cshtml") |
当运行网页时,它将类似于以下界面:
它与静态 HTML 文件的外观完全一样。您不应该感到奇怪,因为它现在具有相同的页眉和页脚(包括要求网页加载 CSS 的代码)以及相同的正文文本。但是可以看到,现在对页面的处理轻松多了,因为所有页眉和页脚代码都不需要处理,您创建的任何新网页都将具有相同的页眉、页脚和样式表。
创建布局网页
使用此方法,您创建了网页,然后在页面运行时使用 Razor 代码将页眉和页脚代码包含在网页上。这是一种自底向上的方法。
另一种可能更有效的方法是创建一个布局,将该布局用作每个网页的模板,然后将您想要的特定内容包含在该模板中。这更像是一种自顶向下的方法。
我们看一下它的工作原理:创建一个新 CSHTML 网页,您将它命名为 _siteLayout.cshtml。
将创建的网页的内容替换为以下内容。您可能发现这些代码很熟悉,因为它们是您之前创建的静态 default.html 网页中的所有内容
以下为引用的内容: <!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: <body> 9: <header> 10: <h1>A list of my Favorite Movies</h1> 11: </header> 12: <div id="movieslist"> 13: <ol> 14: <li><a href="#">It's a wonderful life</a></li> 15: <li><a href="#">Lord of the Rings</a></li> 16: <li><a href="#">The Fourth World</a></li> 17: <li><a href="#">The Lion King</a></li> 18: </ol> 19: </div> 20: <footer> 21: This site was built using Microsoft WebMatrix. 22: <a href="http://web.ms/webmatrix">Download it now.</a> 23: </footer> 24: </html> |
现在将名为“movieslist”的 <div》替换为以下代码:
@RenderBody()
请记住,前面我们说过“@”符号告诉 WebMatrix 此时在服务器上运行代码。RenderBody 命令只是告诉 WebMatrix 在此位置呈现网页的内容。
下面是 _sitelayout.cshtml 网页现在应该包含的内容:
以下为引用的内容: <!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: <body> 9: <header> 10: <h1>A list of my Favorite Movies</h1> 11: </header> 12: @RenderBody() 13: <footer> 14: This site was built using Microsoft WebMatrix. 15: <a href="http://web.ms/webmatrix">Download it now.</a> 16: </footer> 17: </html> |
所以,对于您刚才创建的网页 movies.cshtml,该网页的内容为 <div>和 <ol> <li> 列表。因此我们的理念是,当您浏览到 CSHTML 网页时,WebMatrix 将使用布局网页确定如何绘制网页,因此它获取标题、CSS 和来自布局网页的所有内容。
在尝试此代码之前,不要忘记从 movies.cshtml 删除 @RenderPage 命令。
告诉 WebMatrix 如何使用布局网页
现在如果您经过了细心观察,您可能会想 WebMatrix 如何知道为我的 movies.cshtml 网页使用 _sitelayout.cshtml?答案是它不知道。我们必须告诉它使用该网页。
幸运的是,这很容易实现。
如果您创建一个名为 _PageStart.cshtml 的网页,只要 WebMatrix 运行 CSTHML(或 VBHTML)网页就会调用此网页。
此网页的一个不错用途是设置全局变量或函数。我们在这里告诉了它整个网站的布局将来源于 _siteLayout.cshtml。
那么我们创建 _SiteLayout.cshtml。
将它的内容替换为以下内容:
以下为引用的内容: 1: @{ 2: Layout = "~/_SiteLayout.cshtml"; 3: } |
现在运行网站并在浏览器中看一下 movies.cshtml。
结合各个部分
那么刚才发生了什么?我们逐步看一下 WebMatrix 是如何运行网页的:
1. 浏览器向服务器请求 movies.cshtml
2. 服务器看到 _PageStart.cshtml 存在,所以运行它。这个网页只有一行代码,设置 Layout 变量来表明网站的布局位于文件 SiteLayout.cshtml 中
3. 服务器然后运行 SiteLayout.cshtml 来布局该网页。这会为它提供标题、css、<body> 标记以及您期望在静态 HTML 网页中包含的所有内容
4. 服务器获得代码 @RenderBody(),现在它将 movies.cshtml 的内容注入到网页中
5. 服务器从 SiteLayout.cshtml 获取剩余代码,使用结束 </body> 和 </html> 标记以及页脚完成网页。
6. 将完整的网页返回给浏览器,并附带样式信息。
添加另一个网页。
此方法的好处很明显,我们可以通过展示您创建另一个网页所需的工作量来演示这一点。
使用 WebMatrix,创建另一个名为 about.cshtml 的网页。
将 about.cshtml 的内容替换为以下内容:
以下为引用的内容: <h1>About me</h1> <h2>I'm the author of this page. I should put something interesting here.</h2> |
现在浏览到 About.cshtml – 将执行上一节中列出的相同过程,但这次在 _siteLayout.cshtml 网页到达 @RenderBody() 时,它将呈现此内容,结果将类似于下图:
可以看到,网页的标题和页脚保持不变。现在,如果您希望编辑“About”网页,无需创建网页的所有内容,只需编辑网页主要部分中的内容。这可以在编写网站代码时节省大量时间和工作。
这只是布局操作方式和 WebMatrix 中所包含功能的冰山一角。
小结
在本文中,您了解了如何使用 WebMatrix 中内置的布局机制来使网站更容易构建,将所有网页的所有相同代码放在布局文件中。您构建了第一个动态网页(也即由服务器动态构建的网页,而不只是服务器文件系统上的文件),在这过程中使用了 C# 和“Razor”语法。
在下一节中,您将更深入地使用 Razor 语法,将静态电影列表替换为由数据库驱动的列表。WebMatrix 集成 SQL Server Compact 数据库,它是一个免费、由文件驱动的数据库,还集成了一组创建和管理数据库和数据的数据库工具。您将看到如何创建数据库、添加字段、添加数据,然后编写代码来在用户调用网页时获取数据并将其写入到网页上!
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:网站成功关键之二:标题与内容
下一篇:如何选择流量统计工具
- 轻论坛程序Startbbs安装视频教程 2020-03-30
- 轻论坛程序Startbbs安装视频教程 2020-03-30
- 轻论坛程序Startbbs安装视频教程 2020-03-28
- 轻论坛程序Startbbs安装视频教程 2020-03-27
- 百度智能小程序“产品实验室”已开通使用Discuz论坛 2019-07-15
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash