Razor Pages中如何保留非表单内复选框的状态？

你之前使用[BindProperty(SupportsGet = true)]方案失效的核心原因很直接：Razor Pages的模型绑定只会从当前HTTP请求的查询参数、表单数据中读取值做绑定，不会主动抓取客户端未提交的DOM状态。你纯用JS控制复选框的勾选逻辑，发起GET请求刷新页面时没有把复选框的当前勾选状态作为参数传给服务端，bool类型属性自然会取默认值false，不可能自动保留状态。

你可以根据自己的交互需求二选一：

方案1：服务端绑定自动同步状态（整页刷新场景） #

这个方案完全依托Razor Pages的原生绑定能力，不需要额外存客户端状态，步骤如下：

1. 保留你PageModel中的属性定义即可，不需要额外修改：

   [BindProperty(SupportsGet = true)]
   public bool IsSectionExpanded { get; set; }
   

2. 在cshtml页面中用Razor标签助手渲染复选框，将复选框包裹在method="get"的表单中，监听change事件自动提交表单，把状态带到GET请求的查询参数里：

   <form method="get">
       <input type="checkbox" asp-for="IsSectionExpanded" onchange="this.form.submit()" />
       <label asp-for="IsSectionExpanded">展开/折叠区域</label>
       <!-- 其他需要保留的查询参数可以加隐藏域，避免刷新后丢失 -->
   </form>
   

3. 你原有的JS展开折叠逻辑，直接读取复选框的checked属性执行对应逻辑即可。页面刷新时Razor会自动根据模型绑定到的IsSectionExpanded值设置复选框的选中状态，不会重置。

注意：GET请求提交表单时，浏览器只会把勾选状态的复选框参数拼到查询串里，未勾选时不会传递该参数，Razor Pages会自动将未传递的bool属性绑定为false，符合交互预期。

方案2：客户端本地存储保留状态（无服务端依赖场景） #

如果你不想每次切换展开/折叠状态都触发整页刷新，完全不需要走服务端绑定，直接用浏览器本地存储存状态即可，实现更轻量：

const toggle = document.querySelector('#expandToggle');
const collapsibleArea = document.querySelector('#targetSection');

// 页面初始化时读取存储的状态
const savedExpandedState = localStorage.getItem('pageSectionExpanded') === 'true';
toggle.checked = savedExpandedState;
collapsibleArea.hidden = !savedExpandedState;

// 状态变更时同步更新存储和UI
toggle.addEventListener('change', () => {
  const currentState = toggle.checked;
  collapsibleArea.hidden = !currentState;
  localStorage.setItem('pageSectionExpanded', currentState);
});

如果不想用本地存储，也可以在触发页面GET刷新时，通过JS手动把当前复选框的勾选状态拼到URL查询参数中，同样能让你之前写的BindProperty正常拿到值。

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