How to add buttons dynamically in Blazor

Question

I want to store configured options in appsettings and add buttons to select options. I am using 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

You can use eg a loop to render parts of the UI based on data. For example:

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

@code {
    string[] _options=...;
}

The data may be hard-coded or come from a service or configuration data :

@inject IMyOptionService MyService;

...
@code {
    string[] _options=Array.Empty<string>();

    protected override OnInitialized()
    {
        _options=MyService.GetButtonOptions();
    }
}

To use data loaded from configuration, an ugly option would be to inject IConfiguration and try to read the options in the component itself.

A better idea would be to either use a separate service to hide this, or use the Options pattern to convert settings into strongly-typed classes and inject them with DI.

@inject IOptions<MyButtonOptions> _buttonOptions;

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

Let's say your settings contain:

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

You can load this using the following option class :

class MyButton
{
    public string Name{get;set;}
    public string Category {get;set;}
    ...
}

class MyButtonOptions
{

    public MyButton[] Buttons {get;set;}
}

In the application configuration section you can specify that the MyButtonOptions class will be loaded from the ButtonOptions section :

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