MVC-Ajax POST后未更新PartialView

Question

在這個應用程序中，我得到了使用，局部視圖' MessageForm '具有一個簡單的Ajax形式，如下所示：

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

提交表單后，將在控制器上調用ChangeMes​​sage函數：

$('#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;
});

此ChangeMes​​sage（）方法僅修改模型中的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來說還很陌生，所以很可能是我在這里誤解了一些東西？

Answer 1

Ajax.BeginForm幫助程序是Microsoft Unobtrusive Ajax庫的一部分，但是您並未完全使用它。 確保您已完成以下操作：

1. 添加Javascript庫： Install-Package Microsoft.jQuery.Unobtrusive.Ajax
2. 確保布局引用了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>

您不需要Java腳本即可使用jquery提交表單-不引人注目的庫為您完成了此操作。

最后，您需要修改ChangeMes​​sage視圖，因為LabelFor將僅顯示字段名稱，而不顯示模型的內容。