Can't get CheckBox to update model in MVC Razor Using Html.CheckBoxFor

Question

There seem to be a lot of questions covering similar ground but I haven't found one which clarifies the issues I'm having.

I am attempting to create a simple task list to look like this (sorry can't post the image):

| CheckBox | Title | DeleteLink |
| CheckBox | Title | DeleteLink |
| CheckBox | Title | DeleteLink |

I am unable to get the checkboxes updating the model (I want a checkbox click to call the relevant controller to set the updated state in the model)

I probably have the wrong controller signature / parameters or something!

Currently if I check a checkbox then delete another task the old checkbox state is rendered (the model has not been updated)

here is my model

namespace TaskList.Models
{
    public class TaskListModel
    {
        public List<TaskItem> Tasks { get; set; }
    }
    public class TaskItem
    {
        [Key]
        public int Id { get; set; }
        public string Title { get; set; }
        public DateTime EntryDateTime { get; set; }
        public bool IsDone { get; set; }
    }
}

here is my view

@using (@Html.BeginForm("Edit", "Home"))
{
    <table>

            @for (int i = 0; i < Model.Tasks.Count; i++)
            {
                <tr>
                    <td>
                        @Html.CheckBoxFor(m => m.Tasks[i].IsDone)
                    </td>
                    <td>
                        @Html.EditorFor(m => m.Tasks[i].Title)
                    </td>
                    <td>
                        @Html.ActionLink("Delete", "Delete", new { id = Model.Tasks[i].Id })
                    </td>
                </tr>
            }

    </table>
}

and my attempt at a controller action (which is not called)

// Mark a task as complete
[HttpPost]
public ActionResult Edit(int id = 0, bool isChecked = false)
{
    // database logic
    TaskItem taskItem = _db.Tasks.Find(id);
    taskItem.IsDone = isChecked;

    _db.SaveChanges();

    return RedirectToAction("Index");
}

as requested the Delete method

// Delete a task
public ActionResult Delete(int id = 0)
{
    if (id > 0)
    {
        // database logic
        TaskItem taskItem = _db.Tasks.Find(id);
        _db.Tasks.Remove(taskItem);

        _db.SaveChanges();
    }

    return RedirectToAction("Index");
}

I've tried adding this javascript to the View

$(function () {
    $(':checkbox').change(function () {
        $.ajax({
            url: '@Url.Action("Edit", "Home")',
            type: 'POST',
            data: { id: $(this).id, isChecked: $(this).is(':checked') },
            success: function (result) {

            }
        });
    });
});

not sure if it is being called

Still no JOY

Answer 1

You only need to submit the form when the checkbox is checked.

Answer 2

Thanks to Joan for pointing me in a constructive direction. I realized I needed some jQuery/Ajax to solve this and doing some more searching managed to get to a solution.

Used the following script in a js file

$(function () {
    $("input[type=checkbox]").click(function () {
        var data_id = $(this).data("id");
        $.ajax({
            url: 'Home/Edit',
            type: 'POST',
            data: { id: data_id, isChecked: $(this).is(':checked') },
            success: function (result) {

            }
        });
    });
});

changing the code in the view to:

@using (@Html.BeginForm())
{
    <table>
        @for (int i = 0; i < Model.Tasks.Count; i++)
        {
            <tr>
                <td>
                    @Html.CheckBoxFor(m => m.Tasks[i].IsDone, new { data_id=Model.Tasks[i].Id })
                </td>
                <td>
                    @Html.EditorFor(m => m.Tasks[i].Title)
                </td>
                <td>
                    @Html.ActionLink("Delete", "Delete", new { id = Model.Tasks[i].Id })
                </td>
            </tr>
        }
    </table>
}