Blazor WASM（.NET 9）中Radio按钮@bind绑定失效问题求助

问题描述 #

我在Blazor WASM（.NET 9）项目里尝试用@bind绑定单选按钮组，但一直没能实现预期的绑定效果，翻了官方的Blazor数据绑定文档也没找到针对性的解决办法，实在头疼。

目前我的代码是这样的：

<div class="control flex flex-col">
    <label class="radio">
        <input type="radio" name="stock" @bind="Filter.InStock" checked="@(Filter.InStock.HasValue && Filter.InStock.Value)" @bind:after="LoadData" />
        In Stock
    </label>
    <label class="radio">
        <input type="radio" name="stock" @bind="Filter.OutOfStock" checked="@(Filter.OutOfStock.HasValue && Filter.OutOfStock.Value)" @bind:after="LoadData" />
        Out Of Stock
    </label>
</div>

现在的问题是，单选按钮的绑定完全没起作用——点击切换时状态不会更新，也触发不了LoadData方法。

问题根源 #

你当前的写法有两个核心问题：

1. 同一组单选按钮绑定到了不同属性：单选按钮是互斥选择的，应该共享同一个绑定属性，通过不同的value值区分选中状态，而不是给每个按钮绑定独立属性。
2. 手动设置checked属性干扰了@bind逻辑：@bind会自动处理单选按钮的选中状态，手动添加checked表达式会覆盖绑定的自动状态，直接导致绑定失效。

解决方案 #

我们需要调整绑定逻辑，让同一组单选按钮绑定到同一个属性，同时去掉手动的checked设置。

方案1：使用单个属性绑定（推荐）

首先在你的Filter模型里定义一个统一的属性来表示库存状态：

public class Filter
{
    // 用bool?类型：null=未选择，true=有库存，false=无库存
    public bool? StockStatus { get; set; }
}

// 组件中实例化Filter
private Filter Filter = new Filter();

private void LoadData()
{
    // 这里编写你的数据加载逻辑
    Console.WriteLine($"当前选中状态：{Filter.StockStatus}");
}

然后修改前端的单选按钮绑定：

<div class="control flex flex-col">
    <label class="radio">
        <input type="radio" name="stock" @bind="Filter.StockStatus" value="true" @bind:after="LoadData" />
        In Stock
    </label>
    <label class="radio">
        <input type="radio" name="stock" @bind="Filter.StockStatus" value="false" @bind:after="LoadData" />
        Out Of Stock
    </label>
</div>

方案2：保留原有双属性的兼容写法

如果你的业务逻辑必须保留InStock和OutOfStock这两个独立属性，可以通过统一属性的setter来同步状态：

public class Filter
{
    private bool? _stockStatus;
    
    public bool? StockStatus 
    { 
        get => _stockStatus;
        set
        {
            _stockStatus = value;
            // 同步原有两个属性的状态
            InStock = value == true;
            OutOfStock = value == false;
        }
    }
    
    public bool? InStock { get; set; }
    public bool? OutOfStock { get; set; }
}

前端绑定和方案1完全一致，这样既满足了原有属性的使用需求，又能让单选按钮绑定正常工作。

关键注意点 #

• 同一组单选按钮必须设置相同的name属性，确保浏览器将它们识别为互斥的选项组。
• @bind会自动处理选中状态与属性值的同步，不需要手动编写checked表达式。
• @bind:after会在属性值更新后触发指定方法，这里就能正常调用LoadData了。

备注：内容来源于stack exchange，提问作者fingers10