首页 > 解决方案 > 当我单击第 2 页或无法在第 2 页应用过滤器时,过滤器正在重置

问题描述

我创建了一个使用分页的页面。问题是当我应用过滤器时。它只应用于第一页;当我点击第二页时,过滤器被重置。如果我在第二页上应用过滤器,它会带我回到第一页。

以下代码用于我将应用过滤器的索引页面。

<nav aria-label="DemandPaging">
    @await this.Component.InvokeAsync("Pager", new { pagingList = this.Model.Esas })
</nav>

<nav aria-label="Paging">
    <vc:pager paging-list="@Model" />
</nav>
<form asp-controller="Esa" asp-action="Index" method="post">
    <div>
        @Html.Label("Filter By:")
        @Html.DropDownListFor(model => model.SelectedStatus,
       new SelectList(Enum.GetValues(typeof(Status))),
       "")
        <input type="submit" value="Enter" />
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.EsaProjectId)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EsaProjectName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EmpName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Designation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.StartDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EndDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Billability)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Location)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Allocation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.NblReason)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Comments)
                    </th>
                    <th>  @Html.DisplayNameFor(model => model.Status)</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Esas)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.EsaProjectId)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.EsaProjectName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.EmpName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Designation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.StartDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.EndDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Billability)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Location)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Allocation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.NblReason)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Comments)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Status)
                        </td>
                        <td>
                            @*<a asp-action="Edit" asp-route-id="@item.CtsEmpId">Edit</a> |
                                <a asp-action="Details" asp-route-id="@item.CtsEmpId">Details</a> |
                                <a asp-action="Delete" asp-route-id="@item.CtsEmpId">Delete</a>*@
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</form>

控制器如下:

  public async Task<IActionResult> Index(EsaViewModel viewModel, int page = 1)
    {
        int pageSize = 8;
        var query = _context.Esas.AsNoTracking()
                 .OrderBy(s => s.EsaProjectId);
        Status result = viewModel.SelectedStatus;
        if (User.IsInRole("Admin") || User.IsInRole("PMOUser"))
        {
            if (viewModel.SelectedStatus.ToString() == "")
            {
                query = from x in _context.Esas
                        orderby x.Status descending
                        select x;
            }
            else
            {
                query = _context.Esas.AsNoTracking()
                         .Where(s => s.Status == viewModel.SelectedStatus.ToString())
                         .OrderBy(s => s.Status);
            }

        }

        viewModel.Esas = await PagingList.CreateAsync(query, pageSize, page);
        return View(viewModel);

可以请任何人帮助我吗?如何让过滤器保持不变?

标签: c#htmljqueryasp.netasp.net-mvc

解决方案


在您的情况下,在第二页上应用过滤器,它会带您回到第一页。

我有一种预感,当你提交过滤器时,page 参数为 null --> page 为 1

因此,我想您在表单中放置了一个隐藏字段,该位置存储当前页面

(ViewContext.HttpContext.Request.QueryString["page"]: 获取参数名称是您 url 中的页面。例如:http://localhost/?page=2)

--> 它将发送到控制器并使页面参数不为空。

<form asp-controller="Esa" asp-action="Index" method="post">
    <div>
        //Get value page in your url
        @Html.Hidden("page", ViewContext.HttpContext.Request.QueryString["page"])
        @Html.Label("Filter By:")
        @Html.DropDownListFor(model => model.SelectedStatus,
       new SelectList(Enum.GetValues(typeof(Status))),
       "")
        <input type="submit" value="Enter" />
    </div>
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>
                        @Html.DisplayNameFor(model => model.EsaProjectId)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EsaProjectName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EmpName)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Designation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.StartDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.EndDate)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Billability)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Location)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Allocation)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.NblReason)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Comments)
                    </th>
                    <th>  @Html.DisplayNameFor(model => model.Status)</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Esas)
                {
                    <tr>
                        <td>
                            @Html.DisplayFor(modelItem => item.EsaProjectId)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.EsaProjectName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.EmpName)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Designation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.StartDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.EndDate)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Billability)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Location)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Allocation)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.NblReason)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Comments)
                        </td>
                        <td>
                            @Html.DisplayFor(modelItem => item.Status)
                        </td>
                        <td>
                            @*<a asp-action="Edit" asp-route-id="@item.CtsEmpId">Edit</a> |
                                <a asp-action="Details" asp-route-id="@item.CtsEmpId">Details</a> |
                                <a asp-action="Delete" asp-route-id="@item.CtsEmpId">Delete</a>*@
                        </td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
</form>

推荐阅读