MVC - PartialView nicht aktualisiert, nachdem Ajax POST

Question

Innerhalb dieser Anwendung, die ich gegeben habe mit, eine Teilansicht zu arbeiten 'MessageForm' hat eine einfache Form Ajax wie so:

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

Wenn die Form eingereicht wird die Change Funktion auf dem Controller genannt:

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

Diese Change() -Methode einfach die Message-Eigenschaft im Modell ändert, und gibt das gleiche wieder Teilansicht:

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

Die Botschaft richtig zu „Goodbye“ im Modell aktualisiert wird (ich die Ansicht gedebuggt habe), aber es ist nicht in der Ausgabe angezeigt, zeigt die Ausgabe von HTML noch „Hallo“, wenn die Ansicht ist zurück gekommen. Die folgende Zeile in der Form ausgibt noch diese alte Nachricht:

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

Es ist, als ob der Blick wieder gemacht wurde, aber ohne tatsächliche Leistung.

Sehr neu zu Ajax, also habe ich wahrscheinlich hier etwas falsch verstanden?

Answer 1

Der Ajax.BeginForm-Helper ist Teil der Microsoft Unobtrusive-Ajax-Bibliothek, aber Sie verwenden ihn nicht vollständig. Stellen Sie sicher, Sie haben die folgende getan:

1. Fügen Sie die Javascript-Bibliothek: Install-Package Microsoft.jQuery.Unobtrusive.Ajax
2. Sicherstellen, dass die jquery.unobtrusive-ajax.js Datei von Ihrem Layout

Mit dem @Ajax.BeginForm verwiesen wird, müssen Sie um eine AjaxOptions anzugeben, was mit der Antwort zu tun ist. In Ihrem Fall vermute ich Ihnen, den Inhalt des Formulars mit dem Ergebnis ersetzen möchten:

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

Sie brauchen nicht Ihre Javascript für Absenden des Formulars mit Jquery - die unauffällige Bibliothek erledigt das für Sie.

Schließlich müssen Sie Ihre ChangeMessage-Ansicht ändern, da LabelFor nur den Feldnamen und nicht den Inhalt des Modells anzeigt.