为什么我的复选框没有将它们的值传递给 ASP.NET Core 中的控制器？答案

【问题标题】：Why do my checkboxes not pass their value to my controller in ASP.NET Core?为什么我的复选框没有将它们的值传递给 ASP.NET Core 中的控制器？
【发布时间】：2019-07-17 15:15:24
【问题描述】：

我觉得这可能是一个简单的解决方法，但我似乎无法绕过它。我有一个 ASP.NET Core Web 应用程序，我正在使用 ajax 表单将数据提交到我的控制器进行处理。我遇到的问题是我的复选框总是以“false”的形式传入，即使它们可能被选中。

我搜索了一些答案，但我尝试过的都没有奏效。比如使用checked 属性，确保名称正确。

谁能解释为什么当表单提交给控制器时这些值被忽略以及我该如何解决它？

表格

<form asp-action="CreateCustomView" asp-controller="Data"
        data-ajax="true"
        data-ajax-method="POST">
        <div class="row">
            <div class="col">
                <div class="custom-control custom-checkbox">                            
                    <input type="checkbox" class="custom-control-input" id="ColName" name="ColName" checked>
                    <label class="custom-control-label" for="ColName">Name</label>
                </div>
            </div>

            <button type="reset">Reset</button>
            <button type="submit">Save changes</button>
</form>

型号

namespace MyProject.Data
{
    public class GridView : BaseEntity
    {
        public string Name { get; set; }               
        public bool ColName { get; set; }
    }
}

数据控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using MyProject.Data;
using Microsoft.AspNetCore.Mvc;

namespace MyProject.UI.Controllers
{
    public class DataController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }
        [HttpPost]
        [ValidateAntiForgeryToken]
        public IActionResult CreateCustomView(GridView data)
        {
            //This method is incomplete, there is a break at the ActionResult to see what values are passed into `data`.  In production, the values would be handled and the changes would be saved.
            return View();
        }
    }
}

我在方法 CreateCustomView 上有一个断点，以查看传递了哪些值，无论我检查什么复选框，它们总是以 false 的形式传递。

谁能帮忙解决这个相当奇怪的问题？

更新

根据@Reyan-Chougle 提供的答案，如果您使用的是 CORE，则需要提供如下输入：

<input asp-for="@Model.ColType" type="checkbox" />

当页面被渲染时，控件自动被赋予一个隐藏字段。以下是上述控件的 HTML 呈现的内容：

<input type="checkbox" class="custom-control-input" id="ColType" value="true" data-val="true" data-val-required="The ColType field is required." name="ColType">
<input type="hidden" value="false" id="ColType" name="ColType">

如您所见，它创建了一个值为 false 的隐藏复选框。这意味着，作为布尔类型，它在提交时始终具有 true 或 false 值。

【问题讨论】：

因为未选中的复选框不会被浏览器发布。你必须发布额外的隐藏字段见stackoverflow.com/questions/1809494/…和stackoverflow.com/questions/2697299/…
当应用期待application/json 时，您是否可以将它们发布为application/x-www-form-urlencoded？
你找到解决办法了吗？

标签： c# asp.net-core model-view-controller

【解决方案1】：

由于您使用的是 ASP.NET Core，建议使用 Tag Helpers：

<div class="form-group">
    <label asp-for="@Model.ColName"></label>
    <input asp-for="@Model.ColName" type="checkbox" />
</div>

【讨论】：

【解决方案2】：

如果不使用 asp-for 属性，您可以修改代码以添加隐藏字段。无论复选框是否被选中，它都会被提交。如果选中该复选框，则发布的值将为真，假。模型绑定器将从值中正确提取 true。否则它将是错误的：

<input type="checkbox" class="custom-control-input" data-val="true" id="ColName" name="ColName" value="true" checked>
<label class="custom-control-label" for="ColName">Name</label>
<input name="ColName" type="hidden" value="false">

【讨论】：

【解决方案3】：

我遇到了类似的问题。我们有一个包含许多字段的表单，其中包括文本框、选择（下拉）菜单、复选框，当然还有标签。除了我们拥有的三个复选框选项之外，所有字段都正确保存到数据库中。在愚弄了几个星期之后，我才想出了解决办法。我希望这可以帮助某人：

以前的代码是这样的：

$(this).attr('data-val', 'true');

这就是解决问题的方法：

$(this).val(true);

这是包含修复的整个函数：

$('form').on('change', ':checkbox', function () {
    if (this.checked) {
        $(this).val(true);
    }
    else {
        $(this).val(false);
    }
});

【讨论】：

【解决方案4】：

尝试使用

 @Html.CheckBox("ColName", true)

【讨论】：