我在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);
}
答案 0 :(得分:0)
@Reeggiie:问题在于你在分页上调用你的索引动作,因此你将一遍又一遍地返回你的整个视图。您需要做的是检查是否存在Ajax请求。
在您的索引操作上检查它是否是Ajax请求:
if (Request.IsAjaxRequest())
{
return PartialView("_FilteredReportPartialView", model);
}
希望它有所帮助。