IMG-LOGO

Razor Syntax

andy - 14 Jan, 2014 7784 Views 0 Comment

In this quick tutorial you will learn the basic of Razor template engine programming. The example below will focus on C# syntax programming.

Code Block in Razor

To using a code block in Razor, you just need to include a symbol @ follow by the opening and closing {} curly tags.

	<html>
		<head></head>
		<body>
			@{
			 string myName = "Andy";
			}

			<p>This is the example on how to use the variable inside the html tags.</p>
	
			<p>This is my Name @myName.</p>
		</body>
	</html>

For Loop in Razor

This is how to use for loop in Razor

	<html>
		<head></head>
		<body>
			@for (int i = 1; i <= 10; i++) {
				<div>Value number is @i</div>
			}
		</body>
	</html>

Foreach Loop for Models

Let's say you declare a Model called Customer that has attriubtes of ID, Firstname and Lastname.

	<ul>
		@foreach (var objCustomer in Model.Customers) {
			<li>Name: @objCustomer.Firstname @objCustomer.LastName</li>
		}
	</ul>

If Condition in Razor

To use the if condition in Razor is pretty simple. Please see those two examples:

	

First example is combination of html text inside the if condition.

@if(!User.IsAuthenticated){
You are not login on the site.
}

Second example using if condition to set the variable value.

@{ var isOdd = false; if(4 % 2 == 0){ isOdd = true; }else{ isOdd = false; } }

Comment in Razor

To comment in Razor is pretty simple, you just need to use opening tag of @* and closing tag of *@. See below example:

	@{
		var myNumber = 10;
		@* This is my comment *@

		Alternatively this will work as well
		/* This is my commment */
	}

Template Layout Page

If you are learning MVC, you may find this basic html layout code. You will learn the basic built in functions available in Razor and how to use it. Let's assume our default layout page name is called _Layout.cshtml

	<html>
		<head>
			<title>@View.Title</title>
		</head>
		<body>
			@RenderBody()

			<div class="footer">
				@RenderSection("Footer")
			</div>
		</body>
	</html>
	@{
		LayoutPage = "~/Views/Shared/_Layout.cshtml";
	}

The first @View is a dictionary ViewBag. This variable is used to hold any data that can you specify inside a view(.cshtml) page in MVC. In this specific example, the dictionary key is Title. The next @RenderBody function is used to render the content of .cshtml that is inherit this _Layout.cshtml page. While the @RenderSection will be used to render a defined section tag specified in a page.

Let's create a new view page cshtml and name it Home.cshtml and examine the following code.

	@{
		Layout = "~/Views/Shared/_Layout.cshtml";
		ViewBag.Title = "This is my title page";
	}

	@section Footer{
		Copyright 2013
	} 

	<div class="main-content">
		This is the content of my page.
	</div>

If you see about the example view page. It will use the master template specified in the Layout keyword. It also set a Title in the ViewBag Dictionary that will be used in the master template. You will notice as well that there is a section called Footer. This footer section content will be mapped to RenderSection() section. And lastly, all the content of above example will be mapped to RenderBody() section.

Note: @RenderSection function can accept optional required attribute. This will be handy to use if there are other view cshtml pages that do not always have Footer section. By using false option, it will skip this section if it is not provided. See below example on how to use it.

	@RenderSection("Footer", false)

	//Alternatively there is another built in function you can use to check

	@if(IsSectionDefined("Footer")){
		//enter the condition in here or add some html text here...
	}

Declare functions/methods in Razor

You may wonder how you can create a sub routine or function methods in Razor. To create those routines or functions, you will need to include a tag of @functions{}. See below example for more details.

	@functions{
		public string ReturnMyName(string myName){
			return "Hello " + myName;
		}
	}

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Blogs

Related Tutorials