为什么分页会导致我的DropDown List过滤器重置?

时间:2016-05-12 14:50:44

标签: c# jquery asp.net ajax pagination

我在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);
    }

1 个答案:

答案 0 :(得分:0)

@Reeggiie:问题在于你在分页上调用你的索引动作,因此你将一遍又一遍地返回你的整个视图。您需要做的是检查是否存在Ajax请求。

在您的索引操作上检查它是否是Ajax请求:

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

希望它有所帮助。