Blazor Server中如何根据复选框状态显示/隐藏元素？

在Blazor Server中，实现复选框勾选后显示日期选择器，正确的做法是用数据绑定+条件渲染，而不是直接操作DOM元素。直接通过ID引用或调用document.getElementById不符合Blazor的组件化开发模式，还会因为服务器端渲染的机制导致错误。

修改后的完整代码 #

<label for="footballcheck">Have you been to a football match in the last year?</label>
<input type="checkbox" id="footballcheck" name="footballcheck" @bind="HasAttendedMatch">

@if (HasAttendedMatch)
{
    <label for="matchdate">When did you go?</label>
    <input type="date" id="matchdate" name="matchdate">
}

@code {
    // 绑定复选框状态的布尔变量
    private bool HasAttendedMatch;
}

代码说明 #

1. 数据绑定：用@bind="HasAttendedMatch"把复选框的勾选状态和C#变量绑定，勾选或取消时变量会自动同步，不需要手动写onclick事件处理。
2. 条件渲染：用@if (HasAttendedMatch)包裹日期选择器部分，只有当变量为true（复选框被勾选）时，才渲染这部分内容，自然实现显示/隐藏的效果。

为什么之前的方法不行？ #

• Blazor Server的C#代码运行在服务器端，而DOM元素在客户端浏览器，直接在C#里通过ID引用DOM元素（比如var checkbox = footballcheck）完全无效，两者不在同一个运行环境。
• 调用document.getElementById属于JavaScript操作，你之前把JS代码直接写在C#方法里会报错，因为C#不认识document对象。如果非要用JS操作，需要通过JS互操作（JSInterop），但这完全没必要，用Blazor自带的数据绑定更简单可靠。

（可选）如果非要操作DOM的实现方式（不推荐） #

如果因为特殊需求必须操作DOM元素，可以用ElementReference配合JSInterop：

<label for="footballcheck">Have you been to a football match in the last year?</label>
<input type="checkbox" id="footballcheck" name="footballcheck" @onclick="ToggleDatePicker" @ref="footballCheckRef">

<label for="matchdate">When did you go?</label>
<input type="date" id="matchdate" name="matchdate" @ref="matchDateRef">

@code {
    private ElementReference footballCheckRef;
    private ElementReference matchDateRef;
    [Inject] private IJSRuntime JSRuntime { get; set; }

    private async Task ToggleDatePicker()
    {
        // 通过JS互操作获取复选框状态
        var isChecked = await JSRuntime.InvokeAsync<bool>("eval", $"document.getElementById('footballcheck').checked");
        // 调用JS显示/隐藏日期选择器
        if (isChecked)
        {
            await JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('matchdate').style.display = 'block'");
        }
        else
        {
            await JSRuntime.InvokeVoidAsync("eval", $"document.getElementById('matchdate').style.display = 'none'");
        }
    }
}

这种方式需要额外处理JS互操作，代码更复杂，还容易出现状态不一致的问题，所以优先推荐第一种数据绑定的方案。

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