MVC3 Razor: Displaying html within code blocks

Question

In my cshtml files I have a lot of blocks with stuff like this:

@if(Model.foo)
{
    <span>Hello World</span>
}

The only reason the span is there is because I can't find any other way to force it to recognize that "Hello World" is part of the html unless I surround it in html tags. Is there a good way to escape the code that doesn't involve adding meaningless tags to the display?

score 247 · Accepted Answer · answered Jul 06 '11 at 20:20

247

You could use @: to escape:

@if(Model.foo)
{
    @:Hello World
}

or the special <text> tag which is not outputted in the response:

@if(Model.foo)
{
    <text>Hello World</text>
}

answered Jul 06 '11 at 20:20

Darin Dimitrov

1,023,142
271
3,287
2,928

1

The second way (using ) is much better. If you use @: Razor has a habit of losing your indentation, or even worse of adding extra spaces in HMTL tags (eg
becomes < div >), hence stopping your page working properly. I've learnt this lesson slowly and painfully - avoid @:!
– Andy Brown Feb 16 '21 at 10:54

score 15 · Answer 2 · answered Jul 06 '11 at 20:21

15

@if(Model.foo)
{
  @:Hello World
}

answered Jul 06 '11 at 20:21

Sergey Metlov

25,747
28
93
153

score 10 · Answer 3 · answered Dec 04 '12 at 15:07

10

<text>Explicit HTML<text>

@(Explicit C#)

answered Dec 04 '12 at 15:07

Cătălin Rădoi

1,804
23
43

score 10 · Answer 4 · edited Nov 15 '13 at 20:54

10

You can add text in as below:

@if(Model.foo)
{
    @:Hello World
}

when you use @ razor switch it to code block mode. Hence you need to specify text as above.

edited Nov 15 '13 at 20:54

Michał Powaga

22,561
8
51
62

answered Jul 06 '11 at 20:35

matmat

2,366
5
19
23

NMathur · Answer 5 · 2014-05-09T06:31:02.930

8

many developers has provided many ways above .. here is one more which is working fine in MVC 4 .. I hope it will work for MVC 3 also ..

@if(Model.foo)
{
    @Html.Label("Hello World")
}

edited May 09 '14 at 06:31

answered Oct 25 '13 at 12:13

NMathur

829
1
17
35

score 2 · Answer 6 · answered Mar 11 '20 at 15:55

The above answers are great. I'm going to include a link to Scott Guthrie's article on this, since it shows some more examples and explanations.

https://weblogs.asp.net/scottgu/asp-net-mvc-3-razor-s-and-lt-text-gt-syntax

@if (p.UnitsInStock == 0 {
  <text>
    Donec in ante vitae purus consequat laoreet ut elementum
    purus. Ut ut tempus nulla, quis ultrices est. Integer
    pharetra ante in lectus porta, a lacinia ex faucibus. 
    Aliquam magna risus, pretium vel neque at, laoreet 
    ultrices lectus. Morbi posuere luctus risus. Nullam 
    tincidunt massa egestas nunc tempor scelerisque.  
  </text>
}


@if (p.UnitsInStock == 0 {
  @: Line 1
  @: Line 2
  @: Line 3
}

MVC3 Razor: Displaying html within code blocks

6 Answers6

Linked