如何将带有标签的 MVC .net 核心复选框绑定为按钮

How to bind MVC .net core checkbox with label as button

我有以下代码创建了一个看起来像切换按钮的复选框。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
 <label asp-for="FlaggedStatus" class="btn btn-outline-danger">
   <input asp-for="FlaggedStatus" type="checkbox"> Flag Address
 </label>
</div>

未选中的表格看起来像这样:

然后选中时像这样:

绑定非常适合保存数据。但是当我加载已经输入数据的表单时,对于编辑模式,复选框在后台被选中,但按钮没有显示为已填充。那么我如何绑定它以便按钮在复选框显示时显示为已切换数据是真的吗?

切换使用父 label 上的 active css class。您将不得不使用一些内联逻辑:

<label asp-for="FlaggedStatus" class="btn btn-outline-danger @(Model.FlaggedStatus ? "active")">