Blazor服务器端组件手动多次选择后Lookup功能失效问题

问题根源 #

1. 子组件未实现双向绑定：用户手动选择下拉选项时，组件的Options状态未与DOM同步，浏览器会记录用户手动交互的选中状态。后续Lookup更新IsSelected属性并触发渲染时，浏览器会忽略组件输出的selected属性，导致界面无变化。
2. 组件实例初始化错误：父组件中手动new SelectWithLookup()初始化ActiveLookup，不符合Blazor组件实例化规范，可能导致引用的不是实际渲染的组件实例。

修复步骤 #

1. 修正父组件的组件引用初始化 #

将父组件中ActiveLookup的初始化代码修改为：

private SelectWithLookup ActiveLookup { get; set; }

（移除手动new()，由Blazor框架通过@ref注入实际渲染的组件实例）

2. 给子组件添加双向绑定，同步DOM与组件状态 #

修改子组件代码，使用双向绑定同步选中值，替代依赖IsSelected属性控制选中状态：

<select class="form-control mb-3" @bind="@SelectedId">
    <option value="0">[Select]</option>
    @if (Options is not null)
    {
        @foreach (var item in Options.OrderBy(z => z.Text))
        {
            <option value="@item.Id">@item.Text</option>
        }
    }
</select>

@code {
    [Parameter]
    public List<SelectOption> Options { get; set; }

    private int SelectedId { get; set; } = 0;

    public async Task LookupSelect(int id)
    {
        SelectedId = id;
        // 如需同步Options的IsSelected状态，可保留以下代码
        Options?.ForEach(x => x.IsSelected = x.Id == id);
        StateHasChanged();
    }

    // 保留原有其他代码...
}

3. 优化JS逻辑（可选） #

在storage事件处理中添加错误捕获，避免静默失败：

window.addEventListener('storage', async (event) => {
    if (event.storageArea != localStorage) return;
    if (event.key === 'selected_item') {
        try {
            var selected_value = localStorage.getItem('selected_item');
            if (_dotNetObject && selected_value !== '0') {
                await _dotNetObject.invokeMethodAsync('LookupItemSelect', selected_value);
            }
            localStorage.setItem('selected_item', '0');
            if (lookupWindow) lookupWindow.close();
        } catch (err) {
            console.error('Lookup处理失败:', err);
        }
    }
});

验证修复 #

完成上述修改后，测试问题复现场景：

• 手动选择[Select]或其他选项后，再通过Lookup选择值，界面会正确更新选中状态。

内容的提问来源于stack exchange，提问作者T3.0