如何使UpdateTargetId工作Ajax.ActionLink?工作、UpdateTargetId、ActionLink、Ajax

2023-09-10 20:52:48 作者:小熊的少女梦

我有这个方法在控制器

[HttpDelete]
public void DeleteDocument(int id)
{
   //Here I do the deletion in the db
}

在认为我有这个,调用返回的局部视图的方法

In the view I have this, calling a method that returns a partial view

@{ Html.RenderAction("GetDocumentsByMember"); }

该GetDocumentsByMember方法

The GetDocumentsByMember method

    public ActionResult GetDocumentsByMember()
    {
        var companyGuid = HttpContextHelper.GetUserCompanyGuid();

        var documents = _service.GetUploadedDocumentsByMember(companyGuid);

        return PartialView(documents);
    }

和局部视图

@model IEnumerable<GradientCapital.DomainModel.Entity.Document.Document>
<div id="uploadeddocuments">
    @*Here there's a table and at one of the columns there's the next link*@

    <td id="delete">
        @Ajax.ActionLink("Delete", "DeleteDocument", new { id = document.Id },
        new AjaxOptions
            {
               Confirm = "Are you sure you want to delete?",
               HttpMethod = "DELETE",
               OnComplete = "deleteComplete"
            })
    </td>
</div>

和deleteComplete刚刚刷新的一切

And deleteComplete just refresh everything

<script type="text/javascript">
    function deleteComplete() {
        window.location.reload();
    }
</script>

相当长(格式正确?)$ C $下一个简单的问题,我无法做出,而不必调用这个deleteComplete功能ajaxoption UpdateTargetId在这里工作。你知道吗?

Quite long (is correctly formatted?) code for a simple question, I can't make the ajaxoption UpdateTargetId work here instead of having to call this deleteComplete function. Any idea?

感谢

推荐答案

而不是重新加载整个页面,你可以使用AJAX调用 GetDocumentsByMember 的行动和更新的那部分的这实际上已经改变了DOM:

Instead of reloading the entire page you could call the GetDocumentsByMember action using AJAX and update only the portion of the DOM that has actually changed:

<script type="text/javascript">
    function deleteComplete() {
        $.ajax({
            url: '@Url.Action("GetDocumentsByMember")',
            type: 'GET',
            cache: false,
            success: function(result) {
                $('#uploadeddocuments').html(result);
            }
        });
    }
</script>

另外,你最好使用的onSuccess =deleteSuccess而不是的onComplete =deleteComplete,因为您需要只有更新,如果删除通话居然成功了。不要忘记,的onComplete 回调总是被调用,无论AJAX调用成功与否。

Also you'd better use OnSuccess = "deleteSuccess" instead of OnComplete = "deleteComplete" because you should update only if the Delete call actually succeeded. Don't forget that the OnComplete callback is always invoked, no matter whether the AJAX call succeeded or not.