Blazor Binding父/子/子下拉doctuns无法在子控制器控制上设置默认值

Question

在父/孩子下拉场景中，我每次更新父级下拉次数时都试图显示子级别下拉词的默认值。

该代码可以完成该作业，因为它更新了示例标签，但是子下拉菜没有显示任何内容。

为了简单起见，我正在用一个国家/区域对的选定控件来演示问题。 初始渲染正确显示了该国的默认国家和默认区域。 更新国家 /地区在标签上设置了新的默认区域，但是“区域选择”变为空白：

@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

问题在于，set变量上的方法不会导致页面重新渲染：自动重新渲染在处理@event的任务时发生，并强制重新恢复呈现<代码> statehaschanged 发生。

您正在尝试使用set方法当选择值时。但是，这是一个陷阱。 Blazor允许C＃布尔值选择（以及disabled或hidden之类的其他事物）。

您已经花了一些时间来很好地设置数据，因此您可以通过参考跟踪选择，而不是通过将名称的字符串值复制到新变量来进行选择。

我认为以下是一个改进。我希望它能为您提供帮助，因为大餐经常出现这种情况：

@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; }
    }
}