Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • ASP.NET MVC - Get Started
  • MVC Architecture
  • MVC Version History
  • Create First MVC App
  • MVC Folder Structure
  • Routing
  • Controller
  • Action method
  • Action Selectors
  • ActionVerbs
  • Model
  • View
  • Integrate Model, View & Controller
  • Model Binding
  • Create Edit View
  • Razor Syntax
  • Html Helpers
  • Exception Handling
  • Validation
  • Layout View
  • Partial View
  • ViewBag
  • ViewData
  • TempData
  • Filters
  • ActionFilters
  • Bundling
  • ScriptBundle
  • StyleBundle
  • Area
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

Razor Syntax

Razor is one of the view engines supported in ASP.NET MVC. Razor allows you to write a mix of HTML and server-side code using C# or Visual Basic. Razor view with visual basic syntax has .vbhtml file extension and C# syntax has .cshtml file extension.

Razor syntax has the following Characteristics:

  • Compact: Razor syntax is compact, enabling you to minimize the number of characters and keystrokes required to write code.
  • Easy to Learn: Razor syntax is easy to learn where you can use your familiar language C# or Visual Basic.
  • Intellisense: Razor syntax supports statement completion within Visual Studio.

Inline expression

Start with @ symbol to write server-side C# or VB code with HTML code. For example, write @Variable_Name to display the value of a server-side variable, e.g., DateTime.Now returns the current date and time. So, write @DateTime.Now to display the current date and time, as shown below. A single line expression does not require a semicolon at the end of the expression.

C# Razor Syntax
<h1>Razor syntax demo</h1>

<h2>@DateTime.Now.ToShortDateString()</h2>

Multi-statement Code block

You can write multiple lines of server-side code enclosed in braces @{ ... }. Each line must ends with a semicolon the same as C#.

Example: Server side Code in Razor Syntax
@{
    var date = DateTime.Now.ToShortDateString();
    var message = "Hello World";
}

<h2>Today's date is: @date </h2>
<h3>@message</h3>

Display Text from Code Block

Use @: or <text>/<text> to display texts within code block.

Example: Display Text in Razor Syntax
@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    @:Today's date is: @date <br />
    @message                               
}

Display text using <text> within a code block, as shown below.

Example: Text in Razor Syntax
@{
    var date = DateTime.Now.ToShortDateString();
    string message = "Hello World!";
    <text>Today's date is:</text> @date <br />
    @message                               
}

if-else condition

Write if-else condition starting with @ symbol. The if-else code block must be enclosed in braces , even for a single statement.

Example: if else in Razor
@if(DateTime.IsLeapYear(DateTime.Now.Year) )
{
    @DateTime.Now.Year @:is a leap year.
}
else { 
    @DateTime.Now.Year @:is not a leap year.
}

for loop

Example: for loop in Razor
@for (int i = 0; i &lt; 5; i++) { 
    @i.ToString() <br />
}
Output:
0 1 2 3 4

Model

Use @model to use model object anywhere in the view.

Example: Use Model in Razor
@model Student

<h2>Student Detail:</h2>
<ul>
    <li>Student Id: @Model.StudentId</li>
    <li>Student Name: @Model.StudentName</li>
    <li>Age: @Model.Age</li>
</ul>

Declare Variables

Declare a variable in a code block enclosed in brackets and then use those variables inside HTML with @ symbol.

Example: Variable in Razor
@{ 
    string str = "";

    if(1 &gt; 0)
    {
        str = "Hello World!";
    }
}

<p>@str</p>
Output:
Hello World!

Learn more about razor syntax on docs.microsoft.com.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.