Razor Справочник по синтаксису для ASP.NET Core

Мақала
11/30/2023

Рик Андерсон, Тейлор Маллен и Дэн Викарель

Razor — это синтаксис разметки для внедрения кода на основе .NET на веб-страницы. Синтаксис Razor состоит из разметки Razor , C#и HTML. Файлы, Razor содержащие обычно .cshtml расширение файла. Razor также находится в Razor файлах компонентов (.razor). Razor синтаксис аналогичен обработчикам шаблонов различных платформ одностраничных приложений JavaScript (SPA), таких как Angular, React, VueJs и Svelte. Дополнительные сведения см. в статье об устаревших функциях по состоянию на ASP.NET Core 3.0.

Введение в ASP.NET веб-программирование с помощью синтаксиса Razor предоставляет множество примеров программирования с синтаксисомRazor. Хотя этот раздел написан для ASP.NET, а не для ASP.NET Core, большинство примеров применяются к ASP.NET Core.

Отрисовка HTML

Язык по умолчанию Razor — HTML. Отрисовка HTML из Razor разметки отличается от отрисовки HTML-файла. Разметка HTML в .cshtmlRazor файлах отрисовывается сервером без изменений.

Синтаксис Razor

Razor поддерживает C# и использует @ символ для перехода с HTML на C#. Razor вычисляет выражения C# и отрисовывает их в выходных данных HTML.

@ Если за символом следует зарезервированное Razor ключевое слово, он переходит в Razorразметку с конкретными атрибутами. В противном случае он переходит в обычный HTML-код.

Чтобы избежать символа @ в Razor разметке, используйте второй @ символ:

<p>@@Username</p>

Код будет отображен в HTML с одним символом @:

<p>@Username</p>

HTML-атрибуты и содержимое, включающие адреса электронной почты, не расценивают символ @ как символ перехода. Адреса электронной почты в следующем примере не касаются Razor синтаксического анализа:

<a href="mailto:Support@contoso.com">Support@contoso.com</a>

Масштабируемая векторная графика (SVG)

Поддерживаются элементы SVG foreignObject :

@{
    string message = "foreignObject example with Scalable Vector Graphics (SVG)";
}

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" rx="10" ry="10" width="200" height="200" stroke="black" 
        fill="none" />
    <foreignObject x="20" y="20" width="160" height="160">
        <p>@message</p>
    </foreignObject>
</svg>

Неявные Razor выражения

Неявные Razor выражения начинаются с @ кода C#:

<p>@DateTime.Now</p>
<p>@DateTime.IsLeapYear(2016)</p>

Неявные выражения не должны содержать пробелов. Исключением является ключевое слово C# await. Если оператор C# имеет четкое окончание, пробелы вставлять можно:

<p>@await DoSomething("hello", "world")</p>

Неявные выражения не могут содержать универсальные шаблоны C#, так как символы в угловых скобках (<>) интерпретируются как тег HTML. Следующий код является недопустимым:

<p>@GenericMethod<int>()</p>

Приведенный выше код вызывает ошибку компилятора примерно следующего вида:

Элемент "int" не был закрыт. Все элементы должны быть самозакрывающимися или иметь соответствующий закрывающий тег.
Не удается преобразовать группу методов "GenericMethod" в не являющийся делегатом тип "object". Предполагалось вызывать этот метод?

Вызовы универсальных методов должны быть упакованы в явное Razor выражение или Razor блок кода.

Явные Razor выражения

Явные Razor выражения состоят из символа с сбалансированной @ скобкой. Для отображения времени прошлой недели используется следующая Razor разметка:

<p>Last week this time: @(DateTime.Now - TimeSpan.FromDays(7))</p>

Любое содержимое в скобках @() вычисляется и отображается в выходных данных.

Неявные выражения, описанные в предыдущем разделе, обычно не содержат пробелов. В следующем коде из значения текущего времени неделя не вычитается:

<p>Last week: @DateTime.Now - TimeSpan.FromDays(7)</p>

Код отображает следующий HTML:

<p>Last week: 7/7/2016 4:39:52 PM - TimeSpan.FromDays(7)</p>

Явные выражения позволяют объединять результат своего выполнения с дополнительным текстом:

@{
    var joe = new Person("Joe", 33);
}

<p>Age@(joe.Age)</p>

