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

前端之家收集整理的这篇文章主要介绍了使用Jquery Ajax将Model从视图传递到控制器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图通过使用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" />

解决方法

您的代码有4个问题.

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

$.ajax({
    url: 'Invoice/InsertItems',type: 'POST',data: JSON.stringify(check),success: function (data) {
        alert(data);
    }
});

>第二个问题是您订阅了提交按钮的.click事件而未取消此按钮的默认操作.因此,如果此按钮位于表单内,当您单击它时,浏览器会将表单POST到服务器并重定向到表单的操作,从而不会让您的AJAX调用执行.因此,请确保取消按钮的默认操作:

$("#btnSubmit").click(function (e) {
    e.preventDefault();

    ... your AJAX call comes here
});

>第三个问题是你的Invoice模型没有默认(无参数)构造函数,这意味着你不能在没有编写自定义模型绑定器的情况下将它用作控制器操作的参数,因为默认模型绑定器不知道如何实例化它.
>第四个问题是Invoice模型的invHeader和InvItmem属性都没有公共setter,这意味着JSON序列化程序将无法设置它们的值.因此,请确保您已修复了发票模型:

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

猜你在找的jQuery相关文章