AjaxOptions OnComplete答案

【问题标题】：AjaxOptions OnCompleteAjaxOptions OnComplete
【发布时间】：2014-05-12 02:29:17
【问题描述】：

我想使用OnComplete，因为我需要先修改视图，然后才能使用来自 Ajax 调用的数据对其进行更新。正如这里所说：MSDN，它应该非常简单。但是，它没有用，经过一番调查，似乎OnComplete 触发了之前 OnSucess 但之后视图已更新。

用于测试的代码：

@{
    AjaxOptions options = new AjaxOptions {OnSuccess = "onSuccess",
    OnComplete = "onComplete", UpdateTargetId = "Update"};
}

@Ajax.ActionLink("Hit it", "Action", options)
<div id="Update"></div>

<script type="text/javascript">
    function onSuccess() {
        alert('onSuccess: ' + $('#Update').html());
    }
    function onComplete() {
        alert('onComplete ' + $('#Update').html());
    }
</script>

public ContentResult Action()
{
    return Content("Content");
}

我在这里遗漏了什么还是怎么了？

【问题讨论】：

如果你在控制器的动作中设置了一个断点，它会命中它吗？

标签： ajax asp.net-mvc asp.net-mvc-5

【解决方案1】：

在你的视图中试试这个：

@Ajax.ActionLink("Hit it", "Action", new AjaxOptions() { OnSuccess="done"} )
<div id="Update"></div>

控制器动作：

public ContentResult Action()
{
    return Json(new { content="content" }, JsonRequestBehavior.AllowGet);
}

JavaScript：

function done(data) {
    var message = data;
    if (typeof message["content"] !== "undefined") {
        $('#Update').html(message["content"]);
    } else {
        alert("error");
    }
}

您可以从控制器传递一个 Json 结果，并通过 JavaScript 在您的视图中获取该消息并更新您的 div。

【讨论】：

我可以，但这是一种混乱的解决方法。我真的很想知道为什么这种行为没有记录在案。
这很乱，因为我需要全部使用它。毕竟，我使用了更高级别的 AjaxOptions 构造，所以我不需要。否则我本可以直接使用 $.ajax()。

【解决方案2】：

问题在于 UpdateTargetId 在触发 OnSuccess 处理程序之前执行。

如果您想在内容更新之前更新视图或执行额外步骤，则从 AjaxOptions 中删除 updatetargetid 并在 OnSuccess 处理程序中自行处理更新。您将完全控制视图何时更新。

function onSuccess(result, status, xhr)
{
     // put in your view update code here.


     // and then
     $("#Update").html(result);

}

【讨论】：

【解决方案3】：

OnComplete 在 ajax 调用完成且响应数据已实例化但页面尚未更新时触发

【讨论】：

是的，MSDN 文档是这么说的，但是上面的示例代码显示了另一种行为。