AJAX發佈到MVC控制器模型每次都是空的

Question

我想從模態對話框發送一些數據到我的控制器與Ajax。但是我的模式字段總是爲空，但是我在控制器中輸入了我的actionmethod。

這是我的cshtml文件的簡寫版本。

@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> 

對不起MVC/Ajax對我來說真的是新的。

Answer 1

1. 如果要將表單數據綁定到模型，那麼HTML元素的名稱應該與模型屬性相匹配。 注意：html輸入字段的name屬性值應該匹配模型的屬性。

2. 當您使用表單並提交按鈕，然後它會嘗試通過發佈數據到服務器重新加載頁面。您需要阻止此操作。您可以通過在Form元素中的onSubmit事件上返回false來完成此操作。

3. 當你使用jQuery時，不要忘記在$（document）.ready（function（）{}）函數中保留ajax調用/事件。

   我寫了一個簡單的代碼，它以First Name作爲輸入，並在點擊提交按鈕時發出ajax調用。

的Html & jQuery代碼：

<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> 

我的模型：

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

操作方法：

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

輸出：