为什么分页导致我的下拉列表过滤器重置？

Question

我在 ASP.NET MVC 中，我正在将数据库中的数据显示到我的屏幕上。我在页面顶部有一个下拉列表，用于根据 2 个选项（选项 1 和选项 2）过滤数据。

我添加了 AJAX 来加载一个 PartialView，它将根据过滤器更新屏幕上的数据。

我的问题是，每当我更改分页页面时，我的过滤器都会重置为第一个选项，即选项 1。

例如，页面加载，我将下拉列表过滤器切换到选项 2。选项 2 数据正确显示在屏幕上。我尝试通过分页转到第 2 页。数据显示第 2 页，但过滤器已切换回选项 1，现在显示选项 1 数据（它应该停留在选项 2 上，我应该看到选项 2 的数据）。

以下是我的观点和部分观点：

查看

//Dropdown list with 2 options to filter data
@Html.DropDownList("Filter", new SelectList(Model.comboBoxFilerValues), new    { @id = "filterDropdown" }) 

//Everything in this div gets reloaded by AJAX with the partial view
<div id="reportTable">
<table id="lifeUsage">
    <thead>
        <tr>
            //print table header
            @foreach (var column in Model.columnHeaders) columns
            {
                <td>
                    @column
                </td>
            }
        </tr>
    </thead>
        //print data with paged list for pagination
        @foreach (System.Data.DataRow row in Model.plist)
        {
            <tr>
                @foreach (var cell in row.ItemArray)
                {
                    <td>@cell</td>
                }
            </tr>

        }
</table>
//pagination page control
@Html.PagedListPager(Model.plist, page => Url.Action("Index", new { page }))
</div>


@section scripts
{
<script>
    $(document).ready(function () {

       $('#filterDropdown').change(function () {

            var filter = $('#filterDropdown').val();//value selected from droplist list 

            $.ajax({
                type: "GET",
                url: "/Home/FilterReport",
                data: {
                    filterValue: filter
                    }
            }).done(function (partialViewResult) {   
                $('#reportTable').html(partialViewResult);//load new partial view with filtered data


            });
        });
    });
</script>
}

局部视图

<table id="lifeUsage">
<thead>
    <tr>
        @foreach (var column in Model.columnHeaders)
        {
            <td>
                @column
            </td>
        }
    </tr>
</thead>

@foreach (System.Data.DataRow row in Model.plist)
{
    <tr>
        @foreach (var cell in row.ItemArray)
        {
            <td>@cell</td>
        }
    </tr>

}
</table>
@Html.PagedListPager(Model.plist, page => Url.Action("Index", new { page }))

谁能看到为什么我的下拉列表过滤器在我切换页面时重置为选项 1？

编辑

控制器

 public class HomeController : Controller
{
    QueryService data = new QueryService("connection");

    public ActionResult Index(string filter, int? page)
    {
        DataTableModel lifeUsageReport = new DataTableModel();
        lifeUsageReport.columnHeaders = new List<string>();
        lifeUsageReport.list = data.GetLifeUsageReport(filter).Tables[0].AsEnumerable().ToList();
        lifeUsageReport.plist = new PagedList<DataRow>(lifeUsageReport.list, page ?? 1, 10);
        lifeUsageReport.comboBoxFilerValues = new List<string>();
        foreach(DataColumn column in data.GetLifeUsageReport(filter).Tables[0].Columns)
        {
            lifeUsageReport.columnHeaders.Add(column.Caption);
        }
        foreach(DataRow row in data.GetLifeUsageReport(filter).Tables[1].Rows)
        {
            lifeUsageReport.comboBoxFilerValues.Add(row.ItemArray[0].ToString());
        }
        return View(lifeUsageReport);
    }

    [HttpGet]
    public ActionResult FilterReport(string filterValue, int? page)
    {
        List<string> headers = new List<string>();

        foreach (DataColumn column in data.GetLifeUsageReport(filterValue).Tables[0].Columns)
        {
            headers.Add(column.Caption);
        }


        FilteredReportViewModel model = new FilteredReportViewModel()
        {
            plist = new PagedList<DataRow>   (data.GetLifeUsageReport(filterValue).Tables[0].AsEnumerable().ToList(), page ?? 1, 10),
            columnHeaders = new List<string>(headers)

        };

        return PartialView("_FilteredReportPartialView",model);
    }

Answer 1

@Reeggiie：问题是您在分页上调用索引操作，因此您将一遍又一遍地返回整个视图。你要做的是检查是否有 Ajax 请求。

在您的索引操作中检查它是否是 Ajax 请求：

if (Request.IsAjaxRequest())
{
    return PartialView("_FilteredReportPartialView", model);
}

希望对你有帮助。