Blazor项目中如何保存并回显选中的单选按钮状态

DevOps 小满

2026-8-19

实现Blazor单选按钮页面加载时自动选中已保存值

步骤1：添加绑定变量

在组件的代码块中声明一个变量，用来存储当前选中的过滤条件：

private string SelectedFilter { get; set; } = "all"; // 可设置默认值，后续会被数据库值覆盖

步骤2：初始化时加载已保存值

利用Blazor的生命周期方法OnInitializedAsync，在页面加载时从数据库读取之前保存的过滤条件并赋值：

protected override async Task OnInitializedAsync()
{
    // 替换为你实际从数据库获取值的逻辑
    SelectedFilter = await YourDataAccessService.GetSavedFilter();
}

步骤3：给单选按钮绑定选中状态

修改你的HTML代码，为每个单选按钮添加checked绑定，同时修正label的for属性（确保点击标签能选中对应单选按钮）：

<label class="GroupTitle">Filters:</label><br/>
<input type="radio" name="number" id="all" 
       @oninput="@(() => UpdateFilter("all"))" 
       checked="@(SelectedFilter == "all")" /> 
<label for="all">Clear all files</label><br />  

<input type="radio" name="number" id="number" 
       @oninput="@(() => UpdateFilter("number"))" 
       checked="@(SelectedFilter == "number")" />
<label for="number">Based on number of files</label><br />    

<input type="radio" name="number" id="date" 
       @oninput="@(() => UpdateFilter("date"))" 
       checked="@(SelectedFilter == "date")" />    
<label for="date">Based on date of files</label><br />

步骤4：更新`UpdateFilter`方法

确保在保存到数据库前，先更新绑定的变量：

private async Task UpdateFilter(string filterValue)
{
    SelectedFilter = filterValue;
    // 替换为你实际保存到数据库的逻辑
    await YourDataAccessService.SaveFilter(filterValue);
}