1

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

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

|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. 模型正在更新。我正在从控制器返回部分视图并尝试用 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");
    }

谢谢大家的时间！

4

2 回答 2

0

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

于 2013-09-02T20:38:59.217 回答
0

尝试将部分视图作为字符串发送，然后在 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();
        }
    }
于 2013-09-01T14:57:46.010 回答