ASP.NET MVC 在复选框上更新实体数据库，传入复选框名称

Question

我有一个“待办事项列表”，其中任务（分配）作为记录存储在数据库中。 Assignment 模型中的元素之一是Complete。该页面使用 for 循环输出 Assignments (List<Assignment>) 表中的所有值，最后带有一个复选框。

@using (var ctx = new AssignmentContext())
        {
            var assignmentList = ctx.Assignments.ToList();
            foreach (Assignment assignment in assignmentList)
                <tr name ="@assignment.AssignmentId">
                    <td>@assignment.CourseName</td>
                    <td>@assignment.AssignmentName</td>
                    <td>@assignment.DueDate</td>
                    <td>@assignment.Value</td>
                    <td>@Html.CheckBox()</td>
                </tr>
        }

我想通过单击复选框来更改数据库中bool Assignment.Complete 的状态。我对 Web 开发很陌生，HTML 和 C# 的混合让我感到困惑。我如何让onClick 调用控制器函数，当我这样做时，如何在 for 循环已经运行后将其传递给特定的行。我在这里需要 JS 吗？

Answer 1

试试看： CsHtml:

  @using (var ctx = new AssignmentContext())
            {
                var assignmentList = ctx.Assignments.ToList();
                foreach (Assignment assignment in assignmentList)
                    <tr name ="@assignment.AssignmentId">
                        <td>@assignment.CourseName</td>
                        <td>@assignment.AssignmentName</td>
                        <td>@assignment.DueDate</td>
                        <td>@assignment.Value</td>
                        <td>@Html.CheckBox(assignment.AssignmentId, assignment.Complete, new {@id= assignment.AssignmentId,onclick= "complete($(this))" })</td>
                    </tr>
            }

Java 脚本：

<script>
    function complete(selector) {
        var assignmentId = selector.attr('id');

        $.get('/Assignment/Complete', { id: assignmentId, checked: selector.checked}, function() {
          alert('successfull')  
        })

    }

</script>

控制器：

public async Task<JsonResult> Complete(int id,bool checked)
        {

            @using(var ctx = new AssignmentContext())
            {
            var assignment =   ctx.Assignments.Find(id);
                assignment.Complete = checked;
                ctx.SaveChanges();


            }
            return Json(new { isSuccess =true }, JsonRequestBehavior.AllowGet);
        }