表中的 MVC Razor 视图文本不会在复选框选择时更新答案

【问题标题】：MVC Razor View Text in table does not update on checkbox selection表中的 MVC Razor 视图文本不会在复选框选择时更新
【发布时间】：2013-09-01 12:07:01
【问题描述】：

选择/取消选择该行中的复选框时，我无法更新表格行中的文本。我希望它将 stye 从 text-decoration:none 更改为 text-decoration:line-through

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

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

这是我的javascript：

$("input[type=checkbox]").change(function () {
    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);
        }
    });
});

这是我的控制器操作：

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

感谢大家的宝贵时间！

【问题讨论】：

标签： c# javascript asp.net-mvc razor

【解决方案1】：

尝试将部分视图作为字符串发送，然后在 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();
        }
    }

【讨论】：

Jatin - 我尝试了你的建议并得到一个空引用异常，因为视图中的模型引用现在设置为空。你知道为什么会这样吗？
是因为你没有通过任何模型..我正在更新代码看看。
它应该可以工作并且对我来说很重要。我观察到的唯一变化是您的 ajax 调用参数。我在我的 ajax 调用中设置了 contentType: "application/json; charset=utf-8", 和 dataType: "json",。
如果我在 ajax 调用中添加 contentType: "application/json; charset=utf-8" 和 dataType: "json"，甚至不会调用控制器操作“Edit”？？？
我在 javascript #tastList 而不是 #taskList 中发现了一个错字。我现在的问题是文本更新仅适用于一次复选框单击。之后，不会调用 Edit 控制器操作，并且模型无法更新。我目前的猜测是我可能需要研究 .on()。快到了！

【解决方案2】：

为了让它工作，我将我的 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 的内容被替换时会重新附加事件处理程序，并且每次选中复选框时都会触发更改事件，模型会更新，标签文本也会更新为新的装饰。宾果游戏。

【讨论】：