复选框单击 Razor 页面 AspNetCore 2.2 中的表单提交答案

【问题标题】：Checkbox Click Form Submit in Razor Pages AspNetCore 2.2复选框单击 Razor 页面 AspNetCore 2.2 中的表单提交
【发布时间】：2020-01-17 12:27:55
【问题描述】：

我正在尝试（非 Ajax）获取一个复选框以在 Razor 页面中重新提交表单并重新加载页面 / 并在我的 OnPost 方法中捕获结果。

我的 index.cshtml 中有

@page  "{id:int?}"
@model IndexModel

<div class="text-center">
    <form action="post" name="form1">
        <strong>Filter:</strong> Hide Single Runs <input onclick="document.form1.submit()" asp-for="@Model.HideSingle" />        
        <hr />

在我的 PageModel 中

public class IndexModel : PageModel
{
    public bool HideSingle { get; set; } = true;

    public async Task OnPost(int? id, bool hideSingle)
    {

说一个起始页的 URL：

http://localhost:5000/TestRuns/1

表单在复选框单击时提交，但它以一个 Url 结尾：

http://localhost:5000/TestRuns/post?HideSingle=false

这显然无法解决，因为我期待http://localhost:5000/TestRuns/1 的路线。

【问题讨论】：

标签： asp.net-core razor-pages

【解决方案1】：

对于 Asp.net Core 表单，默认方法是 Get，这意味着对于您当前的代码，它使用 Get 而不是 post 发送请求。您可以使用post 指定方法，例如

<div class="text-center">
    <form method="post" name="form1">
        <strong>Filter:</strong> Hide Single Runs <input onclick="document.form1.submit()" asp-for="@Model.HideSingle" />
        <hr />
    </form>
</div>

对于另一种方式，您可以明确设置处理程序，如

<div class="text-center">
    <form asp-page-handler="post" name="form2">
        <strong>Filter:</strong> Hide Single Runs <input onclick="document.form2.submit()" asp-for="@Model.HideSingle" />
        <hr />
    </form>
</div>

【讨论】：

【解决方案2】：

<input onclick="document.form1.submit()" />

正在使用 JavaScript 提交表单。由于您没有使用 Ajax（根据您的问题），您是否希望该页面回发？

您希望页面上的呼叫最终成为http://localhost:5000/TestRuns/post?id=1&HideSingle=false。您的帖子是否需要 id 才能正常工作（OnPost(int? id..) 不清楚？

我为了得到这两个值，你需要有hidden form values 或多个<input asp-for="Email" class="form-control" />。 hideSingle 需要 1，id 需要 on。

【讨论】：