Page 1 of 1

A Quick Introduction to the Razor Template Engine

#1 Nakor  Icon User is offline

  • Professional Lurker
  • member icon

Reputation: 445
  • View blog
  • Posts: 1,501
  • Joined: 28-April 09

Posted 29 March 2011 - 08:54 PM

Razor is the new templating engine available for ASP.NET MVC and Web Pages. I've just started testing this myself but so far I'm enjoying what I've seen. If you're coming from WebForms like me then brace yourself because there is no simple drag and drop controls as you may be used to using. Using Razor you're going to be coding you're html pages by hand, however, Razor does provide some great helpers to simplify this. Anyway, enough with the chatter, lets see how we can create our first web site using Razor.

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.

Attached Image

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">
                    &copy; @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.

Is This A Good Question/Topic? 0
  • +

Page 1 of 1