MVC - Ajax POST 后未更新 PartialView答案

【问题标题】：MVC - PartialView not updated after Ajax POSTMVC - Ajax POST 后未更新 PartialView
【发布时间】：2016-05-24 14:04:59
【问题描述】：

在这个应用程序中，我被指定使用，部分视图“MessageForm”有一个简单的 Ajax 表单，如下所示：

@using (Ajax.BeginForm("", "", new AjaxOptions { HttpMethod = "POST" }, new { id = "addForm", enctype = "multipart/form-data" }))
{
    @Html.LabelFor(model => model.Message) //displays "Hello"
}

表单提交时，调用控制器上的ChangeMessage函数：

$('#addForm').submit(function () {
    var formdata = new FormData(document.forms.namedItem("addForm")); 
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '@Url.Action("ChangeMessage")');
    xhr.send(formdata);
    return false;
});

这个 ChangeMessage() 方法只是简单地修改了模型中的 Message 属性，并再次返回相同的局部视图：

[HttpPost]
[ValidateAntiForgeryToken]
public PartialViewResult ChangeMessage(MessageModel model)
{
    model.Message = "Goodbye";
    return PartialView("MessageForm", model);
}

消息在模型中正确更新为“再见”（我已经调试过视图），但它没有显示在输出中，输出 HTML 仍然显示“Hello”视图被返回。表单中的以下行仍在输出这条旧消息：

@Html.LabelFor(model => model.Message) //correct when debugged as "Goodbye", but still displaying "Hello" in the browser

就好像视图再次被渲染，但没有实际输出。

对 Ajax 非常陌生，所以我很可能在这里误解了什么？

【问题讨论】：

您需要将页面上的 HTML 内容替换为服务器返回的内容。这不会神奇地发生。
@Html.LabelFor(model => model.Message) 行以更新后的值再次执行。显然我的理解是不正确的，但这会迎合魔术。
你必须告诉 ajax 调用成功后要做什么。查看此问题以获取更多详细信息。 stackoverflow.com/questions/8034530/…

标签： c# asp.net-mvc

【解决方案1】：

Ajax.BeginForm 帮助器是 Microsoft Unobtrusive Ajax 库的一部分，但您并没有完全使用它。确保您已完成以下操作：

添加Javascript库：Install-Package Microsoft.jQuery.Unobtrusive.Ajax
确保您的布局引用了 jquery.unobtrusive-ajax.js 文件

使用@Ajax.BeginForm，您需要指定AjaxOptions，告诉它如何处理响应。在您的情况下，我怀疑您想用结果替换表单的内容：

<div id="myform">
    @using (Ajax.BeginForm("ChangeMessage", new AjaxOptions { UpdateTargetId = "myform" }))
    {
        @Html.EditorFor(m => m.Message)
        <input type="submit" />
    }
</div>

您不需要 Javascript 来使用 jquery 提交表单 - 不显眼的库会为您做到这一点。

最后，你需要修改你的 ChangeMessage 视图，因为 LabelFor 只会显示字段名称，而不是模型的内容。

【讨论】：

它终于奏效了，这更有意义 - 谢谢。