Вспомогательная функция тега компонента в 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
находится в пространстве имен приложения.
Дополнительные ресурсы
ASP.NET Core
Обратная связь
https://aka.ms/ContentUserFeedback.
Ожидается в ближайшее время: в течение 2024 года мы постепенно откажемся от GitHub Issues как механизма обратной связи для контента и заменим его новой системой обратной связи. Дополнительные сведения см. в разделеОтправить и просмотреть отзыв по