Без явного выражения Age@joe.Age обрабатывается как адрес электронной почты, и на выходе отображается Age@joe.Age. Если же текст написан как явное выражение, то вы получите Age33.

Явные выражения можно использовать для отображения выходных данных из универсальных методов в .cshtml файлах. В следующем примере показано, как исправить ошибку, показанную ранее и вызванную скобками в универсальном шаблоне C#. Код записывается как явное выражение:

<p>@(GenericMethod<int>())</p>

Кодирование выражений

Выражения C#, которые имеют строковое выходное значение, кодируются в формате HTML. Выражения C#, которые имеют значение IHtmlContent, обрабатываются непосредственно с помощью IHtmlContent.WriteTo. Выражения C#, которые не имеют выходное значение IHtmlContent, преобразуются в строку с помощью ToString и кодируются перед обработкой.

@("<span>Hello World</span>")

Приведенный выше код отображает следующий HTML-код:

&lt;span&gt;Hello World&lt;/span&gt;

HTML-код отображается в браузере в виде обычного текста:

Hello World

Выходные данные HtmlHelper.Raw не кодируются, но отображаются в виде разметки HTML.

Предупреждение

Использование HtmlHelper.Raw с непроверенными входными данными пользователя представляет угрозу безопасности. Эти входные данные могут содержать вредоносный код JavaScript или другие эксплойты. Очистка вводимых пользователем данных является сложной задачей. Старайтесь не использовать HtmlHelper.Raw с такими данными.

@Html.Raw("<span>Hello World</span>")

Код отображает следующий HTML:

<span>Hello World</span>

Razor Блоки кода

Razor Блоки кода начинаются с @ и заключены в {}них. В отличие от выражений код C# внутри блоков кода не обрабатывается. Блоки кода и выражения в представлении используют общую область и определяются в следующем порядке:

@{
    var quote = "The future depends on what you do today. - Mahatma Gandhi";
}

<p>@quote</p>

@{
    quote = "Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.";
}

<p>@quote</p>

Код отображает следующий HTML:

<p>The future depends on what you do today. - Mahatma Gandhi</p>
<p>Hate cannot drive out hate, only love can do that. - Martin Luther King, Jr.</p>

В блоках кода объявите локальные функции с помощью разметки для использования в качестве методов создания шаблонов:

@{
    void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }

    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

Код отображает следующий HTML:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

Неявные переходы

Язык по умолчанию в блоке кода — C#, но Razor страница может вернуться к HTML:

@{
    var inCSharp = true;
    <p>Now in HTML, was in C# @inCSharp</p>
}

Явный переход с разделителями

Чтобы определить подраздел блока кода, который должен отображать HTML, окружает символы для отрисовки с тегом Razor<text> :

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <text>Name: @person.Name</text>
}

Используйте этот способ для отрисовки HTML, не заключенного в HTML-теги. Без HTML или Razor тега Razor возникает ошибка среды выполнения.

Тег <text> хорошо подходит для контроля пробелов при отрисовке содержимого:

Отрисовывается только содержимое между тегами <text>.
В выходных данных HTML пробелы до или после тега <text> не отображаются.

Явный перенос строки

Чтобы отобразить rest всю строку в виде HTML в блоке кода, используйте @: синтаксис:

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    @:Name: @person.Name
}

@: Без кода Razor создается ошибка среды выполнения.

Дополнительные @ символы в Razor файле могут вызвать ошибки компилятора при инструкциях позже в блоке. Эти дополнительные @ ошибки компилятора:

Может быть трудно понять, так как фактическая ошибка возникает до сообщаемой ошибки.
Распространено после объединения нескольких неявных и явных выражений в один блок кода.

Отрисовка условного атрибута

Razor Автоматически не удается указать атрибуты, которые не нужны. Если переданное значение или null falseатрибут не отображается.

Например, рассмотрим следующее razor:

<div class="@false">False</div>
<div class="@null">Null</div>
<div class="@("")">Empty</div>
<div class="@("false")">False String</div>
<div class="@("active")">String</div>
<input type="checkbox" checked="@true" name="true" />
<input type="checkbox" checked="@false" name="false" />
<input type="checkbox" checked="@null" name="null" />

Razor Предыдущая разметка создает следующий HTML-код:

