Keeping Selected Check Boxes Through Paging in IPagedList<>

Question

What is the best practice method for keeping selected check box values across pagination? I'm using PagedList<> but when I select an item on page one, navigate to page two, and then return to page one, the check box selected will be unchecked.

I don't pass anything to the controller of this nature which will be why, but should this be done with JavaScript or should I be passing the IPagedList back to the controller?

I did try the later but I kept getting an error due to not knowing how I should be passing the model in the paging call to the controller at the bottom of the razor page.

Edit I am trying to pass Model within the paramaters of the Paging function, with IPagedList<VirtualMachine> as the parameter type in the controller but that gives me the same error.

How can I achieve keeping the check box state across paging so I can send multiple ids back which may or may not be on the page in question?

Code

Controller:

public ActionResult VirtualMachines(string sortOrder, string currentSort,
            int? page, int id) // tried passing IPagedList<VirtualMachine>
        {
            try
            {
                int pageSize = 10;
                int pageIndex = 1;
                pageIndex = page.HasValue ? Convert.ToInt32(page) : 1;

                IPagedList<VirtualMachine> vmList = null;
                var db = new OnAppDatabase();

                var vms = db.GetHypervisorVMs(id);
                var userIds = new List<string>();
                foreach (var vm in vms)
                {
                    userIds.Add(vm.user_id);
                }
                var usernames = db.GetUsernamesByIds(userIds);

                foreach (var v in vms)
                {
                    var un = usernames.FirstOrDefault(m => m.ContainsKey(v.user_id));
                    v.user = (un == null) ? "Unknown" : un[v.user_id];
                }

                for (var i = 0; i < vms.Count; i++)
                {
                    vms[i] = GetEmailHistory(vms[i]);
                }

                vmList = vms.OrderBy(m => m.user).ToPagedList(pageIndex, pageSize);

                currentSort = sortOrder;
                ViewBag.SortOrder = sortOrder;
                ViewBag.CurrentSort = currentSort;
                ViewBag.Label = db.GetHypervisorLabelById(id.ToString());
                return View(vmList);
            }
            catch (Exception ex)
            {
            }
        }

Razor I have tried to strip out all of the bloat which was in the page, beneath you can see the check boxes that are on each page (ten items per page) I am trying to keep the selected check boxes across paging.

@Html.ActionLink("Hypervisors", "Hypervisors","Notification", null, new { @class = "submit-btn btn btn-yellow reverse-btn" })
                @using (Html.BeginForm("SendEmails", "Notification", FormMethod.Post, new { @class = "noForm" }))
                {
                    <table class="general-table">
                        <tr>
                            <th>
                                Select
                            </th>
                            <th>
                                VM ID
                            </th>
                            <th>
                                Hostname
                            </th>
                            <th>
                                User ID
                            </th>
                            <th>
                                User
                            </th>
                            <th>
                                Last Sent
                            </th>
                            <th>
                                Sent Type
                            </th>
                            <th>
                                Ticket ID
                            </th>
                        </tr>
                        @foreach (var item in Model)
                        {
                            <tr style="@style">
                                <td>
                                    <input type="checkbox" name="vm_ids" value="@item.id" />
                                </td>
                                <td>
                                    <a href="" style="@style">@item.id</a>
                                </td>
                                <td>
                                    @Html.DisplayFor(m => item.hostname)
                                </td>
                                <td>
                                    @Html.DisplayFor(m => item.user_id)
                                </td>
                                <td>
                                    @Html.DisplayFor(m => item.user)
                                </td>
                                <td>
                                    @Html.DisplayFor(m => item.emailSentLast)
                                </td>
                                <td>
                                    @Html.DisplayFor(m => item.emailSentType)
                                </td>
                                <td>
                                    <a href="" style="@style">@item.ticketId</a>
                                </td>
                            </tr>
                        }
<div id='Paging' style="text-align: center">
                    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber)
                    of @Model.PageCount
                    @Html.PagedListPager(Model, page => Url.Action("VirtualMachines",
                   new
                   {
                       page,
                       sortOrder = ViewBag.sortOrder,
                       Model 
                   }))
                </div>

Answer 1

What you want to do is not possible with the basic behavior of IPagedList and it's also probably a bad idea.

The only solution I could think of here is to have an event on the page link that will store all the checked element in your localStorage/array and then when you click on your final submit.