Intro To WebMatrix: Create a Contact Form Part 4 Adding A Master Page

In my three previous posts about using the Microsoft WebMatrix tool I showed how to create a form, add database interactivity and automated E-Mail functionality. Today I want to start making the site take a more usable form by adding a site layout.

The use of Master Pages or common site layouts go all the way back to the beginning of web development. Back in Classic ASP days we used to use include file to reference things like the header, footer and other common layout elements. This changed to ASP.NET user controls (.ascx) files when .NET was released. The release of ASP.NET 2.0 added a Master Page file, which made creating a common layout very intuitive.

With the Razor syntax the Master Page concept lives on, but in a slightly different syntax. Since Razor does not have the concept of Web Controls, but helpers, there is concept of sections.

Instead of adding a Master Page file to a WebMatrix web site you just need to add a .cshtml or .vbhtml file. In this file you add the markup to manage the layout you want to share across pages. This would include common references to CSS and JavaScript files.

Now I am going to get into some of my architecture theory. I like to define various sections in my common layouts that allow child pages to add additional values. For example in the HEAD element I usually set the page title in the page, not the master. I also add page specific CSS references, etc.

The Razor view engine allows you to define a section in your markup. In the example below this section is defined using the @RenderSection helper method. This is an overloaded function that requires a section name. You can also designate if the section is optional, if not defined the default value is false. If the section is required each page implementing this layout must define this section.


<

head

>


<

link

href

="@Href("

~/

css

/

print

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="print"

/>


<

link

href

="@Href("

~/

css

/

screen

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


<

link

href

="@Href("

~/

css

/

ie

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


<

link

href

="@Href("

~/

css

/

main

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


@RenderSection("Header", optional: true)

</

head

>


Notice there is no Title element in the head, rather I will utilize the Header section on each page to define this element. Below is a snippet of code on the contact page. First you designate the LayoutPage at the top of the page. He is a stupid little trick. it seems you can define LayoutPage anywhere in your page's markup, I have tried to place it several places in pages and it always works. While you can define the LayoutPage multiple times, the reality is only the last value counts, meaning the last time you set the property designates the layout used to render the page.

@{
LayoutPage =

"/_SiteMaster.cshtml"

;

...

}


@section Header {
<title>Simple Contact Form With WebMatrix</title>
}

The @section Header {} defines the area of markup or logic to generate content rendered for that section in the LayoutPage. Any markup and rendering logic not contained in a @section block is assumed to be the page's body. It is rendered in the LayoutPage using the RenderBody() function. To my knowledge there is no limit to the number of sections you can define for a layout, however I have to believe the more you define the harder it will be to maintain and performance should suffer.

Now to the actual Layout or Master Page. For this demo I simply moved the layout markup from the contact form defined in the series' first post. There are two optional sections defined, Header and Footer. It calls the RenderBody() function in the main-content DIV element. Notice there is no logic in my Layout. You can add logic code (C# or VB) just like a normal page. There is nothing preventing you from doing this. I will cover how to pass data back and forth between the Layout and content pages in another post.

<!

DOCTYPE

html

>


<

html

>


<

head

>


<

link

href

="@Href("

~/

css

/

print

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="print"

/>


<

link

href

="@Href("

~/

css

/

screen

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


<

link

href

="@Href("

~/

css

/

ie

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


<

link

href

="@Href("

~/

css

/

main

.

css

")"

rel

="stylesheet"


type

="text/css"

media

="screen, projection"

/>


@RenderSection("Header", optional: true)

</

head

>


<

body

>


<

div

class

="container"

>


<

div

id

="header"

class

="span-24 last"

>


<

div

class

="MainHeader"

>


<

div

class

="span-16"

>


<

h1

>


WebMatrix World

</

h1

>


<

h2

>


Where it does not matter if you choose the Red Pill or the Blue Pill

</

h2

>


</

div

>


</

div

>


<

div

id

="MainNav"

class

="span-24 last"

>


<

div

id

="dMenu"

>


<

ul

>


<

li

><

a

href

="@Href("

~/

")"

>

Home

</

a

></

li

>


<

li

><

a

href

="@Href("

~/

Contact

")"

>

Contact

</

a

></

li

>


</

ul

>


</

div

>


</

div

>


</

div

>


<

div

id

="main-content"

>


@RenderBody()

</

div

>


<

div

id

="Mainfooter"

class

="span-24 last"

>


<

div

id

="footermenu"

>


<

ul

>


<

li

><

a

href

="@Href("

~/

")"

>

Home

</

a

></

li

>


<

li

><

a

href

="@Href("

~/

Contact

")"

>

Contact

</

a

></

li

>


</

ul

>


</

div

>


<

div

id

="footerCopyright"

>


Extreme Web Works

&copy;

2010

</

div

>


</

div

>


</

div

>


</

body

>


</

body

>


<

script

src

="js/jquery-1.4.2.min.js"


type

="text/javascript"

></

script

>


@RenderSection("scripts", optional: true)

</

html

>



Putting it all together, along with some additional CSS rules we get a pretty basic layout with a simple menu.

Web Matrix Master Page

With Layout Pages the WebMatrix, Razor experience gives designers and developers the ability to create and manage larger sites look and feel without duplicated effort.

Share This Article With Your Friends!