C# 选中复选框时，表中的MVC Razor视图文本不会更新

在选中/取消选中表格行中的复选框时，我无法更新该行中的文本。我希望它将样式从文本装饰：无更改为文本装饰：线条通过

我有一个局部视图，该视图呈现如下表：

|Checkbox|label text|delete link|
|Checkbox|label text|delete link|
|Checkbox|label text|delete link|

我已经实现了一些JQuery代码，以便在选中/取消选中复选框时更新模型中的Bool，这似乎是可行的。模型正在更新中。我从控制器返回一个局部视图，并尝试用Ajax结果替换该表

以下是我的部分观点：

<div id="taskList">
    <table>
        @for (int i = 0; i < Model.Tasks.Count; i++)
        {
            <tr id="tableRowTask@(Model.Tasks[i].Id)">
                <td>
                    @Html.CheckBoxFor(m => m.Tasks[i].IsDone, new { data_id=Model.Tasks[i].Id })
                </td>
                <td>
                    @Html.Label(Model.Tasks[i].Title, new { disabled=true, style=Model.Tasks[i].IsDone? "text-decoration:line-through" : "text-decoration:none" })
                </td>
                <td>
                    @Html.ActionLink("Delete", "Delete", new { id = Model.Tasks[i].Id })
                </td>
            </tr>            
        }
    </table>
</div>

以下是我的控制器操作：

[HttpGet]
    public ActionResult Index()
    {
        TaskListModel model = new TaskListModel() { Tasks = _db.Tasks.OrderBy(i => i.EntryDateTime).ToList() };
        if (Request.IsAjaxRequest())
        {
            return PartialView("_TaskList", model);
        }
        return View(model);
    }

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

        return RedirectToAction("Index");
    }

---

谢谢大家抽出时间

尝试将部分视图作为字符串发送，然后在jquery中替换html结果：

下面是以字符串形式发送部分视图的控制器逻辑

控制器：

[HttpPost]
public JsonResult Edit(int id = 0, bool isChecked = false)
{
    // Your Controller Logic

    return Json((RenderRazorViewToString("PartilaViewName",model), JsonRequestBehavior.AllowGet);
}

    [NonAction]
    public string RenderRazorViewToString(string viewName, object model)
    {
        ViewData.Model = model;
        using (var sw = new StringWriter())
        {
            var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
            var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
            viewResult.View.Render(viewContext, sw);
            viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
            return sw.GetStringBuilder().ToString();
        }
    }

---

为了实现这一点，我将javascript更改为：

function onCheckBoxChange() {
    var data_id = $(this).data("id");
    var taskListId = '#taskList';
    var tableRowId = '#tableRowTask' + data_id;
    $.ajax({
        url: 'Home/Edit',
        type: 'POST',
        data: { id: data_id, isChecked: $(this).is(':checked') },
        success: function (result) {
            $(taskListId).replaceWith(result);
            $("input[type=checkbox]").on("change", onCheckBoxChange); // re-attach event handlers
        }
    });
}
$("input[type=checkbox]").on("change", onCheckBoxChange);

---

现在，当替换div的内容时，事件处理程序将重新连接，并且每次选中复选框change event时都会激发该复选框，模型将更新，标签文本将更新为新的装饰。答对了。

Jatin-我尝试了你的建议，得到了一个空引用异常，因为视图中的模型引用现在被设置为空。你知道为什么会这样吗？是的，因为你没有通过任何型号的考试。。我正在更新代码，看一看。它应该可以工作，对我来说也很好。我观察到的唯一变化是ajax调用参数。我在ajax调用中设置了

contentType:“application/json；charset=utf-8”、

和

dataType:“json”、

集。如果我在ajax调用中添加contentType:“application/json；charset=utf-8”和dataType:“json”，控制器操作“Edit”甚至不会被调用？？？我在javascript的任务列表中发现了一个拼写错误。我现在的问题是，文本更新只适用于一次复选框单击。之后，不会调用编辑控制器操作，并且模型无法更新。我目前的猜测是，我可能需要研究.on（）。快到了！

function onCheckBoxChange() {
    var data_id = $(this).data("id");
    var taskListId = '#taskList';
    var tableRowId = '#tableRowTask' + data_id;
    $.ajax({
        url: 'Home/Edit',
        type: 'POST',
        data: { id: data_id, isChecked: $(this).is(':checked') },
        success: function (result) {
            $(taskListId).replaceWith(result);
            $("input[type=checkbox]").on("change", onCheckBoxChange); // re-attach event handlers
        }
    });
}
$("input[type=checkbox]").on("change", onCheckBoxChange);