搜索后的非因素分页问题

Question

I am using NonFactors mvcgrid6 ( https://mvc6-grid.azurewebsites.net/ ) in my project and Paging is breaking following a search. When selecting Page 2 for example after a search has been made the whole data set is returned and not just the searched data.

Looking for a way to persist the searched for data when using the paging. Is this possible to do with this plugin?

Controller

    public IActionResult Index(IndexResidentVM searchValues)
    {
        var indexVm = new IndexResidentVM()
        {
            SearchItems = _residentService.GetAllResidents(searchValues).AsQueryable(),
            Groups = _groupService.GetGroups(),
            Users = _userService.GetUsers()
        };

        return View(indexVm);
    }

Index

@using CommunityContact.Core.Enums
@using NonFactors.Mvc.Grid
@model CommunityContact.Core.ViewModels.Resident.IndexResidentVM

@{
    ViewData["Title"] = "Residents";
}

<h3>Allocated Residents</h3>

<form asp-action="Index" id="indexSearchForm">
    <div class="form-row">
        <div class="form-group col-md-3" style="margin-top: 15px;">
            <label class="col-md-3">Group:   </label>
            <select id="indexGroupDdl" asp-for="Group" asp-items="@Model.Groups.Select(p => new SelectListItem()
                           {
                               Value = p.Name,
                               Text = p.Name
                           })" class="form-control-sm col-md-8">
                <option selected="selected" value="">Please select   </option>
            </select>
        </div>

        <div class="form-group col-md-4" style="margin-top: 15px;">
            <label class="col-md-4">RAG Status:</label>
            <select id="indexRagStatusDdl" asp-for="RagStatus" asp-items="Html.GetEnumSelectList<Enums.RagStatus>()" class="form-control-sm col-md-6">
                <option selected="selected" value="">Please select   </option>
            </select>
        </div>

        <div class="form-group col-md-4" style="margin-top: 15px;">
            <label class="col-md-4">Allocated to:   </label>
            <select id="indexAllocatedToDdl" asp-for="User" asp-items="@Model.Users.Select(p => new SelectListItem()
                                                                  {
                                                                      Value = p.Name,
                                                                      Text = p.Name
                                                                  })" class="form-control-sm col-md-6">
                <option selected="selected" value="">Please select   </option>
            </select>
        </div>

        <div class="col-md-1" style="margin-top: 15px;">
            <button id="clearSearch" class="btn-sm btn-primary clear-search" title="Clear Search"><span class="fa fa-times"></span></button>
        </div>

    </div>
</form>

<hr />

@(Html.Grid(Model.SearchItems)
      .Build(columns =>
      {
          columns.Add(model => model.Id).Css("hidden-column");
          columns.Add(model => model.ResidentId).Titled("Resident ID");
          columns.Add(model => model.Forename1).Titled("Forename");
          columns.Add(model => model.Surname).Titled("Surname");
          columns.Add(model => model.Group).Titled("Group");
          columns.Add(model => model.CallBackDue.HasValue ? model.CallBackDue.Value.ToShortDateString() : string.Empty).Titled("Call Back Due");
          columns.Add(model => model.RagStatus).Titled("RAG Status");
          columns.Add(model => model.AllocatedTo).Titled("Allocated to");
          columns.Add(model => Html.ActionLink(" ", "Edit", "Resident", new { id = model.Id }, new { @class = "fa fa-edit", title = "Edit" })).Css("archive-column-width");
          columns.Add(model => Html.ActionLink(" ", " ", new {}, new {@class="fa fa-archive", href ="#", onclick="return archivePrompt('"+ model.Id +"')", title ="Archive"})).Css("archive-column-width");
      })

      .Pageable()
      .RowAttributed(model => new {@class = model.RagStatus == Enums.RagStatus.Red.ToString() ? "rag-status-red" : model.RagStatus == Enums.RagStatus.Amber.ToString() ? "rag-status-amber" : model.RagStatus == Enums.RagStatus.Green.ToString() ? "rag-status-green" : null }))
@*@Html.AjaxGrid(Url.Action("Index"))*@

@section Scripts
{
    <script>
        // MvcGrid
        [].forEach.call(document.getElementsByClassName('mvc-grid'), function (element) {
            new MvcGrid(element);
        });

    </script>
}

View Model

public class IndexResidentVM
{
    public int Id { get; set; }
    public string ResidentId { get; set; }
    public string Forename1 { get; set; }
    public string Surname { get; set; }
    public string Group { get; set; }
    public string User { get; set; }
    public Enums.Enums.RagStatus RagStatus { get; set; }

    public IQueryable<ResidentSearchItemVM> SearchItems { get; set; }
    public IEnumerable<EditUserVM> Users { get; set; }
    public IEnumerable<GroupVM> Groups { get; set; }
}

Answer 1

This was solved by making the call to the controller a GET request and not POST. Adding the following to my form tag fixed it for me -

method="GET"