title: MVC 3 Razor- how to bind new model to webgrid using jQuery ajax
body: <p>I have an issue with updating my webgrid with a new model which is returned from my DAL.</p>
  
  <p>On my view I have checkboxes used to filter data displayed on the grid. Once a checkbox is ticked this calls some jQuery ajax function which passes the checkbox values to my method in my controller. This then calls my DAL and it returns a new list of my model with the correct values. I return this list to my view but when the page loads nothing is different. The grid looks the same which isn't what I intend and the checkboxes are the same which is how I want it.</p>
  
  <p>I will paste my view and controller so hopefully someone knows a good solution:</p>
  
  <p><strong>View</strong></p>
  
  <pre><code>@model IEnumerable&lt;UserManager.Models.vw_UserManager_Model&gt;
  
  
  @*@model UserManager.Models.vw_UserManager_Model
  *@
  @{
      ViewBag.Title = "User Manager Dashboard";
  }
  
      @Html.ActionLink("Create New User", "CreateUser")
  
  
  @*&lt;div class="webgrid-filter"&gt;
      &lt;b&gt;@Html.Label("Select a filter: ")&lt;/b&gt;
      &lt;br /&gt;
      @Html.Label("Hide ALF Intelligence users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterAlfIntell" /&gt;
       @Html.Label("Hide ALF Connect users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterAlfConn" /&gt;
       @Html.Label("Hide BRAD users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager", new { filterVal = Model.FirstOrDefault().alfIntelligence + "," + "alfIntelligence" })')" id="chkFilterBrad" /&gt;
  &lt;/div&gt;*@
  
  
  &lt;div class="webgrid-filter"&gt;
      &lt;b&gt;@Html.Label("Select a filter: ")&lt;/b&gt;
      &lt;br /&gt;
      @Html.Label("Toggle ALF Intelligence users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterAlfIntell" checked="checked" /&gt;
       @Html.Label("Toggle ALF Connect users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterAlfConn" checked="checked"/&gt;
       @Html.Label("Toggle BRAD users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("FilterGrid", "UserManager")')" id="chkFilterBrad" checked="checked"/&gt;
  &lt;/div&gt;
  
  
  &lt;div class="webgrid-wrapper"&gt;
  
  
  
  @{
      ViewBag.Title = "Jobs";
      WebGrid grid = new WebGrid(Model, canPage: true, canSort: true, rowsPerPage: 15, selectionFieldName: "selectedRow", fieldNamePrefix: "gridItem");
  
  }
  
      @grid.GetHtml(
      fillEmptyRows: true,
          tableStyle: "webgrid",
                  alternatingRowStyle: "webgrid-alternating-row",
                  headerStyle: "webgrid-header",
                  footerStyle: "webgrid-footer",
                  selectedRowStyle: "webgrid-selected-row",
              rowStyle: "webgrid-row-style",
          mode: WebGridPagerModes.All,
  columns: new[] {
      grid.Column("UserName"),
      grid.Column("salutation"),
      grid.Column("FirstName"),
      grid.Column("LastName"),
      grid.Column("Password"),
      //grid.Column("isactive"),
      //grid.Column(header: "Is logged in?", format: (model) =&gt; @Html.Raw("&lt;input type='checkbox' checked='" + ((model.isactive) ? "checked" : "unchecked") + "' /&gt;")),  
      grid.Column(header: "User logged in", format: @&lt;text&gt;&lt;input name="User logged in" 
        type="checkbox"  @(item.isactive == true ? "Checked" : null) onclick="logUserOff('@Url.Action("LogUserOff", "UserManager", new {userid = item.userid} )')" id="chkboxIsActive" /&gt;&lt;/text&gt;),
      grid.Column("isApproved"),  
      grid.Column("MaxConcurrentUsers"),
      grid.Column("email"),
      grid.Column("group_name"),
     grid.Column("module_name"), 
  
  
       grid.Column(header:"Edit", format:@&lt;text&gt;&lt;div id="btnEditSelectedRow"&gt;
           "@Html.ActionLink("Edit record", "EditUser", "UserManager", new {
           userid = item.userid,
           salutation = item.salutation,
           firstname = item.FirstName, 
           lastname = item.LastName, 
           password = item.Password, 
           isactive = item.isactive,
           isapproved = item.IsApproved,
           maxconcurrentusers = item.MaxConcurrentUsers,
           email = item.email, 
           module = item.module_name, 
           group = item.group_name }, null)&lt;/div&gt;&lt;/text&gt;),
  
      grid.Column(header:"Delete", format:@&lt;text&gt;&lt;div id="btnDelSelectedRow"&gt;
          "@Html.ActionLink("Delete record", "DeleteUser", "UserManager", new {
           userid = item.userid,
           username = item.UserName,
           salutation = item.salutation,
           firstname = item.FirstName, 
           lastname = item.LastName, 
           password = item.Password, 
           isactive = item.isactive, 
           email = item.email, 
           module = item.module_name, 
           group = item.group_name }, null)&lt;/div&gt;&lt;/text&gt;)
  
  
  })
  &lt;/div&gt;&lt;br /&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          // Disable checkboxs where a user is not active.
          $(".webgrid-wrapper input:not(:checked)").attr("disabled", "disabled");
  
          // Style tables.
          function jQueryUIStyling() {
              $('input:button, input:submit').button();
  
              $('.webgrid-wrapper').addClass('ui-grid ui-widget ui-widget-content ui-corner-all');
              $('.webgrid-title').addClass('ui-grid-header ui-widget-header ui-corner-top');
              jQueryTableStyling();
          } // end of jQueryUIStyling
  
          function jQueryTableStyling() {
              $('.webgrid').addClass('ui-grid-content ui-widget-content');
              $('.webgrid-header').addClass('ui-state-default');
              $('.webgrid-footer').addClass('ui-grid-footer ui-widget-header ui-corner-bottom ui-helper-clearfix');
          } // end of jQueryTableStyling
      });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
      function filterGrid(url) {
          alert("entering filter grid");
          var filters = getFilterVals();
          console.log(filters);
  
          $.ajax({
              url: url,
              type: "POST",
              async: false,
              data: "alfConnect=" + filters.alfConnect + "&amp;" + "alfIntelligence=" + filters.alfIntelligence + "&amp;" + "brad=" +  filters.brad
              //                data: value
          }).done(function () {
              $(this).addClass("done");
          });
      }
  
      function getFilterVals() {
          filters = new Object();
  
          if ($('.webgrid-filter #chkFilterAlfIntell').is(':checked')) {
              filters.alfIntelligence = 1;
          }
          else {
              filters.alfIntelligence = 0;
          }
  
          if ($('.webgrid-filter #chkFilterAlfConn').is(':checked')) {
              filters.alfConnect = 1;
          }
          else {
              filters.alfConnect = 0;
          }
  
          if ($('.webgrid-filter #chkFilterBrad').is(':checked')) {
              filters.brad = 1;
          }
          else {
              filters.brad = 0;
          }
  
          return filters;
  
      }
  
      function logUserOff(url) {
          var answer = confirm('Are you sure you want to save this data?')
          if (answer) {
  //            alert(url + ": " + value);
  
              $.ajax({
                  url: url,
                  type: "POST"
  //                data: value
              }).done(function () {
                  $(this).addClass("done");
              });
  
  
              return true;
          }
          else {
              return false;
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Action result in controller</strong></p>
  
  <pre><code> public ActionResult FilterGrid(int alfConnect, int alfIntelligence, int brad)
          {
              List&lt;UserManager.Models.vw_UserManager_Model&gt; modelList  = DAL.getGrid(alfConnect, alfIntelligence, brad);
              return View("Index", modelList);
          }
  </code></pre>
  
  <p>Summary:</p>
  
  <p>Does anyone know how to update a webgrid after an ajax request from using a actionResult method and new list that contains model?</p>
  
  <p>Thanks!</p>