Step by Step WebMatrix网站开发之二：使用WebMatrix（3）

要学好用好一个工具，最好的办法是从模板入手，因而今天的任务就是从模板建立一个网站，然后分析一下模板的构成。

在WebMatrix开始页，单击“从模板创建网站”，然后选择“面包店”，在网站名称中输入“我的面板店”，最后单击“确定”完成操作。

创建过程完成后，单击运行按钮，会在浏览器看到如图1所示的页面。

图1

单击“立即订购”，将看到图2所示的页面。

图2

随便输入电子邮件和地址，然后单击“下订单”将看到如图3所示的页面。

图3

除了关心页面的流程，还应留意一下页面的地址：

http://localhost:9118

http://localhost:9118/order/3

http://localhost:9118/OrderSuccess?NoEmail=1

IIS不用设置也可以实现跳转了。现在会WebMatrix，看看是如何做到的。

单击文件菜单，看到如图4所示的文件和文件目录。可以看到，WebMatrix使用的Razor引擎，其文件扩展名是cshtml。

图4

打开bin目录，会看到一个名称为Microsoft.Web.Helpers.dll的库文件，这就是微软新的Razor引擎库。

熟悉ASP.NET开发的应该知道，APP_Data目录是放置数据库用的。Images目录不用说也知道是存放图片的，Styles是存放样式文件。

先打开首页Default.cshtml文件，可看到以下代码：

1	@{
2	Page.Title = "主页";
3
4	var db = Database.Open("bakery");
5	var products = db.Query("SELECT * FROM PRODUCTS").ToList();
6	var featured = products[new Random().Next(products.Count)];
7	}
8
9	<h1>欢迎光临 Fourth Coffee!</h1>
10
11	<div id="featuredProduct">
12	<img alt="特色产品" src="@Href("~/Images/Products/" + featured.ImageName)" />
13	<div id="featuredProductInfo">
14	<div id="productInfo">
15	<h2>@featured.Name</h2>
16	<p class="price">$@string.Format("{0:f}", featured.Price)</p>
17	<p class="description">@featured.Description</p>
18	</div>
19	<div id="callToAction">
20	<a class="order-button" href="@Href("~/order", featured.Id)" title="订购 @featured.Name">立即订购</a>
21	</div>
22	</div>
23	</div>
24
25	<ul id="products">
26	@foreach (var p in products) {
27	<li class="product">
28	<div class="productInfo">
29	<h3>@p.Name</h3>
30	<img class="product-image" src="@Href("~/Images/Products/Thumbnails/"+ p.ImageName)" alt="@p.Name 图像" />
31	<p class="description">@p.Description</p>
32	</div>
33	<div class="action">
34	<p class="price">$@string.Format("{0:f}", p.Price)</p>
35	<a class="order-button" href="@Href("~/order", p.Id)" title="订购 @p.Name">立即订购</a>
36	</div>
37	</li>
38	}
39	</ul>

居然看不到通常页面需要Head和Body定义。语法也有点怪，呵呵，这是新的Razor语法，从下篇开始介绍。Head部分和body的定义其实还是有的。Razor引擎引入了ASP.NET母板页的概念，因而这些代码其实都在母板页里，文件名是_SiteLayout.cshtml，打开该文件将看到以下代码：

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
5	<meta charset="utf-8" />
6	<title>Fourth Coffee - @Page.Title</title>
7	<link href="@Href("~/Styles/Site.css")" rel="stylesheet" />
8	<link href="@Href("~/favicon.ico")" rel="shortcut icon" type="image/x-icon" />
9	</head>
10	<body>
11	<div id="page">
12	<div id="header">
13	<p class="site-title"><a href="@Href("~/")">Fourth Coffee</a></p>
14	<ul id="menu">
15	<li><a href="@Href("~/")">主页</a></li>
16	<li><a href="@Href("~/About")">关于我们</a></li>
17	</ul>
18	</div>
19	<div id="body">
20	@RenderBody()
21	</div>
22	<div id="footer">
23	©@DateTime.Now.Year - Fourth Coffee
24	</div>
25	</div>
26	</body>
27	</html>

