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

MVC Razor View Text in table does not update on checkbox selection

本文关键字：文本 视图 更新 Razor 复选框 MVC      更新时间：2023-09-26

当选择/取消选择表行中的复选框时，我无法更新该行中的文本。我想把stye从文本装饰：无改为文本装饰：通过的行

我有一个部分视图，它呈现了一个类似于的表格

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

谢谢大家抽出时间！

尝试将部分视图作为字符串发送，然后在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的内容被替换时，事件处理程序会被重新附加，每次选中checkbox更改事件时都会触发，模型会被更新，标签文本会更新为新的装饰。宾果游戏。

相关文章：