title: How to post the viewmodel to action method using JQUERY AJAX in MVC
body: <p>I want to achieve create (INSERT) screen using $.POST or $.AJAX.</p>
  
  <p>Note: code is working fine without AJAX call..it is already there.. now i need to do ajax call and save without postback.
  I wrote below code:</p>
  
  <p>On submit click event following is the code:</p>
  
  <pre><code>$.ajax(
        {
            url: '@Url.Action("CreateProduct","ProductManagement")',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            type: 'post',
            data:   $('frm').serialize(),
            success: function () { alert('s'); },
            error: function (e1, e2, e3) { alert(e2); alert(e1 + ' ' + e2 + ' ' + e3); alert('failure event'); }
        }
      );
  });
  </code></pre>
  
  <p>On server side:</p>
  
  <pre><code>[HttpPost]
  public JsonResult CreateProduct(FormCollection frm)
  {
      manager.ProductManager m = new manager.ProductManager();
      // m.InsertProduct(new common.DTO.ProductDTO() { Id = id, ProductName = ProductName, Description = Description, Cost = cost, ProductTypeId = 5 });
      return Json("'result':'success'", JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>Problem is , every time, it call the action but no data found on <code>frm</code> argument param.
  i also tried to keep as - View model <code>ProductViewModel vm</code> as argument but it did not work..just giving me null value. also, in ajax call, it goes in success but. just problem is nothing posted on controller's action.</p>
  
  <p>Html is as follow:</p>
  
  <pre><code>  @using (Html.BeginForm("CreateProduct", "ProductManagement", FormMethod.Post, new { id = "frm" }))
      {
  @Html.AntiForgeryToken()
  @Html.ValidationSummary(true)
  
  &lt;fieldset&gt;
      &lt;legend&gt;ProductViewModel&lt;/legend&gt;
      &lt;div id="CreateDiv"&gt;
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ProductName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ProductName)
              @Html.ValidationMessageFor(model =&gt; model.ProductName)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Cost)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Cost)
              @Html.ValidationMessageFor(model =&gt; model.Cost)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.Description)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.Description)
              @Html.ValidationMessageFor(model =&gt; model.Description)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ProductTypeId)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.DropDownList("ProductTypeId", "Choose item")
              @Html.ValidationMessageFor(model =&gt; model.ProductTypeId)
          &lt;/div&gt;
  
          &lt;div class="editor-label"&gt;
              @Html.LabelFor(model =&gt; model.ProductTypeName)
          &lt;/div&gt;
          &lt;div class="editor-field"&gt;
              @Html.EditorFor(model =&gt; model.ProductTypeName)
              @Html.ValidationMessageFor(model =&gt; model.ProductTypeName)
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;input type="submit" value="Create" id="btnSubmit" /&gt;
      &lt;/p&gt;
  
  &lt;/fieldset&gt;
   }
  
   &lt;div&gt;
   @Html.ActionLink("Back to List", "Index")
   &lt;/div&gt;
  </code></pre>
  
  <p>Please guide me what is wrong here.</p>
  
  <p>Thank You </p>