Вспомогательная функция тега компонента в ASP.NET Core

Вспомогательный Razor компонент тега компонента отображает компонент на Razor странице страницы страницы или в представлении MVC.

Необходимые компоненты

Следуйте инструкциям в разделе "Использование неизменяемых для routable компонентов на страницах или представлениях" статьи "Интеграция ASP.NET Основные Razor компоненты с MVC или Razor Pages".

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

Чтобы отобразить компонент из страницы или представления, используйте вспомогательный компонент тега компонента (<component> тег).

Параметр RenderMode настраивает одно из следующих поведений компонента:

• компонент предварительно преобразуется в страницу;
• компонент отображается как статический HTML на странице или включает необходимые сведения для начальной загрузки приложения Blazor из агента пользователя.

Blazor WebAssembly Режимы отрисовки приложений показаны в следующей таблице.

Режим отрисовки	Описание
WebAssembly	Преобразовывает маркер для приложения Blazor WebAssembly, которое используется для включения интерактивного компонента при загрузке в браузере. Компонент предварительно не визуализирован. Этот параметр упрощает преобразование различных компонентов Blazor WebAssembly на разных страницах.
WebAssemblyPrerendered	Предварительно визуализирует компонент в статический HTML и включает маркер для приложения Blazor WebAssembly, который впоследствии будет использован, чтобы сделать компонент интерактивным при загрузке в браузере.

Режимы отрисовки показаны в следующей таблице.

Режим отрисовки	Описание
ServerPrerendered	Отрисовывает компонент в статический HTML-код и включает маркер для серверного Blazor приложения. При запуске пользовательского агента эта метка используется для начальной загрузки приложения Blazor.
Server	Отрисовывает маркер для серверного Blazor приложения. Выходные данные компонента не включаются. При запуске пользовательского агента эта метка используется для начальной загрузки приложения Blazor.
Static	Преобразует компонент в статический HTML.

К дополнительным характеристикам относятся:

• Вспомогатели нескольких тегов компонентов могут отрисовки нескольких Razor компонентов.
• Компоненты не могут быть динамически отрисованы после запуска приложения.
• Хотя страницы и представления могут использовать компоненты, обратное неверно. Компоненты не могут использовать функции представления и страницы, такие как частичные представления и разделы. Чтобы использовать логику из частичного представления в компоненте, следует исключить логику частичного представления в компонент.
• Отрисовка компонентов сервера из статической HTML-страницы не поддерживается.

Следующий вспомогательный компонент тега EmbeddedCounter компонента отображает компонент на странице или в представлении в серверном Blazor приложении с помощью ServerPrerendered:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

В предыдущем примере предполагается, что EmbeddedCounter компонент находится в папке приложения Components . Заполнитель {APP ASSEMBLY} — это имя сборки приложения (например, @using BlazorSample.Components).

Вспомогательный компонент тега компонента также может передавать параметры компонентам. Рассмотрим следующий ColorfulCheckbox компонент, который задает цвет и размер метки флажка.

Components/ColorfulCheckbox.razor:

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string? Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}

Параметры Size компонента (int) и Color (string) можно задать вспомогательным компонентом тега компонента:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

В предыдущем примере предполагается, что ColorfulCheckbox компонент находится в папке Components . Заполнитель {APP ASSEMBLY} — это имя сборки приложения (например, @using BlazorSample.Components).

Следующий HTML-код отображается на странице или представлении:

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

Для передачи в кавычки строки требуется явное Razor выражение, как показано param-Color в предыдущем примере. Поведение Razor синтаксического анализа значения string типа не применяется к param-* атрибуту, так как атрибут является типом object .

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

• Универсальные параметры.
• Несериализируемые параметры.
• Наследование в параметрах коллекции.
• Параметры, тип которых определяется за пределами Blazor WebAssembly приложения или в неявной загруженной сборке.
• Для получения делегата для дочернего содержимого RenderFragment (например, ). param-ChildContent="..." В этом сценарии рекомендуется создать Razor компонент (.razor), который ссылается на компонент, который требуется отобразить с дочерним содержимым, который необходимо передать, а затем вызвать Razor компонент со страницы или представления с помощью вспомогательного средства тега компонента.

Тип параметра должен быть JSON-сериализуемым, что обычно означает, что тип должен иметь конструктор по умолчанию и устанавливаемые свойства. Например, можно указать значение для Size и Color в предыдущем примере, так как типы Size и Color являются примитивными типами (int и string), которые поддерживаются сериализатором JSON.

В следующем примере объект класса передается компоненту:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

    public int MyInt { get; set; } = 999;
    public string MyString { get; set; } = "Initial value";
}

Класс должен иметь открытый конструктор без параметров.

Components/ParameterComponent.razor:

<h2>ParameterComponent</h2>

<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>

@code
{
    [Parameter]
    public MyClass? MyObject { get; set; }
}

Pages/MyPage.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Components

...

@{
    var myObject = new MyClass();
    myObject.MyInt = 7;
    myObject.MyString = "Set by MyPage";
}

<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered" 
    param-MyObject="@myObject" />

В предыдущем примере предполагается, что ParameterComponent компонент находится в папке приложения Components . Заполнитель {APP ASSEMBLY} — это имя сборки приложения (например, @using BlazorSample и @using BlazorSample.Components). MyClass находится в пространстве имен приложения.

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

• Вспомогательный компонент тега состояния компонента в ASP.NET Core
• Компоненты предварительной ASP.NET Core Razor
• ComponentTagHelper
• Вспомогательные функции тегов в ASP.NET Core
• Компоненты Razor ASP.NET Core