title: Null model with ajax post
body: <p>I am trying to pass a model to the controller using an ajax post, but every time I do so, the model is null and I lose all the data I am trying to persist.</p>
  
  <p>The ajax call:</p>
  
  <pre><code>$('#next').click(function (e) {
      e.preventDefault();
      var url = '@Url.Action("Manage")'
      var _model = JSON.stringify(@Html.Raw(Json.Encode(Model)));
      var _page = @(Model.pager.CurrentPage + 1);
  
      $.ajax({
          type: "POST",
          contentType: "application/json; charset=utf-8",
          url: url,
          data: JSON.stringify({ 'model': _model, 'page': _page }),
          success: function(result) {
              console.log(result);
          }
      });
  });
  </code></pre>
  
  <p>When I look at the serialized object, it looks like a correctly formatted JSON object with no errors thrown in the developer console.</p>
  
  <p>The link that is triggering this jQuery call is just a basic action link:</p>
  
  <pre><code>@Html.ActionLink("&gt;", "Manage", "Announcements", null, new { id = "next" })
  </code></pre>
  
  <p>My model is a little more complicated...</p>
  
  <pre><code>public class ManageViewModel : IEnumerable&lt;EditViewModel&gt;
  {
      [Display(Name="Start Date")]
      [DataType(DataType.DateTime)]
      public DateTime? StartDate { get; set; }
  
      [Display(Name="End Date")]
      [DataType(DataType.DateTime)]
      public DateTime? EndDate { get; set; }
  
      public string SearchString { get; set; }
  
      public Pager pager { get; set; }
  
      public List&lt;EditViewModel&gt; Data { get; set; }
      public List&lt;CategoryViewModel&gt; Categories { get; set; }
  
      public ManageViewModel()
      {
          Data = new List&lt;EditViewModel&gt;();
          Categories = new List&lt;CategoryViewModel&gt;();
      }
  
      public IEnumerator&lt;EditViewModel&gt; GetEnumerator()
      {
          return Data.GetEnumerator();
      }
  
      IEnumerator IEnumerable.GetEnumerator()
      {
          return Data.GetEnumerator();
      }
  }
  
  public class Pager
  {
      public int TotalItems { get; private set; }
      public int CurrentPage { get; private set; }
      public int PageSize { get; private set; }
      public int TotalPages { get; private set; }
      public int StartPage { get; private set; }
      public int EndPage { get; private set; }
  
      public Pager(int totalItems, int? page, int pageSize = 10)
      {
          int totalPages = (int)Math.Ceiling((decimal)totalItems / (decimal)pageSize);
          int currentPage = page ?? 1;
          int startPage = currentPage - 5;
          int endPage = currentPage + 4;
  
          if(startPage &lt;= 0)
          {
              endPage -= (startPage - 1);
              startPage = 1;
          }
  
          if(endPage &gt; totalPages)
          {
              endPage = totalPages;
              if(endPage &gt; 10)
              {
                  startPage = endPage - 9;
              }
          }
          TotalItems = totalItems;
          TotalPages = totalPages;
          CurrentPage = currentPage;
          PageSize = pageSize;
          EndPage = endPage;
          StartPage = startPage;
      }
  }
  </code></pre>
  
  <p>I can't convert the links in to a form because that breaks the pagination. Or maybe I'm just not understanding the full picture here.</p>
  
  <p>Here is the section of the View where the pagination is occurring</p>
  
  <pre><code>if (Model.pager.EndPage &gt; 1)
  {
      &lt;div style="color:#337AB7; padding-bottom: 0px;"&gt;Page @Model.pager.CurrentPage of @Model.pager.TotalPages&lt;/div&gt;
      &lt;ul class="pagination"&gt;
          @if (Model.pager.CurrentPage &gt; 1)
          {
              &lt;li&gt;
                  @Html.ActionLink("&lt;&lt;", "Manage", new { model = Model, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
              &lt;/li&gt;
              &lt;li&gt;
                  @Html.ActionLink("&lt;", "Manage", new { model = Model, page = Model.pager.CurrentPage - 1, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
              &lt;/li&gt;
          }
          @for (var _page = Model.pager.StartPage; _page &lt; Model.pager.EndPage + 1; _page++)
          {
              &lt;li class="@(_page == Model.pager.CurrentPage ? "active" : "")"&gt;
                  @Html.ActionLink(_page.ToString(), "Manage", new { model = Model, page = _page, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
              &lt;/li&gt;
          }
          @if (Model.pager.CurrentPage &lt; Model.pager.TotalPages)
          {
              &lt;li&gt; 
                  @Html.ActionLink("&gt;", "Manage", "Announcements", null, new { id = "next" })
              &lt;/li&gt;
              &lt;li&gt;
                  @Html.ActionLink("&gt;&gt;", "Manage", new { model = Model, page = Model.pager.TotalPages, start = Model.StartDate, end = Model.EndDate, query = Model.SearchString }, null)
              &lt;/li&gt;
          }
      &lt;/ul&gt;
  }
  </code></pre>
  
  <p>The action links attempting to pass the model, obviously don't work but I left them because I am focusing on getting one to work, the one listed previously, before getting all the others configured.</p>
  
  <p>I have looked at the following SO posts and have had no luck with them:<br />
  <a href="https://stackoverflow.com/questions/28138918/post-an-mvc-model-with-ajax">Post an MVC model with AJAX?</a><br />
  <a href="https://stackoverflow.com/questions/16492385/model-properties-null-on-ajax-post-from-list-box-change-event">Model properties null on Ajax post from list box change event</a><br />
  <a href="https://stackoverflow.com/questions/1518417/how-to-send-a-model-in-jquery-ajax-post-request-to-mvc-controller-method">How to send a model in jQuery $.ajax() post request to MVC controller method</a><br />
  <a href="https://stackoverflow.com/questions/33947882/pass-model-to-controller-using-jquery-ajax">Pass Model To Controller using Jquery/Ajax</a><br />
  <a href="https://stackoverflow.com/questions/20160761/how-to-pass-model-in-ajax-post-request">How to pass model in ajax post request?</a><br /></p>
  
  <p>Any ideas on how I might be able to do this? I need the model data to persist for searching/filtering which is done through a form. Thank you in advance for taking a look and giving your insights!</p>