Übergeben Sie komplexe Objekte mit Ajax MVC

Question

Ich habe eine Ansicht mit mehreren Abschnitten. Ich möchte Abschnitte einzeln mit Teilansichten und Ajax aktualisieren.

Ich habe dies so weit:

Controller:

[HttpPost] 
public PartialViewResult userdetailssettings(UserDetails model) 
{ .... } 

anzeigen Html:

<div id="userDetailsPartial"> 
    @Html.Partial("_user_details", Model.userdetails)   
</div> 

Teil Html:

<div class="form-group"> 
    <div class="col-md-12"> 
     @Html.TextBoxFor(x => x.Forename, new { @class = "form-control", placeholder = "Enter your forename" }) 
     @Html.ValidationMessageFor(x => x.Forename) 
    </div> 
</div> 
<div class="form-group"> 
    <div class="col-md-12"> 
     @Html.TextBoxFor(x => x.Surname, new { @class = "form-control", placeholder = "Enter your surname" }) 
     @Html.ValidationMessageFor(x => x.Surname) 
    </div> 
</div> 

Javascript in Ihrem Ausblick:

var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")"; 
var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails))); 

$(document).on('click touchstart', '#saveDetails', function() {  
     $.ajax({ 
      type: "POST", 
      dataType: 'json', 
      data: detailsmodel, 
      url: detailsUrl, 
      contentType: "application/json" 
     }).done(function (res) { 
      $("#userDetailsPartial").html(res); 
      addresssearch(); 
     }); 
    }); 

Das Modell wird vom Ajax an den Controller übergeben, die Werte entsprechen jedoch nicht denen der Eingänge. Sie sind die ursprünglichen Werte, die vom Controller übergeben wurden, um die Ansicht zu öffnen.

Ich habe versucht, die partielle in Tags zu wickeln und auch versucht, Formular-Tags innerhalb der partiellen hinzuzufügen.

ich auch diesen Code setzen versucht haben:

var detailsUrl = "@Url.Action("userdetailssettings", "UserLogin")"; 
var detailsmodel = JSON.stringify(@Html.Raw(Json.Encode(@Model.userdetails))); 

Innerhalb der Klick-Funktion.

Nichts, was ich tue, übergibt die aktualisierten Werte von den Eingängen.

Ich habe gedacht, eine neue Instanz des Modells aus den Eingaben in dem Javascript heißt

var detailsmodel = [ { Forename: $('#Forename').val(), Surname: $('#Surname').val() } ]; 

Schaffung Aber wenn ich nur json zu schaffen bin, warum kann ich nicht nur das gebundene Modell zu json konvertieren.

Answer 1

warum kann ich nicht nur das gebundene Modell

Dies ist zu JSON konvertieren, weil Sie MVC verwenden, nicht MVVM.

Das "gebundene Modell" ist ein Weg vom Controller zur Ansicht über das Modell; Es ist möglich, dass Sie den Begriff "gebundenes Modell" mit "Modell" und "Bindung" mischen.

Wenn Sie das Formular POST, erhalten Sie das Modell in der Aktion (auf der Grundlage von Parametern natürlich), aber wenn Sie über Ajax übergeben, müssen Sie die aktuellen Werte aus dem Formular (wie in Ihrem Kommentar 'Erstellen einer neuen Instanz des Modells aus den Eingaben').

Sie können Daten erzeugen über AJAX auf verschiedene Weise passieren, wie zum Beispiel:

var data = $("form").serialize(); 

anstatt manuell jede Eingabe hinzufügen.

var detailsmodel = JSON.stringify... wird festgelegt, wenn die Ansicht generiert wird und sich nicht automatisch mit MVC ändert.

Answer 2

Das liegt daran, dass die Daten, die Sie übergeben, beim Laden der Seite statisch festgelegt werden, basierend auf @Html.Raw(Json.Encode(@Model.userdetails)).

Sie müssten etwas wie $form.serialize() verwenden oder den Post-Body anderweitig aus den tatsächlichen Feldern auf der Seite erstellen.