使用 AJAX 将模型从视图传递到控制器时模型未定义答案

【问题标题】：Model undefined when passing Model from View to Controller using AJAX使用 AJAX 将模型从视图传递到控制器时模型未定义
【发布时间】：2016-06-28 03:14:42
【问题描述】：

当我尝试使用调试器时；在 ajax 中检查我是否能够序列化它说它是“未定义”的表单。我没有遇到错误，但我在视图中输入的值没有传递给控制器。这是我的参考https://stick2basic.wordpress.com/2013/04/14/how-to-pass-model-from-view-to-controller-using-jquery/

查看

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnsubmit').click(function (e) {
            e.preventDefault();
            if ($("#OrderForm").valid()) { //if you use validation
                $.ajax({
                    url: $("#OrderForm").attr('action'),
                    type: $("#OrderForm").attr('method'),
                    data: $("#OrderForm").serialize(),
                    success: function (data) {
                        alert("success");
                    }
                });
            }
        });
    });
</script>

@using (Html.BeginForm("_Order", "Account", FormMethod.Post, new { id =  "OrderForm" }))
{
<div class="form-group">
            <div class="col-md-3">
                @Html.LabelFor(model => model.MerchantEmail, htmlAttributes: new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-9">
                @Html.TextBoxFor(model => model.MerchantEmail, new { @Value = "abc@gmail.com",@class = "form-control" })
                @Html.ValidationMessageFor(model => model.MerchantEmail, "", new { @class = "text-danger" })
            </div>
        </div>

<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" value="Create" id="btnsubmit" class="btn btn-primary" />
            </div>
        </div>
}

控制器

[AllowAnonymous]
        [HttpPost]
        public ActionResult _Order(OrderModel model)
        {
List<OrderModel> orderlist = new List<OrderModel>();
            if (Session["OrderList"] != null)
            {
                orderlist = Session["OrderList"] as List<OrderModel>;
                orderlist.Add(model);
            }
            Session["OrderList"] = orderlist;
            return PartialView();
}

型号

public class OrderModel
    {
        [DataType(DataType.EmailAddress)]
        public string Email { get; set; }

        [StringLength(35)]
        public string FirstName { get; set; }
        [StringLength(35)]
        public string MiddleName { get; set; }
        [StringLength(35)]
        public string LastName { get; set; }
        [StringLength(255)]
        public string Address { get; set; }
        [StringLength(40)]
        public string Province { get; set; }
        [StringLength(40)]
        public string Town { get; set; }
        [StringLength(13)]
        public string MobileNo { get; set; }

        [Required(ErrorMessage = "Please fill up Merchant Email.")]
        [DataType(DataType.EmailAddress)]
        public string MerchantEmail { get; set; }

        [Required(ErrorMessage = "Please enter the exact amount.")]
        [DataType(DataType.Currency)]
        public float OrderAmount { get; set; }

        public string OrderSkuCode { get; set; }

        [Required(ErrorMessage = "Please fill up order details.")]
        [StringLength(5000)]
        public string OrderDetails { get; set; }

    }

【问题讨论】：

您显示的代码可以正常工作。你是说$("#OrderForm").serialize() 返回undefined？
@StephenMuecke 是的，当我向 _Order httppost 添加断点时，OrderModel 为空。
显示OrderModel的模型
@StephenMuecke 检查编辑后的版本
您显示的代码没有任何问题。如果你这样做var data = $('#OrderForm').serialize();，它将返回{ MerchantEmail: 'someValue' }

标签： asp.net-mvc asp.net-ajax

【解决方案1】：

你同时在做两件事，你可以有 ajax 或者直接将数据发布到控制器。

@using (Html.BeginForm("_Order", "Account", FormMethod.Post, new { id =  "OrderForm" }))
{
<div class="form-group">
            <div class="col-md-3">
                @Html.LabelFor(model => model.MerchantEmail, htmlAttributes: new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-9">
                @Html.TextBoxFor(model => model.MerchantEmail, new { @Value = "abc@gmail.com",@class = "form-control" })
                @Html.ValidationMessageFor(model => model.MerchantEmail, "", new { @class = "text-danger" })
            </div>
        </div>

<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" value="Create" id="btnsubmit" class="btn btn-primary" />
            </div>
        </div>
}

这里你将数据直接发布到控制器（Ajax 用于异步传输），这将绕过脚本中的 Ajax 请求。

如果你想通过 Ajax 发布，这里是你需要做的代码更改

<form id="form1">
<div class="form-group">
            <div class="col-md-3">
                @Html.LabelFor(model => model.MerchantEmail, htmlAttributes: new { @class = "control-label col-md-2" })
            </div>
            <div class="col-md-9">
                @Html.TextBoxFor(model => model.MerchantEmail, new { @Value = "abc@gmail.com",@class = "form-control" })
                @Html.ValidationMessageFor(model => model.MerchantEmail, "", new { @class = "text-danger" })
            </div>
        </div>

<div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="button" value="Create" id="btnsubmit" class="btn btn-primary" />
            </div>
        </div>
 </form>


<script type="text/javascript">
    $(document).ready(function () {
        $('#btnsubmit').click(function (e) {
            e.preventDefault();
            var data = new FormData($("#form1")[0]);
            if ($("#OrderForm").valid()) { //if you use validation
                $.ajax({
                    url: '@Url.Action("_Order","Your Controller Name")',
                    dataType: "json",
                    data: data,
                    success: function (data) {
                        alert("success");
                    }
                });
            }
        });
    });
</script>

【讨论】：