title: Asp Mvc3 webgrid Paging and Filtering by ajax
body: <p>I Have a little problem with WebGrid control for Asp.Net MVC3. What I want is to perform a search view using ajax and webgrid; something like this:</p>
  
  <p>Search Criteria  <strong><em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__</strong></p>
  
  <p>Subject: <strong><em>_</em>__<em>_</em>_</strong></p>
  
  <p>Task Type: <strong><em>_</em>____</strong></p>
  
  <p>SUBMIT SEARCH</p>
  
  <hr>
  
  <p>WebGrid withPaging</p>
  
  <p>.</p>
  
  <p>When I click the button search it call the HTTPost action by ajax and apply the search criteria; however when I try to do paging it goes to the HTTPGet action; in this way, the filter according to the search criteria doesn't execute.</p>
  
  <p>I put the grid inside a partial view; there is the code:</p>
  
  <pre><code>    @model IEnumerable&lt;MVC3.Models.Task&gt;
  @{
      var grid = new WebGrid(null, rowsPerPage: 2, canPage: true, canSort: true, ajaxUpdateContainerId: "myGrid");
      grid.Bind(Model, rowCount: 3, autoSortAndPage: true);
      grid.Pager(mode: WebGridPagerModes.All);
      @grid.GetHtml(
      columns: grid.Columns(
              grid.Column(format: (item) =&gt; Html.ActionLink("Assign Notifications", "AssignNotifications", new { id = item.TaskId })),
              grid.Column(format: (item) =&gt; Html.ActionLink("Edit", "Edit", new { id = item.TaskId })),
              grid.Column(format: (item) =&gt; Html.ActionLink("Delete", "Delete", new { id = item.TaskId })),
              grid.Column("Subject"),
              grid.Column("Comment"),
              grid.Column(columnName: "Status", header: "Status", format: (item) =&gt; item.TaskStatu.Name),
              grid.Column(columnName: "StartDate", header: "Start Date", format: (item) =&gt; item.StartDate.ToString("MM/dd/yyy")),
              grid.Column(columnName: "Deadline", header: "Dead Line", format: (item) =&gt; item.Deadline.ToString("MM/dd/yyy"))
              )
      );
  }
  </code></pre>
  
  <p>And my Index view looks like: </p>
  
  <pre><code>@model MVC3.ViewModel.TaskSearchViewModel
  @{
      ViewBag.Title = "Index";
      Layout = "~/Views/Shared/_Layout.cshtml";
  }
  &lt;h2&gt;
      Task Index&lt;/h2&gt;
  &lt;hr /&gt;
  @using (Ajax.BeginForm(new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "myGrid" }))
  {
      &lt;div id="Filters"&gt;
          &lt;fieldset&gt;
              &lt;legend&gt;Search criteria&lt;/legend&gt;
              &lt;br /&gt;
              &lt;table&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          @Html.LabelFor(x =&gt; x.Subject)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.TextBoxFor(x =&gt; x.Subject, new { style = "width: 255px;" })
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          @Html.LabelFor(x =&gt; x.TaskTypeId)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DropDownListFor(x =&gt; x.TaskTypeId, Model.GetTaskTypesSelectList(), "Select", new { style = "width: 260px;" })
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          @Html.LabelFor(x =&gt; x.ResponsableId)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DropDownListFor(x =&gt; x.ResponsableId, Model.GetResponsablesSelectList(), "Select", new { style = "width: 260px;" })
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          @Html.LabelFor(x =&gt; x.StatusId)
                      &lt;/td&gt;
                      &lt;td&gt;
                          @Html.DropDownListFor(x =&gt; x.StatusId, Model.GetStatusSelectList(), "Select", new { style = "width: 260px;" })
                      &lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/fieldset&gt;
      &lt;/div&gt;
      @Html.Hidden("page")
      &lt;input id="btnSearch" type="submit" value="Search" /&gt;
  }
  &lt;br /&gt;
  &lt;div id="myGrid"&gt;
      @Html.Partial("_TaskSearchResult", Model.ResultTask)
  &lt;/div&gt;
  &lt;br /&gt;
  @Html.ActionLink("Create new Task", "NewTask")
  </code></pre>
  
  <p>So if anyone know how to solve my problem I'll be grateful.</p>
  
  <p>Greeting
  Arturo</p>