So how easy is it for a non-webdeveloper to create a simple site with webmatrix and the razor syntax.
Let me start by using the Empty site template this time.
Yep, that looks pretty empty to me.
So we start by adding an vbhtml page and let’s call it Default.
This is the standard code that you will find in a vbhtml file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
Yes that is HTML 5.
Now let’s add a little text and a title to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My first page.</title>
</head>
<body>
<h1>Introduction</h1>
<p>First paragraph</p>
</body>
</html>
With this as the result.
Now I would like to get all the overhead out of that page and make the default.vbhtml a bit less cluttered.
I can use a layout page for that. Just create a new vbhtml page and call it layout.
We just have to add a few bits to the standard html that is created for us. There is one bit that is really needed and that is @RenderBody() because that will render the body. And I also added @Page.Ttile since every page can now set it’s own title instead of having the same one for all.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@Page.Title</title>
</head>
<body>
@RenderBody()
</body>
</html>
Now we have to change our Default page to use this layout.
html
@Code
Layout = "~/Layout.vbhtml"
Page.Title = "My first page."
End Code
<h1>Introduction</h1>
<p>First paragraph</p>
As you can see we removed all the redundant code and added a code block. The codeblock tells it which Layout to use and what title it should set.
This is the result.
Yep exactly the same as before. As we wanted it. So that was pretty easy. And it was especially very fast. It’s very nice to be able to use a simple IDE from time to time. But for the bigger work I would still prefer VS.Net with Resharper all though it tends to crash several times a year.
Chris is awesome.
