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

时间:2013-08-07 11:45:14

标签: jquery asp.net-mvc-4

我尝试使用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" />

2 个答案:

答案 0 :(得分:6)

您的代码有4个问题。

  • 第一个是你的AJAX调用,它必须如下所示:

    $.ajax({
        url: 'Invoice/InsertItems',
        type: 'POST',
        data: JSON.stringify(check),
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            alert(data);
        }
    });
    
  • 第二个问题是您订阅了提交按钮的.click事件而未取消此按钮的默认操作。因此,如果此按钮位于表单内,当您单击它时,浏览器会将表单POST到服务器并重定向到表单的操作,从而不会让您的AJAX调用执行。因此,请确保取消按钮的默认操作:

    $("#btnSubmit").click(function (e) {
        e.preventDefault();
    
        ... your AJAX call comes here
    });
    
  • 第三个问题是你的Invoice模型没有默认(无参数)构造函数,这意味着你不能在不编写自定义模型绑定器的情况下将它用作控制器操作的参数,因为默认模型binder不知道如何实例化它。

  • 第四个问题是invHeader模型的InvItmemInvoice属性都没有公共setter,这意味着JSON序列化程序无法设置值。因此,请确保您已修复了发票模型:

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

答案 1 :(得分:0)

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