it-swarm.com.de

Verwenden Sie jQuery, um Daten an die MVC-Aktionsmethode zu senden

Ich versuche, Daten mit Hilfe von jQuery Ajax in der MVC-Aktion unter Verwendung des folgenden Ansatzes zu veröffentlichen. Innerhalb des Controllers sind jedoch alle Modelleigenschaften null. Nicht sicher, was mir hier fehlt.

.CSHTML  

<form id="MyForm">
<input name="PersonName" type="text" />
<input name="Address" type="text" />
<select name="States" multiple="multiple">
    <option value="TX">Texas</option>
    <option value="OK">Oklahoma</option>
    <option value="OH">Ohio</option>
</select>
<select name="Status">
    <option value="1">Active</option>
    <option value="2">Deleted</option>
    <option value="3">Pending</option>
</select>
<input type="button" value="Save" id="Save" />

JavaScript  

$(function () {
$("#Save").click(function (e) {
    var dataToPost = $("#MyForm").serialize()
    $.ajax(
    {
        type: "POST",
        data: JSON.stringify(dataToPost),
        url: "Working/Save",
        contentType: 'application/json; charset=utf-8'
    })
  })
})

Controller  

public class WorkingController : Controller
{
    // GET: Working
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult Save(WorkingModel model)
    {
        // All model properties are null here????

        return Json("Success");
    }
 }

Modell  

public class WorkingModel
{
    public string PersonName { get; set; }
    public string Address { get; set; }
    public string[] States { get; set; }
    public string Status { get; set; }
}

EDIT1
Ich habe das Modell oben hinzugefügt. Hier die serialisierten Daten und JSON stringify Daten, wenn ich auf Speichern klicke. 

Serialisierte Daten

"PersonName=Foo&Address=123+Test+Drive&States=TX&Status=1"

Nach JSON.Stringify

"\"PersonName=Foo&Address=123+Test+Drive&States=TX&Status=1\""

Ich habe versucht, HttpPost-Attribut und [FromBody]-Attribut ohne Erfolg hinzuzufügen.

Ich glaube nicht, dass ich den Rückgabetyp von ActionResult in JsonResult ändern muss.

Die URL ist auch korrekt, da der Debugger innerhalb der Aktionsmethode schlägt, wo ich die Modelleigenschaften QuickWatch kann.

Beachten Sie, dass dies funktioniert, wenn Sie ein JSON-Objekt erstellen und es wie folgt posten:

var dataToPost = {
    PersonName:'Foo',
    Address: '123 Test Drive',
    State: 'TX',
    Status: 1
 }
5
LP13

Ihr JavaScript/jQuery-Code kann erheblich vereinfacht werden. Dies ist möglicherweise der beste Weg:

$(function () {
    $("#MyForm").on('submit', function (e) {

        e.preventDefault() // prevent the form's normal submission

        var dataToPost = $(this).serialize()

        $.post("Working/Save", dataToPost)
            .done(function(response, status, jqxhr){ 
                // this is the "success" callback
            })
            .fail(function(jqxhr, status, error){ 
                // this is the ""error"" callback
            })
    })
})

Sie sollten das Ereignis onsubmit des Formulars und nicht das Ereignis onclick der Schaltfläche behandeln. Möglicherweise wird das Formular nicht über die Schaltfläche gesendet. In diesem Fall möchten wir das standardmäßige Übermittlungsverhalten des Formulars verhindern, da wir das Formular mit AJAX übermitteln.

.serialize() verarbeitet das Codieren des Formulars bereits ordnungsgemäß, sodass Sie die Formularwerte nicht mit JSON codieren müssen. Dies ist höchstwahrscheinlich der Grund dafür, dass die Sammelmappe das Modell bei der Verarbeitung der Anforderung nicht neu erstellt.

$.post Ist eine Hilfsfunktion, die die für $.ajax Erforderlichen allgemeinen Einrichtungsarbeiten zusammenfasst. In der hier gezeigten Version soll die URL POST to und die Daten to) lauten POST: Wenn sich Ihr jQuery-Code in einem Skriptelement in einer Ansicht befindet, möchten Sie wahrscheinlich den Url.Action() -Helfer verwenden - er erstellt die richtige URL basierend auf Ihren Routing-Regeln , würden Sie etwas Ähnliches verwenden wie:

$.post('@Url.Action("Save", "Working")', dataToPost)

Anschließend bearbeiten wir die erfolgreiche Antwort (alles mit einem HTTP-200-Statuscode) und die fehlgeschlagene Antwort (alles andere im Grunde) mithilfe der entsprechenden Helfer. Was Sie in diesen Helfern tun , liegt bei Ihnen.

11
Tieson T.

Ich denke, Sie sollten eher HTML-Formulardaten als JSON-Daten einreichen. Ändern Sie daher die Zeilen:

