[ 登录注册 ]

HTML/CSS

Step by Step WebMatrix网站开发之二:使用WebMatrix(3)

2016-08-12 15:08:41 admin 返回上一页

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

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

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

1

图1

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

2

图2

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

3

图3

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

     http://localhost:9118

     http://localhost:9118/order/3

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

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

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

4

图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" /

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html_css/2016/0812/368042.html
返回上一页    返回分类 上一篇:   下一篇:
相关