如何在Blazor中动态添加按钮

Question

我想将配置的选项存储在appsettings中，并添加按钮来选择选项。我正在使用Radzen。

<RadzenButton  Style="background-color:#8341ff; border: thin;">OPTION1</RadzenButton>
<RadzenButton  Style="background-color:wheat; border: thin;">OPTION2</RadzenButton>
<RadzenButton  Style="background-color:wheat; border: thin;">OPTION3</RadzenButton>

Answer 1

您可以使用例如循环来基于数据呈现UI的部分。例如：

@foreach(var option in _options)
{
<RadzenButton  Style="background-color:wheat; border: thin;">@option</RadzenButton>
}
@code {
string[] _options=...;
}

数据可能是硬编码的，或者来自服务或配置数据：

@inject IMyOptionService MyService;
...
@code {
string[] _options=Array.Empty<string>();
protected override OnInitialized()
{
_options=MyService.GetButtonOptions();
}
}

要使用从配置加载的数据，一个丑陋的选项是注入IConfiguration并尝试读取组件本身中的选项。

一个更好的想法是使用一个单独的服务来隐藏这一点，或者使用Options模式将设置转换为强类型类，并用DI注入它们。

@inject IOptions<MyButtonOptions> _buttonOptions;
@foreach(var option in _buttonOptions.Buttons)
{
<RadzenButton  Style="background-color:wheat; border: thin;">@option.Name</RadzenButton>
}

假设您的设置包含：

"ButtonOptions": {
"Buttons":[
{
"Name":"Option 1",
"Category":"..."
},
...
]
}

您可以使用以下选项类加载：

class MyButton
{
public string Name{get;set;}
public string Category {get;set;}
...
}
class MyButtonOptions
{
public MyButton[] Buttons {get;set;}
}

在应用程序配置部分，您可以指定MyButtonOptions类将从ButtonOptions部分加载：

builder.Services.AddOptions<MyButtonOptions>()            
.Bind(builder.Configuration.GetSection("ButtonOptions))