I have created a page where I’m using pagination. The issue is when I apply filter. It’s getting applied only to the first page; when I click on the second page, the filter gets reset. If I apply the filter on the second page it takes me back to first page.
The following code is for the index page where I’ll apply the filter.
<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>
The controller is as follows:
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);
Can please anyone help me with this? How do I get the filter to stay?
Answers:
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
Method 1
In your case, apply filter on the second page it takes you back to first page.
I have a hunch that when you submit filter, the page parameter is null –> page is 1
So that, I suppose you place a hidden field in your form, that the place store current page
(ViewContext.HttpContext.Request.QueryString[“page”]: get parameter
name is page in your url. Ex: http://localhost/?page=2)
–> it’ll send to controller and make the page parameter not null.
<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>
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0