Exercise 1: Creating a Home Page View Using Razor Syntax

Article
12/22/2011

Exercise 1: Creating a Home Page View Using Razor Syntax

You have been working with ASP.NET C# language and HTML to create controllers and views. In this exercise, you will learn how to create MVC 3 views by using Razor syntax and Razor Layout Pages. In order to do that you will work with MVC Music Store web application to write its Home Page view in Razor.

Razor Layout Pages

A Razor Layout page is the equivalent of an ASP.NET Master Page. It defines the structure of a Web page by using HTML markup, and defines sections that will be filled with custom content. Web pages linked to a layout will only have to complete the sections with their own HTML. By using layout pages your site will have a consistent look that will also be easier to modify.

Razor Layout Pages – Structure

Figure 1

Layout and Web Pages

In essence, Razor Layout pages are HTML files that define a Body and additional sections by using the following instructions:

@RenderBody(): Renders the content of a page that is not within any named sections.
@RenderSection("mySectionName"): Renders the content of the section within the given name. Sections are mandatory by default, so each page linked to the template will have to declare them.
@RenderSection("mySectionName", optional:true): Renders the content of an optional section. The pages that are linked to the template can omit the definition of an optional section.

Note:

Note: Optional sections allow us to use the same layout in pages that share part of the structure. However, this feature has to be carefully used if we want to keep a tidy and maintainable layout. In those cases, when the differences between the pages are significant, it will be better to add a new page layout instead of having a complex one.

Next you will see an example of a layout that defines two sections, one of them optional:

Site.cshtml

<!DOCTYPE html>

FakePre-dbae9e804622404eb681e5022731acb2-80fcd99963e74b67b493bf4a9305425dFakePre-19f0a0ef692a432998f47d05c2e8384d-3ca31687c3384d3e8848fb0f4536d94eFakePre-6b2b40f149184c898aa835603e56d5d7-0e38e71a585b4792b29532d572a442ddFakePre-d832ed924fd24d20ac4371ab8ea135ad-6af431e866f04b91a8a5d0756635653eFakePre-f410df304e954bc3a74e6ca3a1d5d852-fe0c5135eb57495e8a4d705bd6e2d335FakePre-5fe99f49cb91458891083484ba986bc5-ac0d64841dde4b5c9291d4c89ce51e7fFakePre-80d4d0a36e734a48bef6d20fe0578d47-136d6fc657e04e7c87acb222f69cce09 @RenderSection("header") @RenderBody() @RenderSection("footer", optional:true)FakePre-2f17dabf0269404ab1ae378f86814fad-273a6bde83554b9197268dc2169ef9f5FakePre-d0d52eba1ccb479a9707cde23f6fd0a2-4e3189e64d744e60afe42a8e3966c4c2FakePre-63d65c1e01c84ebfb680dfa5ea413e6c-92bbe2fb69d240f29350d5a5aecc7b22 @RenderSection("header") @RenderBody() @RenderSection("footer", optional:true)FakePre-f0480466ec044aa6b926a39c13878e5e-80c93d4d822e40a2aebce202c7cbd64cFakePre-74842c60c7ad4037960653d68c980a94-c8a052743a504cd1a4c9d69f415d92c7FakePre-d8cf3456ca7e4fc79c77370446a382ea-7bb4b25c8b8747529c75a212a2774cd3 @RenderSection("header") @RenderBody() @RenderSection("footer", optional:true)FakePre-55d102f21ac24f46a5594b3d8005b3ed-72de2bb9ded84152b0c561681743d368FakePre-980d40d19e68473a8bdcb85bd6c36886-cc4fc900f5734cf28046d42b69055ec3FakePre-0dacd3e8a1554ea4b890d774aa7d84c5-62b83b0f208a4fa3a310e332d2f7cb70

Site.vbhtml

<!DOCTYPE html>

