События
19 нояб., 23 - 21 нояб., 23
Присоединяйтесь к онлайн-сеансам в Microsoft Ignite, созданным для расширения ваших навыков и помогая решить современные сложные проблемы.
ЗарегистрироватьсяЭтот браузер больше не поддерживается.
Выполните обновление до Microsoft Edge, чтобы воспользоваться новейшими функциями, обновлениями для системы безопасности и технической поддержкой.
Примечание
Это не последняя версия этой статьи. В текущем выпуске см . версию .NET 9 этой статьи.
Предупреждение
Эта версия ASP.NET Core больше не поддерживается. Дополнительные сведения см. в политике поддержки .NET и .NET Core. В текущем выпуске см . версию .NET 9 этой статьи.
Важно!
Эта информация относится к предварительному выпуску продукта, который может быть существенно изменен до его коммерческого выпуска. Майкрософт не предоставляет никаких гарантий, явных или подразумеваемых, относительно приведенных здесь сведений.
В текущем выпуске см . версию .NET 9 этой статьи.
Автор: Дейв Брок (Dave Brock)
Используйте встроенный компонент DynamicComponent для отображения компонентов по типу.
DynamicComponent может использоваться для отображения компонентов без перебора возможных типов или использования условной логики. Например, DynamicComponent может отображать компонент на основе пользовательского выбора из раскрывающегося списка.
В следующем примере :
componentType
указывает тип.parameters
указывает дополнительные параметры компонента, передаваемые в компонент componentType
.<DynamicComponent Type="componentType" Parameters="parameters" />
@code {
private Type componentType = ...;
private IDictionary<string, object> parameters = ...;
}
Дополнительные сведения о передаче значений параметров см. в разделе Передача параметров далее в этой статье.
В следующем примере компонент Razor отображает компонент на основе выбора пользователя из раскрывающегося списка с четырьмя возможными значениями.
Выбор компании, занимающейся космическими перевозками, для пользователя | Общий компонент Razor для отображения |
---|---|
Rocket Lab® | RocketLab.razor |
SpaceX® | SpaceX.razor |
ULA® | UnitedLaunchAlliance.razor |
Virgin Galactic® | VirginGalactic.razor |
RocketLab.razor
:
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
SpaceX.razor
:
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
UnitedLaunchAlliance.razor
:
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
VirginGalactic.razor
:
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
DynamicComponent1.razor
:
@page "/dynamic-component-1"
<PageTitle>Dynamic Component 1</PageTitle>
<h1>Dynamic Component Example 1</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var entry in components.Keys)
{
<option value="@entry">@entry</option>
}
</select>
</label>
</p>
@if (selectedType is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedType" />
</div>
}
@code {
private readonly Dictionary<string, Type> components = new()
{
["Rocket Lab"] = typeof(RocketLab),
["SpaceX"] = typeof(SpaceX),
["ULA"] = typeof(UnitedLaunchAlliance),
["Virgin Galactic"] = typeof(VirginGalactic)
};
private Type? selectedType;
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) &&
!String.IsNullOrWhiteSpace(dropdownValue))
{
selectedType = components[dropdownValue];
}
else
{
selectedType = null;
}
}
}
RocketLab.razor
:
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
SpaceX.razor
:
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
UnitedLaunchAlliance.razor
:
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
VirginGalactic.razor
:
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
DynamicComponent1.razor
:
@page "/dynamic-component-1"
<PageTitle>Dynamic Component 1</PageTitle>
<h1>Dynamic Component Example 1</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var entry in components.Keys)
{
<option value="@entry">@entry</option>
}
</select>
</label>
</p>
@if (selectedType is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedType" />
</div>
}
@code {
private readonly Dictionary<string, Type> components = new()
{
["Rocket Lab"] = typeof(RocketLab),
["SpaceX"] = typeof(SpaceX),
["ULA"] = typeof(UnitedLaunchAlliance),
["Virgin Galactic"] = typeof(VirginGalactic)
};
private Type? selectedType;
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) &&
!String.IsNullOrWhiteSpace(dropdownValue))
{
selectedType = components[dropdownValue];
}
else
{
selectedType = null;
}
}
}
RocketLab.razor
:
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
SpaceX.razor
:
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
UnitedLaunchAlliance.razor
:
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
VirginGalactic.razor
:
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
DynamicComponentExample1.razor
:
@page "/dynamiccomponent-example-1"
<h1><code>DynamicComponent</code> Component Example 1</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var entry in components.Keys)
{
<option value="@entry">@entry</option>
}
</select>
</label>
</p>
@if (selectedType is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedType" />
</div>
}
@code {
private readonly Dictionary<string, Type> components = new()
{
["Rocket Lab"] = typeof(RocketLab),
["SpaceX"] = typeof(SpaceX),
["ULA"] = typeof(UnitedLaunchAlliance),
["Virgin Galactic"] = typeof(VirginGalactic)
};
private Type? selectedType;
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedType = components[dropdownValue];
}
else
{
selectedType = null;
}
}
}
RocketLab.razor
:
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
SpaceX.razor
:
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
UnitedLaunchAlliance.razor
:
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
VirginGalactic.razor
:
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
DynamicComponentExample1.razor
:
@page "/dynamiccomponent-example-1"
<h1><code>DynamicComponent</code> Component Example 1</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var entry in components.Keys)
{
<option value="@entry">@entry</option>
}
</select>
</label>
</p>
@if (selectedType is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedType" />
</div>
}
@code {
private readonly Dictionary<string, Type> components = new()
{
["Rocket Lab"] = typeof(RocketLab),
["SpaceX"] = typeof(SpaceX),
["ULA"] = typeof(UnitedLaunchAlliance),
["Virgin Galactic"] = typeof(VirginGalactic)
};
private Type? selectedType;
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedType = components[dropdownValue];
}
else
{
selectedType = null;
}
}
}
В предыдущем примере:
typeof
словаря с помощью оператора.Если у динамически отображаемых компонентов есть параметры компонента, передайте их в DynamicComponent как IDictionary<string, object>
. string
— это имя параметра, а object
— значение параметра.
В следующем примере объект метаданных компонента (ComponentMetadata
) настраивается для передачи значений параметров динамически отображаемым компонентам на основе имени типа. В этом примере показан лишь один из подходов, которые можно использовать. Данные параметров также могут быть получены из веб-API, из базы данных или из метода. Единственное требование заключается в том, чтобы подход возвращал IDictionary<string, object>
.
ComponentMetadata.cs
:
namespace BlazorSample;
public class ComponentMetadata
{
public required Type Type { get; init; }
public required string Name { get; init; }
public Dictionary<string, object> Parameters { get; } = [];
}
namespace BlazorSample;
public class ComponentMetadata
{
public required Type Type { get; init; }
public required string Name { get; init; }
public Dictionary<string, object> Parameters { get; } = [];
}
public class ComponentMetadata
{
public required Type Type { get; init; }
public required string Name { get; init; }
public Dictionary<string, object> Parameters { get; } = new();
}
public class ComponentMetadata
{
public Type? Type { get; init; }
public string? Name { get; init; }
public Dictionary<string, object> Parameters { get; } = new();
}
Следующий компонент RocketLabWithWindowSeat
(RocketLabWithWindowSeat.razor
) был обновлен из предыдущего примера так, чтобы включать параметр компонента с именем WindowSeat
для указания того, предпочитает ли пассажир в своем полете место у иллюминатора.
RocketLabWithWindowSeat.razor
:
<h2>Rocket Lab®</h2>
<p>
User selected a window seat: @WindowSeat
</p>
<p>
Rocket Lab is a trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
[Parameter]
public bool WindowSeat { get; set; }
}
<h2>Rocket Lab®</h2>
<p>
User selected a window seat: @WindowSeat
</p>
<p>
Rocket Lab is a trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
[Parameter]
public bool WindowSeat { get; set; }
}
<h2>Rocket Lab®</h2>
<p>
User selected a window seat: @WindowSeat
</p>
<p>
Rocket Lab is a trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
[Parameter]
public bool WindowSeat { get; set; }
}
<h2>Rocket Lab®</h2>
<p>
User selected a window seat: @WindowSeat
</p>
<p>
Rocket Lab is a trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
[Parameter]
public bool WindowSeat { get; set; }
}
В следующем примере :
Window Seat
получает только параметр компонента RocketLabWithWindowSeat
для места у иллюминатора (WindowSeat
).nameof
оператора, который возвращает имена компонентов в виде константных строк.RocketLabWithWindowSeat
(RocketLabWithWindowSeat.razor
)SpaceX
(SpaceX.razor
)UnitedLaunchAlliance
(UnitedLaunchAlliance.razor
)VirginGalactic
(VirginGalactic.razor
)DynamicComponent2.razor
:
@page "/dynamic-component-2"
<PageTitle>Dynamic Component 2</PageTitle>
<h1>Dynamic Component Example 2</h1>
<p>
<label>
<input type="checkbox" @bind="windowSeat"
@bind:after="HandleWindowSeatChanged" />
Window Seat (Rocket Lab only)
</label>
</p>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
@code {
private Dictionary<string, ComponentMetadata> components =
new()
{
[nameof(RocketLabWithWindowSeat)] = new ComponentMetadata()
{
Type = typeof(RocketLabWithWindowSeat),
Name = "Rocket Lab with Window Seat",
Parameters = { [nameof(RocketLabWithWindowSeat.WindowSeat)] = false }
},
[nameof(VirginGalactic)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic),
Name = "Virgin Galactic"
},
[nameof(UnitedLaunchAlliance)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance),
Name = "ULA"
},
[nameof(SpaceX)] = new ComponentMetadata()
{
Type = typeof(SpaceX),
Name = "SpaceX"
}
};
private ComponentMetadata? selectedComponent;
private bool windowSeat;
private void HandleWindowSeatChanged()
{
components[nameof(RocketLabWithWindowSeat)]
.Parameters[nameof(RocketLabWithWindowSeat.WindowSeat)] = windowSeat;
}
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
}
DynamicComponent2.razor
:
@page "/dynamic-component-2"
<PageTitle>Dynamic Component 2</PageTitle>
<h1>Dynamic Component Example 2</h1>
<p>
<label>
<input type="checkbox" @bind="windowSeat"
@bind:after="HandleWindowSeatChanged" />
Window Seat (Rocket Lab only)
</label>
</p>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
@code {
private Dictionary<string, ComponentMetadata> components =
new()
{
[nameof(RocketLabWithWindowSeat)] = new ComponentMetadata()
{
Type = typeof(RocketLabWithWindowSeat),
Name = "Rocket Lab with Window Seat",
Parameters = { [nameof(RocketLabWithWindowSeat.WindowSeat)] = false }
},
[nameof(VirginGalactic)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic),
Name = "Virgin Galactic"
},
[nameof(UnitedLaunchAlliance)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance),
Name = "ULA"
},
[nameof(SpaceX)] = new ComponentMetadata()
{
Type = typeof(SpaceX),
Name = "SpaceX"
}
};
private ComponentMetadata? selectedComponent;
private bool windowSeat;
private void HandleWindowSeatChanged()
{
components[nameof(RocketLabWithWindowSeat)]
.Parameters[nameof(RocketLabWithWindowSeat.WindowSeat)] = windowSeat;
}
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
}
DynamicComponentExample2.razor
:
@page "/dynamiccomponent-example-2"
<h1><code>DynamicComponent</code> Component Example 2</h1>
<p>
<label>
<input type="checkbox" @bind="windowSeat" @bind:after="HandleWindowSeatChanged" />
Window Seat (Rocket Lab only)
</label>
</p>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
@code {
private Dictionary<string, ComponentMetadata> components =
new()
{
[nameof(RocketLabWithWindowSeat)] = new ComponentMetadata()
{
Type = typeof(RocketLabWithWindowSeat),
Name = "Rocket Lab with Window Seat",
Parameters = { [nameof(RocketLabWithWindowSeat.WindowSeat)] = false }
},
[nameof(VirginGalactic)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic),
Name = "Virgin Galactic"
},
[nameof(UnitedLaunchAlliance)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance),
Name = "ULA"
},
[nameof(SpaceX)] = new ComponentMetadata()
{
Type = typeof(SpaceX),
Name = "SpaceX"
}
};
private ComponentMetadata? selectedComponent;
private bool windowSeat;
private void HandleWindowSeatChanged()
{
components[nameof(RocketLabWithWindowSeat)]
.Parameters[nameof(RocketLabWithWindowSeat.WindowSeat)] = windowSeat;
}
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
}
DynamicComponentExample2.razor
:
@page "/dynamiccomponent-example-2"
<h1><code>DynamicComponent</code> Component Example 2</h1>
<p>
<label>
<input type="checkbox" @bind="WindowSeat" />
Window Seat (Rocket Lab only)
</label>
</p>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
@code {
private Dictionary<string, ComponentMetadata> components =
new()
{
[nameof(RocketLabWithWindowSeat)] = new ComponentMetadata()
{
Type = typeof(RocketLabWithWindowSeat),
Name = "Rocket Lab with Window Seat",
Parameters = { [nameof(RocketLabWithWindowSeat.WindowSeat)] = false }
},
[nameof(VirginGalactic)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic),
Name = "Virgin Galactic"
},
[nameof(UnitedLaunchAlliance)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance),
Name = "ULA"
},
[nameof(SpaceX)] = new ComponentMetadata()
{
Type = typeof(SpaceX),
Name = "SpaceX"
}
};
private ComponentMetadata? selectedComponent;
private bool windowSeat;
private bool WindowSeat
{
get { return windowSeat; }
set
{
windowSeat = value;
components[nameof(RocketLabWithWindowSeat)]
.Parameters[nameof(RocketLabWithWindowSeat.WindowSeat)] = windowSeat;
}
}
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
}
Обратные вызовы событий (EventCallback) можно передать в DynamicComponent в словаре параметров.
ComponentMetadata.cs
:
namespace BlazorSample;
public class ComponentMetadata
{
public required Type Type { get; init; }
public required string Name { get; init; }
public Dictionary<string, object> Parameters { get; } = [];
}
namespace BlazorSample;
public class ComponentMetadata
{
public required Type Type { get; init; }
public required string Name { get; init; }
public Dictionary<string, object> Parameters { get; } = [];
}
public class ComponentMetadata
{
public required Type Type { get; init; }
public required string Name { get; init; }
public Dictionary<string, object> Parameters { get; } = new();
}
public class ComponentMetadata
{
public Type? Type { get; init; }
public string? Name { get; init; }
public Dictionary<string, object> Parameters { get; } = new();
}
Реализуйте параметр обратного вызова события (EventCallback) в каждом динамически выводимом компоненте.
RocketLab2.razor
:
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
SpaceX2.razor
:
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>SpaceX®</h2>
<p>
SpaceX is a registered trademark of
<a href="https://www.spacex.com/">Space Exploration Technologies Corp.</a>
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
UnitedLaunchAlliance2.razor
:
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>United Launch Alliance®</h2>
<p>
United Launch Alliance and ULA are registered trademarks of
<a href="https://www.ulalaunch.com/">United Launch Alliance, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
VirginGalactic2.razor
:
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
<h2>Virgin Galactic®</h2>
<p>
Virgin Galactic is a registered trademark of
<a href="https://www.virgingalactic.com/">Galactic Enterprises, LLC</a>.
</p>
<button @onclick="OnClickCallback">
Trigger a Parent component method
</button>
@code {
[Parameter]
public EventCallback<MouseEventArgs> OnClickCallback { get; set; }
}
В следующем примере родительского компонента метод ShowDTMessage
назначает строку с текущим временем объекту message
и выводится значение message
.
Родительский компонент передает метод обратного вызова ShowDTMessage
в словаре параметров:
string
— это имя метода обратного вызова (OnClickCallback
).object
создается методом EventCallbackFactory.Create для родительского метода обратного вызова (ShowDTMessage
). Обратите внимание, что ключевое this
слово не поддерживается в инициализации полей C#, поэтому свойство C# используется для словаря параметров.DynamicComponent3.razor
:
@page "/dynamic-component-3"
<PageTitle>Dynamic Component 3</PageTitle>
<h1>Dynamic Component Example 3</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in Components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
<p>
@message
</p>
@code {
private ComponentMetadata? selectedComponent;
private string? message;
private Dictionary<string, ComponentMetadata> Components =>
new()
{
[nameof(RocketLab2)] = new ComponentMetadata()
{
Type = typeof(RocketLab2),
Name = "Rocket Lab",
Parameters = { [nameof(RocketLab2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(VirginGalactic2)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic2),
Name = "Virgin Galactic",
Parameters = { [nameof(VirginGalactic2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(UnitedLaunchAlliance2)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance2),
Name = "ULA",
Parameters = { [nameof(UnitedLaunchAlliance2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(SpaceX2)] = new ComponentMetadata()
{
Type = typeof(SpaceX2),
Name = "SpaceX",
Parameters = { [nameof(SpaceX2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
}
};
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = Components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
private void ShowDTMessage(MouseEventArgs e) =>
message = $"The current DT is: {DateTime.Now}.";
}
DynamicComponent3.razor
:
@page "/dynamic-component-3"
<PageTitle>Dynamic Component 3</PageTitle>
<h1>Dynamic Component Example 3</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in Components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
<p>
@message
</p>
@code {
private ComponentMetadata? selectedComponent;
private string? message;
private Dictionary<string, ComponentMetadata> Components =>
new()
{
[nameof(RocketLab2)] = new ComponentMetadata()
{
Type = typeof(RocketLab2),
Name = "Rocket Lab",
Parameters = { [nameof(RocketLab2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(VirginGalactic2)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic2),
Name = "Virgin Galactic",
Parameters = { [nameof(VirginGalactic2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(UnitedLaunchAlliance2)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance2),
Name = "ULA",
Parameters = { [nameof(UnitedLaunchAlliance2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(SpaceX2)] = new ComponentMetadata()
{
Type = typeof(SpaceX2),
Name = "SpaceX",
Parameters = { [nameof(SpaceX2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
}
};
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = Components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
private void ShowDTMessage(MouseEventArgs e) =>
message = $"The current DT is: {DateTime.Now}.";
}
DynamicComponentExample3.razor
:
@page "/dynamiccomponent-example-3"
<h1><code>DynamicComponent</code> Component Example 3</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in Components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
<p>
@message
</p>
@code {
private ComponentMetadata? selectedComponent;
private string? message;
private Dictionary<string, ComponentMetadata> Components =>
new()
{
[nameof(RocketLab2)] = new ComponentMetadata()
{
Type = typeof(RocketLab2),
Name = "Rocket Lab",
Parameters = { [nameof(RocketLab2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(VirginGalactic2)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic2),
Name = "Virgin Galactic",
Parameters = { [nameof(VirginGalactic2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(UnitedLaunchAlliance2)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance2),
Name = "ULA",
Parameters = { [nameof(UnitedLaunchAlliance2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(SpaceX2)] = new ComponentMetadata()
{
Type = typeof(SpaceX2),
Name = "SpaceX",
Parameters = { [nameof(SpaceX2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
}
};
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = Components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
private void ShowDTMessage(MouseEventArgs e) =>
message = $"The current DT is: {DateTime.Now}.";
}
DynamicComponentExample3.razor
:
@page "/dynamiccomponent-example-3"
<h1><code>DynamicComponent</code> Component Example 3</h1>
<p>
<label>
Select your transport:
<select @onchange="OnDropdownChange">
<option value="">Select a value</option>
@foreach (var c in Components)
{
<option value="@c.Key">@c.Value.Name</option>
}
</select>
</label>
</p>
@if (selectedComponent is not null)
{
<div class="border border-primary my-1 p-1">
<DynamicComponent Type="selectedComponent.Type"
Parameters="selectedComponent.Parameters" />
</div>
}
<p>
@message
</p>
@code {
private ComponentMetadata? selectedComponent;
private string? message;
private Dictionary<string, ComponentMetadata> Components =>
new()
{
[nameof(RocketLab2)] = new ComponentMetadata()
{
Type = typeof(RocketLab2),
Name = "Rocket Lab",
Parameters = { [nameof(RocketLab2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(VirginGalactic2)] = new ComponentMetadata()
{
Type = typeof(VirginGalactic2),
Name = "Virgin Galactic",
Parameters = { [nameof(VirginGalactic2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(UnitedLaunchAlliance2)] = new ComponentMetadata()
{
Type = typeof(UnitedLaunchAlliance2),
Name = "ULA",
Parameters = { [nameof(UnitedLaunchAlliance2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
},
[nameof(SpaceX2)] = new ComponentMetadata()
{
Type = typeof(SpaceX2),
Name = "SpaceX",
Parameters = { [nameof(SpaceX2.OnClickCallback)] =
EventCallback.Factory.Create<MouseEventArgs>(this, ShowDTMessage) }
}
};
private void OnDropdownChange(ChangeEventArgs e)
{
if ((e.Value is string dropdownValue) && !String.IsNullOrWhiteSpace(dropdownValue))
{
selectedComponent = Components[dropdownValue];
}
else
{
selectedComponent = null;
}
}
private void ShowDTMessage(MouseEventArgs e) =>
message = $"The current DT is: {DateTime.Now}.";
}
Избегайте использования параметров catch-all. Если используются параметры catch-all, то каждый явный параметр в DynamicComponent по сути является зарезервированным словом, которое не может быть передано динамическому дочернему элементу. Все новые параметры, передаваемые в DynamicComponent, приводят к критическому изменению, так как они начинают затенять параметры дочернего компонента, имеющие то же имя. Вызывающие объекты не могут иметь информацию о фиксированных наборах имен параметров, передаваемых всем возможным динамическим дочерним объектам.
Instance Используйте свойство для доступа к экземпляру компонента динамического создания.
Создайте интерфейс для описания динамически созданного экземпляра компонента с любыми методами и свойствами, к которым необходимо получить доступ из родительского компонента при динамической загрузке компонента. В следующем примере указывается Log
метод реализации в компонентах.
Interfaces/ILoggable.cs
:
using Microsoft.AspNetCore.Components;
namespace BlazorSample.Interfaces;
public interface ILoggable : IComponent
{
public void Log();
}
using Microsoft.AspNetCore.Components;
namespace BlazorSample.Interfaces;
public interface ILoggable : IComponent
{
public void Log();
}
using Microsoft.AspNetCore.Components;
namespace BlazorSample.Interfaces;
public interface ILoggable : IComponent
{
public void Log();
}
using Microsoft.AspNetCore.Components;
namespace BlazorSample.Interfaces;
public interface ILoggable : IComponent
{
public void Log();
}
Каждое определение компонента реализует интерфейс. В следующем примере представлен измененный компонент Rocket Lab® из раздела Example, который регистрирует строку с помощью метода Log
.
RocketLab3.razor
:
@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<RocketLab3> Logger
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
public void Log() => Logger.LogInformation("Woot! I logged this call!");
}
@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<RocketLab3> Logger
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
public void Log() => Logger.LogInformation("Woot! I logged this call!");
}
@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<RocketLab3> Logger
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
public void Log()
{
Logger.LogInformation("Woot! I logged this call!");
}
}
@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<RocketLab3> Logger
<h2>Rocket Lab®</h2>
<p>
Rocket Lab is a registered trademark of
<a href="https://www.rocketlabusa.com/">Rocket Lab USA Inc.</a>
</p>
@code {
public void Log()
{
Logger.LogInformation("Woot! I logged this call!");
}
}
Остальные три общих компонента (VirginGalactic3
, UnitedLaunchAlliance3
, SpaceX3
) получают аналогичное лечение:
Следующие директивы добавляются в компоненты, где {COMPONENT TYPE}
заполнитель является типом компонента:
@using BlazorSample.Interfaces
@implements ILoggable
@inject ILogger<{COMPONENT TYPE}> Logger
Каждый компонент реализует Log
метод. Категория журнала, написанная средством ведения журнала, включает полное имя типа компонента при LogInformation вызове:
@code {
public void Log()
{
Logger.LogInformation("Woot! I logged this call!");
}
}
Родительский компонент вызывает динамически загруженный экземпляр компонента в качестве ILoggable
доступа к членам интерфейса. В следующем примере метод загруженного компонента Log
вызывается при выборе кнопки в пользовательском интерфейсе:
...
@using BlazorSample.Interfaces
...
<DynamicComponent Type="..." @ref="dc" />
...
<button @onclick="LogFromLoadedComponent">Log from loaded component</button>
@code {
private DynamicComponent? dc;
...
private void LogFromLoadedComponent() => (dc?.Instance as ILoggable)?.Log();
}
Рабочую демонстрацию предыдущего примера см DynamicComponent4
. в Blazor примере приложения.
Рабочую демонстрацию предыдущего примера см DynamicComponent4
. в Blazor примере приложения.
Рабочую демонстрацию предыдущего примера см DynamicComponentExample4
. в Blazor примере приложения.
Рабочую демонстрацию предыдущего примера см DynamicComponentExample4
. в Blazor примере приложения.
Rocket Lab является зарегистрированной торговой маркой Rocket Lab USA Inc. SpaceX является зарегистрированной торговой маркой Space Exploration Technologies Corp. United Launch Alliance и ULA являются зарегистрированными торговыми марками United Launch Alliance, LLC. Virgin Galactic является зарегистрированной торговой маркой Galactic Enterprises, LLC.
Отзыв о ASP.NET Core
ASP.NET Core — это проект с открытым исходным кодом. Выберите ссылку, чтобы оставить отзыв:
События
19 нояб., 23 - 21 нояб., 23
Присоединяйтесь к онлайн-сеансам в Microsoft Ignite, созданным для расширения ваших навыков и помогая решить современные сложные проблемы.
Зарегистрироваться