docs: How to bind to nullable objects with fluent-select about fluentui-blazor

[MarvinKlein1508]

This implementation is even better and more easily manipulatable.

<FluentSelect TOption="Country"
              Label="Country"
              Width="100%;">
    <FluentOption Value="null" Selected="@(Input.CountryId is null)" OnSelect="(val) => Input.CountryId = null">--- Select ---</FluentOption>
    @foreach (var item in _countries)
    {
        <FluentOption TOption="Country" Value="@item.CountryId.ToString()" Selected="@(Input.CountryId == item.CountryId)" OnSelect="(val) => Input.CountryId = item.CountryId">@item.Name</FluentOption>
    }
</FluentSelect>

[vnbaaij]

You can do either this :

<FluentSelect TOption="Country"
              Label="Country"
              Items="@_countries"
              OptionValue="@(p => p.CountryId.ToString())"
              OptionText="@(p => p.Name)" >
</FluentSelect>

@code {
    public class Country
    {
        public int? CountryId { get; set; }
        public string? Name { get; set; }
    }

    public class MyModel
    {
        public int? CountryId { get; set; } // For new MyModels, no country is preselected
        /* Other properties */
    }

    private List<Country> _countries = new List<Country>
    {
        new Country { CountryId = null, Name="Select a country"},
        new Country { CountryId = 1, Name = "USA" },
        new Country { CountryId = 2, Name = "Canada" },
        new Country { CountryId = 3, Name = "Mexico" }
    };

}

Or

<FluentSelect Label="Country">
              <FluentOption Value="null">Select a country</FluentOption>
              <FluentOption Value="1">USA</FluentOption>
              <FluentOption Value="2">Canada</FluentOption>
              <FluentOption Value="3">Mexico</FluentOption>
</FluentSelect>

[MarvinKlein1508]

@vnbaaij thanks for clarification. But your examples are missing the bind mechanismn. Could you specify how to bind it to MyModel.CountryId correctly?

[vnbaaij]

Ah, that was because there was no bind in your code as well :)

You can just use @bind-Value="@SelectedValue" or @bind-SelectedOption="@SelectedPerson" as shown in the example on the demo site:

@inject DataSource Data
<FluentSelect TOption="Person"
              Label="Select a person"
              Items="@Data.People.WithVeryLongName()"
              Id="people-listbox"
              Width="200px"
              Height="250px"
              OptionValue="@(p => p.PersonId.ToString())"
              OptionText="@(p => p.LastName + ", " + p.FirstName)"
              @bind-Value="@SelectedValue"
              @bind-SelectedOption="@SelectedPerson" />

<p>
    Selected value: @SelectedValue <br />
    Selected person (strongly typed): @SelectedPerson?.ToString()
</p>

@code
{
    Person? SelectedPerson;
    string? SelectedValue = "4";
}

[MarvinKlein1508]

@vnbaaij my problem here is that I need to bind to the CountryId of MyModel I need the Id in integer not as string. Is there any easy way to bind to int directly?

[vnbaaij]

You either need to parse it yourself (@bind-Value), or get it from the TOption (@bind-SelectedOption). Like with SelectedPerson.PersonId in the example above

[MarvinKlein1508]

I think I got it. I can use the SelectedOptionChanged EventCallback

<FluentSelect TOption="Country"
              Label="Country"
              Width="100%;"
              Items="@_countries"
              OptionValue="@(p => p.CountryId.ToString())"
              OptionText="@(p => p.Name)"
              OptionSelected="(option) => Input.CountryId == option.CountryId"
              SelectedOptionChanged="(option) => Input.CountryId = option.CountryId > 0 ? option.CountryId : null" />

@code {
    public class Country
    {
        public int CountryId { get; set; }
        public string? Name { get; set; }
    }

    public class MyModel
    {
        public int? CountryId { get; set; } // For new MyModels, no country is preselected
        /* Other properties */
    }

    private List<Country> _countries = new List<Country>
    {
        new Country { CountryId = -1, Name="Select a country"},
        new Country { CountryId = 1, Name = "USA" },
        new Country { CountryId = 2, Name = "Canada" },
        new Country { CountryId = 3, Name = "Mexico" }
    };
}

Another problem is that the ID itself of the country cannot be null, only from the MyModel itself.