<div>False</div>
<div>Null</div>
<div class="">Empty</div>
<div class="false">False String</div>
<div class="active">String</div>
<input type="checkbox" checked="checked" name="true">
<input type="checkbox" name="false">
<input type="checkbox" name="null">

Управляющие структуры

Управляющие структуры являются расширением блоков кода. Все аспекты блоков кода (переход на разметку, встроенный код C#) также относятся к следующим структурам.

Условий `@if, else if, else, and @switch`

@if контролирует, когда нужно запускать код:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}

Для else и else if символ @ не требуется:

@if (value % 2 == 0)
{
    <p>The value was even.</p>
}
else if (value >= 1337)
{
    <p>The value is large.</p>
}
else
{
    <p>The value is odd and small.</p>
}

В следующей разметке показано использование оператора switch:

@switch (value)
{
    case 1:
        <p>The value is 1!</p>
        break;
    case 1337:
        <p>Your number is 1337!</p>
        break;
    default:
        <p>Your number wasn't 1 or 1337.</p>
        break;
}

Петлевание `@for, @foreach, @while, and @do while`

Операторы выполнения цикла позволяют выполнять отрисовку шаблонного HTML. Отрисовка списка людей:

@{
    var people = new Person[]
    {
          new Person("Weston", 33),
          new Person("Johnathon", 41),
          ...
    };
}

Поддерживаются следующие операторы выполнения цикла:

@for

@for (var i = 0; i < people.Length; i++)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@foreach

@foreach (var person in people)
{
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>
}

@while

@{ var i = 0; }
@while (i < people.Length)
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
}

@do while

@{ var i = 0; }
@do
{
    var person = people[i];
    <p>Name: @person.Name</p>
    <p>Age: @person.Age</p>

    i++;
} while (i < people.Length);

Составной оператор `@using`

В C# оператор using позволяет обеспечить использование какого-то объекта. В Razorэтом же механизме используется для создания вспомогательных элементов HTML, содержащих дополнительное содержимое. В следующем коде вспомогательные функции HTML используют оператор @using для создания тега <form>:

@using (Html.BeginForm())
{
    <div>
        <label>Email: <input type="email" id="Email" value=""></label>
        <button>Register</button>
    </div>
}

`@try, catch, finally`

Обработка исключений выполняется так же, как в C#:

@try
{
    throw new InvalidOperationException("You did something invalid.");
}
catch (Exception ex)
{
    <p>The exception message: @ex.Message</p>
}
finally
{
    <p>The finally statement.</p>
}

`@lock`

Razor имеет возможность защитить критически важные разделы с помощью инструкций блокировки:

@lock (SomeLock)
{
    // Do critical section work
}

Razor комментарии удаляются сервером перед отрисовки веб-страницы. Razor используется @* *@ для комментариев разделителей. Следующий код закомментирован, поэтому сервер не отрисовывает разметку:

@*
    @{
        /* C# comment */
        // Another C# comment
    }
    <!-- HTML comment -->
*@

Директивы

Razor директивы представлены неявными выражениями с зарезервированными ключевыми словами после символа @ . Директива обычно изменяет способ компиляции представления или функций.

Понимание того, как Razor создает код для представления, упрощает понимание работы директив.

@{
    var quote = "Getting old ain't for wimps! - Anonymous";
}

<div>Quote of the Day: @quote</div>

Код создает класс, аналогичный следующему:

public class _Views_Something_cshtml : RazorPage<dynamic>
{
    public override async Task ExecuteAsync()
    {
        var output = "Getting old ain't for wimps! - Anonymous";

        WriteLiteral("/r/n<div>Quote of the Day: ");
        Write(output);
        WriteLiteral("</div>");
    }
}

Далее в этой статье в разделе "Проверка класса C#", созданного Razor для представления , объясняется, как просмотреть созданный класс.

`@attribute`

Директива @attribute добавляет данный атрибут к классу созданной страницы или представления. В следующем примере добавляется атрибут [Authorize]:

@attribute [Authorize]

Директива @attribute также может использоваться для предоставления шаблона маршрута на основе констант в компоненте Razor . В следующем примере @page директива в компоненте заменяется @attribute директивой и шаблоном маршрута на основе констант в Constants.CounterRouteприложении, в котором установлено значение "/counter":

- @page "/counter"
+ @attribute [Route(Constants.CounterRoute)]

`@code`

