AJAX Post zu MVC Controller-Modell jedes Mal leer

Question

Ich versuche, einige Daten aus einem modalen Dialog zu meinem Controller mit Ajax zu senden. Aber meine Modellfelder sind immer Null, aber ich gebe meine Aktion im Controller ein.

Dies ist eine Kurzversion meiner cshtml-Datei.

@model anmespace.MyModel 

<form method="post" id="formID"> 
    ...   
    <div class="row"> 
     <div class="col-md-5">@Resource.GetResource("MyModal", "Firstname")</div> 
     <div class="col-md-7"><input type="text" class="form-control" id="firstname" value="@Html.DisplayFor(model => model.FirstName)"></div> 
    </div> 
    ... 
    <input type="submit" class="btn btn-primary" value="Submit" /> 
</form> 
<script> 
    $("#formID").on("submit", function (event) { 
     var $this = $(this); 
     var frmValues = $this.serialize(); 
     $.ajax({ 
      cache: false, 
      async: true, 
      type: "POST", 
      url: "@Url.Action("ActionName", "Controller")", 
      data: frmValues, 
      success: function (data) { 
       alert(data); 
      } 
     }); 
    }); 
</script> 

Sorry MVC/Ajax sind wirklich neu für mich.

Answer 1

1. Wenn Sie die Formulardaten an das Modell binden möchten, sollten die Namen der HTML-Elemente mit den Modelleigenschaften übereinstimmen. Hinweis: Name Attribut Wert von HTML-Eingabefeld sollte mit der Eigenschaft eines Modells übereinstimmen.

2. Wenn Sie die Schaltfläche Formular und Absenden verwenden, wird versucht, die Seite neu zu laden, indem Daten auf dem Server veröffentlicht werden. Sie müssen diese Aktion verhindern. Sie können dies tun, indem Sie im Formularelement den Wert false on onSubmit zurückgeben.

3. Wenn Sie jQuery verwenden, vergessen Sie nicht, die AJAX-Aufrufe/-Ereignisse in der Funktion $ (document) .ready (function() {}) zu behalten.

   Ich habe einen einfachen Code geschrieben, der Vorname als Eingabe nimmt und einen Ajax-Aufruf beim Klicken auf Senden-Button macht.

Html & JQuery-Code:

<script> 
    $(document).ready(function() { 
     $("#formID").on("submit", function(event) { 
      var $this = $(this); 
      var frmValues = $this.serialize(); 
      $.ajax({ 
       cache: false, 
       async: true, 
       type: "POST", 
       url: "@Url.Action("PostData", "Home")", 
       data: frmValues, 
       success: function(data) { 
        alert(data.FirstName); 
       } 
      }); 
     }); 
    }); 
</script> 
<div> 
    <form method="post" id="formID" onsubmit="return false;"> 
     <input id="FirstName" name="FirstName"/> 
     <input type="submit" value="submit" /> 
    </form> 
</div> 

My Model:

public class Person 
{ 
     public string FirstName { get; set; } 
} 

Aktion Methode:

public ActionResult PostData(Person person) 
{ 
    return Json(new { Success = true, FirstName = person.FirstName }); 
} 

Ausgang: