Guidelines to use Razor Syntax

In this chapter you will learn
  1. Guidelines to use razor syntax
  2. Razor Programming Example
This is very important chapter which covers all the properties of Razor Markup. If you covered this chapter clearly you will learn half of Razor Markup. So, it is advisable to study this chapter twice for better understanding.

Guidelines to Use Razor Markup

1. Inline Markup - Use @ symbol to add Razor Markup in the page.
Example 
<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
@* Single Line Statements *@        
        @{var message="I am Single Line Statements";}
@* Inline Markup *@
        <h5>The message is : @message</h5>
    </body>
</html>
Output
I am Single Line Statements
2. Code Block - Use @ {your c# code} to add code block in a page.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
@* This is Code Block *@        
        @{
          var num1=5;
          var num2=10;
          var result=num1 + num2;          
          }
@* Inline Markup *@
        <h5>Sum of @num1 + @num2 = @result</h5>
    </body>
</html>
Output
Sum of 5 + 10 = 15
 
3. Inside block, each code statements must end with semicolon (;)
Example 
@{
    var msg1="Hello";
    int num = 5;
}
4. Use var keyword for creating variable. You can also use c# data types or vb data types for creating variables.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
@{
    var num1=5;
    int num2=10;
    var result=num1+num2;
}
        <h5>@num1 + @num2 = @result</h5>
    </body>
</html>
Output
5 + 10 = 15
5. Keep string in double quotation (" ") mark.
Example 
@{
   var message="Hello Razor, How Are You!";
   string msg="Hi. Whats up!";
}
6. C# code is case sensitive.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
@{
   var num=5;
   var Num=10;
   var NuM=num+Num;
}
        <h5>Sum of @num+@Num=@NuM</h5>
    </body>
</html>
Output
Sum of 5+10=15
7. You can use Objects in Razor Markup
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
@{
<h5>Url : @Request.Url</h5>
<h5>File Path : @Request.FilePath</h5>
<h5>Location : @Request.MapPath(Request.FilePath)</h5>
<h5>Request Type : @Request.RequestType</h5>
}
    </body>
</html>
Output
Url : http://localhost:47150/
File Path : /
Location : C:\Users\Steven\Documents\My Web Sites\EmptySite1\
Request Type : GET
8. You can use logic and decision making in Razor Markup
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @{
            string message;
            int i=5;
            if(i<5)
            {
                message="It is less than 5";
            }
            else
            {
                message="It is greater than 5";   
            }
        }
        <h5>@message</h5>
    </body>
 </html>
Output
It is greater than 5
9. You can combine Text, HTML and Razor syntax in Code block at the same time.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @{
            string name = "Jack";
            int year = 20;
        }
        <h5>Hello @name. You are @year years old.</h5>
    </body>
</html>
Output
Hello Jack. You are 20 years old.
10. Whitespace – Razors ignores extra white spaces so don't worry about extra spaces.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @{
            string message;
            message          =              "Hello Razor"            ;
        }
        <h5>@message</h5>
    </body>
 </html>
Output
Hello Razor
11. Line breaks – Razors ignores extra line breaks, so don't worry about extra line breaks.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        @{
            string message;
            message
            =
            "Hello Razor"
            ;
        }
        <h5>@message</h5>
    </body>
 </html>
Output
Hello Razor
12. Comments – You can comment like this @* your comment *@. All the comment must be inside @* and *@ symbol. It might be inline or multiline both.
Example 
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
       @* I am comment and I will not be appear on the page *@
       @*
I am multi line comment.
I will also not appear in web pages.
       *@
        <h5>Comment Page</h5>
    </body>
 </html>

Summary

In this chapter you learned the several important guidelines which will help you to write error free Razor markup language.
 

Share your thought