無法使用 Html.CheckBoxFor 讓 CheckBox 更新 MVC Razor 中的模型

Question

似乎有很多問題涵蓋了類似的基礎，但我還沒有找到一個可以澄清我遇到的問題的問題。

我正在嘗試創建一個簡單的任務列表，看起來像這樣（抱歉無法發布圖片）：

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

我無法獲取更新模型的復選框（我想要一個復選框單擊以調用相關控制器來設置模型中的更新狀態）

我可能有錯誤的控制器簽名/參數之類的！

目前，如果我選中一個復選框，然后刪除另一個任務，則會呈現舊的復選框狀態（模型尚未更新）

這是我的模型

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

這是我的看法

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

以及我對控制器操作的嘗試（未調用）

// 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");
}

根據要求刪除方法

// 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");
}

我試過將此javascript添加到視圖

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

            }
        });
    });
});

不確定它是否被調用

還是沒有JOY

Answer 1

您只需在選中復選框時提交表單。

Answer 2

感謝 Joan 為我指明了建設性的方向。 我意識到我需要一些 jQuery/Ajax 來解決這個問題，並進行更多搜索以找到解決方案。

在 js 文件中使用以下腳本

$(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) {

            }
        });
    });
});

將視圖中的代碼更改為：

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