title: How to pass model to controller action using ajax call?
body: <p>Im using ajax call to pass model data in to my controller action , but controller receives empty model when I call via ajax ,
  Here is my controller</p>
  
  <pre><code>[HttpPost]
  public ActionResult Edit( int id, ALDS.Web.Areas.Direct2M3.Models.ItemInputModel collection)
  {
      try
      {
          // TODO: Add update logic here
          return View("Index");
      }
      catch
      {
          return View();
      }
  }
  </code></pre>
  
  <p>And here is my input model</p>
  
  <pre><code>public class ItemInputModel
  {
      [Key]
      public long ID { get; set; }
      [DisplayName("Buyer Code")]
      public string ModelCode { get; set; }
      [DisplayName("BOM Description")]
      public string BOMDescription { get; set; }
      //BUYER CODE
      [DisplayName("UOM")]
      public string UOM { get; set; }
      [DisplayName("Alternative UOM")]
      public string AltUOM { get; set; }
      [DisplayName("Garment Color Wise")]
      public string ColorWise { get; set; }
      [DisplayName("Garment Size Wise")]
      public string SizeWise { get; set; }
      [DisplayName("RM Color Wise")]
      public string RMcolorWise { get; set; }
      [DisplayName("RM Size Wise")]
      public string RMsize { get; set; }
      [DisplayName("Procument Group")]
      public string BrandixProcurementGroupCode { get; set; }
      [DisplayName("Designation CPT")]
      public string DesignationCPT { get; set; }
      [DisplayName("Item Name")]
      public string ItemName { get; set; }
      [DisplayName("Fabric Composition")]
      public string FabricComposition { get; set; }
      [DisplayName("Hierachy Code ")]
      public string HierarchyCode { get; set; }
      [DisplayName("GSM Value")]
      public string GSMValue { get; set; }
      [DisplayName("RM Width")]
      public string RMWidth { get; set; }
  }
  </code></pre>
  
  <p>Here is my ajax call from the view</p>
  
  <pre><code>$.ajax({
      type: 'POST',
      dataType: 'application/json; charset=utf-8',
      cache: false,
      url: '/ItemMaster/Edit',
      data:{ id: collection.ID, collection:collection},
      success: function (data, textStatus, jqXHR) {
          alert("ok");
          //Do Stuff 
          //$("#DailyInvoiceItems").html(data.Id);
      },
      error: function (jqXHR, textStatus, errorThrown) {
          alert('Failed');
          //Do Stuff or Nothing
      }
  });
  </code></pre>
  
  <p>and im using this model to pass to the action from the , ajax</p>
  
  <pre><code>var model = {
      ID: $('#ID').val(),
      ModelCode: $('#txtModelCode').val(),
      BOMDescription: $('#txtBOMDescription').val(),
      UOM: $('#txtUOM').val(),
      AltUOM: $('#txtAltUOM').val(),
      ColorWise: $('#ddnColorWise').val(),
      SizeWise: $('#ddnSizeWise').val(),
      RMcolorWise: $('#ddnRMcolorWise').val(),
      RMsize: $('#ddnRMsize').val(),
      BrandixProcurementGroupCode: $('#ddnBrandixProcurementGroupCode').val(),
      DesignationCPT: $('#txtDesignationCPT').val(),
      ItemName: $('#txtItemName').val(),
      FabricComposition: $('#txtFabricComposition').val(),
      HierarchyCode: $('#txtHierarchyCode').val(),
      GSMValue: $('#txtGSMValue').val(),
      RMWidth: $('#txtRMWidth').val()
  };
  </code></pre>
  
  <p>I put a break point inside the action method and inspect the collection parameter but it is an empty input object , with null properties !
  Can anyone help me????
  Thankz,.</p>