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

Question

我尝试使用ajax JQuery将模型值从View传递到Controller。 在我的控制器中，该模型显示为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; }

}

这是Controller的结构：

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

    return 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" />

Answer 1

您的代码有4个问题。

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

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

• 第二个问题是您订阅了提交按钮的.click事件，而没有取消该按钮的默认操作。 因此，如果此按钮在表单中，则单击该按钮时，浏览器会将表单发布到服务器，然后重定向到表单的操作，从而没有时间执行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; } } 

Answer 2

1. data: '{info:'与型号名称不匹配： public ActionResult InsertItems(List<Invoice> invoice)
2. 可能需要模型的默认构造函数才能正确进行反序列化。
3. 检查您的ajax数据是否可以在List<Invoice>反序列化