In this tutorial, we will move a existing static websites onto a Razor syntax-based dynamic webistes with a product database. That’s a case often happens. For instance, a bakery shop hires a designer for designing a online bakery shopping website. However, after a while, the shop owner decides to add in more products dynamically through database. And here, I will show you how to do it through WebMatrix in a easy and fast way.
1. Firstly, download html-based bakery online shopping cart web project here. Unzip it onto your hard disk.
2. Open WebMatrix and select Site From Folder. Select files from folder where you unzip Bakery_Final. After clicking ok, you will see all the files laying out in the left corner.
3. Click on Default.html and click Run. You will see the Fourth Coffee pages showed as below. There are three pages here: Home, Our Products and About Us. Noticed that the headers and footers of all sites are the same. And product information are all static. Next step, we will try to move all the duplicated parts into one single file.
4. Click on New on the menu bar and choose cshtml. Name it _Layout.html. Noticed here we use _ before the file name. It indicates that this file can’t be used to browse directly. This is similar to master page in ASP.NET.
5. Copy all the code from About.html to CSHtml. Remove code block showed below. This is the content part varies for each page. 6. Replaced the code block above with the following code: (Razor Syntax is case-sensitive. So please be careful of the upper-case).
[cc]

[/cc]
7. Meanwhile, Razor also supports clear URL and get away from extensions. So we will clear the footer and header session as showed below:

8. Now click on About.html and rename it as About.cshtml, which could recognize Razor syntax.

9. Open About.cshtml and deletes all the contents EXCEPT the code block showed below:

10. Add codes showed at the top of About.cshtml page. This code renders _Layout.cshtml contents into About.cshtml pages.
[cc lang=’c’ ] @{ LayoutPage = “_Layout.cshtml”; } [/cc]
11. Click on Run and you could see that About.cshtml has been rendered. If you remove .cshtml extension, About page will be rendered as well.

12. Now let’s make the page title dynamically changed. Go to _Layout.cshtml and change the code blocks below:

into the following codes:

13. Open About.cshtml and change the top block code into:

Using PageData Syntax is the way to pass data between pages. Now click Run and see the page title showed up.
14. We will add a Twitter Helper here as well. Still using About.cshtml. And insert code into sidebar section showed as below:

15. Click on Run and you will see a nice live time streaming of twitter widget there.

16. Rename Default.html as Default.cshtml. Refine Default.cshtml codes showed as below:

17. We will do the same for products.html. Rename it as Product.cshtml and change codes into:

18. You will notice that products information is static now and we will change it to be dynamically displayed from database. Open App_Data folder and bakery.sdf. You could see tables showed as below: (.sdf is SQl compact’s format)

19. Now we will link database in Products.cshtml. Open Products.cshtml and add database connection syntax on the top of the page, showed as below:

Noticed here we don’t need to use connection string. This is a database helper that simplified the process.
20. Next, we won’t ask you to load entity framework, rather we will start from raw sql, which is a much easier concept to understand. Insert the following codes into Products.cshtml and replace the static prodcuts information code block.
[cc]

Available Products:

[/cc]
Here, we retrieve all products directly from bakery database Products table. Row is a dynamic variable and all the attributes are retrieved by using row this variable. We add “Order” Button as well.
21. Click on Run and click on Order button. Here, we couldn’t see anything since Order Page is not created. Let’s Go back and click on New on the menu bar and create a Order.cshtml page.
22. Add the following codes into Order.cshtml.
[cc]
@{
LayoutPage = “_Layout.cshtml”;
PageData[“Title”]=”Order”;

var db=Database.Open(“bakery”);
var productid=Request[“ProductId”];
var product=db.QuerySingle(“Select * from Products where Id=@0”,productid);
}

@product.Name
[/cc]
For preventing SQL Injection, we use @0 here to represent first variable and it will be replaced by productid which passed from the previous page. After retrieving product information from Products table by id, we display the product name.
23. Click on Products.cshtml and click Run. Choose a product to order and you will see that product’s name has been displayed in the Order.cshtml page.
24. Add the following codes into Order.cshtml to complete the page:
[cc]
@{
LayoutPage = “_Layout.cshtml”;
PageData[“Title”]=”Order”;

var db=Database.Open(“bakery”);
var productid=Request[“ProductId”];
var product=db.QuerySingle(“Select * from Products where Id=@0”,productid);
}

Order Now

[/cc]
We basically complete a order form and noticed that a piece of scripts is added on the top. It is a script to calculate sum total when you tab out after keying in quantity of your order. Here, instead of adding a javascript library into the project, we use Microsoft AJAX CDN(Content Delivery Network) that provides caching support for AJAX libraries, including jQuery and ASP.NET AJAX. Using CDN could significantly improve a website’s end-user performance, since it enables browsers to retrieve contents from the closest edge.
25. Here, we complete our tutorial. For actual example, you could find it in WebMatrix Bakery Example, which provides along with the tool. Enjoy!

Importantly, this tutorial is sourced and referenced from Scott Hunter and Simon Calvert’s presentation, who are Lead Program Managers of Microsoft Corporation.

Follow

Related Posts