title: How to pass model in ajax post request?
body: <p>everybody.
  I'm new in asp mvc. I need to pass my model as parameter in ajax post request.</p>
  
  <p>Here is my ajax post request code: </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $(document).ready(function () {
              $("#contragentTable tr").click(function () {                   
                  $.ajax({
                      type: 'POST',
                      url: "/Contragent/Index",
                      data: $('#form').serialize(),                              
                      dataType: 'json'                    
                  });
              });
          });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>This is the model</p>
  
  <pre><code>public class ContragentModel
  {
      private readonly List&lt;ContragentView&gt; contragentList = new List&lt;ContragentView&gt;();
  
      public ContragentModel()
      {
          this.IsRowSelected = false;
      }
  
      public List&lt;ContragentView&gt; ContragentList
      {
          get
          {
              return this.contragentList;
          }
      }  
  
      public ContragentView SelectedContragent { get; set; }
  
      public bool IsRowSelected { get; set; }
  }
  </code></pre>
  
  <p>These are controllers </p>
  
  <pre><code>public ActionResult Index()
  {           
      var contragentModel = new ContragentModel();
      var contragentView = new ContragentView();
      contragentView.Id = 1;            
      contragentModel.ContragentList.Add(contragentView);           
  
      return View(contragentModel);
  }    
  
  [HttpPost]
  public ActionResult Index(ContragentModel model)
  {           
      model.IsRowSelected = true;
  
      // Here exception throws, because there no items 
      model.SelectedContragent = model.ContragentList.Single(t=&gt;t.Id== 1);
  
      return this.RedirectToAction("Index", model);            
  }
  </code></pre>
  
  <p>When I pass my model in ajax post request <code>model.ContragentList</code> has no items. However in cshtml side it has. Does anybody know why? </p>
  
  <p>Also, how can I pass model and more one int parameter in my ajax request?</p>
  
  <p>This is my view</p>
  
  <pre><code>@model Transportation.Models.ContragentModel
  @{
      ViewBag.Title = "";
      Layout = "~/Views/Shared/_MainLayout.cshtml";
  }
  
  @section head{
      &lt;script type="text/javascript"&gt;    
          $(document).ready(function () {
              $("#contragentTable tr").click(function () {                   
                  $.ajax({
                      type: 'POST',
                      url: "/Contragent/Index",
                      data: $('#form').serialize(),                          
                      dataType: 'json',
                      contentType: 'application/json; charset=utf-8'
                  });
              });
          });
  
      &lt;/script&gt;    
  }
  
  &lt;table id="contragentTable" class="table table-hover table-bordered"&gt;
      &lt;tr id="0" style="background-color: #ccc"&gt;        
          &lt;th&gt;
            @Html.ActionLink("some text1", "Index")
          &lt;/th&gt;
          &lt;th&gt;
              @Html.ActionLink("some text2", "Index")
          &lt;/th&gt;
          &lt;th /&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
  
      @if (@Model.ContragentList.Count &gt; 0)
      {            
          &lt;tr id="@index.ToString()"&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
              &lt;td&gt;&lt;/td&gt;
          &lt;/tr&gt;          
      }
      else
      {
          &lt;tr&gt;
              &lt;td colspan="9"&gt;No data
              &lt;/td&gt;
          &lt;/tr&gt;
      }
  &lt;/table&gt;
  
  &lt;div&gt;    
      @{ var displayStyle = @Model.IsRowSelected ? "" : "none";    
         var operationTypeGroups = Model.IsRowSelected ? Model.SelectedContragent.PriceList.GroupBy(t =&gt; t.OperationTypeId) : null;    
         var operationTypes = operationTypeGroups == null ? null : operationTypeGroups.SelectMany(t =&gt; t);
  
          &lt;table id="priceTable" class="table table-hover table-bordered" style="display: @displayStyle"&gt;
              &lt;tr id="0" style="background-color: #ccc"&gt;
                  &lt;th&gt;
  
                  &lt;/th&gt;
                  &lt;th&gt;
  
                  &lt;/th&gt;
  
                  @if (operationTypes != null)
                  {
                      foreach (var operationType in operationTypes)
                      {
                      &lt;th&gt;
                          @Html.ActionLink(operationType.OperationTypeName, "Index");
                      &lt;/th&gt;
                      }
                  }
  
                  &lt;th&gt;&lt;/th&gt;
              &lt;/tr&gt;
  
          &lt;/table&gt;
      }
  
  &lt;/div&gt;
  </code></pre>