Этот сценарий применяется только к Razor компонентам (.razor).

Блок @code позволяет Razor компоненту добавлять элементы C# (поля, свойства и методы) в компонент:

@code {
    // C# members (fields, properties, and methods)
}

Для Razor компонентов @code используется псевдоним @functions и рекомендуется.@functions Допускается использование нескольких блоков @code.

`@functions`

Директива @functions позволяет добавлять элементы C# (поля, свойства и методы) в создаваемый класс:

@functions {
    // C# members (fields, properties, and methods)
}

В Razor компонентах используйте его @functions @code для добавления элементов C#.

Например:

@functions {
    public string GetHello()
    {
        return "Hello";
    }
}

<div>From method: @GetHello()</div>

Код создает следующую разметку HTML:

<div>From method: Hello</div>

Следующий код — созданный Razor класс C#:

using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc.Razor;

public class _Views_Home_Test_cshtml : RazorPage<dynamic>
{
    // Functions placed between here 
    public string GetHello()
    {
        return "Hello";
    }
    // And here.
#pragma warning disable 1998
    public override async Task ExecuteAsync()
    {
        WriteLiteral("\r\n<div>From method: ");
        Write(GetHello());
        WriteLiteral("</div>\r\n");
    }
#pragma warning restore 1998

Методы @functions служат в качестве методов создания шаблонов при наличии разметки:

@{
    RenderName("Mahatma Gandhi");
    RenderName("Martin Luther King, Jr.");
}

@functions {
    private void RenderName(string name)
    {
        <p>Name: <strong>@name</strong></p>
    }
}

Код отображает следующий HTML:

<p>Name: <strong>Mahatma Gandhi</strong></p>
<p>Name: <strong>Martin Luther King, Jr.</strong></p>

`@implements`

Директива @implements реализует интерфейс для созданного класса.

В следующем примере реализуется System.IDisposable, чтобы можно было вызывать метод Dispose:

@implements IDisposable

<h1>Example</h1>

@functions {
    private bool _isDisposed;

    ...

    public void Dispose() => _isDisposed = true;
}

`@inherits`

Директива @inherits позволяет полностью управлять классом, которому наследует представление:

@inherits TypeNameOfClassToInheritFrom

Следующий код — это пользовательский Razor тип страницы:

using Microsoft.AspNetCore.Mvc.Razor;

public abstract class CustomRazorPage<TModel> : RazorPage<TModel>
{
    public string CustomText { get; } = 
        "Gardyloo! - A Scottish warning yelled from a window before dumping" +
        "a slop bucket on the street below.";
}

В представлении отображается CustomText:

@inherits CustomRazorPage<TModel>

<div>Custom text: @CustomText</div>

Код отображает следующий HTML:

<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

@model и @inherits могут использоваться в одном представлении. @inherits может находиться в файле, импортируемом _ViewImports.cshtml представлением:

@inherits CustomRazorPage<TModel>

Следующий код показывает пример строго типизированного представления:

@inherits CustomRazorPage<TModel>

<div>The Login Email: @Model.Email</div>
<div>Custom text: @CustomText</div>

Если передать в модель "rick@contoso.com", представление создает следующую разметку HTML:

<div>The Login Email: rick@contoso.com</div>
<div>
    Custom text: Gardyloo! - A Scottish warning yelled from a window before dumping
    a slop bucket on the street below.
</div>

`@inject`

Директива @inject Razor позволяет странице внедрять службу из контейнера службы в представление. Дополнительные сведения: Внедрение зависимостей в представления.

`@layout`

Этот сценарий применяется только к Razor компонентам (.razor).

Директива @layout задает макет для routable Razor компонентов, имеющих директиву @page . Компоненты макета используются, чтобы избежать дублирования и несогласованности кода. Дополнительные сведения см. в разделе ASP.NET Макеты ядраBlazor.

`@model`

Этот сценарий применяется только к представлениям MVC и Razor страницам (.cshtml).

Директива @model определяет тип модели, передаваемой в представление или страницу:

@model TypeNameOfModel

В приложении ASP.NET Core MVC или Razor Pages, созданном с отдельными учетными записями пользователей, Views/Account/Login.cshtml содержится следующее объявление модели:

@model LoginViewModel

Созданный класс наследует от RazorPage<LoginViewModel>:

public class _Views_Account_Login_cshtml : RazorPage<LoginViewModel>

Razor предоставляет Model свойство для доступа к модели, переданной в представление:

<div>The Login Email: @Model.Email</div>

Директива @model задает тип свойства Model. Директива указывает T в RazorPage<T> — созданном классе, на основе которого создается производное представление. Если директива @model не указана, свойство Model имеет тип dynamic. Дополнительные сведения см. в разделе Strongly typed models and the @model keyword.

`@namespace`

Директива @namespace:

Задает пространство имен класса созданной Razor страницы, представления MVC или Razor компонента.
Задает корневые производные пространства имен страниц, представлений или компонентов из ближайшего файла импорта в дереве каталогов , _ViewImports.cshtml (представления или страницы) или _Imports.razor (Razor компоненты).

@namespace Your.Namespace.Here

Пример Pages, показанный в следующей Razor таблице:

Каждый импорт Pages/_ViewImports.cshtmlстраницы.
Pages/_ViewImports.cshtml содержит @namespace Hello.World.
Каждая страница имеет Hello.World в качестве корня пространства имен.

Стр.	Пространство имен
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Hello.World.MorePages.EvenMorePages`

Предыдущие связи применяются к импорту файлов, используемых с представлениями и Razor компонентами MVC.

Если у нескольких файлов импорта есть директива @namespace, для задания корневого пространства имен используется файл, ближайший к странице, компоненту или представлению в дереве каталогов.

EvenMorePages Если папка в предыдущем примере содержит файл @namespace Another.Planet импорта (или Pages/MorePages/EvenMorePages/Page.cshtml файл содержит@namespace Another.Planet), результат показан в следующей таблице.

Стр.	Пространство имен
`Pages/Index.cshtml`	`Hello.World`
`Pages/MorePages/Page.cshtml`	`Hello.World.MorePages`
`Pages/MorePages/EvenMorePages/Page.cshtml`	`Another.Planet`

`@page`

Директива @page имеет различные эффекты в зависимости от типа файла, в котором она используется. Директива:

.cshtml В файле указывается, что файл является страницейRazor. Дополнительные сведения см. в разделе "Пользовательские маршруты " и "Общие сведения о Razor страницах" в ASP.NET Core.
Указывает, что Razor компонент должен обрабатывать запросы напрямую. Дополнительные сведения см. в статье Маршрутизация ASP.NET Core Blazor и навигация.

`@preservewhitespace`

Этот сценарий применяется только к Razor компонентам (.razor).

Если задано false значение (по умолчанию), пробелы в отрисованной разметке из Razor компонентов (.razor) удаляются, если:

Они находятся в начале или конце элемента.
Они находятся в начале или конце параметра RenderFragment. Например, когда дочернее содержимое передается другому компоненту.
Они находятся в начале или конце блока кода C#, например @if и @foreach.

`@rendermode`

Этот сценарий применяется только к Razor компонентам (.razor).

Задает режим отрисовки Razor компонента:

InteractiveServer: применяет интерактивную отрисовку сервера с помощью Blazor Server.
InteractiveWebAssembly: применяет интерактивную отрисовку WebAssembly с помощью Blazor WebAssembly.
InteractiveAuto: Изначально применяет интерактивную отрисовку WebAssembly с помощью Blazor Server, а затем применяет интерактивную отрисовку WebAssembly с помощью WebAssembly при последующих посещениях после Blazor скачивания пакета.

Для экземпляра компонента:

<... @rendermode="InteractiveServer" />

В определении компонента:

@rendermode InteractiveServer

Примечание.

Blazor шаблоны включают статическую using директиву для RenderMode файла приложения _Imports (Components/_Imports.razor) для более @rendermode короткого синтаксиса:

@using static Microsoft.AspNetCore.Components.Web.RenderMode

Без предыдущей директивы компоненты должны явно указывать статический RenderMode класс в @rendermode синтаксисе:

<Dialog @rendermode="RenderMode.InteractiveServer" />

Дополнительные сведения, включая рекомендации по отключению предварительной подготовки с помощью атрибута директивы или директивы, см. в разделе ASP.NET Режимы отрисовки CoreBlazor.

`@section`

Этот сценарий применяется только к представлениям MVC и Razor страницам (.cshtml).

Директива @section используется в сочетании с макетами MVC и Pages, чтобы разрешить представлениям Razor или страницам отображать содержимое в разных частях HTML-страницы. Подробные сведения см. в статье Макет в ASP.NET Core.

`@typeparam`

Этот сценарий применяется только к Razor компонентам (.razor).

Директива @typeparam объявляет параметр универсального типа для созданного класса компонента:

@typeparam TEntity

Поддерживаются универсальные типы с ограничениями типов where:

@typeparam TEntity where TEntity : IEntity

Дополнительные сведения см. в следующих статьях:

`@using`

Директива @using добавляет директиву C# using в созданное представление:

@using System.IO
@{
    var dir = Directory.GetCurrentDirectory();
}
<p>@dir</p>

В Razor компонентах также определяет, @using какие компоненты находятся в области.

Атрибуты директивы

Razor Атрибуты директивы представлены неявными выражениями с зарезервированными ключевыми словами после символа @ . Атрибут директивы обычно изменяет способ компиляции или функций элемента.

`@attributes`

Этот сценарий применяется только к Razor компонентам (.razor).

@attributes позволяет компоненту обрабатывать необъявленные атрибуты. Дополнительные сведения см. в разделе ASP.NET Splatting и произвольные параметры атрибута CoreBlazor.

`@bind`

Этот сценарий применяется только к Razor компонентам (.razor).

Привязка данных в компонентах выполняется с помощью атрибута @bind. Дополнительные сведения см. в разделе ASP.NET Привязка Blazorосновных данных.

`@bind:culture`

Этот сценарий применяется только к Razor компонентам (.razor).

@bind:culture Используйте атрибут с @bind атрибутом, чтобы обеспечить System.Globalization.CultureInfo синтаксический анализ и форматирование значения. Дополнительные сведения см. в статье Глобализация и локализация в ASP.NET Core Blazor.

`@formname`

Этот сценарий применяется только к Razor компонентам (.razor).

@formname присваивает имя Razor формы обычной HTML-форме компонента или форме на EditForm основе (Editform документация). Значение @formname должно быть уникальным, что предотвращает столкновения форм в следующих ситуациях:

Форма помещается в компонент с несколькими формами.
Форма создается из внешней библиотеки классов, обычно пакета NuGet для компонента с несколькими формами, и автор приложения не управляет исходным кодом библиотеки, чтобы задать другое имя внешней формы, отличное от имени, используемого другой формой в компоненте.

Дополнительные сведения и примеры см. в разделе ASP.NET Основные Blazor формы.

`@on{EVENT}`

Этот сценарий применяется только к Razor компонентам (.razor).

Razor предоставляет функции обработки событий для компонентов. Дополнительные сведения см. в статье Обработка событий Blazor в ASP.NET Core.

`@on{EVENT}:preventDefault`

Этот сценарий применяется только к Razor компонентам (.razor).

Запрещает выполнение действия по умолчанию для события.

`@on{EVENT}:stopPropagation`

Этот сценарий применяется только к Razor компонентам (.razor).

Останавливает распространение события.

`@key`

Этот сценарий применяется только к Razor компонентам (.razor).

Атрибут директивы @key заставляет алгоритм сравнения компонентов гарантировать сохранение элементов или компонентов на основе значения ключа. Дополнительные сведения см. в разделе "Сохранение элементов, компонентов и моделей" в ASP.NET Core Blazor.

`@ref`

Этот сценарий применяется только к Razor компонентам (.razor).

Ссылки на компоненты (@ref) предоставляют способ ссылаться на экземпляр компонента, чтобы можно было выполнять команды для этого экземпляра. Дополнительные сведения см. в статье Компоненты Razor ASP.NET Core.

Делегаты с шаблонами Razor

Этот сценарий применяется только к представлениям MVC и Razor страницам (.cshtml).

Razor шаблоны позволяют определить фрагмент пользовательского интерфейса со следующим форматом:

@<tag>...</tag>

В следующем примере показано, как указать шаблонный делегат в качестве делегата Razor Func<T,TResult>. Динамический тип указывается для параметра метода, инкапсулируемого делегатом. Тип объекта указывается в качестве возвращаемого значения делегата. Этот шаблон используется с List<T>объекта Pet, имеющим свойство Name.

public class Pet
{
    public string Name { get; set; }
}

@{
    Func<dynamic, object> petTemplate = @<p>You have a pet named <strong>@item.Name</strong>.</p>;

    var pets = new List<Pet>
    {
        new Pet { Name = "Rin Tin Tin" },
        new Pet { Name = "Mr. Bigglesworth" },
        new Pet { Name = "K-9" }
    };
}

Шаблон отрисовывается с использованием pets, предоставляемого оператором foreach:

@foreach (var pet in pets)
{
    @petTemplate(pet)
}

Отображенные выходные данные:

<p>You have a pet named <strong>Rin Tin Tin</strong>.</p>
<p>You have a pet named <strong>Mr. Bigglesworth</strong>.</p>
<p>You have a pet named <strong>K-9</strong>.</p>

Вы также можете указать встроенный Razor шаблон в качестве аргумента в метод. В следующем примере Repeat метод получает Razor шаблон. Метод использует этот шаблон для создания HTML-содержимого с повторениями элементов из списка:

@using Microsoft.AspNetCore.Html

@functions {
    public static IHtmlContent Repeat(IEnumerable<dynamic> items, int times,
        Func<dynamic, IHtmlContent> template)
    {
        var html = new HtmlContentBuilder();

        foreach (var item in items)
        {
            for (var i = 0; i < times; i++)
            {
                html.AppendHtml(template(item));
            }
        }

        return html;
    }
}

С использованием списка домашних животных из предыдущего примера метод Repeat вызывается следующим образом:

List<T> объекта Pet.
Количество повторений для каждого домашнего животного.
Встроенный шаблон, используемый для перечисления элементов неупорядоченного списка.

<ul>
    @Repeat(pets, 3, @<li>@item.Name</li>)
</ul>

Отображенные выходные данные:

<ul>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Rin Tin Tin</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>Mr. Bigglesworth</li>
    <li>K-9</li>
    <li>K-9</li>
    <li>K-9</li>
</ul>

Вспомогательные функции тегов

Этот сценарий применяется только к представлениям MVC и Razor страницам (.cshtml).

Существует три директивы, которые относятся к вспомогательным функциям тегов.

Директива	Function
`@addTagHelper`	Делает вспомогательные функции тегов доступными в представлении.
`@removeTagHelper`	Удаляет из представления вспомогательные функции тегов, добавленные ранее.
`@tagHelperPrefix`	Задает префикс тега, который активирует поддержку вспомогательной функции тега и ее использования в явном виде.

Razor зарезервированные ключевые слова

Razor Ключевые слова

page
namespace
functions
inherits
model
section
helper (В настоящее время не поддерживается ASP.NET Core)

Razor ключевые слова экранируются с помощью @(Razor Keyword) (например, @(functions)).

Ключевые слова C# Razor

case
do
default
for
foreach
if
else
lock
switch
try
catch
finally
using
while

Ключевые слова C# Razor должны быть дважды экранированы ( @(@C# Razor Keyword) например, @(@case)). Первый @ экранирует Razor средство синтаксического анализа. а второй @ — для обхода C#.

Зарезервированные ключевые слова, не используемые Razor

class

Проверка класса C#, созданного Razor для представления

Пакет Razor SDK обрабатывает компиляцию Razor файлов. По умолчанию созданные файлы кода не создаются. Чтобы включить создание файлов кода, задайте директиву EmitCompilerGeneratedFiles в файле проекта (.csproj) trueследующим образом:

<PropertyGroup>
  <EmitCompilerGeneratedFiles>true</EmitCompilerGeneratedFiles>
</PropertyGroup>

При создании проекта 6.0 (net6.0) в Debug конфигурации Razor сборки пакет SDK создает obj/Debug/net6.0/generated/ каталог в корневом каталоге проекта. Его подкаталог содержит созданные Razor файлы кода страницы.

Пакет Razor SDK обрабатывает компиляцию Razor файлов. При создании проекта Razor пакет SDK создает obj/{BUILD CONFIGURATION}/{TARGET FRAMEWORK MONIKER}/Razor каталог в корневом каталоге проекта. Структура каталогов в каталоге Razor отражает структуру каталога проекта.

Рассмотрим следующую структуру каталогов в проекте ASP.NET Core Razor Pages 2.1:

 Areas/
   Admin/
     Pages/
       Index.cshtml
       Index.cshtml.cs
 Pages/
   Shared/
     _Layout.cshtml
   _ViewImports.cshtml
   _ViewStart.cshtml
   Index.cshtml
   Index.cshtml.cs

Создание проекта в Debug конфигурации дает следующий obj каталог:

 obj/
   Debug/
     netcoreapp2.1/
       Razor/
         Areas/
           Admin/
             Pages/
               Index.g.cshtml.cs
         Pages/
           Shared/
             _Layout.g.cshtml.cs
           _ViewImports.g.cshtml.cs
           _ViewStart.g.cshtml.cs
           Index.g.cshtml.cs

Чтобы просмотреть созданный класс для Pages/Index.cshtml, откройте obj/Debug/netcoreapp2.1/Razor/Pages/Index.g.cshtml.cs.

Поиск данных в представлениях и учет регистра

Обработчик Razor представлений выполняет поиск с учетом регистра для представлений. Однако фактический поиск зависит от используемой файловой системы.

Источник на основе файлов:
- В операционных системах, файловые системы которых не учитывают регистр (например, Windows), поиск поставщика физических файлов не зависит от регистра. Например, return View("Test") результаты совпадений для /Views/Home/Test.cshtml, /Views/home/test.cshtmlа также любой другой вариант регистра.
- В файловых системах, учитывающих регистр (например, в Linux, OSX и где используется EmbeddedFileProvider), поиск выполняется с учетом регистра. Например, return View("Test") в частности соответствует /Views/Home/Test.cshtml.
Предварительно скомпилированные представления: в ASP.NET Core 2.0 и более поздних версиях поиск в предварительно скомпилированных представлениях выполняется без учета регистра во всех операционных системах. Это поведение аналогично поведению поставщика физических файлов в Windows. Если два предварительно скомпилированных представления отличаются только регистром, результат поиска является недетерминированным.

Разработчикам рекомендуется использовать для файлов и каталогов тот же регистр, что и для:

имен областей, контроллеров и действий;
Razor Страниц.

Совпадающий регистр гарантирует, что развертываемые службы смогут находить свои представления вне зависимости от используемой файловой системы.

Импорт, используемый Razor

Следующие импорты создаются веб-шаблонами ASP.NET Core для поддержки Razor файлов:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.ViewFeatures;

Дополнительные ресурсы

Введение в ASP.NET веб-программирование с помощью синтаксиса Razor предоставляет множество примеров программирования с синтаксисомRazor.

Бөлісу құралы:

Razor Справочник по синтаксису для ASP.NET Core

Отрисовка HTML

Синтаксис Razor

Масштабируемая векторная графика (SVG)

Неявные Razor выражения

Явные Razor выражения

Кодирование выражений

Razor Блоки кода

Неявные переходы

Явный переход с разделителями

Явный перенос строки

Отрисовка условного атрибута

Управляющие структуры

Условий @if, else if, else, and @switch

Петлевание @for, @foreach, @while, and @do while

Составной оператор @using

@try, catch, finally

@lock

Комментарии

Директивы

@attribute

@code

@functions

@implements

@inherits

@inject

@layout

@model

@namespace

@page

@preservewhitespace

@rendermode

@section

@typeparam

@using

Атрибуты директивы

@attributes

@bind

@bind:culture

@formname

@on{EVENT}

@on{EVENT}:preventDefault

@on{EVENT}:stopPropagation

@key

@ref

Делегаты с шаблонами Razor

Вспомогательные функции тегов

Razor зарезервированные ключевые слова

Razor Ключевые слова

Ключевые слова C# Razor

Зарезервированные ключевые слова, не используемые Razor

Проверка класса C#, созданного Razor для представления

Поиск данных в представлениях и учет регистра

Импорт, используемый Razor

Дополнительные ресурсы

Қосымша ресурстар

Условий `@if, else if, else, and @switch`

Петлевание `@for, @foreach, @while, and @do while`

Составной оператор `@using`

`@try, catch, finally`

`@lock`

`@attribute`

`@code`

`@functions`

`@implements`

`@inherits`

`@inject`

`@layout`

`@model`

`@namespace`

`@page`

`@preservewhitespace`

`@rendermode`

`@section`

`@typeparam`

`@using`

`@attributes`

`@bind`

`@bind:culture`

`@formname`

`@on{EVENT}`

`@on{EVENT}:preventDefault`

`@on{EVENT}:stopPropagation`

`@key`

`@ref`