每次空闲时，AJAX都会发布到MVC Controller模型

Question

我正在尝试使用Ajax将模态对话框中的一些数据发送到我的控制器。但是我的modelfields总是为null，但我在控制器中输入了我的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＆amp; 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 });
}

输出：