使用Jquery Ajax将模型从视图传递到控制器

我试图使用ajax

JQuery

将模型值从视图传递到控制器。在我的控制器中，该模型显示为

null

控制器已从ajax方法调用，但问题是控制器中的对象显示为

null

这是模型的简单结构：

public class Invoice
{
    public Invoice(InvoiceHeader invHeader, List<InvoiceItems> InvItmem)

    {
        this.invHeader = invHeader;
        this.InvItmem = InvItmem;
    }

    public InvoiceHeader invHeader { get; private set; }
    public List<InvoiceItems> InvItmem { get; private set; }

}

公共类发票
{
公共发票（发票抬头invHeader，列表抬头InvItmem）
{
this.invHeader=invHeader；
this.InvItmem=InvItmem；
}
public InvoiceHeader invHeader{get；private set；}
公共列表InvItmem{get；private set；}
}

这是控制器的结构：

[HttpPost]
public ActionResult InsertItems(List<Invoice> invoice)
{
    //List<InvoiceItems> asd = new List<InvoiceItems>();
    //asd = invoice.();

    return Json(true, JsonRequestBehavior.AllowGet);
}

[HttpPost]
公共操作结果插入项（列出发票）
{
//List asd=新列表（）；
//asd=发票。（）；
返回Json（true，JsonRequestBehavior.AllowGet）；
}

这是一种观点：

@model BeetaTechModel.Invoice

@{
    ViewBag.Title = "Index";
    var val = Json.Encode(Model);
}

<h2>Index</h2>

    <script type="text/javascript"> 
        $(document).ready(function () {

            $("#btnSubmit").click(function () {

                // var val = Json.Encode(Model);

                var check = @Html.Raw(val);

                $.ajax({
                    type: 'POST',
                    url: "Invoice/InsertItems",
                    data: '{info:' + JSON.stringify(check) + '}' ,
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    success: function (data) {
                        alert(data);        
                    }
                });
            });
        });
    </script>

@{Html.RenderPartial("InvoiceHeader", Model.invHeader);}

@{Html.RenderPartial("InvoiceItems", Model.InvItmem);}        

<input type="submit" id="btnSubmit" value="Log In" />

@model BeetaTechModel.Invoice
@{
ViewBag.Title=“Index”；
var val=Json.Encode（模型）；
}
指数
$（文档）.ready（函数（）{
$（“#btnsupmit”）。单击（函数（）{
//var val=Json.Encode（模型）；
var check=@Html.Raw（val）；
$.ajax({
键入：“POST”，
url:“发票/插入项”，
数据：'{info:'+JSON.stringify（检查）+'}'，
contentType:'application/json；charset=utf-8'，
数据类型：“json”，
成功：功能（数据）{
警报（数据）；
}
});
});
});
@{Html.RenderPartial（“InvoiceHeader”，Model.invHeader）；}
@{Html.RenderPartial（“InvoiceItems”，Model.InvItmem）；}

您的代码有4个问题

• 第一个是在AJAX调用中，它必须如下所示：

  $.ajax({
      url: 'Invoice/InsertItems',
      type: 'POST',
      data: JSON.stringify(check),
      contentType: 'application/json; charset=utf-8',
      success: function (data) {
          alert(data);
      }
  });
  

• 第二个问题是您订阅了

  。单击提交按钮的事件而不取消此按钮的默认操作。因此，如果此按钮位于表单中，当您单击它时，浏览器将把表单发布到服务器，并重定向到表单的操作，这样就没有时间执行AJAX调用。因此，请确保取消按钮的默认操作：
  
  $("#btnSubmit").click(function (e) {
      e.preventDefault();
  
      ... your AJAX call comes here
  });
  
  

• 第三个问题是，

  Invoice

  模型没有默认（无参数）构造函数，这意味着您不能在不编写自定义模型绑定器的情况下将其用作控制器操作的参数，因为默认模型绑定器不知道如何实例化它

• 第四个问题是，

  Invoice

  模型的

  invHeader

  和

  InvItmem

  属性都没有公共设置器，这意味着JSON序列化程序将无法设置它们的值。因此，请确保已修复您的发票型号：

  public class Invoice
  {
      public InvoiceHeader InvHeader { get; set; }
      public List<InvoiceItems> InvItmem { get; set; }
  }
  

  公共类发票
  {
  公共InvoiceHeader InvHeader{get；set；}
  公共列表InvItmem{get；set；}
  }
  

数据：“{info:”

与型号名称不匹配：

公共操作结果插入项（列表发票）

可能您需要模型的默认构造函数来进行适当的反序列化

检查您的ajax数据是否可以在

列表中反序列化

---

ajax成功期间，会提醒哪些数据？第四，发布数据中的成员称为

info

，而参数称为

invoices