Blazor应用中Add单选按钮默认选中失效问题求助

问题分析 #

页面加载时Add单选按钮未默认选中，尽管ViewModel中已设置ScanningMode.Adding、IsAdding=true，UI状态未同步。核心原因包括：

• 单选按钮绑定两个独立bool属性，不符合单选组互斥逻辑，组件无法正确识别选中状态
• ViewModel属性未实现变更通知，Blazor无法感知属性变化并更新UI
• @onclick与@bind-Value冲突，手动设置属性干扰了绑定的自动同步

解决方案 #

1. 给ViewModel添加属性变更通知 #

确保ViewModel实现INotifyPropertyChanged，让Blazor能感知属性变化：

public class YourViewModel : INotifyPropertyChanged
{
    public event PropertyChangedEventHandler PropertyChanged;

    private ScanningMode _currentScanningMode;
    public ScanningMode CurrentScanningMode
    {
        get => _currentScanningMode;
        set
        {
            if (_currentScanningMode != value)
            {
                _currentScanningMode = value;
                OnPropertyChanged(nameof(CurrentScanningMode));
                // 联动更新IsAdding/IsRemoving
                IsAdding = value == ScanningMode.Adding;
                IsRemoving = value == ScanningMode.Removing;
            }
        }
    }

    private bool _isAdding;
    public bool IsAdding
    {
        get => _isAdding;
        set
        {
            if (_isAdding != value)
            {
                _isAdding = value;
                OnPropertyChanged(nameof(IsAdding));
            }
        }
    }

    private bool _isRemoving;
    public bool IsRemoving
    {
        get => _isRemoving;
        set
        {
            if (_isRemoving != value)
            {
                _isRemoving = value;
                OnPropertyChanged(nameof(IsRemoving));
            }
        }
    }

    protected void OnPropertyChanged(string propertyName)
    {
        PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
    }

    // 其他现有代码...
}

2. 修正单选按钮绑定逻辑 #

将单选组绑定到同一个枚举属性CurrentScanningMode，移除冲突的@onclick事件：

<ParrotRadioGroup GroupName="AddAndRemoveBtns" class="d-flex justify-content-center">
    <div class="form-check d-inline-block m-3">
        <ParrotRadioInput Value="ScanningMode.Adding" @bind-Value="VM.CurrentScanningMode" Id="btnradio1" Class="form-check-input" autocomplete="off">
            <label class="btn btn-outline-success w-100" for="btnradio1">Add</label>
        </ParrotRadioInput>
    </div>
    <div class="form-check d-inline-block m-3">
        <ParrotRadioInput Value="ScanningMode.Removing" @bind-Value="VM.CurrentScanningMode" Id="btnradio2" Class="form-check-input" autocomplete="off">
            <label class="btn btn-outline-danger w-100" for="btnradio2">Remove</label>
        </ParrotRadioInput>
    </div>
</ParrotRadioGroup>

3. 调整初始化流程 #

确保初始化时正确设置枚举值，并触发UI更新：

protected override async Task OnInitializedAsync()
{
    await base.OnInitializedAsync();
    VM.BusyStateHasChanged += StateHasChanged;
    VM.OnResultRaised += ShowNotification;
    VM.Setup();
    // 确保模式正确初始化
    VM.CurrentScanningMode = ScanningMode.Adding;
    VM.FocusOnTextbox = true;
    _inputTimer = new EventTimer(2000) { AutoReset = false };
    _inputTimer.Elapsed += OnInputTimerElapsed;
    // 手动触发UI刷新，同步单选按钮状态
    StateHasChanged();
}

// 移除ChangeScanMode方法，属性联动已在ViewModel中处理

4. 更新ViewModel的Setup方法 #

直接设置枚举值，通过联动自动更新IsAdding/IsRemoving：

public void Setup()
{
    try
    {
        SetAsBusy("Loading");
        CurrentScanningMode = ScanningMode.Adding;
        SelectedReason = new RedeliveryReasonModel();
        if (Reasons.IsNullOrEmpty())
        {
            GetRedeliveryReasonAsync();
        }
    }
    catch (Exception ex)
    {
        var sr = new SuccessResultBuilder();
        sr = sr.Invalid().WithError(ex);
        EmitResult(sr);
        return;
    }
    finally
    {
        SetAsIdle();
    }
}

内容的提问来源于stack exchange，提问作者Muzzammil Mahomed