MVC - PartialView не обновляется после Ajax POST

Question

В рамках этого приложения я был дан, чтобы работать с, частичным видом «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); 
} 

сообщение обновляется до «Goodbye» в модели правильно (я отлажена мнение), но это не отображается на выходе, вывод HTML все еще показывает «Привет», когда вид возвращается. Следующая строка в виде по-прежнему выводит это старое сообщение:

@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> 

Вам не нужен свой Javascript для отправки формы с помощью JQuery - ненавязчивая библиотека делает это для вас.

Наконец, вам нужно изменить вид ChangeMessage, поскольку LabelFor будет отображать только имя поля, а не содержимое модели.