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	vardb=Database.Open("bakery");
5	varproducts=db.Query("SELECT*FROMPRODUCTS").ToList();
6	varfeatured=products[newRandom().Next(products.Count)];
7	}
8
9	h1>欢迎光临FourthCoffee!/h1>
10
11	divid="featuredProduct">
12	imgalt="特色产品"src="@Href("~/Images/Products/"+featured.ImageName)"/>
13	divid="featuredProductInfo">
14	divid="productInfo">
15	h2>@featured.Name/h2>
16	pclass="price">$@string.Format("{0:f}",featured.Price)/p>
17	pclass="description">@featured.Description/p>
18	/div>
19	divid="callToAction">
20	aclass="order-button"href="@Href("~/order",featured.Id)"title="订购@featured.Name">立即订购/a>
21	/div>
22	/div>
23	/div>
24
25	ulid="products">
26	@foreach(varpinproducts){
27	liclass="product">
28	divclass="productInfo">
29	h3>@p.Name/h3>
30	imgclass="product-image"src="@Href("~/Images/Products/Thumbnails/"+p.ImageName)"alt="@p.Name图像"/>
31	pclass="description">@p.Description/p>
32	/div>
33	divclass="action">
34	pclass="price">$@string.Format("{0:f}",p.Price)/p>
35	aclass="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	!DOCTYPEhtml>
2	htmllang="en">
3	head>
4	metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
5	metacharset="utf-8"/>
6	title>FourthCoffee-@Page.Title/title>
7	linkhref="@Href("~/Styles/Site.css")"rel="stylesheet"/>
8	linkhref="@Href("~/favicon.ico")"rel="shortcuticon"type="image/x-icon"/>
9	/head>
10	body>
11	divid="page">
12	divid="header">
13	pclass="site-title">ahref="@Href("~/")">FourthCoffee/a>/p>
14	ulid="menu">
15	li>ahref="@Href("~/")">主页/a>/li>
16	li>ahref="@Href("~/About")">关于我们/a>/li>
17	/ul>
18	/div>
19	divid="body">
20	@RenderBody()
21	/div>
22	divid="footer">
23	©@DateTime.Now.Year-FourthCoffee
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语法。