So senden Sie ein Modell in jQuery $.ajax() Post Request an die MVC-Controller-Methode

Bei einer automatischen Aktualisierung mit dem folgenden Code bin ich davon ausgegangen, dass das Modell automatisch an den Controller gesendet wird, wenn ich einen Post mache:

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    //data:  ??????
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

Jedes Mal, wenn es einen Beitrag gibt, muss ich das Wertattribut im Modell erhöhen:

public ActionResult Modelpage(MyModel model)
    {                   
        model.value = model.value + 1;

        return PartialView("ModelPartialView", this.ViewData);
    }

Das Modell wird jedoch nicht an den Controller übergeben, wenn die Seite mit einer jQuery-AJAX-Anforderung gepostet wird. Wie kann ich das Modell in der AJAX-Anfrage senden?

Die einfache Antwort (ab MVC 3 vielleicht sogar 2) ist, dass Sie nichts Besonderes tun müssen.

Solange Ihre JSON-Parameter mit dem Modell übereinstimmen, ist MVC intelligent genug, um ein neues Objekt aus den Parametern zu erstellen, die Sie ihm geben. Die Parameter, die nicht vorhanden sind, werden einfach voreingestellt.

Zum Beispiel das Javascript:

var values = 
{
    "Name": "Chris",
    "Color": "Green"
}

$.post("@Url.Action("Update")",values,function(data)
{
    // do stuff;
});

Das Model:

public class UserModel
{
     public string Name { get;set; }
     public string Color { get;set; }
     public IEnumerable<string> Contacts { get;set; }
}

Der Controller:

public ActionResult Update(UserModel model)
{
     // do something with the model

     return Json(new { success = true });
}

Wenn Sie das VOLLSTÄNDIGE Modell an den Controller senden müssen, muss das Modell zuerst für Ihren Javascript-Code verfügbar sein.

In unserer App machen wir das mit einer Erweiterungsmethode:

public static class JsonExtensions
{
    public static string ToJson(this Object obj)
    {
        return new JavaScriptSerializer().Serialize(obj);
    }
}

In der Ansicht verwenden wir es, um das Modell zu rendern:

<script type="javascript">
  var model = <%= Model.ToJson() %>
</script>

Anschließend können Sie die Modellvariable an Ihren $.ajax-Aufruf übergeben.

Ich habe eine MVC-Seite, die JSON ausgewählter Werte aus einer Gruppe von Optionsfeldern übermittelt.

Ich benutze:

var dataArray = $.makeArray($("input[type=radio]").serializeArray());

Um ein Array aus ihren Namen und Werten zu erstellen. Dann konvertiere ich es in JSON mit:

var json = $.toJSON(dataArray)

und poste es dann mit ajax() von jQuery an den MVC-Controller

$.ajax({
url: "/Rounding.aspx/Round/" + $("#OfferId").val(),
type: 'POST',
dataType: 'html',
data: json, 
contentType: 'application/json; charset=utf-8',
beforeSend: doSubmitBeforeSend,
complete: doSubmitComplete,
success: doSubmitSuccess});

Welches die Daten als native JSON-Daten sendet.

Anschließend können Sie den Antwortstream erfassen und in das native C#/VB.net-Objekt deserialisieren und in Ihrem Controller bearbeiten.

Um diesen Prozess auf schöne, wartungsarme Weise zu automatisieren, empfehle ich, diesen Eintrag zu lesen, der den größten Teil der nativen, automatischen JSON-Deserialisierung ziemlich gut beschreibt.

Passen Sie Ihr JSON-Objekt an Ihr Modell an, und der unten verlinkte Prozess sollte die Daten automatisch in Ihren Controller deserialisieren. Bei mir funktioniert es wunderbar.

Artikel über MVC JSON-Deserialisierung

Ich denke, Sie müssen das Datenattribut explizit übergeben. Eine Möglichkeit, dies zu tun, ist die Verwendung von data = $(‘#your-form-id’).serialize();

Dieser Beitrag kann hilfreich sein. Poste mit jquery und ajax

Schau mal hier ins Dok..
Ajax serialisieren

Sie können eine Variable erstellen und an Ajax senden.

var m = { "Value": @Model.Value }

$.ajax({
    url: '<%=Url.Action("ModelPage")%>',
    type: "POST",
    data:  m,
    success: function(result) {
        $("div#updatePane").html(result);
    },

    complete: function() {
    $('form').onsubmit({ preventDefault: function() { } });

    }
});

Das gesamte Feld des Modells muss in m ausgefüllt sein.

In Ajax Call Erwähnung-

data:MakeModel(),

Verwenden Sie die folgende Funktion, um Daten an das Modell zu binden

function MakeModel() {

    var MyModel = {};

    MyModel.value = $('#input element id').val() or your value;

    return JSON.stringify(MyModel);
}

Anfügen [HttpPost] Attribut zu Ihrer Controller-Aktion

auf POST werden diese Daten zur Verfügung gestellt