Select box binding in blazor

It works well when I put the <InputSelect> in a <EditForm Model="@model">..</EditForm >and there's no problem in your data binding.

Try to use below code to set <BlazorLinkOnBuild>false</BlazorLinkOnBuild> in the csproj file.

<PropertyGroup>
   <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
</PropertyGroup>

Refer to https://github.com/aspnet/AspNetCore/issues/7784

Update:

Use <select> tag instead of <InputSelect> like

<select @bind="model.ByCountryId">
        @if (model?.Countries != null)
        {
            @foreach (var cnt in model.Countries)
            {
                <option value="@cnt.Id">@cnt.Name</option>
            }
        }
</select>

This is an example on how one can display a list of countries in a select element, and retrieve the selected country code or ID.

<select class="form-control" @bind="@SelectedCountryID">

    <option value=""></option>
    @foreach(var country in CountryList)
    {
        <option value = "@country.Code"> @country.Name </option >
    }
}

</select>

<p>@SelectedCountryID</p>

Code block

@code {

    string selectedCountryID;

    string SelectedCountryID
    {
        get => selectedCountryID;
        set
        {
            selectedCountryID = value;

        }
    }

    List<Country> CountryList = new List<Country>() { new Country ("USA", "United States"),
                                                      new Country ("UK", "United Kingdom") };

    public class Country
    {

        public Country(string code, string name)
        {
            Code = code;
            Name = name;
        }
        public string Code { get; set; }
        public string Name { get; set; }

    }
}

---

This code is suitable to be integrated with other select elements to form cascading dropdown experience (a list of cities that is populated after selecting a country, etc.). Just copy the code snippet to your Index.razor file and execute it...