title: How to pass search criteria to controller using MVC AJAX PagedList
body: <p>I'm creating Advanced Search using MVC. What I mean by Advanced Search is user can do  combination search, for example, user can search by category = 'Child' and name contains 'A' or age &lt;= 10. then the result is displayed using MVC PagedList.</p>
  
  <p>I followed <a href="https://github.com/troygoode/PagedList/tree/master/src/PagedList.Mvc4.Example/Views/UnobtrusiveAjax" rel="nofollow noreferrer">UnobtrusiveAjax tutorial</a> based on example from <a href="https://github.com/troygoode/PagedList" rel="nofollow noreferrer">PagedList</a> source. I defined 2 files, Index.cshtml for View and _List.cshtml for PartialView. Index contains search criteria and a button to add more clause.</p>
  
  <p><img src="https://i.stack.imgur.com/r8umf.png" alt="enter image description here"></p>
  
  <p>and _List contains table for displaying the result using AJAX</p>
  
  <p>The problem is after I filtered by code for example contains 'A' and click search then navigate to page 2 the filter value is missing and it will display code which not contains 'A'. How to solve this problem?</p>
  
  <p>ViewModel:</p>
  
  <pre><code>public class WorkflowStateListViewModel
  {
      public IEnumerable&lt;string&gt; FilterField { get; set; }
      public IEnumerable&lt;string&gt; FilterOperator { get; set; }
      public IEnumerable&lt;string&gt; FilterString { get; set; }
      public IEnumerable&lt;string&gt; FilterLogical { get; set; }
      public PagedList&lt;WorkflowStateListDetailViewModel&gt; WorkflowStateListDetailVM { get; set; }
      public int? Page { get; set; }
  }
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>public ActionResult Filter(WorkflowStateListViewModel workflowStateListVM, int? page)
  {
      var workflowStatesQuery = from ws in db.WorkflowStates
                                where ws.RowStatus == true
                                select ws;
      if (workflowStateListVM.FilterField != null)
      {
          for (int i = 0; i &lt; workflowStateListVM.FilterField.Count(); i++)
          {
              workflowStatesQuery = DoFilter(workflowStatesQuery, workflowStateListVM.FilterField.ElementAt(i), workflowStateListVM.FilterOperator.ElementAt(i), workflowStateListVM.FilterString.ElementAt(i));
          }
      }
  
      workflowStatesQuery = workflowStatesQuery.OrderBy(ws =&gt; ws.Code);
      var workflowStateListDetailVM = from ws in workflowStatesQuery
                             select new WorkflowStateListDetailViewModel()
                             {
                                 WorkflowStateID = ws.WorkflowStateID,
                                 Code = ws.Code,
                                 Name = ws.Name,
                                 Level = ws.Level,
                                 PIC = ws.PIC
                             };
  
      int pageNumber = (page ?? 1);
      return PartialView("_List", workflowStateListDetailVM.ToPagedList(pageNumber, 5));
  }
  </code></pre>
  
  <p>Index.cshtml</p>
  
  <pre><code>@model ViewModels.WorkflowStateListViewModel
  
  @using (Ajax.BeginForm("Filter", "WorkflowState", 
      new AjaxOptions
      {
          InsertionMode = InsertionMode.Replace,
          HttpMethod = "GET",
          UpdateTargetId = "workflowStateList"
      }, 
      new { @class = "form-inline" }))
  {
      &lt;div id="clauses"&gt;
      &lt;/div&gt;
      &lt;p&gt;
          &lt;div class="form-group"&gt;
              @Html.DropDownList("FilterField", new SelectList(Model.FilterField), new { @class = "form-control" })
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              @Html.DropDownList("FilterOperator", new SelectList(Model.FilterOperator), new { @class = "form-control" })
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
              @Html.TextBoxFor(model =&gt; model.FilterString, new { @class = "form-control" })
          &lt;/div&gt;
          &lt;input type="submit" value="Search" class="btn btn-default" /&gt;
      &lt;/p&gt;
      &lt;p&gt;
          &lt;div class="form-group"&gt;
              &lt;a href="#" id="addClause"&gt;&lt;span class="glyphicon glyphicon-plus-sign"&gt;&lt;/span&gt; Add new clause&lt;/a&gt;
          &lt;/div&gt;
      &lt;/p&gt;
  
      &lt;div id="workflowStateList"&gt;
          @{ Html.RenderPartial("_List", Model); }
      &lt;/div&gt;
  }
  </code></pre>
  
  <p>_List.cshtml</p>
  
  <pre><code>@model JOeBilling.ViewModels.WorkflowStateListViewModel
  @using PagedList.Mvc;
  
  &lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-hover table-condensed"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;
                  Code
              &lt;/th&gt;
              &lt;th&gt;
                  Name
              &lt;/th&gt;
              &lt;th&gt;
                  Level
              &lt;/th&gt;
              &lt;th&gt;
                  PIC
              &lt;/th&gt;
          &lt;/tr&gt;
  
          @foreach (var item in Model.WorkflowStateListDetailVM)
          {
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;a href="@Url.Action("Edit", "WorkflowState", new { id = item.WorkflowStateID })"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="@Url.Action("Details", "WorkflowState", new { id = item.WorkflowStateID })"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="@Url.Action("Delete", "WorkflowState", new { id = item.WorkflowStateID })"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Code)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Name)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.Level)
                  &lt;/td&gt;
                  &lt;td&gt;
                      @Html.DisplayFor(modelItem =&gt; item.PIC)
                  &lt;/td&gt;
              &lt;/tr&gt;
          }
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  
  Page @(Model.WorkflowStateListDetailVM.PageCount &lt; Model.WorkflowStateListDetailVM.PageNumber ? 0 : Model.WorkflowStateListDetailVM.PageNumber) of @Model.WorkflowStateListDetailVM.PageCount
  
  @Html.PagedListPager(Model.WorkflowStateListDetailVM,
      page =&gt; Url.Action("Filter", new { page }),
      PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(new AjaxOptions() { HttpMethod = "GET", UpdateTargetId = "workflowStateList" }))
  </code></pre>
  
  <p><strong>UPDATE</strong></p>
  
  <p><img src="https://i.stack.imgur.com/epqpF.png" alt="enter image description here"></p>
  
  <p><strong>UPDATE 2</strong><img src="https://i.stack.imgur.com/ESDJQ.png" alt="enter image description here"></p>
  
  <p><strong>UPDATE 3</strong> Response tab</p>
  
  <pre><code>&lt;link href="/Content/PagedList.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;div class="table-responsive"&gt;
      &lt;table class="table table-striped table-hover table-condensed"&gt;
          &lt;tr&gt;
              &lt;th&gt;&lt;/th&gt;
              &lt;th&gt;
                  &lt;a href="/WorkflowState"&gt;Code&lt;/a&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  &lt;a href="/WorkflowState"&gt;Name&lt;/a&gt;
              &lt;/th&gt;
              &lt;th&gt;
                  Level
              &lt;/th&gt;
              &lt;th&gt;
                  PIC
              &lt;/th&gt;
              &lt;th&gt;
                  Created By
              &lt;/th&gt;
              &lt;th&gt;
                  Created Date
              &lt;/th&gt;
              &lt;th&gt;
                  Modified By
              &lt;/th&gt;
              &lt;th&gt;
                  Modified Date
              &lt;/th&gt;
          &lt;/tr&gt;
  
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;a href="/WorkflowState/Edit/6"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="/WorkflowState/Details/6"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="/WorkflowState/Delete/6"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      A06
                  &lt;/td&gt;
                  &lt;td&gt;
                      Preparing Task Code
                  &lt;/td&gt;
                  &lt;td&gt;
                      6
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
                      JKTWLA
                  &lt;/td&gt;
                  &lt;td&gt;
                      28/04/2014 4:24:52 PM
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;a href="/WorkflowState/Edit/7"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="/WorkflowState/Details/7"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="/WorkflowState/Delete/7"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      A07
                  &lt;/td&gt;
                  &lt;td&gt;
                      Closed
                  &lt;/td&gt;
                  &lt;td&gt;
                      7
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
                      JKTWLA
                  &lt;/td&gt;
                  &lt;td&gt;
                      28/04/2014 4:25:06 PM
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;a href="/WorkflowState/Edit/8"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="/WorkflowState/Details/8"&gt;&lt;span class="glyphicon glyphicon-eye-open"&gt;&lt;/span&gt;&lt;/a&gt;
                      &lt;a href="/WorkflowState/Delete/8"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;&lt;/a&gt;
                  &lt;/td&gt;
                  &lt;td&gt;
                      C01
                  &lt;/td&gt;
                  &lt;td&gt;
                      New Invoice
                  &lt;/td&gt;
                  &lt;td&gt;
                      1
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
                      JKTWLA
                  &lt;/td&gt;
                  &lt;td&gt;
                      13/06/2014 10:49:00 AM
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
                  &lt;td&gt;
  
                  &lt;/td&gt;
              &lt;/tr&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  
  Page 2 of 2
  
  &lt;div class="pagination-container"&gt;&lt;ul class="pagination"&gt;&lt;li class="PagedList-skipToPrevious"&gt;&lt;a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#workflowStateList" href="/WorkflowState/Filter?page=1" rel="prev"&gt;«&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a data-ajax="true" data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#workflowStateList" href="/WorkflowState/Filter?page=1"&gt;1&lt;/a&gt;&lt;/li&gt;&lt;li class="active"&gt;&lt;a&gt;2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/div&gt;
  </code></pre>