Introducing Razor

Razor is a server side scripting language developed by Microsoft for programming in ASP.Net. Razor is mainly used in Views in MVC. In this post we will look into the basic syntax of Razor.
Razor code is added using the @ character.

Single statement block.

@{string name = "Pappu"; }

Statements in blocks must end with a “;’.
pre>@name

is an inline statement and no semicolon is needed.

<body>
@{string name = "Pappu"; }
<div><h1>My name is @name</h1></div>
</body>


Multi statement block

@{string name = "Pappu";
int age = 50;
}
<div><h1>My name is @name and I am @age  years old</h1></div>

var keyword can be used for declaring variables in Razor. Razor will decide the type of the variable on the basis of the actual data stored. The previous lines can be written as

@{var name = "Pappu";
var age = 50;
}
<div>
<h1>My name is @name and I am @age  years old</h1>
</div>

Conditionals in Razor

@{var a = 5;
var b = 7;
var result = "";
}
<div>
<h1>
@{ if (a > b)
{ result = "a>b"; }
else
{ result = "a<b"; }
}
@result
</h1>

Braces are compulsory in Razor and the following will not work.

@{ if (a > b)
result = "a>b";
else
result = "a<b";
}

Mixing html and Razor

@{var a = 5;
var b = 7;
}
<div>
@if (a > b)
{
<h2>@a  is greater</h2>
}
else
{
<h2>@b  is greater</h2>
}


Comments in Razor

@* Single line comment*@
@*Multiline Comment
Line 1
Line 2
*@

Conversions from the var types

AsInt(), IsInt()
AsBool(), IsBool()
AsFloat(), IsFloat()
AsDecimal(), IsDecimal()
AsDateTime(), IsDateTime()
ToString()

Example

@{var a = "5";
var b = "7";
var s1 = a + b;
var s2 = a.AsInt() + b.AsInt();}
a+b=@s1
<br />
a+b=@s2

Ternary

@{var a = 5;
var b = 7;
var max = (a>b)?a:b;
<h2>Max=@max</h2>
}

Switch

@{
var day = 5;
var dayname = "";
switch (day)
{
case 1: dayname = "Sun";
break;
case 2:
dayname = "Mon";
break;
case 3:
dayname = "Tue";
break;
case 4:
dayname = "Wed";
break;
case 5:
dayname = "Thu";
break;
case 6:
dayname = "Fri";
break;
case 7:
dayname = "Sat";
break;
default:
dayname = "Invalid.";
break;
}
}
<h3>@dayname</h3>

@for (var i = 1; i <=10; i++)
{
<p>@i</p>
}


For each

<ul>
@foreach (var item in Request.ServerVariables)
{
<li>@item</li>
}
</ul>

Use of the @functions tag.

@functions {
int factorial(int n)
{
int f = 1;
for (int i = 1; i <= n; i++)
f = f * i;
return f;
}
class Book
{
public string bookname { get; set; }
}
}
@{ Book b=new Book();
b.bookname = "Let us C";}
<h2>Book=@b.bookname</h2>
<h2>Factorial=@factorial(5)</h2>

Forms and controls using Razor
The Html.BeginForm method has the following syntx.

Html.BeginForm( Action, Controller, FormMethod, htmlAttributes )

A simple example is

@using (Html.BeginForm("ChampakAction", "ChampakController", FormMethod.Post, new { id = "myformid" }))
{
}

The generated HTML is.

<form action="/ChampakController/ChampakAction" id="myformid" method="post"></form>

For further study we will assume that we have the following class as model.

public class Book
{
[Key]
public int BookId{ get; set; }
public string BookName { get; set; }
public string Author { get; set; }
public int Price { get; set; }
}

The  relevant method in the controller is

public ActionResult Razor()
{
Book b = new Book();
b.BookId = 10;
b.BookName = "Basic Java";
b.Price = 1200;
return View(b);
}
<div>
@using (Html.BeginForm("ChampakAction", "ChampakController", FormMethod.Post, new { id = "myformid" }))
{
@Html.TextBoxFor(m => m.BookName, new { @class = "saffronclass" })
<br />
@Html.TextAreaFor(m => m.BookName, new { @class = "saffronclass" })            <br />
@Html.LabelFor(m => m.IsAvailable)
@Html.CheckBoxFor(m => m.IsAvailable, new { @class = "saffronclass" })            <br />
<label>Text book @Html.RadioButtonFor(m => m.BookType, "Text Book")            </label>
<label>Novel  @Html.RadioButtonFor(m => m.BookType, "Novel")</label>            <br />
@Html.DropDownListFor(m => m.Topics,new SelectList(  Model.Topics),                     "Select Topics")
<br /> @Html.HiddenFor(m => m.BookId)
<br />
@Html.PasswordFor(m => m.BookName)
<br />
@Html.DisplayFor(m => m.BookName)
<br />
}
</div>
<div>
<form action="/ChampakController/ChampakAction" id="myformid" method="post"><input class="saffronclass" id="BookName" name="BookName" type="text" value="Basic Java" />
<br />
<textarea class="saffronclass" cols="20" id="BookName" name="BookName" rows="2">
Basic Java</textarea>
<br />
<label for="IsAvailable">IsAvailable</label><input checked="checked" class="saffronclass" data-val="true" data-val-required="The IsAvailable field is required." id="IsAvailable" name="IsAvailable" type="checkbox" value="true" /><input name="IsAvailable" type="hidden" value="false" />
<br />
<label>
Text book
<input checked="checked" id="BookType" name="BookType" type="radio" value="Text Book" />
</label>
<label>
Novel
<input id="BookType" name="BookType" type="radio" value="Novel" />
</label>
<br />
<select id="Topics" name="Topics"><option value="">Select Topics</option>
<option>Threads</option>
<option>Arrays</option>
<option>Web</option>
</select> <br />
<input data-val="true" data-val-number="The field BookId must be a number." data-val-required="The BookId field is required." id="BookId" name="BookId" type="hidden" value="10" /> <br />
<input id="BookName" name="BookName" type="password" /> <br />
Basic Java <br />
</form>
</div>

Next step Validation

Leave a Reply