Razor and Webmatrix : Convert Static HTML into Dynamic data-driven pages
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] ...