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 }); 
} 

输出：