FakePre-6b176da6f30b4618a3d1eb46060f9637-dc780b800c154e00b4c2e3ee0fb4275fFakePre-b3ef2a9f90a74809a1dd6457985ec430-0c8b85cf04c44ff687636c8520db3cb8FakePre-8fd5995f485849eebf278b75bdfeb6df-8e43386f9a0145d48c9774e5878d707dFakePre-c7cf7ebef4b346adb805ec30e0967722-a73426868ae84ceb88d7e6615185f7c8FakePre-0c0a0cb252af492da49081a5dfc65de0-1e1f5c5538e24375bbd212e1999ad270FakePre-e7940f9b9e2e46e091f006af6b1edacf-d09a48c4221b4ddfb6d9b22e656a332dFakePre-ddd2083618404ac58f62b9c3f0db4798-19ebf7f73de14b7aa268250f75f236ad @RenderSection("header") @RenderBody() @RenderSection("footer", optional:=true)FakePre-d8194a9efe624d679e2c83f538f26ab1-0d46bbe3a3474df6b28736db44cfd23eFakePre-0f030d60af2145e6b3d9f7ad7d7d81e1-bc920e7542894d2a99cb39cd29b8b593FakePre-f771c1de104743acbb54ccce31a422ff-bb25ac553b864a158d8290b0cdf74737 @RenderSection("header") @RenderBody() @RenderSection("footer", optional:=true)FakePre-f5283abb13134ef2911453866f2b9211-be8bc24b8ffe497486287d18b9df7064FakePre-9d06559fa4334eff8e7861c597790eab-c92484676f8247558421714cb12de82aFakePre-3f2b99786db243faa8341ca18aa29bf6-8c87bcdabd1c4317b433ace081d9fe07 @RenderSection("header") @RenderBody() @RenderSection("footer", optional:=true)FakePre-60cb779813c147148f4fde36050e9c62-76d47c26381f4acf8d2053dee56d4428FakePre-f1b9d28b01dc4863916fb372f60ae4e4-002d61657f7845f2b84f9f5e54455300FakePre-b51d8aae18704177bf1547af90ae166e-6dac8080e06749b1a16abbeb0d9e44ea

Note:

Optional sections can also be defined by using Razor directive IsSectionDefined("name").

The following line is equival to “@RenderSection("footer",optional:true)”:

@if (IsSectionDefined("footer")) {

@RenderSection("footer")

}

Here is an example of a Razor Web page that links to the previous layout:

cshtml

@{ } @section header { } @section footer { }

    LayoutPage = "~/Shared/Site.cshtml";

@{ } @section header { } @section footer { }FakePre-05233e6757cd414086f23355e54fd070-2bc4ef87f24847408a462d387c0f5842FakePre-ea414243517447c094adbb695b8fb5cc-de462d86cad144e8a0b251ef6ff775a6FakePre-57134efcf8404dafb323e719b3cde25e-122045d15a494779a062626d6e2c30baFakePre-1109bfbf5a594e41ac256875ec452c4c-5b3574dc0de0440cbbcd40e71d95d0e0@{ } @section header { } @section footer { }FakePre-1fc861a5f7bf4d0fb593656af3364ff9-8c4d49e541314d77bbdeb930db2d73efFakePre-5d9a0d6a1daf46ec8620ca13d7f725e9-b63b321c6053499cb6ae7a1dbc143865FakePre-8d9844c2a0f14dc59034e74d2cc2e1d4-cc3271db1b9843d0b512f2584f6aa6aaFakePre-3e617ab265dd4865bc232795e400e42e-66ba0a7e018a4b879a6f4f60f5e131a5@{ } @section header { } @section footer { }FakePre-653f5855d97c49acb451a8410498a79b-54afff80b6c54933b60424411ebc8837FakePre-79df2b9977dc4a6e8b8d2b294f3c0cf7-0632890d76c54d0789d99e4446ddfbc2FakePre-1435beb5bcc1410f8cf389f7a837515c-84e8509c7d6846c3afbe2b4aa020f0f0FakePre-0cced0d460fb4eb785b055bcd3ec9226-67f748886c384b2999c975d0d289f233

vbhtml

@Code End Code @Section header @ Section footer

    LayoutPage = "~/Shared/Site.vbhtml"

