私はASP.NET MVCにおり、私のデータベースから自分の画面にデータを表示しています。 2つのオプション(オプション1とオプション2)に基づいてデータをフィルタリングするために、ページの上部にドロップダウンリストがあります。ページ分割によってドロップダウンリストフィルタがリセットされるのはなぜですか?
私はAJAXを追加して、フィルタに基づいて画面上のデータを更新するPartialViewを読み込みました。
私は改ページとページを変更するたびに私の問題は、私のフィルタは最初の選択肢、例えばオプション1
、ページのロードにリセットされ、そして、私はオプション2にドロップダウンリストフィルタを切り替えます。オプション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にリセットされます、なぜ誰もが見ることができます?
EDIT
コントローラ
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);
}
コントローラのコードを共有してください。 – JCM
@JCMコントローラが追加されました – Reeggiie