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

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 2

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

Answer 3

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)