Blazor binding parent/child dropdown controls fails to set default value on child control - blazor-server-side

Question

On a parent/child dropdown scenario, I'm trying to display a default value for the child dropdown each time the parent dropdown is updated.
The code does the job, since it updates the sample label, but the child dropdown does not display anything.
For simplicity I am demonstrating the issue with a country/zone pair of select controls.
Initial render correctly shows the default country and the default zone of the country.
Updating the country sets the new default zone on the label but the zones select turns blank:
#page "/test"
<select #bind="#CountryName">
#foreach (var country in Countries)
{
<option>#country.Name</option>
}
</select>
<select #bind="#ZoneName">
#foreach (string zone in Zones)
{
<option>#zone</option>
}
</select>
<div>Selected country: #CountryName</div>
<div>Selected zone: #ZoneName</div>
#code {
private List<Country> Countries;
private List<String> Zones = new();
private string countryName;
private string CountryName
{
get => countryName;
set
{
countryName = value;
var country = Countries.First(x => x.Name == value);
Zones = country.Zones.Select(x => x.Name).ToList();
ZoneName = country.DefaultZoneName;
}
}
private string zoneName;
private string ZoneName
{
get => zoneName;
set
{
zoneName = value;
}
}
protected override void OnInitialized()
{
//data factory
var barcelona = new Zone() { Name = "Barcelona" };
var madrid = new Zone() { Name = "Madrid" };
var spain = new Country() { Name = "Spain" };
spain.Zones.Add(barcelona);
spain.Zones.Add(madrid);
spain.DefaultZoneName = spain.Zones.Last().Name;;
var açores = new Zone() { Name = "Açores" };
var algarve = new Zone() { Name = "Algarve" };
var portugal = new Country() { Name = "Portugal" };
portugal.Zones.Add(açores);
portugal.Zones.Add(algarve);
portugal.DefaultZoneName = portugal.Zones.Last().Name;
Countries = new List<Country>();
Countries.Add(spain);
Countries.Add(portugal);
CountryName = Countries.Last().Name;
base.OnInitialized();
}
//models
public class Country
{
public string Name { get; set; }
public List<Zone> Zones { get; set; } = new();
public string DefaultZoneName { get; set; }
}
public class Zone
{
public string Name { get; set; }
}
}

Answer 1

The problem is that set method on variable doesn't cause the page to re-render: automatic re-render occurs with a Task handling an #event, and forced re-render occurs with StateHasChanged.
You are trying to use set method because 2-way binding on the select consumes the #onchange event, so you have no way to do anything when a value is selected. However, this is a trap. Blazor allows C# boolean for selected (and also for other things like disabled or hidden).
You already took some time to set up your data nicely, so you can track selection by reference, not by copying the string values of names to new variables.
I think the following is an improvement. I hope it helps you, as this same situation will come up very often in Blazor:
#page "/"
<select #onchange="(args) => SelectedCountry = Countries.First(x => x.Name==args.Value?.ToString())">
#foreach (var country in Countries)
{
<option selected="#(country == SelectedCountry)" >#country.Name</option>
}
</select>
<select #onchange="(args) => SelectedCountry.SelectedZone = SelectedCountry.Zones.First(x => x.Name==args.Value?.ToString())">
#foreach (var zone in SelectedCountry.Zones)
{
<option selected="#(zone == SelectedCountry.SelectedZone)">#zone.Name</option>
}
</select>
<div>Selected country: #SelectedCountry.Name</div>
<div>Selected zone: #SelectedCountry?.SelectedZone?.Name</div>
#code {
private List<Country> Countries = new();
private Country SelectedCountry = new();
protected override void OnInitialized()
{
//data factory
var barcelona = new Zone() { Name = "Barcelona" };
var madrid = new Zone() { Name = "Madrid" };
var spain = new Country() { Name = "Spain" };
spain.Zones.Add(barcelona);
spain.Zones.Add(madrid);
spain.SelectedZone = spain.Zones.Last();
var açores = new Zone() { Name = "Açores" };
var algarve = new Zone() { Name = "Algarve" };
var portugal = new Country() { Name = "Portugal" };
portugal.Zones.Add(açores);
portugal.Zones.Add(algarve);
portugal.SelectedZone = portugal.Zones.Last();
Countries = new List<Country>();
Countries.Add(spain);
Countries.Add(portugal);
SelectedCountry = portugal;
}
//models
public class Country
{
public string Name { get; set; }
public List<Zone> Zones { get; set; } = new();
public Zone? SelectedZone;
}
public class Zone
{
public string Name { get; set; }
}
}