asp.net mvc 4 - Passing Model from view to controller with Jquery Ajax

Question

I'm try to pass my model values from View to Controller by using ajax JQuery. In my controller that model is shown as null.

Controller already called from ajax method, but the problem is object in the controller is showing as null.

This is Simple structure of model:

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; }

}

This is structure of Controller:

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

    return Json(true, JsonRequestBehavior.AllowGet);
}

This is View:

@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

You have 4 issues with your code.

• The first one is in your AJAX call which must look like this:

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

• The second issue is that you subscribed to the .click event of a submit button without canceling the default action of this button. So if this button is inside a form, when you click it, the browser will POST the form to the server and redirect away to the action of the form leaving no time for your AJAX call to ever execute. So make sure you are canceling the default action of the button:

  $("#btnSubmit").click(function (e) {
      e.preventDefault();
  
      ... your AJAX call comes here
  });
  

• The third issue is that your Invoice model doesn't have a default (parameterless) constructor meaning that you cannot use it as argument to a controller action without writing a custom model binder because the default model binder wouldn't know how to instantiate it.

• And the fourth issue is that both the invHeader and InvItmem properties of your Invoice model do not have public setters meaning that the JSON serializer will be unable to set their values. So make sure you have fixed your Invoice model:

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