@Code End Code @Section header @ Section footer FakePre-b88fe00d354a4c7ab5cf8451634db7f1-6507c31bf8304201a7960a3bf0cf6950FakePre-850ffb8eb5e64b3188469c94bbb31fa3-1624fdf1486848a7b38302b7ac29c43cFakePre-78fcc06aacb149abb9763d7b4e049704-1b872ca9a1634519b656fef675d48f35FakePre-d0011c5d9f9846f1a7a6dffc51e7e106-81e43b02d1a548348acf811d43a5fb78FakePre-f9627fcaaba448ac8adeb972421ea004-65a6b8eedb9f4386ba94b757c8a35763FakePre-03ebbe0be6ec43699ccd164644c75a6d-e5fa6477d40c49eb938c4ce2f77e4903@Code End Code @Section header @ Section footer FakePre-bd05493fe0ef413db278f3c2c669e6d0-26e47b58cbda48c39728677ca34ca9e6FakePre-9a433c589d4d478e894fa54903b60cbc-54e6a098c0ac4d42b737f6336f918a56FakePre-0147fef435b9404580775bfae13812fa-e238c88d73c847fb9ba52f14512048bcFakePre-62da9474001f41318eeed8173c9161d9-92e677ce484745bda3adcfe8774ff11fFakePre-be41d5e4336d4f559319b7f7bd7f3f79-75d1f989a97d4bae99be505243af5f53FakePre-cdc56acc7c8c462ea786983ae961fe56-49610d20f63e46bdb54a418b3191df44FakePre-d71efdc0e2f046cb8c4be7d83138a633-d9b520e217b64e04aadf3534c57ee717FakePre-a6f115063d424cfb95a2d46e02b85604-01a3cccb6e454ff986e2ab0241546635

Note:

Most of the HTML elements were moved to the layout, leaving only the body and the section declarations.

Task 1 – Creating a CSHTML|VBHTML Layout Page

In this task, you will learn how to create a Layout page for Razor views that will work like the Site.master page from the ASP.NET MVC Fundamentals Hands-on Lab exercises.

If not already open, start Microsoft Visual Web Developer 2010 Express from Start | All Programs | Microsoft Visual Studio 2010 Express | Microsoft Visual Web Developer 2010 Express.
In the File menu, choose Open Project. In the Open Project dialog, browse to Source\Ex01-CreatingAHomeRazorView\Begin, select MvcMusicStore.sln and click Open.
Add a Layout Page. Because it is a shared resource you will create it under the /Views/Shared folder, in the same place of ASP.NET MasterPage. To do this, expand the Views folder and right-click the Shared folder. Select Add and then the New Item command.