data: JSON.stringify(dataToPost),
contentType: 'application/json; charset=utf-8'

zu 

data: dataToPost,
contentType: 'application/x-www-form-urlencoded; charset=UTF-8'

Anmerkung: Sie können die zweite Zeile auch weglassen, da dies die Standardeinstellung contentType für $.ajax laut jQuery-Dokumentation ist.

EDIT 1 Dies ist eine Antwort auf Ihren Kommentar und Ihre Bearbeitung.

Ich wollte Ihnen sagen, dass die Daten, die Ihr Ajax sendet, mit der Verarbeitung Ihrer Daten übereinstimmen müssen. Der Grund dafür, dass Ihre Modelleigenschaften null sind, ist, dass diese beiden nicht übereinstimmen.

Sie haben den Code für Ihre Aktion nicht veröffentlicht. Daher haben wir keine Ahnung, wie Sie die Daten verarbeiten. Nun sieht es jedoch so aus, als würden Sie die als JSON-Daten empfangenen Daten verarbeiten, da sie beim Senden der Daten funktionierten echte JSON-Daten.

Sie müssen also zwei Dinge tun:

1- Senden Sie echte JSON-Daten: Die einfache Verwendung von JSON.stringify bedeutet nicht, dass Ihre Daten jetzt die richtigen JSON-Daten sind. Wie Sie festgestellt haben, hat JSON.stringify Ihre Zeichenfolge einfach in Anführungszeichen gesetzt, sodass sie eine gültige JSON-Zeichenfolge ist. Aber das erwartet Ihre Aktion nicht, sie erwartet ein JSON-Objekt. Um ein JSON-Objekt zu senden, müssen Sie wahrscheinlich eine Funktion schreiben, die die Formularfelder nacheinander übernimmt, ein JSON-Objekt erstellt und diese Funktion anstelle von JSON.stringify aufgerufen.

2- Standardformulardaten senden: Das habe ich in meiner obigen Antwort vorgeschlagen. Damit es funktioniert, löschen Sie einfach den gesamten Code Ihrer Aktion, der ihn als JSON-Objekt verarbeitet. MVC ist standardmäßig für die Verarbeitung von Standardformulardaten konzipiert, sodass keine zusätzliche Verarbeitung erforderlich ist. Senden Sie einfach die Standardformulardaten und es wird funktionieren.

Hinweis: Ajax muss not Daten im JSON-Format senden/empfangen. Das JSON-Format ist in vielen Szenarien sehr nützlich, um Daten auszutauschen. Sie können jedoch das Format auswählen, das für Ihr bestimmtes Szenario geeignet ist. Zum Beispiel sendet Ihre Aktion nur für das Ergebnis ein JSON-Objekt zurück: return Json("Success"). Wenn Sie nur ein einfaches Ergebnis senden möchten (Erfolg vs. Fehler), können Sie eine einfache Zeichenfolge (z. B. return "Success") oder sogar eine boolesche Ganzzahl (z. B. return "True" oder return "1") zurückgeben. Jason-Objekte benötigen eine zusätzliche Verarbeitung, um sie von der Zeichenfolge zu analysieren. Während diese Verarbeitung sehr schnell und effizient ist, ist es dennoch ein bisschen schneller, einfache Datentypen wie string, boolean oder Integer zu analysieren und zu verarbeiten, wenn Sie keine zusätzlichen Informationen senden müssen.

5
Racil Hilan

ich muss nur den Inhaltstyp aus dem Post entfernen und ihn nicht stringifizieren

$(function () {
  $("#Save").click(function (e) {
  var dataToPost = $("#MyForm").serialize()
  $.ajax(
  {
    type: "POST",
    data: dataToPost,
    url: "Working/Save"
  })
 })
})
4
LP13

Vorherigen Antworttext nach Pastebin verschieben. Da ich falsch lag, ist die Antwort wie folgt:

Lesen Sie einfach Ihre Bearbeitung, Ihr Problem ist JSON-Sache sieht lustig aus: "\" PersonName = Foo & Address = 123 + Test + Drive & States = TX & Status = 1\"".

Meine Empfehlung ist, ein benutzerdefiniertes JS-Objekt zu erstellen und dieses zu veröffentlichen. Ich habe gerade ein VS MVC-Projekt gestartet und es geschafft, es funktioniert alles :)

$(function() {
    $("#Save").click(function(e) {
        var personName = $("[name='PersonName']").val();
        var address = $("[name='Address']").val();
        var states = $("[name='States']").val();
        var status = $("[name='Status']").val();
        var dataToPost = {
            PersonName: personName,
            Address: address,
            States: states,
            Status: status
        };

        $.ajax(
        {
            type: "POST",
            data: JSON.stringify(dataToPost),
            url: "Save",
            contentType: 'application/json; charset=utf-8'
        });
    });
});

Hoffe das hilft!

1
Michael Crook