title: MVC 3 razor - maintain checkbox values between page requests
body: <p>I have a page with checkboxes which are used to filter a webgrid. </p>
  
  <p>To give my question some context by unchecking a checkbox the data will be filtered to show fewer results in my webgrid by using ajax request. But once I click on the numbers below the webgrid to cycle through the next set of records in the grid I lose the current state of my checkboxes. This is because I am calling my ActionResult method again which is loading the page again.</p>
  
  <p>So how do I maintain those checkbox values between page loads?</p>
  
  <p><strong>This is my 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("Toggle ALF Intelligence users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("Index", "UserManager")')" id="chkFilterAlfIntell" checked="checked" /&gt;
       @Html.Label("Toggle ALF Connect users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("Index", "UserManager")')" id="chkFilterAlfConn" checked="checked"/&gt;
       @Html.Label("Toggle BRAD users:")
      &lt;input name="User logged in" type="checkbox"  onclick="filterGrid('@Url.Action("Index", "UserManager")')" id="chkFilterBrad" checked="checked"/&gt;
  &lt;/div&gt;
  
  &lt;div id="webgrid-wrapper"&gt;
      @Html.Partial("~/Views/Partial/_WebGridUserManager.cshtml", Model)
      &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) {
          var filters = getFilterVals();
  //        console.log(filters);
  
          $.ajax({
              url: url,
              type: "POST",
              async: true,
              dataType: "html",
              data: "alfConnect=" + filters.alfConnect + "&amp;" + "alfIntelligence=" + filters.alfIntelligence + "&amp;" + "brad=" + filters.brad,
              success: function (data) {
                  $('#webgrid-wrapper').empty().html(data);
  //                $('#webgrid-wrapper').html(data);
              }
          });
      }
  
      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>In div class webgrid filter you can see the checkboxes which I want to maintain the values of. </p>
  
  <p><strong>My actionResult for this view</strong></p>
  
  <pre><code>public ActionResult Index()
          {
              try
              {
                  var model = new UserManagerTestEntities().vw_UserManager_Model;
                  //var model = new UserManager.Models.vw_UserManager_Model();
                  return View(model.ToList());
  
              }
              catch (Exception ex)
              {
                  return View(ViewBag);
              }
  
          }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/sVpMo.png" alt="enter image description here"></p>
  
  <p>Does anyone have suggestions? Thanks!</p>