复选框值始终为 false ASP MVC 5

Question

我有问题。

无论我做什么，我的复选框值总是错误的。

我用这个模型

public class ActEntry : BaseEntity
{
    [Required]
    public int DepartmentId { get; set; }

    [Required]
    [Display(Name = "Тип")]
    public EnergyType EnergyType { get; set; }

    [Required]
    [Display(Name = "Имя объекта установки")]
    public string Name { get; set; }

    [Required]
    [Display(Name = "Позиция")]
    public string Postition { get; set; }

    [Required]
    [Display(Name = "Проектная")]
    public bool HasDoc1 { get; set; }

    [Required]
    [Display(Name = "Исполнительная")]
    public bool HasDoc2 { get; set; }

    [Required]
    [Display(Name = "Статус")]
    public State State { get; set; }

    [Display(Name = "Дата сдачи")]
    public DateTime? DateOfCommit { get; set; }

    [Required]
    [Display(Name = "Акт допуска")]
    public string Act { get; set; }

    [Required]
    [Display(Name = "Год акта")]
    public int Year { get; set; }
}

我的表格：

<div class="modal fade" id="editRow">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h2 class="modal-title" id="modalTitle"></h2>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" method="post" id="detailsForm">
          <input type="hidden" id="Id" name="Id">
          <input type="hidden" id="DepartmentId" name="DepartmentId" value="@Model.DepartmentId">
          <input type="hidden" id="EnergyType" name="EnergyType" value="@Model.EnergyType">
          <div class="form-group">
            <label for="Name" class="control-label col-xs-3">Имя объекта установки</label>
            <div class="col-xs-9">
              <input class="form-control" id="Name" name="Name">
            </div>
          </div>
          <div class="form-group">
            <label for="Postition" class="control-label col-xs-3">Позиция</label>
            <div class="col-xs-9">
              <input type="text" class="form-control" id="Postition" name="Postition">
            </div>
          </div>
          <div class="form-group">
            <label for="Postition" class="control-label col-xs-3">Наличие документации</label>
            <div class="col-xs-9">
              <label class="checkbox-inline">
                <input type="checkbox" name="HasDoc1" value="true">Проектная</label>
              <label class="checkbox-inline">
                <input type="checkbox" name="HasDoc2" value="true">Исполнительная</label>
            </div>
          </div>

          <div class="form-group">
            <label for="Act" class="control-label col-xs-3">Акт допуска</label>
            <div class="col-xs-9">
              <input type="text" class="form-control" id="Act" name="Act">
            </div>
          </div>
          <div class="form-group">
            <label for="Year" class="control-label col-xs-3">Год акта</label>
            <div class="col-xs-9">
              <input type="text" class="form-control" id="Year" name="Year">
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-xs-3"></label>
            <div class="col-xs-9">
              <button class="btn btn-primary" type="button" onclick="save()">Сохранить</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

这里是这些复选框：

<label class="checkbox-inline">
  <input type="checkbox" name="HasDoc1" value="true">
  <input type="hidden" name="HasDoc1" value="false">Проектная</label>
<label class="checkbox-inline">
  <input type="checkbox" name="HasDoc2" value="true">
  <input type="hidden" name="HasDoc2" value="false">Исполнительная</label>

我的 ajax 脚本：

function save() {
  if (!$('#detailsForm').valid()) return false;

  $.ajax({
    type: "POST",
    url: "/Ajax/CreateOrUpdate/",
    data: $('#detailsForm').serialize(),
    success: function() {
      $('#editRow').modal('hide');
      updateTable();
      successNoty('Успешно сохранено')
    }
  });
};

当我看到序列化的值时，我注意到HasDoc2 和HasDoc1 是假的。如果我在 Chrome 中检查它们并使用 $('#HasDoc1').val() 和 $('#HasDoc2').val() 测试它们，我总是会出错。

当我将它们的名称更改为 hasDoc1 和 hasDoc2 时，当我检查它们时，我突然变得想要。我做错了什么？

在 ASP MVC 中复选框属性命名是否有特殊规则？ 我试过用 Helpers，结果是一样的。

Answer 1

使用这个：

<input type="checkbox" id="HasDoc1" name="HasDoc1"
       value="@(Model.HasDoc1 ? "true" : "false")"
       onchange="$(this).val(this.checked)"
       @(Model.HasDoc1 ? "checked=checked" : "") />

或者以更好的方式为布尔值编写一个 EditorTemplate：

@model bool

<input type="checkbox" id="@Html.IdForModel()" name="@Html.NameForModel()"
       value="@(Model ? "true" : "false")"
       onchange="$('#@(Html.IdForModel())').val(this.checked)"
       @(Model ? "checked=checked" : "") />

并使用它：

@Html.EditorFor(p => p.HasDoc1)

Answer 2

您对两个输入（复选框和隐藏）使用相同的名称，并且使用 JQuery，您可以使用 prop("checked") 获取复选框值。

val()方法返回value属性的值，见下例：

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  </head>
  <body>
    Click to test differents ways to get "value" of checkboxes:<br/>
    <input type="checkbox" id="test1" onchange="javascript:console.log(this.checked)"/>this.checked<br/>
    <input type="checkbox" id="test2" onchange="javascript:console.log($('#test2').prop('checked'))"/>$('#test2').prop('checked')<br/>

    <input type="checkbox" id="HasDoc1" onchange="javascript:console.log(this.checked)"/>this.checked<br/>
    <input type="checkbox" id="HasDoc2" onchange="javascript:console.log($('#HasDoc2').prop('checked'))"/>$('#HasDoc2').prop('checked')<br/>

  </body>
</html>

希望对你有帮助，再见。

Answer 3

Do not use same ID in same document, because it is against the specification.IDs should be unique.Here's a basic example:https://jsfiddle.net/dhirenpateldev/dke0s8nL/6/