You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/mvc/views/razor.md
+43-44Lines changed: 43 additions & 44 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,7 +26,7 @@ When an `@` symbol is followed by a [Razor reserved keyword](#razor-reserved-key
26
26
27
27
To escape an `@` symbol in Razor markup, use a second `@` symbol:
28
28
29
-
```cshtml
29
+
```razor
30
30
<p>@@Username</p>
31
31
```
32
32
@@ -38,11 +38,10 @@ The code is rendered in HTML with a single `@` symbol:
38
38
39
39
HTML attributes and content containing email addresses don't treat the `@` symbol as a transition character. The email addresses in the following example are untouched by Razor parsing:
@@ -69,20 +68,20 @@ HTML attributes and content containing email addresses don't treat the `@` symbo
69
68
70
69
Implicit Razor expressions start with `@` followed by C# code:
71
70
72
-
```cshtml
71
+
```razor
73
72
<p>@DateTime.Now</p>
74
73
<p>@DateTime.IsLeapYear(2016)</p>
75
74
```
76
75
77
76
With the exception of the C# `await` keyword, implicit expressions must not contain spaces. If the C# statement has a clear ending, spaces can be intermingled:
78
77
79
-
```cshtml
78
+
```razor
80
79
<p>@await DoSomething("hello", "world")</p>
81
80
```
82
81
83
82
Implicit expressions **cannot** contain C# generics, as the characters inside the brackets (`<>`) are interpreted as an HTML tag. The following code is **not** valid:
84
83
85
-
```cshtml
84
+
```razor
86
85
<p>@GenericMethod<int>()</p>
87
86
```
88
87
@@ -97,7 +96,7 @@ Generic method calls must be wrapped in an [explicit Razor expression](#explicit
97
96
98
97
Explicit Razor expressions consist of an `@` symbol with balanced parenthesis. To render last week's time, the following Razor markup is used:
99
98
100
-
```cshtml
99
+
```razor
101
100
<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>
102
101
```
103
102
@@ -115,7 +114,7 @@ The code renders the following HTML:
115
114
116
115
Explicit expressions can be used to concatenate text with an expression result:
117
116
118
-
```cshtml
117
+
```razor
119
118
@{
120
119
var joe = new Person("Joe", 33);
121
120
}
@@ -127,15 +126,15 @@ Without the explicit expression, `<p>[email protected]</p>` is treated as an email add
127
126
128
127
Explicit expressions can be used to render output from generic methods in `.cshtml` files. The following markup shows how to correct the error shown earlier caused by the brackets of a C# generic. The code is written as an explicit expression:
129
128
130
-
```cshtml
129
+
```razor
131
130
<p>@(GenericMethod<int>())</p>
132
131
```
133
132
134
133
## Expression encoding
135
134
136
135
C# expressions that evaluate to a string are HTML encoded. C# expressions that evaluate to `IHtmlContent` are rendered directly through `IHtmlContent.WriteTo`. C# expressions that don't evaluate to `IHtmlContent` are converted to a string by `ToString` and encoded before they're rendered.
137
136
138
-
```cshtml
137
+
```razor
139
138
@("<span>Hello World</span>")
140
139
```
141
140
@@ -154,7 +153,7 @@ The HTML is shown in the browser as plain text:
154
153
> [!WARNING]
155
154
> Using `HtmlHelper.Raw` on unsanitized user input is a security risk. User input might contain malicious JavaScript or other exploits. Sanitizing user input is difficult. Avoid using `HtmlHelper.Raw` with user input.
156
155
157
-
```cshtml
156
+
```razor
158
157
@Html.Raw("<span>Hello World</span>")
159
158
```
160
159
@@ -168,7 +167,7 @@ The code renders the following HTML:
168
167
169
168
Razor code blocks start with `@` and are enclosed by `{}`. Unlike expressions, C# code inside code blocks isn't rendered. Code blocks and expressions in a view share the same scope and are defined in order:
170
169
171
-
```cshtml
170
+
```razor
172
171
@{
173
172
var quote = "The future depends on what you do today. - Mahatma Gandhi";
174
173
}
@@ -191,7 +190,7 @@ The code renders the following HTML:
191
190
192
191
In code blocks, declare [local functions](/dotnet/csharp/programming-guide/classes-and-structs/local-functions) with markup to serve as templating methods:
193
192
194
-
```cshtml
193
+
```razor
195
194
@{
196
195
void RenderName(string name)
197
196
{
@@ -214,7 +213,7 @@ The code renders the following HTML:
214
213
215
214
The default language in a code block is C#, but the Razor Page can transition back to HTML:
216
215
217
-
```cshtml
216
+
```razor
218
217
@{
219
218
var inCSharp = true;
220
219
<p>Now in HTML, was in C# @inCSharp</p>
@@ -225,7 +224,7 @@ The default language in a code block is C#, but the Razor Page can transition ba
225
224
226
225
To define a subsection of a code block that should render HTML, surround the characters for rendering with the Razor `<text>` tag:
227
226
228
-
```cshtml
227
+
```razor
229
228
@for (var i = 0; i < people.Length; i++)
230
229
{
231
230
var person = people[i];
@@ -244,7 +243,7 @@ The `<text>` tag is useful to control whitespace when rendering content:
244
243
245
244
To render the rest of an entire line as HTML inside a code block, use `@:` syntax:
246
245
247
-
```cshtml
246
+
```razor
248
247
@for (var i = 0; i < people.Length; i++)
249
248
{
250
249
var person = people[i];
@@ -265,7 +264,7 @@ Razor automatically omits attributes that aren't required. If the value passed i
265
264
266
265
For example, consider the following Razor markup:
267
266
268
-
```cshtml
267
+
```razor
269
268
<div class="@false">False</div>
270
269
<div class="@null">Null</div>
271
270
<div class="@("")">Empty</div>
@@ -293,7 +292,7 @@ Razor retains `data-` attributes if their values are `null` or `false`.
293
292
294
293
Consider the following Razor markup:
295
294
296
-
```cshtml
295
+
```razor
297
296
<div data-id="@null" data-active="@false"></div>
298
297
```
299
298
@@ -311,7 +310,7 @@ Control structures are an extension of code blocks. All aspects of code blocks (
311
310
312
311
`@if` controls when code runs:
313
312
314
-
```cshtml
313
+
```razor
315
314
@if (value % 2 == 0)
316
315
{
317
316
<p>The value was even.</p>
@@ -320,7 +319,7 @@ Control structures are an extension of code blocks. All aspects of code blocks (
320
319
321
320
`else` and `else if` don't require the `@` symbol:
322
321
323
-
```cshtml
322
+
```razor
324
323
@if (value % 2 == 0)
325
324
{
326
325
<p>The value was even.</p>
@@ -337,7 +336,7 @@ else
337
336
338
337
The following markup shows how to use a switch statement:
339
338
340
-
```cshtml
339
+
```razor
341
340
@switch (value)
342
341
{
343
342
case 1:
@@ -356,7 +355,7 @@ The following markup shows how to use a switch statement:
356
355
357
356
Templated HTML can be rendered with looping control statements. To render a list of people:
358
357
359
-
```cshtml
358
+
```razor
360
359
@{
361
360
var people = new Person[]
362
361
{
@@ -371,7 +370,7 @@ The following looping statements are supported:
371
370
372
371
`@for`
373
372
374
-
```cshtml
373
+
```razor
375
374
@for (var i = 0; i < people.Length; i++)
376
375
{
377
376
var person = people[i];
@@ -382,7 +381,7 @@ The following looping statements are supported:
382
381
383
382
`@foreach`
384
383
385
-
```cshtml
384
+
```razor
386
385
@foreach (var person in people)
387
386
{
388
387
<p>Name: @person.Name</p>
@@ -392,7 +391,7 @@ The following looping statements are supported:
392
391
393
392
`@while`
394
393
395
-
```cshtml
394
+
```razor
396
395
@{ var i = 0; }
397
396
@while (i < people.Length)
398
397
{
@@ -406,7 +405,7 @@ The following looping statements are supported:
406
405
407
406
`@do while`
408
407
409
-
```cshtml
408
+
```razor
410
409
@{ var i = 0; }
411
410
@do
412
411
{
@@ -422,7 +421,7 @@ The following looping statements are supported:
422
421
423
422
In C#, a `using` statement is used to ensure an object is disposed. In Razor, the same mechanism is used to create HTML Helpers that contain additional content. In the following code, HTML Helpers render a `<form>` tag with the `@using` statement:
424
423
425
-
```cshtml
424
+
```razor
426
425
@using (Html.BeginForm())
427
426
{
428
427
<div>
@@ -442,7 +441,7 @@ Exception handling is similar to C#:
442
441
443
442
Razor has the capability to protect critical sections with lock statements:
444
443
445
-
```cshtml
444
+
```razor
446
445
@lock (SomeLock)
447
446
{
448
447
// Do critical section work
@@ -453,7 +452,7 @@ Razor has the capability to protect critical sections with lock statements:
453
452
454
453
Razor supports C# and HTML comments:
455
454
456
-
```cshtml
455
+
```razor
457
456
@{
458
457
/* C# comment */
459
458
// Another C# comment
@@ -469,7 +468,7 @@ The code renders the following HTML:
469
468
470
469
Razor comments are removed by the server before the webpage is rendered. Razor uses `@* *@` to delimit comments. The following code is commented out, so the server doesn't render any markup:
471
470
472
-
```cshtml
471
+
```razor
473
472
@*
474
473
@{
475
474
/* C# comment */
@@ -509,7 +508,7 @@ Later in this article, the section [Inspect the Razor C# class generated for a v
509
508
510
509
The `@attribute` directive adds the given attribute to the class of the generated page or view. The following example adds the `[Authorize]` attribute:
511
510
512
-
```cshtml
511
+
```razor
513
512
@attribute [Authorize]
514
513
```
515
514
@@ -538,7 +537,7 @@ For Razor components, `@code` is an alias of [`@functions`](#functions) and reco
538
537
539
538
The `@functions` directive enables adding C# members (fields, properties, and methods) to the generated class:
540
539
541
-
```cshtml
540
+
```razor
542
541
@functions {
543
542
// C# members (fields, properties, and methods)
544
543
}
@@ -562,7 +561,7 @@ The following code is the generated Razor C# class:
562
561
563
562
`@functions` methods serve as templating methods when they have markup:
564
563
565
-
```cshtml
564
+
```razor
566
565
@{
567
566
RenderName("Mahatma Gandhi");
568
567
RenderName("Martin Luther King, Jr.");
@@ -589,7 +588,7 @@ The `@implements` directive implements an interface for the generated class.
589
588
590
589
The following example implements <xref:System.IDisposable?displayProperty=fullName> so that the <xref:System.IDisposable.Dispose*> method can be called:
591
590
592
-
```cshtml
591
+
```razor
593
592
@implements IDisposable
594
593
595
594
<h1>Example</h1>
@@ -607,7 +606,7 @@ The following example implements <xref:System.IDisposable?displayProperty=fullNa
607
606
608
607
The `@inherits` directive provides full control of the class the view inherits:
609
608
610
-
```cshtml
609
+
```razor
611
610
@inherits TypeNameOfClassToInheritFrom
612
611
```
613
612
@@ -662,13 +661,13 @@ The `@layout` directive specifies a layout for routable Razor components that ha
662
661
663
662
The `@model` directive specifies the type of the model passed to a view or page:
664
663
665
-
```cshtml
664
+
```razor
666
665
@model TypeNameOfModel
667
666
```
668
667
669
668
In an ASP.NET Core MVC or Razor Pages app created with individual accounts, `Views/Account/Login.cshtml` contains the following model declaration:
670
669
671
-
```cshtml
670
+
```razor
672
671
@model LoginViewModel
673
672
```
674
673
@@ -680,7 +679,7 @@ public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>
Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>;
914
913
@@ -923,7 +922,7 @@ public class Pet
923
922
924
923
The template is rendered with `pets` supplied by a `foreach` statement:
925
924
926
-
```cshtml
925
+
```razor
927
926
@foreach (var pet in pets)
928
927
{
929
928
@petTemplate(pet)
@@ -940,7 +939,7 @@ Rendered output:
940
939
941
940
You can also supply an inline Razor template as an argument to a method. In the following example, the `Repeat` method receives a Razor template. The method uses the template to produce HTML content with repeats of items supplied from a list:
942
941
943
-
```cshtml
942
+
```razor
944
943
@using Microsoft.AspNetCore.Html
945
944
946
945
@functions {
@@ -968,7 +967,7 @@ Using the list of pets from the prior example, the `Repeat` method is called wit
968
967
* Number of times to repeat each pet.
969
968
* Inline template to use for the list items of an unordered list.
0 commit comments