razor view using @ in ASP.NET

Question

I know we use @ symbol to switch between C# code and html code, but for code like this below:

@for (int i = 1; i <= 10; i++)
{
    @i
}

why can we still place @ before i as @i? Since there is no html element here,so there is no switching and i is the c# code, if we just use "i" instead of "@i", we should get the same output?

Another question is :

@for (int i = 1; i <= 10; i++)
{
    <b>@i</b> 
    if (i % 2 == 0)
    {
        <text> - Even </text>
    }
    else
    {
        <text> - Odd </text>
    }
    <br />
}

why we don't need to place @ before if since < /b> before if indicates that it is current in html mode, and then we need to do like

@if (i% 2 == 0)
{
   ...
}

beside provideed answers which are good, i want to add this comment: when you are new in razor, you may find sometimes it is tricky.. this is because it is more smart than other old syntaxes... just rely on visual studio formatting (colors, intellisense, ...) and you will get familiar with it — S.Serpooshan, Jan 22 '17 at 04:54

score 2 · Answer 1 · answered Jan 22 '17 at 04:40

2

In your first example, the @i is an implicit expression where you are telling razor to output the value of i on the page. Removing the @ will turn it into a C# statement which will be an invalid syntax.

The @i in enclosed in your <b> tag is also an implicit expression.

Now your if inside your for block does not need an @ since it is inside the for code block. If it wasn't, you would need to add one before it (ie, @if ...).

References:

answered Jan 22 '17 at 04:40

Frank Fajardo

7,034
1
29
47

Side note: you can also sprinkle `@` next to variables everywhere in C# code without any effect - `@for(var @i =3;@i<10; @i++)` - http://stackoverflow.com/questions/429529/what-does-the-symbol-before-a-variable-name-mean-in-c... so sometimes `@` is just "at sign" without any additional impact (this case actually impacts Razor's behavior as shown in the answer) – Alexei Levenkov Jan 22 '17 at 04:52

score 1 · Answer 2 · answered Jan 22 '17 at 04:51

In the Razor view engine @ symbol is used to write embedded C# code within the HTML code it is like mixing C# and HTML code to render a template.

Question 1 - Ans:

@for (int i = 1; i <= 10; i++)
{
    @i
}

In the above code snippet, a HTML text will be directly placed in the output stream since it is rendering the i value directly in the HTML.

without the @i the code isn't valid because just i in C# isn't valid code neither it is in HTML so you would get a compilation error when the Razor view is parsed.

Quoestion 2 - Ans:

@for (int i = 1; i <= 10; i++)
{
    <b>@i</b> 
    if (i % 2 == 0)
    {
        <text> - Even </text>
    }
    else
    {
        <text> - Odd </text>
    }
    <br />
}

The Razor view engine is smart enough to know whether the embedded C# code is valid or not when it parses it.

What goes on here is that an embedded code block is started with using the @ sign later on any valid C# code doesn't need to have @ sign again before it because it is already inside the embedded code block, now just by properly closing the HTML tags or writing valid HTML the Razor view engine will render the template appropriately.

If you want to render a C# variable inside a HTML element then again you need to use the @ sign because the embedded code block breaks at the HTML tag and then continues again after that HTML element.

score 0 · Answer 3 · answered Jan 22 '17 at 06:09

In Razor, @ is used for two different purposes:

To denote the start of a code block. This is like <% %> in Web Forms.
To denote the inline expressions. This is like <%: %> in Web Forms.

1st question
@for {...} denote for a block of code, @i denote for the inline expression, telling razor to output the value of i on the page.
If you don't place @ before i, your code will be turned into invalid syntax.

2nd question
We need to place @ before i in the expression @i because it is an inline expression, telling razor to output the value of i with bold character on the page.
However, on next statement, we don't need to place @ before if, because it's still inside a block of code @for {...}

razor view using @ in ASP.NET

3 Answers3