How to do checkbox control in ASP.net Core

Question

//Part of View
    <div class="checkbox">
        <label id="sendEmail" class="" >
            <input id="sendEmailInput" type="checkbox" asp-for="CompanySetting.SendEmail">Send mail for jobs.
        </label>
    </div>


//Model
    public partial class CompanySetting
    {
        public int CompanyId { get; set; }
        public bool SendEmail { get; set; }

        public virtual CompanyUsers Company { get; set; }
    }
//Controller
    public ActionResult AccountSettingSave(CompanyAccountViewModel model)
    {
        try
        {
            CompanySetting settingModel = _companySettingService.GetByCompanyId(GetId());
            settingModel.SendEmail = model.CompanySetting.SendEmail;
            _companySettingService.UpdateBill(settingModel);
            TempDataMessage("message", "Hesap ayarları başarıyla güncellendi.");
            return RedirectToAction("AccountSettings");
        }
        catch
        {
            TempDataMessage("message", "Hesap ayarları güncellenemedi.");
            return RedirectToAction("AccountSettings");
        }

    }

Checbox does not affect model, it is always default value. probably checkbox returns just on. but i tried with javascript + extra one input and works . i dont want use javascirpt control

Answer 1

This is because when checkbox is checked/unchecked then the property 'value' is not changing, it is changing 'data-val'. Which is why the changes are not binding to the model.

You could use your workaround. I used below much simpler solution, which transfers Property value of data-val to value via javascript.

<input asp-for="@Model.sendMail" type="checkbox" value="@Model.sendMail" />&nbsp;Approve?

<script>
$('#sendMail').on('change', function () {
   $('#sendMail').val($('#sendMail').attr('data-val'));
});
</script>

Answer 2

<div class="checkbox">
    <input id="sendMail" type="text" asp-for="CompanySetting.SendEmail" style="display: none" />
    <label id="sendMailLabel"><input  type="checkbox">Send Mail for Jobs</label>
</div>

if ($('#sendMail').val() == 'True') {
    $('#sendMailLabel').addClass('checked');
} else {
    $('#sendMailLabel').removeClass('checked');
}
$('#sendMailLabel').on('change', function () {
    if ($('#sendMailLabel').hasClass('checked')) {
        $('#sendMail').val('True');
    } else {
        $('#sendMail').val('False');
    }
});

this code works. do i should use it?