The first thing to do is select File -> New -> Web Site. Then in the wizard that appears select "ASP.NET Web Site(Razor)". You can set the name of your website in the text box along the bottom.
After pressing "OK" Visual Studio will generate a few default files for you. This includes a Default.cshtml page and an About.cshtml page. Notice that the extensions are no longer .aspx as you may be used to from WebForms but instead use a .cshtml extension. This filetype is basically a combination of the .cs file and the .html file and you will be placing both types of code in it. That's it for creating a web site as you can run this and you will have a working web site but let's take a little deeper look into some of these files. Here is the code from the generated Default.cshtml page.
@{
Layout = "~/_SiteLayout.cshtml";
Page.Title = "Welcome to my Web Site!";
}
<p>
ASP.NET Web Pages make it easy to build powerful .NET based applications for the web.
</p>
Notice the "@{ ... }" at the beginning. That is Razor's way of defining a code block. Everything with in the block must be valid C# code. As you may have noticed, the value of Layout is set to another cshtml page. This works somewhat similar to a MasterPage and creates the design for the web site. Page.Title quite simply sets the title for the page in the _SiteLayout.cshtml page. Let's take a look at that page real quick.
Spoiler
Now I'm not going to go into everything here, but let's build on what we've already looked at.
<div id="main">
<div id="content">
<h1>@Page.Title</h1>
@RenderBody()
</div>
<div id="footer">
© @DateTime.Now.Year - My ASP.NET Web Page
</div>
</div>
Here you'll notice there is a @Page.Title property. This is calling the Page.Title property that we set in our Default.cshtml page. It is called without using a {} block and instead is called by directly preceding the property with the @ symbol. Next you'll notice that there is a method that is being called named RenderBody(). This method will take the html from whichever page is using this file as its Layout and display that html at this location. So all of our html generated from the Default.cshtml page will be placed at this location. This is pretty much the basics of how this templating engine works, although there are a lot more advanced options as well.
That's it for our first look into the Razor templating engine, more to follow.
MultiQuote
| 