本文介绍在 blazor server 应用中，使用原生 razor 语法（无需 javascript 或 dom 操作）实现「复选框控制元素显隐」的推荐方案：通过 `@bind` 绑定布尔状态，结合内联 css `display` 样式实现响应式表单展开。
在 Blazor 中，不应直接操作 DOM 元素（如 document.getElementById）或尝试调用 .show()/.hide() 方法——这不仅违背 Blazor 的声明式渲染理念，还会导致组件生命周期错乱、服务端与客户端状态不同步，甚至引发 NullReferenceException（因服务端无 DOM 环境）。正确的做法是利用 Blazor 的数据绑定与条件渲染机制，让 UI 完全由 C# 状态驱动。
以下是一个简洁、健壮且符合 Blazor 最佳实践的实现：
@code { private bool hasAttendedMatch; private DateTime? matchDate; // 使用 Nullable更安全，避免默认值干扰 }
✅ 关键要点说明：
- @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 的响应式优势——让表单“生长”得自然、精准且高性能。
