Razor 页面中具有多个搜索字段的分页列表

Question

I'm creating a Razor Page application in which my clients need to search on multiple fields at once, however, when I create the multiple search fields the search itself works well but the pagination on the paginated list breaks, losing the search terms on the second page and reverting to it's default pagination order. Is there a different list type that I should implement, or is there a way to conditionally prioritize which search field the paginated list uses to maintain it's pagination order and to not lose the search? As a newcomer to development I will provide most of the code in the code behind, as I am still unclear as to how the pieces all fit together when it comes to pagination, sorting and filtering in Razor Pages.

Everything was working perfectly when I had a search set up that allowed the client to search on one field at a time and the problem arose when I made the changes to allow for a multiple concurrent search.

This is the Code Behind:

 private readonly PFDTrustContext _context;

    public IndexModel(PFDTrustContext context)
    {
        _context = context;
    }

    public PaginatedList<Client> Clients { get; set; }

    // sorting
    public string AcctNumberSort { get; set; }
    public string FirstNameSort { get; set; }
    public string LastNameSort { get; set; }
    public string SSNSort { get; set; }
    public string CurrentSort { get; set; }

    // filtering
    public string FilterLN { get; set; }
    public string FilterFN { get; set; }
    public string FilterSSN { get; set; }
    public string FilterAcctNum { get; set; }
    public string CurrentFilter { get; set; }


    public async Task OnGetAsync(string sortOrder, string searchStringLN, string searchStringFN, string searchStringSSN, string searchStringAcctNum, string filterLN, string filterFN, string filterSSN, string filterAcctNum, string currentFilter, int? pageIndex)
    {
        CurrentSort = sortOrder;

        // Sorting
        LastNameSort = string.IsNullOrEmpty(sortOrder) ? "lastName_desc" : "";
        FirstNameSort = sortOrder == "firstName" ? "firstName_desc" : "firstName";
        AcctNumberSort = sortOrder == "acctNumber" ? "acctNumber_desc" : "acctNumber";
        SSNSort = sortOrder == "SSN" ? "SSN_desc" : "SSN";

        // Paging
        if (searchStringLN != null)
        {
            pageIndex = 1;
        }
        else
        {
            searchStringLN = filterLN;
        }

        if (searchStringFN != null)
        {
            pageIndex = 1;
        }
        else
        {
            searchStringFN = filterFN;
        }

        if (searchStringSSN != null)
        {
            pageIndex = 1;
        }
        else
        {
            searchStringSSN = filterSSN;
        }

        if (searchStringAcctNum != null)
        {
            pageIndex = 1;
        }
        else
        {
            searchStringAcctNum = filterAcctNum;
        }

        // Searching/Filtering
        FilterLN = searchStringLN;
        FilterFN = searchStringFN;
        FilterSSN = searchStringSSN;
        FilterAcctNum = searchStringAcctNum;

        if (!string.IsNullOrEmpty(FilterLN))
        {
            CurrentFilter = FilterLN;
        }
        else if (!string.IsNullOrEmpty(FilterSSN))
        {
            CurrentFilter = FilterSSN;
        }
        else if (!string.IsNullOrEmpty(FilterAcctNum))
        {
            CurrentFilter = FilterAcctNum;
        }
        else
        {
            CurrentFilter = FilterFN;
        }


        // Sorting
        IQueryable<Client> clients = from c in _context.Clients
                                     select c;

        // Searching
        if (!string.IsNullOrEmpty(searchStringLN))
        {
            clients = clients.Where(c => c.LastName.ToUpper().Contains(searchStringLN.ToUpper()));
        }
        if (!string.IsNullOrEmpty(searchStringFN))
        {
            clients = clients.Where(c => c.FirstName.ToUpper().Contains(searchStringFN.ToUpper()));
        }
        if (!string.IsNullOrEmpty(searchStringSSN))
        {
            clients = clients.Where(c => c.SSN.ToString().Contains(searchStringSSN));
        }
        if (!string.IsNullOrEmpty(searchStringAcctNum))
        {
            clients = clients.Where(c => c.AcctNumber.ToString().Contains(searchStringAcctNum));
        }

        // Sorting
        switch (sortOrder)
        {
            case "lastName_desc":
                clients = clients.OrderByDescending(c => c.LastName);
                break;
            case "acctNumber":
                clients = clients.OrderBy(c => c.AcctNumber);
                break;
            case "acctNumber_desc":
                clients = clients.OrderByDescending(c => c.AcctNumber);
                break;
            case "firstName_desc":
                clients = clients.OrderByDescending(c => c.FirstName);
                break;
            case "firstName":
                clients = clients.OrderBy(c => c.FirstName);
                break;
            case "SSN":
                clients = clients.OrderBy(c => c.SSN);
                break;
            case "SSN_desc":
                clients = clients.OrderByDescending(c => c.SSN);
                break;
            default:
                clients = clients.OrderBy(c => c.LastName);
                break;
        }

        // Pagination
        int pageSize = 12;

        Clients = await PaginatedList<Client>.CreateAsync(
            clients.AsNoTracking(), pageIndex ?? 1, pageSize);
    }

