Step by Step WebMatrix website development 2: Use WebMatrix (3)

To learn how to use a good tool, the best way is to start with the template, so today's task is to create a website from the template, and then analyze the composition of the template.

On the WebMatrix start page, click "create website from template", select "bakery", enter "My panel store" in the website name, and click "OK.

After the creation process is complete, click the run button. The page shown in 1 is displayed in the browser.

Figure 1

Click "Order now". The page shown in Figure 2 is displayed.

Figure 2

Enter the email and address, and click "place order". The page shown in 3 is displayed.

Figure 3

In addition to the page process, you should also pay attention to the page address:

Http: // localhost: 9118

Http: // localhost: 9118/order/3

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

You can also perform redirection without setting IIS. Now we will use WebMatrix to see how it works.

Click the File menu to view the file and file directory 4. We can see that the file extension of the Razor engine used by WebMatrix is cshtml.

Figure 4

Open the bin directory and you will see a library file named Microsoft. Web. Helpers. dll. This is Microsoft's new Razor engine library.

Familiar with ASP. NET development, you should know that the APP_Data directory is used for storing databases. You do not need to know that the Images directory stores Images. Styles stores style files.

Open the Default. cshtml file on the homepage, and you can see the following code:

1 @{
2 Page. Title = "Homepage ";
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 10
11 <div id = "featuredProduct">
12
13 <div id = "featuredProductInfo">
14 <div id = "productInfo">
15 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"> order now </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 30
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 = "order @ p. Name"> order now </a>
36 </div>
37 </li>
38}
39 </ul>

 
The Head and Body definitions are usually not visible on the page. The syntax is also a bit strange. Haha, This Is The New Razor syntax, which will be introduced from the next article. The Head part and body are actually defined. The Razor engine introduces the concept of an ASP. NET motherboard page. Therefore, all the code is in the motherboard page. The file name is _ SiteLayout. cshtml. Open this file and you will see the following code:

1 <! DOCTYPE html>
2 3 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 "/