Table of contents
1.
Introduction
2.
Working Example
3.
Implicit transitions
4.
Explicit delimited transition
5.
Explicit line transition
6.
FAQs
7.
Key Takeaways
Last Updated: Mar 27, 2024

ASP.NET Razor Code Blocks

Author Abhay Trivedi
0 upvote
Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

The ASP.NET Razor Code Blocks are used to enclose C# code statements. It starts with @ (at) symbol and is enclosed by curly braces({}). Unlike expressions, C# code inside code blocks will not get rendered. The default language in the code block is C#, but we can travel back to HTML. HTML within a code block will get rendered as HTML.

Working Example

Here is a basic example of ASP.NET Razor Code Blocks:

@{ 
    Layout = null;  
    var fruit = "Apple";  
}  
<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>ASP.NET Razor Code Blocks Example</title>  
</head>  
<body>  
    <h1>Fruit is: @fruit </h1>  
</body>  
</html>  

 

Output:

Implicit transitions

C# is the default language in the Razor code block. Implicit transition is done when we render HTML written within a code block as HTML code. Razor code blocks implicit the transitions HTML code and yields to the view page.

<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Implicit transitions Example</title>  
</head>  
<body> 
    @{
    var val = true;
    <p>Earlier C#, Now HTML</p>
}
</body>  
</html>  

 

Output:

Explicit delimited transition

When we define a sub-section of a code block that should render HTML, surround the characters generated with the Razor <text> tag.

It is mandate to use <text> tag. Otherwise, it throws a compile-time error.

@{
    List<string> fruits = new List<string>()
    {
        "Apple",
        "Banana",
        "Coconut",
        "Dates",
        "Jackfruit",
        "Tamarind"
    };
}

@for (var i = 0; i < fruits.Length; i++)
{
    var fruit = fruits[i];
    <text>Fruit @i: @fruit</text> <br/>
}

 

Output:

The <text> tag helps control whitespace when rendering content:

  • It renders only the content between the <text> tags.
  • No whitespace appears in the HTML output before or after the <text> tag.

Explicit line transition

To render the remnant of an entire line as HTML inside a code block, use the @ syntax. Without @, A Razor will generate runtime error in the code:

@{
    List<string> fruits = new List<string>()
    {
        "Apple",
        "Banana",
        "Coconut",
        "Dates",
        "Jackfruit",
        "Tamarind"
    };
}

@for (var i = 0; i < fruits.Length; i++)
{
    var fruit = fruits[i];
    @:Fruit @i: @fruit
}

 

Output:

Note: Extra @ characters in a Razor file can cause compiler errors at statements later in the block. These compiler errors can be challenging to understand because the actual error occurs before the reported error. After combining multiple implicit/explicit expressions into a single code block, this error is standard.

FAQs

  1. What is ASP.NET?
    ASP.NET is an open-source, server-side web development framework designed to produce dynamic web pages. Microsoft developed it to allow programmers to build active websites, applications, and services.
     
  2. What is ASP.NET in C#?
    ASP.NET is a web-based application framework developed and marketed by Microsoft to let programmers build dynamic websites. It will enable you to use a full-featured programming language such as C# or VB.NET to build web applications quickly.
     
  3. What are ASP.NET Razor Control Structures?
    ASP.NET Razor Control Structures are control statements used to control program flow. C# programming language uses if, else, if-else, switch, while, for, and foreach to perform the conditional logic in the application.
     
  4. What are ASP.NET Razor Code Blocks?
    The ASP.NET Razor Code Blocks is a markup syntax for embedding. NET-based code into webpages. Razor syntax consists of Razor markup, C#, & HTML. Files containing Razor typically have a .cshtml file extension.
     
  5. What is the difference between Blazor and Razor?
    Razor is a templating engine that unites C# with HTML to build dynamic web content. Blazor is a component-based, single-page framework for building client-side web apps using ASP.NET that works well with all modern browsers through WebAssembly for client-side Blazor.

Key Takeaways

This article teaches about ASP.NET Razor Code Blocks and how we use them. We saw why ASP.NET Razor Code Blocks could be beneficial for a developer to learn. 

Also read about ASP.NET Razor Control StructuresFeatures Of ASP Net and ASP.NET Interview Questions.

Click here to read about the Top 10 web development frameworks. Click here to see other related blogs on ASP.net. Check out our Web development course and blogs on Backend Web Technologies.

If you are preparing for your DSA interviews, then, Coding Ninjas Studio is a one-stop destination. This platform will help you acquire effective coding techniques and overview student interview experience in various product-based companies.

Happy Learning!

Live masterclass