This is the Razor Page:

 <table class="table">
     <thead>
         <tr>
             <th>
                 @Html.DisplayNameFor(model => model.Clients[0].ClientId)
             </th>
             <th>
                 <a asp-page="./Index" asp-route-sortOrder="@Model.AcctNumberSort"
               asp-route-currentFilter="@Model.FilterAcctNum">
                     @Html.DisplayNameFor(model => model.Clients[0].AcctNumber)
                 </a>
             </th>
             <th>
                 <a asp-page="./Index" asp-route-sortOrder="@Model.FirstNameSort"
               asp-route-currentFilter="@Model.FilterFN">
                     @Html.DisplayNameFor(model => model.Clients[0].FirstName)
                 </a>
             </th>
             <th>
                 <a asp-page="./Index" asp-route-sortOrder="@Model.LastNameSort"
               asp-route-currentFilter="@Model.FilterLN">
                @Html.DisplayNameFor(model => model.Clients[0].LastName)
                 </a>
             </th>
             <th>
                 @Html.DisplayNameFor(model => model.Clients[0].MdlInit)
             </th>
             <th>
                 <a asp-page="./Index" asp-route-sortOrder="@Model.SSNSort"
               asp-route-currentFilter="@Model.FilterSSN">
                     @Html.DisplayNameFor(model => model.Clients[0].SSN)
                 </a>
             </th>
             <th>
                 @Html.DisplayNameFor(model => model.Clients[0].DOB)
             </th>
             <th>
                 @Html.DisplayNameFor(model => model.Clients[0].InitialEntryDate)
             </th>
             <th></th>
         </tr>
     </thead>
     <tbody>
         @foreach (var item in Model.Clients)
         {
         <tr>
             <td>
                 @Html.DisplayFor(modelItem => item.ClientId)
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.AcctNumber)
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.FirstName)
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.LastName)
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.MdlInit)
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.SSN, "SSN")
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.DOB)
             </td>
             <td>
                 @Html.DisplayFor(modelItem => item.InitialEntryDate)
             </td>
             <td>
                 <a asp-page="./Edit" asp-route-id="@item.ClientId">Edit Client</a> |
                 <a asp-page="./Details" asp-route-id="@item.ClientId">Transactions</a>
             </td>
         </tr>
         }
     </tbody>
 </table>

 @{
     var prevDisabled = !Model.Clients.HasPreviousPage ? "disabled" : "";
     var nextDisabled = !Model.Clients.HasNextPage ? "disabled" : "";
 }


     <a asp-page="./Index"
         asp-route-SortOrder="@Model.CurrentSort"
         asp-route-pageIndex="@(Model.Clients.PageIndex - 1)"
         asp-route-currentFilter="@Model.CurrentFilter"

         class="btn btn-default @prevDisabled">
         Previous
     </a>

     <a asp-page="./Index"
         asp-route-sortOrder="@Model.CurrentSort"
         asp-route-pageIndex="@(Model.Clients.PageIndex + 1)"
         asp-route-currentFilter="@Model.CurrentFilter"

         class="btn btn-default @nextDisabled">
         Next
     </a>

Ultimately I need the pagination to retain the search terms and the sort order while moving through the pages of results. If this is simply not possible, then I would like to know how to eliminate the pagination and use some other kind of collection to achieve the outcome of retaining the ability to search concurrently on multiple fields.

Answer 1

When creating the paging links you need to pass all query string parameters to generate the new page url.

It can be done by hardcoding all query string values (including search filters) using asp-route-...="xxx" .

Another way is to get current page query string value (starting from '?') and replace only the page number and generate the new url:

<a href="@CreateUrl(Model.Clients.PageIndex - 1)">Previous</a>
<a href="@CreateUrl(Model.Clients.PageIndex + 1)">Next</a>

@{
    string CreateUrl(int index)
    {
        // Split the query string to individual parameters
        // e.g. [ "pageIndex=1", "searchString=blablabla", ...]
        var queryStringList = Request.QueryString.Value.Split('&').ToList();

        // Loop throw the parameters and increase the page index
        for (int i = 0; i < queryStringList.Count(); i++)
        {
            var qs = queryStringList[i];
            queryStringList[i] = qs.StartsWith("pageIndex=") ? $"pageIndex={index}" : qs;
        }

        // Reconstrcu the url
        return string.Join("&", queryStringList);
    }
}

Or you may simply use regex to replace the value without splitting and recreating the url:

<a href="@CreateUrl(Model.Clients.PageIndex - 1)">Previous</a>
<a href="@CreateUrl(Model.Clients.PageIndex + 1)">Next</a>

@{
    string CreateUrl(int index)
    {
        var input = Request.QueryString.Value;
        var replacement = $"pageIndex={index}";
        var pattern = @"pageIndex=\d+";
        return System.Text.RegularExpressions.Regex.Replace(input, pattern, replacement);
    }
}

Or use a pagination tag helper nuget that can handle all complex pagination logic, like LazZiya.TagHelpers , install from nuget:

Install-Package LazZiya.TagHelpers -Version 3.0.2

Add paging tag helper to _ViewImports:

@addTagHelper *, LazZiya.TagHelpers

Then use it where you need a paging control:

<paging 
    total-records="Model.TotalRecords" 
    page-no="Model.PageNo"
    query-string-key-page-no="pageIndex"
    query-string-value="@(Request.QueryString.Value)">
</paging>

See tutorial , live demo and docs