Ajax 更新仅在第一次工作答案

【问题标题】：Ajax Update works only first timeAjax 更新仅在第一次工作
【发布时间】：2016-10-20 17:21:35
【问题描述】：

我在使用 Ajax 更新 PartialView 中的记录时遇到问题。我有 View with call @Html.Action ("_PartialView", "Controller", new { id = OrderId }) 和 PartialView with Ajax Form。

@model IEnumerable<WebMartin.Models.OrderExecutionRemark>
@{
AjaxOptions ajaxOpts = new AjaxOptions
{
    UpdateTargetId = "orderdisplayremark",
    Url = Url.Action("OrderRemarkDelete", "OrderExecution"),
    HttpMethod = "POST"               
};    
}

@ViewBag.Po

@if (Model.Any())
{
<table id="orderdisplayremark">
    <thead>
        <tr>
            <th>Worker</th>
            <th>Date</th>
            <th>Remark</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var remark in Model)
        {
            <tr>
                <td>@remark.UserName</td>
                <td>@remark.OrderRemarkDate.ToString("yyyy-MM-dd")</td>
                <td>@remark.OrderRemarkText</td>
                <td>
                    @using (Ajax.BeginForm(ajaxOpts))
                    {
                        @Html.Hidden("remarkid", remark.OrderRemarkId)
                        <input type="submit" value="Delete" />
                    }
                </td>
            </tr>
        }
    </tbody>
</table>
}

和控制器

[HttpPost]
    public PartialViewResult OrderRemarkDelete(int remarkid)
    {
        OrderExecutionRemark oer = db.OrderExecutionRemarks.Find(remarkid);
      /*  db.OrderExecutionRemarks.Remove(oer);
        db.SaveChanges(); */
        ViewBag.Po = oer.OrderRemarkId;

        return PartialView("_OERemarkPartial", db.OrderExecutionRemarks.Where(p => p.OrderId == oer.OrderId).ToList());  
    }

    [HttpGet]
    [ChildActionOnly]
    public PartialViewResult _OERemarkPartial(int id = 0)
    {
        return PartialView(db.OrderExecutionRemarks.Where(p => p.OrderId == id).ToList());        
    }

问题

更新仅在第一次有效，之后 - 不是。在再次按下“删除”按钮之前，我必须刷新页面。怎么解决？我以为我会使用 RedirectToAction(View)，但我在三个不同的视图中使用这个 PartialView。

在 PartialView 中显示由工人下达的订单备注。如您所见，每一行包含工人姓名、日期、备注文本和传递 id 备注以删除操作的表单。如果我有很多评论（很多行）并且在第一次发布（删除）评论之后，应该用记录更新表，当我想删除下一条评论时，我不能这样做。如果我想删除下一条评论，我必须先按 F5（刷新页面）。哪里错了？

提前感谢您的所有回答。

【问题讨论】：

标签： html ajax asp.net-mvc

【解决方案1】：

只要您尝试删除表格中的另一个项目，您的代码就应该可以正常工作。理想情况下，在成功调用操作方法删除记录后，您只需从 UI 中删除该项目，这样用户就不会再次尝试删除它！

为此，您可以在 AjaxOptions 中指定 OnSuccess 属性。这将是一个 javascript 方法，一旦 ajax 调用从服务器获得 200 响应就会执行。

@{
    AjaxOptions ajaxOpts = new AjaxOptions
    {
        UpdateTargetId = "orderdisplayremark",
        Url = Url.Action("OrderRemarkDelete", "Home"),
        HttpMethod = "POST",
        OnSuccess = "DeletionCompleted"
    };
}

现在在这个方法中，你所要做的就是删除点击删除按钮的当前行

function DeletionCompleted()
{
    $(this).closest("tr").remove();
}

此代码不会使用新数据重新加载整个表格内容（即使您当前的方法返回带有该数据的部分视图）。它只是删除该行。所以在那种情况下，你真的不需要返回部分视图

[HttpPost]
public PartialViewResult OrderRemarkDelete(int remarkid)
{
    varoer = db.OrderExecutionRemarks.Find(remarkid);
    db.OrderExecutionRemarks.Remove(oer);
    db.SaveChanges();       
    return Json(new { message="successfully deleted"});
}

如果你真的想用部分视图结果替换现有的表格内容（更新的表格 - 你的旧代码），你也可以这样做。

function MyComplete(res) {          
        $("#orderdisplayremark").html(res);
}

【讨论】：