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

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

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

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

Следуйте инструкциям в разделе "Конфигурация" для любого из следующих вариантов:

  • Blazor Server: интегрируйте маршрутизируемые и не routable Razor компоненты в Razor приложения Pages и MVC.
  • Blazor WebAssembly: интегрируйте Razor компоненты из размещенного Blazor WebAssembly решения в Razor приложения Pages и MVC.

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

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

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

Примечание.

Интеграция Razor компонентов в Razor приложения Pages и MVC в размещенном Blazor WebAssembly приложении поддерживается в ASP.NET Core в .NET 5.0 или более поздней версии.

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

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

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

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

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

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

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

Режим отрисовки Description
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 компонент, который задает цвет и размер метки проверка box.

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).

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

...

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

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

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

Shared/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}.Shared

...

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

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

Следующий 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 компонент со страницы или представления с помощью вспомогательного средства тега компонента.

Тип параметра должен быть JSсериализуемым ON, что обычно означает, что тип должен иметь конструктор по умолчанию и свойства settable. Например, можно указать значение для 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 находится в пространстве имен приложения.

Shared/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}.Shared

...

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

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

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

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