ASP.NET Core Razor Pages：无JS绑定asp-page-handler到复选框

要在不使用JavaScript和额外可见提交按钮的前提下，让复选框触发后端Page Handler，可通过HTML原生的<label>标签关联隐藏的提交按钮实现，具体步骤如下：

1. 修改前端CSHTML代码 #

将目标复选框与一个隐藏的提交按钮用<label>包裹，同时指定表单的asp-page-handler：

<form method="post" asp-page-handler="ToggleAll">
    <th>
        <label>
            <input class="form-check-input" asp-for="Input.All" />
            <!-- 隐藏的提交按钮，点击复选框时会触发它提交表单 -->
            <input type="submit" style="display: none;" />
        </label>
    </th>
</form>

如果需要和原表单的其他数据一起提交，可将隐藏提交按钮放在原表单内，同时给提交按钮指定handler：

<form method="post">
    <button class="btn btn-danger width-80-px i-fs-11 musr-del" type="submit" asp-page-handler="Delete">
        <i class="bi-person-slash"></i>
    </button>
    <table class="table">
        <thead>
            <tr>
                <th>
                    <label>
                        <input class="form-check-input" asp-for="Input.All" />
                        <input type="submit" style="display: none;" asp-page-handler="ToggleAll" />
                    </label>
                </th>
                <!-- 其他表头内容 -->
            </tr>
        </thead>
        <tbody>
            <!-- 表体内容 -->
        </tbody>
    </table>
</form>

2. 添加后端Page Handler #

在对应的PageModel类中实现OnPostToggleAll方法，处理复选框触发的逻辑：

public class YourPageModel : PageModel
{
    [BindProperty]
    public InputModel Input { get; set; }

    public class InputModel
    {
        public bool All { get; set; }
    }

    // 处理复选框触发的逻辑
    public IActionResult OnPostToggleAll()
    {
        // 编写你的业务逻辑，比如更新状态、数据操作等
        // Input.All的值会自动绑定到前端复选框的状态

        // 处理完成后返回当前页面
        return Page();
    }

    // 原有的Delete handler
    public IActionResult OnPostDelete()
    {
        // 原删除逻辑
        return Page();
    }
}

原理说明 #

<label>标签的原生行为是：点击标签内的任意元素（包括复选框），都会触发关联的表单控件（这里是隐藏的提交按钮）的点击事件。隐藏的提交按钮会自动提交表单，从而触发指定的后端Page Handler，全程无需JavaScript介入。

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