Checkbox value is always false ASP MVC 5

Question

I have a problem.

Whatever i do, my checkbox value is always false.

i use this model

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; }
}

My form:

<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>

Here are these checkboxes:

<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>

My ajax script:

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

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

When I saw serialized values, I noticed that HasDoc2 & HasDoc1 are false. If I check them in Chrome and test them using $('#HasDoc1').val() & $('#HasDoc2').val() I get always false.

When I change their names to hasDoc1 & hasDoc2, suddenly I get desired when I check them. What am I doing wrong?

Are there special rules for check box attribute naming in ASP MVC? I'v tried to use Helpers, the result is the same.

Answer 1

use this:

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

or in better way write an EditorTemplate for Boolean:

@model bool

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

and use this:

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

Answer 2

You're using the same name for both input (checkbox and hidden), and also with JQuery you can get checkboxes values using prop("checked").

val() method returns the value of value attribute, see following example:

<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>

I hope it helps you, bye.

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/