Figure 2
Adding a new item to the solution
In the Add New Item dialog box, select the MVC 3 Layout Page (Razor) template, located under Visual [C#|Basic], Web template list. Change the name to Site.cshtml|vbhtml and click Add.

Figure 3
Adding a new Razor Layout Page – C#

Figure 4
Adding a new Razor Layout Page - VB
Site.cshtml|vbhtml file is added. This template contains the HTML layout for all pages on the site. It includes the <html> element for the HTML response, as well as the <head> and <body> elements.

cshtml

<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>

vbhtml

<!DOCTYPE html> <html> <head> <title>@ViewBag.Title</title> </head> <body> <div> @RenderBody() </div> </body> </html>

Note:

This is the standard layout page generated by MVC 3, which displays the body inside a <div> block.
@ViewBag.Title (equivalent of @ViewBag [“Title”] used in ASP.NET to access ViewBag collection) shows the content of “Title” element.
As @ViewBag refers to dynamic type collection, it is possible to assign any type of elements inside.
Add a reference to Mvc MusicStore stylesheet, to define the style of your site.
cshtml
```
<!DOCTYPE html>
```
FakePre-63623dfac7ea4e7ba47ac7b078d88084-13f54511ab664764a494115f6238053aFakePre-991702afb8314399bda400314aac16c5-06eaefcccf6c4b85bf2ea881a166897eFakePre-5cac6ea617784b8f83490590d8d8f6e7-95144f95fb864c4b9878a823d2b1b951<link href="/Content/Site.css" rel="Stylesheet" type="text/css" />FakePre-8243c795702341e3ae5298cb2e8fad54-4ba747ebb36c41bcb64faf440640ebbdFakePre-2e7edd580bf94f5baca0c17dbe78ac57-0ae3eec226f24be3ad4a5574ef099e58FakePre-12a343b4f9c74f489c26c8b8ba12e8ee-322e15cf1a6e4adb9971eaa93d6582f0FakePre-f5c1ba3612fb47069abe2dff8322f196-a505d66da1834716a5ed59d8d0dc327eFakePre-2b28e74f9c324ff7b2ab8d9fbb0aa75e-4035bd12d24b4b329485882b5eb95316FakePre-f4d27bb2e74f4724aa574e56a035e838-8557e977866442908a89329b705f6892FakePre-265d40def00740d992c4f896db16ec3e-b6db4360e6264e9a917e0d566ff47438FakePre-19d752ba4ac6422eb18fa87387a09c87-3429c57c89704b87acad09345bc06c21
vbhtml
```
<!DOCTYPE html>
```
FakePre-66cbf01152ce4fa3b063ca38575afa2c-35c79586aa6c4ce6a9c7baa5be542eb7FakePre-9468010f136b48728c42e8d3efaf4a15-35f40a4739284a8d974fde7a8f2b4791FakePre-7ea742dfe0b14014935374ca2d20d042-da4d7eb9282642a188dfc9726d7bfd76<link href="/Content/Site.css" rel="Stylesheet" type="text/css" />FakePre-3867700aa51a4d7ca832697d95788011-bfeefa8257114535906a7c7abadf9c05FakePre-ad8538904b49462ca2efba2438c7f497-e8c7f613aae5498a8e0ec402705c4551FakePre-0708df3a698944dba62eb92cede6b575-bb07808a50bd43078d588f80c3c20331FakePre-098d6bf7b8b44920a92b6fc19b59e52b-cd9e4aee26704ee68e39bc6717054b40FakePre-62b26d886c2243c48bea6c7fb28aaebf-2727ddaf6ad7467a8b34456f37cde8e8FakePre-f6c32cd0c512411b94a393f01bfdba83-981af2f51eea4f99b46214182934a682FakePre-0601251c39114efb902fa89f83b155f4-8839f6325fde4ab184a49d1fee839ae8FakePre-4691b3203104446ba44fdd121879eb60-9d50f2844a54427186c2cc47b97d96e4
Add a common header with links to the Home page and Store area on all pages in the site. In order to do that, add the following code inside the <div> statement.
cshtml
```
<!DOCTYPE html>
```
FakePre-8d5ddc8ea2cb4d2b8ec7476978a2209b-49d67cd5a8b34b989138a63d5c4b8cd2FakePre-ce30694d811447dbb7c4f263884a3a9b-3156b778900b4392ae4c5d991444fa04FakePre-46848d67c42c4d01b479b021197d3193-a777c84cb8914d55babe9afd1359749fFakePre-083b746fe9d144e0ae3c8b38485dd755-9ae4c00a1d3a42bbab8c29c03666e118FakePre-10da7d3618f94e0d985a78ca1c9d5378-1f2c6fe7b3874a809af059d2488e67b4FakePre-bf0abf0321b9429b9cf8b98ffbd1b23e-a5f59b00c6ee40259fd7960752dca3f9FakePre-1c2384459f2a4167a2de64d0b086c4b6-e02df10184e040e7943bf0136eda554aFakePre-b9256c5d79af4219b10cb3a7ece841f2-9c258c692bfb42acbde01e21d1354417FakePre-54c2c76d1c3e4b4490b1d178c3ccc9af-cd3537b1a22a4262b823551e40a6035e <div id="header"> <h1>ASP.NET MVC MUSIC STORE</h1> <ul id="navlist"> <li class="first"><a href="/" id="current">Home</a></li> <li><a href="/Store/">Store</a></li> </ul> </div>FakePre-227530cf4792462eb6c23a138abefdf3-b22b867f06734edf95a3c23f0e390acbFakePre-9f5b98d571d84d13b28a4b8d7b0aafa2-59109db6497647e5a8961f0bb3ef06feFakePre-6611a996e9b2490cb18e84597a04ed3a-4a0a9447ed8649a9a40cdd5329634a7dFakePre-9c5ecb82a17844f8a54d8fd790a0e68b-7f9349a5d02647de8228a3606284c939
vbhtml
```
<!DOCTYPE html>
```
FakePre-107802b63282464d8daf630ce0cb1af7-142cd191406f475ba9a473ee8eb0403bFakePre-b2a4b27f30a74ec0a700f95148ea936b-ea2ffa2b43bb4bb083ff733a3ac3ba31FakePre-324a719e6ffd4781a308ccbd8544aea6-e74804aef3a54ba3874d44360f07d2ceFakePre-d27602725f274f8ab13c95ce89e737ae-73f2cd4c19754c558fb6d12dde581decFakePre-2c2d412634bc40c3bdf61f4d44ef3101-d04c9acb28144ffca544e8b3b75745d9FakePre-6c31ef66f3294ebdb6df1066e8c94ef7-0a698f3cc04241a8bd7fb7e0380cb78eFakePre-43160a6bb8894ef08d36f653514f6c68-0fca9717efae49f9a40e37a6558d1c9eFakePre-bad704187e794a7db19554b50fb86b5b-4bb21f59ffca47169f426a5fa05e0848FakePre-ffe04ab7de67435f8cbfc4d6700c29b3-2383848193ce4369ac4d9c43db0d2a75 <div id="header"> <h1>ASP.NET MVC MUSIC STORE</h1> <ul id="navlist"> <li class="first"><a href="/" id="current">Home</a></li> <li><a href="/Store/">Store</a></li> </ul> </div>FakePre-e8d21f6596a44049a50a09be4d945af1-8acac193167849bb8dcef93257c9365aFakePre-d643aa3f30d44b9b973e0a20124d1faa-64f4b3d75e704a85a66042312c587384FakePre-4aa37cb980da4775ac3b1a416dd27a38-61ac3413b9b64be58196a42bbdcfde73FakePre-ea170bdbbf704c9b942283fcc3308436-116b1c0c407e4a76a8b2d75d4dcb4540
Add an optional section before the body by using IsSectionDefined directive:
cshtml
```
…    
```
FakePre-5358c35a03a1419688356b0d84cd84fb-3d851a76f0484ef78eaa714219de74be @if (IsSectionDefined("header")) { @RenderSection("header") }FakePre-63bb07f4cb2c473d8d54bdde52ef5701-ef39215736a64b05a04423e0ec8e68c2FakePre-c9c2ab1ecca94e4cac3442a18ae1363c-e7d35213ae9f4bf99d4d307f4eea1fdb
vbhtml
```
…    
```
FakePre-3a55c45d4e3d434891cd7117fa1b9a4c-c8b8b021855b479095a9a7518d119299 @If IsSectionDefined("header") Then @RenderSection("header") End ifFakePre-c922a842726e4b6493e08194e2769ec4-be9f013799454ce7bfab7ce7ec4d4623FakePre-a4e749cb2c914bab9701e5a494d754cb-2368df68e2d442eaa6e3b62746869383
Note:

Optional sections can also be defined by using the directive @RenderSection(“header”,optional:true)

Task 2 – Adding a View Template in Razor

In this task, you will add a view template in Razor for the Home page. At the end of the task you should get the same page you use to have when using ASPX templates, but with a simplified syntax.

Open HomeController.[cs|vb] class and right-click inside the Index Action method display context menu. Select Add View menu option to display the dialog box.

Figure 5

Adding a new Home Index View from a Razor Template - CS

Figure 6
Adding a new Home Index View from a Razor Template - VB
The Add View Dialog appears. It allows generating View template files. By default this dialog pre-populates the name of the View template so that it matches the action method that will use it (in this case, View name is set to Index). Fill the dialog box according to the following values and click Add:
1. Choose Razor (CSHTML|VBHTML) at “View Engine”.
2. Make sure the “Use a layout or master page” checkbox is checked and verify that Razor Layout template path is “~/Views/Shared/Site.cshtml|vbhtml”.
  
  Figure 7
  Adding a new Razor View dialog box – C#
  
  Figure 8
  Adding a new Razor View dialog box - VB
Visual Studio generates an Index.cshtml|vbhtml Razor view template inside the Views\Home folder with this structure:

cshtml

@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/Site.cshtml"; } <h2>Index</h2>

vbhtml

@Code ViewBag.Title = "Index" Layout = "~/Views/Shared/Site.vbhtml" End Code <h2>Index</h2>

Note:

You can change your page layout by modifying the Layout variable value.
Add a comment and a title inside a code block with Razor syntax.
cshtml

@{ ViewBag.Title = "Home"; } <h2>This is the Home Page</h2> @{ var myname = "MVC Music Store"; <div> My name is @myname </div> } @* <div> I'm inside a comment </div> *@
```
    Layout = "~/Views/Shared/Site.cshtml";
```
@{ ViewBag.Title = "Home"; } <h2>This is the Home Page</h2> @{ var myname = "MVC Music Store"; <div> My name is @myname </div> } @* <div> I'm inside a comment </div> *@FakePre-c2f1483719cd4314bc33b48b8c83e852-b2431ddb43df447c96a13559b76c8ae0FakePre-2bebf222a8d64e5c964e520bac574e1b-aa3ccc8e46bb450b8a8c47b4558d9079
vbhtml

@Code ViewBag.Title = "Home" End Code <h2>This is the Home Page</h2> @Code Dim myname = "MVC Music Store" <div> My name is @myname </div> End Code @* <div> I'm inside a comment </div> *@
```
    Layout = "~/Views/Shared/Site.vbhtml"
```
@Code ViewBag.Title = "Home" End Code <h2>This is the Home Page</h2> @Code Dim myname = "MVC Music Store" <div> My name is @myname </div> End Code @* <div> I'm inside a comment </div> *@FakePre-d9d844180e7844958bd91d5964079f7f-4692fe54e8324435b1f1bde6a1113b2aFakePre-947cfa2860364c77a18bb7c485d84948-ab4fb8a117564f02abebc3f708d1cc57
Note:

If you have an HTML markup inside a code block (in this example, <div>) and want to use C# code instruction inside, you will need to use the @ operator. After the HTML markup is closed (in this example , </div>), you can continue writing C# code again without using @.
Show current date after the title, and use @: delimiter to write a variable inside a code block:
cshtml

@{ } @{ var now = DateTime.Now; <text> Now is @now </text> } <div> @{ var engine = "Razor"; @: I'm using @engine engine. } </div>
```
    ViewBag.Title = "Home";
```
FakePre-b0570e1b2c3e484bb78de80f3faf897c-9bda3e1e4a6d46fa85a32f9f6e3a7687@{ } @{ var now = DateTime.Now; <text> Now is @now </text> } <div> @{ var engine = "Razor"; @: I'm using @engine engine. } </div>FakePre-5508c2180bc94b3e8b2c49fcba5647c2-c442969c96c143d48285afec60b48cd3FakePre-648f66652a1f499a8a81cb7d2ac8d45e-df8ed4ac815b4a45b867c7dc5d85b3f4FakePre-68acbfb16dcb43d78294ff0c70d2659a-7107a4c5394049838a0fd0d83020816cFakePre-dfcdcdb5e87a487b98d0ebcaadc230dd-c7678b12242e478c96557613efade830FakePre-c952a734f90f4da0a963453a31c12aaa-166a641783474d00bc756bcaa4ea4f1eFakePre-828231ed65b9464a91d898af10da2c68-4d9ea5abfc5047ea94f195dbe8e37f2cFakePre-6b7659d8f0614a81b27a51c5f81b2e40-a234cf513841410cba065a7343590944FakePre-a2983a5d8fc94aafa2d1b657d3287198-a702f3760d7b41a4af98303810716a3cFakePre-345f959b925f464bb29caf1954f966d5-f05f8374a8e6401fbf30631a23e674e3FakePre-2be3c9726ee4421eb7dbc254b37f193e-af2426246eef44fdb0697b47b08e906f@{ } @{ var now = DateTime.Now; <text> Now is @now </text> } <div> @{ var engine = "Razor"; @: I'm using @engine engine. } </div>FakePre-34f38a1bccd14433a865c7252a3d0fe2-20fe72b707594a8496201cbd924d5d58FakePre-536ad1359d404349a27c7678a3df02f4-11a6da57f57e449783981a1220bc5d83FakePre-4b90329153784f33b5e1a4b42de342d3-ea6fe4cb47cc49a281b202f02f621eb5FakePre-966be38d65be45a0b843cb6ef33ccd9a-6fa5de25c28f494495602e28be563edcFakePre-3b0c1b7604174d96abe8680c80918eb7-c795fb0c42684587b8424f15a9ead061FakePre-4362c341962c4b38b67a32dffe4b439d-0671bf054a834b9dadab865ec1b26614FakePre-d64a7b49c0b94458b79428609a6838f1-3c30b5c2346a4cb99a4aa8442d40a052
vbhtml

@Code End Code @Code Dim now = DateTime.Now <text> Now is @now </text> End Code <div> @Code Dim engine = "Razor" @: I'm using @engine engine. End Code </div>
```
    ViewBag.Title = "Home"
```
FakePre-fafe825d1d9c4bf8aa6cdc711c994105-00d162cb38d243c688482ff823f6e123@Code End Code @Code Dim now = DateTime.Now <text> Now is @now </text> End Code <div> @Code Dim engine = "Razor" @: I'm using @engine engine. End Code </div>FakePre-a641d6a018b34f73b2d5aefc30b8ebcf-35af9de6810e40f6a24a9de68d1899c7FakePre-61fad7e344d74b3eb0081541f53ed5cd-fa9b14dac99a488ba95779c94d333e0fFakePre-f7ec61df1af54ff78f5f3970d45c374e-92cf206ed5e94c29b3d2cfbe1f79f255FakePre-d05857ada2034c828721b4dda883bbaa-beb3a3247c6946438fe19e47fb482255FakePre-796809c0d66a4dcc9715c804bcb7d294-3a0d58c7dc294fd99b4efc645e62f42eFakePre-4f66c67e814644e1a4bad1ace63500e8-f0aed89e577848f2863be2475cd3fbcfFakePre-f3f84ecd54044e4f864bd6db16b5224a-cb7602df63034115baee2aaf132ad0b1FakePre-01a9cd08092b47bd9de9839a990e3fab-39a7cc35964644afada957f07f5fd52dFakePre-7c46a32f62a44e088262b0f51cbc07c8-339ced88f487498dbd824af22e032b59FakePre-b512beae153c4f93a7d008c1c2cde886-084f15bfa5e641269d7b401716927fc6@Code End Code @Code Dim now = DateTime.Now <text> Now is @now </text> End Code <div> @Code Dim engine = "Razor" @: I'm using @engine engine. End Code </div>FakePre-b558c0d88c6444fcb5fd943f20a3bf89-f96476999dd34299b919befdcf63673fFakePre-3e60d8a8246949ef97e87e1a6f9b790f-d04f0619c4a340939219a3a06c7c09e4FakePre-a1f5e97068424d2a9fa72d28edd6abbf-dbad7440416f4dca92ec1d57ba4e7877FakePre-582ec73660074063b5eb97bca87cc271-e1860070a13d40e9a67a98dc144baa7dFakePre-1b1f13b2a6304a86b05a0c895f8d8a6e-18a2921d6789487aaf84d5c1297b98deFakePre-0c782f64391f48afbfe87d9d8297bec0-99298336ea3041dbbb2b833279f89ef2FakePre-b4f2c0c98b5d40ddae08ffe4267b6027-0c7a8ff47e084d5c95cf41e15f5604dc
Note:

@: operator allows single lines that can contain plain text or any mixture of text, markup and code that starts with plain text. @: must be used once per line.
To write multiple plain text/mixed lines, use the HTML element <text></text> instead.
Note that is not necessary to use @: inside a code block if you won’t be starting with plain text. As you have seen before, HTML markup elements can be included at any part of the code.
Add the optative section “Header”, which was defined in the layout page. This will render a “Welcome” message before the body section:
cshtml

@{ } @section header { <h3>Welcome</h3> }
```
    ViewBag.Title = "Home";
```
FakePre-bfcda23dddb54eeea94dd6d36861081b-0a67ad6616684d4c8bbba5dcf9744e6e@{ } @section header { <h3>Welcome</h3> }FakePre-5f019e7d7a134f26bd9391a2e4e655a0-f37ba36c23794888bb0393eb2114e5c2FakePre-85a28d40b6f546788330244342eb8342-2431f4c0823d409883763abc63e6763bFakePre-d5bb3a12411544a4bab6b4d6d5dd7ef9-a315c529d0a94ddab44943d7b611a912FakePre-4e7590fef82d4c78974501148728aa81-215642ee7f2f4554883e600ab98f2d67
vbhtml

@Code End Code @Section header <h3>Welcome</h3> End Section
```
    ViewBag.Title = "Home"
```
FakePre-5ec5d44318c24cd18d0d043b02fb8b68-d01125e7ed92448d9466fb5403f10dcd@Code End Code @Section header <h3>Welcome</h3> End SectionFakePre-63505b543d164741ac4f1e4af23d1b5e-d1299cbb8f2d4f45a054b2a943bea8c1FakePre-3d2741e081b146c087c5429bb98d89c5-8a40016914384bb985f21e4492806c06FakePre-6bc51318f49045cc9ec06e3b501a5b9a-268fb41431b246689e607ed2406d449aFakePre-087e22d95d0247d7a683f643568e9dc5-f77c4a155ffc4f3e82932e3fa4e8f38b

Task 3 – Running the Application

Press F5 to run the application.
The project starts in the Home page. Verify that the Razor view is loaded:

Figure 9
Showing a Razor View

Task 4 – Passing Parameters to a Layout Page

In this task, you will learn how to pass parameters from a page to its layout. To do that, you will use the PageData dynamic collection to pass a string message that will be rendered in the layout.

Open Index.cshtml|vbhtml view from the folder \Views\Home, and assign a string value to PageData collection:
cshtml

@{ PageData["ApplicationTitle"]= "ASP.NET MVC 3 MUSIC STORE – Razor Style"; }
```
    ViewBag.Title = "Home";
```
FakePre-e0eb9ea43d1f4bd1b90913127ad1ab75-ddae91847fb9400996a12ebab50ac174FakePre-c2c26b1ec6824de08e32a25970cb8088-4552477c3afd4043b865430c376e9198@{ PageData["ApplicationTitle"]= "ASP.NET MVC 3 MUSIC STORE – Razor Style"; }FakePre-cfa65b3f466d4794a689db7adf0b8f78-cf004b695b3148e59a6e4f2fbb0a94f4
vbhtml

@Code PageData("ApplicationTitle")= "ASP.NET MVC 3 MUSIC STORE – Razor Style" End Code
```
    ViewBag.Title = "Home";
```
FakePre-ff3409a863e547cb86feb6b13ce25f59-4cfbe67c650a4533b265de6e4061f0f7FakePre-6431329da625402eb5ff33613ab375e4-c5425662b2b54ab38e104cedb6b566b4@Code PageData("ApplicationTitle")= "ASP.NET MVC 3 MUSIC STORE – Razor Style" End CodeFakePre-ea6e60f5b1dd44af949d63ac74f39f54-634532a681ad44478034e85018663fca
Open Site.cshtml|vbhtml layout page from \Views\Shared project folder, and modify it to show PageData ApplicationTitle element after the @RenderBody directive:
cshtml – Site.cshtml
```
…
```
FakePre-ebac52bb0d164c2ea58cb59a079bdfe8-07a32e6e22c04bedbe74aa8f06e58574FakePre-251c29f09b6a44b7ba3aca03760df234-b2409deb314c4f748a7f9fe75ae1d976 @if (PageData["ApplicationTitle"]!=null) { <h3>@PageData["ApplicationTitle"]</h3> }FakePre-719d9bd8296d4b3b8f4bd0fece2fa919-65d827bced5848f6831be48b76cfec94
vbhtml – Site.vbhtml
```
…
```
FakePre-17d776d1354c474daf4f9c468298ef90-22aefc890231448a91d1186287fdb4cdFakePre-d58dd5b5671f49e3917f51082f710806-b5e4d791e2c64c91ba7f8602ac6efa11 @If PageData("ApplicationTitle") IsNot Nothing Then <h3>@PageData["ApplicationTitle"]</h3> End ifFakePre-d370a5585d0f4bffbd1c6f1e0ea08b7d-2342fed0eac644bb88f86d53366753bc

Task 5 – Running the Application

Press F5 to run the application.
The project starts in the Home page. Verify that the Razor view is loaded showing the PageData text:

Figure 10
A Razor View Showing a PageData element

In the next exercise you will learn how to create more Razor views that will access to Music Store model and show content.

Next Step

Exercise 2: Using Models in Razor Views

< previous | next >

Downloads

Download The Offline Training Kit
Download Hands-on Lab Document (DOCX)
Download Hands-on Lab Source Files