表格中的 MVC Razor 视图文本不会在选择复选框时更新 [英] MVC Razor View Text in table does not update on checkbox selection

问题描述

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

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

|复选框|标签文本|删除链接||复选框|标签文本|删除链接||复选框|标签文本|删除链接|

I have implemented some JQuery code to update a Bool in the model when the Checkbox is selected/deselected and this appears to work.模型正在更新中.我正在从控制器返回部分视图并尝试用 Ajax 结果替换表

这是我的部分观点:

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

这是我的 javascript:

$("input[type=checkbox]").change(function () {var data_id = $(this).data("id");var taskListId = '#taskList';var tableRowId = '#tableRowTask' + data_id;$.ajax({url: '主页/编辑',类型:'POST'，数据: { id: data_id, isChecked: $(this).is(':checked') },成功:功能(结果){$(taskListId).replaceWith(result);}});});

这是我的控制器操作:

[HttpGet]公共 ActionResult 索引(){TaskListModel 模型 = new TaskListModel() { Tasks = _db.Tasks.OrderBy(i => i.EntryDateTime).ToList() };如果 (Request.IsAjaxRequest()){return PartialView("_TaskList", 模型);}返回视图(模型)；}//将任务标记为完成[HttpPost]public ActionResult Edit(int id = 0, bool isChecked = false){//数据库逻辑TaskItem taskItem = _db.Tasks.Find(id);如果 (TryUpdateModel(taskItem)){taskItem.IsDone = isChecked;_db.SaveChanges();}return RedirectToAction("索引");}

谢谢大家的时间！

解决方案

为了让它起作用，我将我的 javascript 更改为:

function onCheckBoxChange() {var data_id = $(this).data("id");var taskListId = '#taskList';var tableRowId = '#tableRowTask' + data_id;$.ajax({url: '主页/编辑',类型:'POST'，数据: { id: data_id, isChecked: $(this).is(':checked') },成功:功能(结果){$(taskListId).replaceWith(result);$("input[type=checkbox]").on("change", onCheckBoxChange);//重新附加事件处理程序}});}$("input[type=checkbox]").on("change", onCheckBoxChange);

现在，当 div 的内容被替换时，事件处理程序会重新附加，并且每次选择时都会触发复选框更改事件，更新模型并且标签文本更新为新的装饰.宾果游戏.

I am not able to update text in a table row when selecting/deselecting a Checkbox in that row. I want it to change stye from text-decoration:none to text-decoration:line-through

I have a partial view which renders a table like:

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

I have implemented some JQuery code to update a Bool in the model when the Checkbox is selected/deselected and this appears to work. The model is being updated. I am returning a partial view from the controller and trying to replace the table with the Ajax result

here is my partial view:

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

here is my 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);
        }
    });
});

here is are my controller actions:

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

Thankyou all for your time!

解决方案

To get this to work I changed my javascript to:

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

now the event handlers are reattached when the contents of the div are replaced and the checkbox change event fires every time it is selected, the model is updated and the label text updates to with its new decoration. BINGO.

这篇关于表格中的 MVC Razor 视图文本不会在选择复选框时更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！