本文介绍在 blazor server 应用中，使用原生 razor 语法（无需 javascript 或 dom 操作）实现「复选框控制元素显隐」的推荐方案：通过 `@bind` 绑定布尔状态，结合内联 css `display` 样式实现响应式表单展开。
在 Blazor 中，不应直接操作 DOM 元素（如 document.getElementById）或尝试调用 .show()/.hide() 方法——这不仅违背 Blazor 的声明式渲染理念，还会导致组件生命周期错乱、服务端与客户端状态不同步，甚至引发 NullReferenceException（因服务端无 DOM 环境）。正确的做法是利用 Blazor 的数据绑定与条件渲染机制，让 UI 完全由 C# 状态驱动。
以下是一个简洁、健壮且符合 Blazor 最佳实践的实现：
<label>
<input type="checkbox" @bind="hasAttendedMatch" />
Have you been to a football match in the last year?
</label>
<div style="display:@(hasAttendedMatch ? "block" : "none"); margin-top: 0.5rem;">
<label for="matchdate">When did you go?</label>
<input type="date" @bind="matchDate" id="matchdate" name="matchdate" />
</div>
@code {
private bool hasAttendedMatch;
private DateTime? matchDate; // 使用 Nullable<DateTime> 更安全，避免默认值干扰
}✅ 关键要点说明：
- @bind="hasAttendedMatch" 实现双向绑定：复选框勾选状态与 C# 布尔字段实时同步；
- style="display:@(hasAttendedMatch ? "block" : "none")" 是最轻量、兼容性最好的显隐控制方式（优于 visibility: hidden，因它真正移除布局占位）；
- DateTime? 类型可确保未填写日期时值为 null，避免意外提交默认 0001-01-01；
- 所有逻辑完全运行在 Blazor 组件生命周期内，无需 JS 互操作，天然支持服务端预渲染（SSR）与热重载。
⚠️ 注意事项：
- 避免在 @code 块中引用 HTML id 属性（如 footballcheck）作为变量名——Blazor 不会自动将 DOM 元素映射为 C# 变量；
- 不要混用 onclick + JavaScript 函数（如 CheckChanged()），这会绕过 Blazor 的变更检测，导致 UI 与状态脱节；
- 若需更复杂的显隐动画（如淡入），应使用 CSS 过渡 + @onchange 触发 StateHasChanged() 并切换 CSS 类，而非操作 display。
通过这种纯 Razor + 状态驱动的方式，你不仅能写出更可靠、可测试、易维护的代码，还能充分发挥 Blazor 的响应式优势——让表单“生长”得自然、精准且高性能。
