Why does the value of my checkbox not post to my controller when it's set by jQuery in my ASP.NET Core Web Application?

Question

I am using the KendoUI for ASP.NET Core in my web application. I have a custom editor for a particular column that is used when someone edits data in the grid. The grid is set to auto-sync="true" so that the user can edit data in the cells and the changes are committed automatically.

Within the custom editor is a checkbox that I set with jQuery based on certain conditions. Even though this function works and the checkbox becomes "checked" the value the controller receives is always false.

Here is my grid.

/Views/Home/Index

<kendo-grid name="HomePositionGrid" deferred="false">
    <datasource type="DataSourceTagHelperType.Ajax" auto-sync="true">
        <transport>
            <read url="/Position/ReadPositions" />
            <update url="/Position/UpdatePosition" />
        </transport>
        <schema>
            <model id="Id">
                <fields>
                    <field name="Id" editable="false" />
                    </fields>
                </model>
            </schema>
        </datasource>
        <editable mode="incell" />           
        <columns>
            <column field="Name" title="Name" />
            <column field="ExpectedOffhire" editor="expectedOffhireEditor" title="ExpectedOffhire" />               
        </columns>
    </kendo-grid>

As you can see it's a tag helper grid with auto-sync set to true and a custom editor of expectedOffhireEditor defined.

Here is that editor

wwwroot/js/expectedOffhireEditor

function expectedOffhireEditor(container, options) {
    $('<input name="' + options.field + '" id="' + options.field + '" />')
        .appendTo(container)
        .kendoDateTimePicker({
            valuePrimitive: true
        });

    $('<input name="PPT" id="PPT" />')
        .appendTo(container)
        .kendoDropDownList({
            dataTextField: "text",
            dataValueField: "value",
            optionLabel: "-- Select --",
            change: setPromptDate,
            dataSource: [
                {
                    value: 1,
                    text: "Prompt"
                },
                {
                    value: 2,
                    text: "Prompt AM"
                },
                {
                    value: 3,
                    text: "Prompt PM"
                }
            ]            
        });  
    $('<input type="checkbox" id="Prompt" name="Prompt" for="Prompt" />').appendTo(container)
}

There are three inputs created here, the first is a DateTime picker, the second is a dropdown list and the third is a basic checkbox. When the user selects an option from the dropdown list, it must set the checkbox to checked which is handled by the change event called setPromptDate.

setPromptDate

function setPromptDate(e) {           
    $('#Prompt').prop("checked", true);            

    //shortened for brevity ...
}

When the data is posted from the grid and reaches the controller, the value of the checkbox is always false I've tried various ways of doing it but prompt checkbox is just not posting. If I check the box myself using the mouse, the value will post as"true", it's something to do with setting the checked status with jquery that isn't playing well.

Has anyone encountered this before who can shed some light on what is wrong?

You have given same `id` for all your checkboxes ? – Swati Nov 24 '20 at 05:10 — Swati, Nov 24 '20 at 05:10

score 2 · Answer 1 · answered Nov 25 '20 at 16:39

As you have stated "If I check the box myself using the mouse, the value will post as true". I'm guessing setPromptDate isn't working as intended. More specifically, $('#Prompt').prop("checked", true) isn't changing the input type='checkbox' HTML markup properly. I would try the following:

$('#Prompt').checked
$('#Prompt').prop('checked')
$('#Prompt').attr('checked')
$('#Prompt').attr('checked', 'true')

Or some other ways just to get to <input type="checkbox" checked>.

score 0 · Answer 2 · answered Nov 30 '20 at 13:42

In your case, try this:

change: function(options){ return setPromptDate(options); },

The function:

function setPromptDate(options) {           
    $('#Prompt').attr('checked', 'true');
    // The rest of process...
}

You can ignore the parameter "options" if you don't need it

Sean Kendle · Answer 3 · 2020-11-30T22:56:43.033

The value of a checkbox after posting is not true or false, it's whatever you set the value="" attribute to if it's checked; or it's unset if it's not checked.

I see you didn't set the value of the checkbox, and I'm guessing it's being set to "", which is falsey, or just false by default? It's worth a test.

Try the above first, but, if that doesn't work for you, try this answer: https://stackoverflow.com/a/63418577/1410567

Copied here:

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

Why does the value of my checkbox not post to my controller when it's set by jQuery in my ASP.NET Core Web Application?

3 Answers3