这就是页面的框架部分了，内容页的插入位置是语句“@RenderBody”，单词已经说明是干什么的了，渲染body。好处不用多说，页面中的共同部分通过模板页可重复使用，不用每个页面都修改一次。

有一点要注意，带下划线（_）的文件是不能在页面直接访问的，例如你在浏览器打开_SiteLayout.cshtml文件，会看到如图5所示的错误页面。

图5

_PageStart.cshtml文件的作用是在在页面运行前做一些初始化工作，例如，当前网站的_PageStart会知道模板页是那个：

1	@{
2	Layout = "~/_SiteLayout.cshtml";
3	}

这样，页面显示时就会将模板页和实际页面结合起来再显示。

Razor引擎还要一个特殊文件_AppStart.cshtml，其作用是在网站启动的时候做一些初始化工作，与ASP.NET的Global.asax文件的Application_Start事件是一样。

今天的介绍就到此。下次开始介绍Razor语法。

Step by Step WebMatrix网站开发之二：使用WebMatrix（3）相关推荐

Step by Step WebMatrix网站开发之二：使用WebMatrix（1）
第一次运行WebMatrix会看到如图1所示的窗口. 图1 第一次运行WebMatrix显示的窗口我的网站进入"我的网站"可看到自己设计过的网站. 从Web库创建网站可以从& ...
Step by Step WebMatrix网站开发之二：使用WebMatrix（2）
上一篇,从Web库创建了一个电子商务的网站.现在回到WebMatrix,看看它有什么功能. 由图1可以看到,WebMatrix主要有3个区域,顶部Ribbon区域,左边是功能区域,右边是信息或编辑区域 ...
网站开发之MyEclipse简单实现JSP网页表单提交及传递值
本文主要是作者<中小型网站开发与设计>课程的内容,非常基础的文章,主要是指导学生学会用MyEclipse实现JSP网页表单提交及传递参数.希望大家喜欢这篇文章,基础文章,不喜勿喷~ PS: ...
网站开发之ie下在线浏览pdf文件无需本地支持
1.首先,务必通过后面给的链接了解一些可实现的方法:打开链接. 2.个人选择了PDFObject+PDF.js来实现,这里需要下载pdfobject.js和PDF.js.对于pdfobject.js, ...
JSP网站开发之HTML入门知识及常用标记符（一）
最近发生的事情很多,其中一件很重要的事情就是:学生生涯的结束,教学生涯的开始.我准备下个月写一篇总结研究生生涯的文章,包括自己放弃互联网选择回家教书.找工作经历.项目和毕业设计的各种感想.很荣幸XB七 ...
方案设计：IPC产品系统设计 - 基于芯片商提供的SDK API开发之二
方案:安霸.海思(君正.Mstar.安凯) 1.每个模块都是开N(1,2,3...)个pthread线程,线程之间通过生产者,消费者模型(或者进程间通信机制)实现数据同步/异步.通过数据队列缓冲模块数 ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
linux mp4转h264工具,Linux音视频开发之二：转换YUY2到I420便于压缩成h264
在用libx264做h264压缩的时候,我们可以通过命令ffmpeg -h encoder=libx264来查看它所支持的输入格式 Encoder libx264 [libx264 H.264 / A ...
unity开发之二：调用电脑外部键盘osk
今天领导突然说项目需要调用外部键盘很急,然后我匆匆忙忙的写了这个功能,遇到很多蛋疼的地方,记录下来! 第一步: 管理员模式打开unity: 我们需要使用管理员模式打开unity,不然osk.exe是电 ...

Step by Step WebMatrix网站开发之二：使用WebMatrix（3）

Step by Step WebMatrix网站开发之二：使用WebMatrix（3）相关推荐

最新文章

热门文章