How can I do this binding with FluentSelect?

[MarvinKlein1508]

In vanilla Blazor I can bind to an InputSelect like this:

@page "/Admin/Config"

@if (Input is null)
{
	return;
}

@Input.DefaultLanguageId

<EditForm Model="Input">
	<InputSelect @bind-Value="@Input.DefaultLanguageId">
		@foreach (var option in Languages)
		{
			<option value="@option.LanguageId">@option.Name</option>
		}
	</InputSelect>
</EditForm>

The code-behind file from the page looks like this:

public partial class ConfigPage
{
    public Config? Input { get; set; }

public static Language[] Languages => new[]
{
    new Language()
    {
        Code = "en",
        LanguageId = 1,
        Name = "English",
    },
    new Language()
    {
        Code = "de",
        LanguageId = 2,
        Name = "Deutsch",
    }
};


    protected override async Task OnInitializedAsync()
    {
// Config will be loaded from db here. For demo I'm using a default instance
        Input = ConfigRepository.DefaultMainConfig;
    }
}

Here are both the config and language class for reference:

public sealed class Config
{
    public static Config DefaultMainConfig => new()
    {
        Code = ConfigRepository.MAIN_CONFIG_CODE,
        DefaultLanguageId = 1
    };

    public required string Code { get; set; }
    public int DefaultLanguageId { get; set; } 
}

public class Language
{
    public int LanguageId { get; set; }
    public string Name { get; set; } = string.Empty;
    public string Code { get; set; } = string.Empty;
}

This code renders like this:

When I switch the option this will be displayed - as well if the DefaultLanguageId is defined as 2.

Is there any way to achieve similiar binding with the FluentSelect component in either of v4 or v5 branches?

[vnbaaij]

I think you can do this with Option<T>. See https://www.fluentui-blazor.net/Select#fromalistofoptiontit

[MarvinKlein1508]

I don't think so. The issue is that once I define the Items parameter it expects me to bind to an object and not just the ID of the object. But I can't alter my actual object it has to be the ID.

[MBNSoftware]

Here is what I'm using to select a language, if it can be of any help :

<FluentSelect Items=@Langues
TOption="Option<string>"
OptionText="@(i => i.Text)"
OptionValue="@(i => i.Value)"
OptionSelected="@(i => i.Selected)"
@bind-SelectedOption="@SelectedLanguageOption"
@bind-Value="@SelectedLanguage"
Width="120px"
Label=@Trad["LabelLangueX3"] />

private string SelectedLanguage { get; set; } = "FRA";
private Option<string> SelectedLanguageOption = default!;
private List<Option<string>> Langues = null!;

protected override Task OnInitializedAsync()
{
    SelectedLanguage = CultureInfo.CurrentUICulture.TwoLetterISOLanguageName.ToLower() switch
    {
        "fr" => "FRA",
        "en" => "ENG",
        "es" => "SPA",
        "de" => "GER",
        "it" => "ITA",
        _ => "FRA",
    };

    Langues =
    [
        new Option<string> { Value = "ENG", Text = "English", Selected = SelectedLanguage == "ENG" },
        new Option<string> { Value = "FRA", Text = "Français", Selected = SelectedLanguage == "FRA" },
        new Option<string> { Value = "GER", Text = "Deutsch", Selected = SelectedLanguage == "GER" },
        new Option<string> { Value = "SPA", Text = "Español", Selected = SelectedLanguage == "SPA" },
        new Option<string> { Value = "ITA", Text = "Italiano", Selected = SelectedLanguage == "ITA" }
    ];

    return Task.CompletedTask;
}

Perhaps using an int value instead of a string like in my code it would work ?

Edit : I'm using the three letters because of a link with an external application that is expecting such language codes.

[MarvinKlein1508]

Interesting. I haven't tried this approach yet. I will give it a try once I find the time for it.

[MBNSoftware]

Time is money. And I'm not rich either...