PagedList loses its values because it keeps invoking httpGet method - asp.net

Question

I have the following code which shows that I am using PagedList to display my search result in a paged order. The problem with it is that at the first result of the search it shows the number of pages related to the search result but once I click on the next page it keeps invoking the method of the page list in the HttpGet rather than keeping browsing the result that came from the the HttpPost method. How can I fix this
Controller:
public ActionResult SearchResult(int? page)
{
var result = from app in db.AllJobModel select app;
return View(result.ToList().ToPagedList(page ?? 1,5));
}
[HttpPost]
public ActionResult SearchResult(string searchTitle, string searchLocation, int? page)
{
setUpApi(searchTitle, searchLocation);
//setUpApi(searchTitle);
var result = db.AllJobModel.Where(a => a.JobTitle.Contains(searchTitle) && a.locationName.Contains(searchLocation));
return View(result.ToList().ToPagedList(page ?? 1, 5));
}
View :
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Post))
{
<div class="job-listing-section content-area">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="sidebar-right">
<!-- Advanced search start -->
<div class="widget-4 advanced-search">
<form method="GET" class="informeson">
<div class="form-group">
<label>Keywords</label>
<input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location">
</div>
<br>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
<i class="fa fa-plus-circle"></i> Date Posted
</a>
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox">
<label for="checkbox15">
Last Hour
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox">
<label for="checkbox17">
Last 7 Days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox18" type="checkbox">
<label for="checkbox18">
Last 30 Days
</label>
</div>
<br>
</div>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content">
<i class="fa fa-plus-circle"></i> Offerd Salary
</a>
<div id="options-content" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
10k - 20k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
20k - 30k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
30k - 40k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
40k - 50k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
50k - 60k
</label>
</div>
<br>
</div>
<input type="submit" value="Update" class="btn btn-success" />
</form>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12">
<!-- Option bar start -->
<div class="option-bar d-none d-xl-block d-lg-block d-md-block d-sm-block">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-7">
<div class="sorting-options2">
<span class="sort">Sort by:</span>
<select class="selectpicker search-fields" name="default-order">
<option>Relevance</option>
<option>Newest</option>
<option>Oldest</option>
<option>Random</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="sorting-options">
<i class="fa fa-th-list"></i>
<i class="fa fa-th-large"></i>
</div>
</div>
</div>
</div>
#foreach (var item in Model)
{
<div class="job-box">
<div class="company-logo">
<img src="~/JobImageUploads/#Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
</div>
<div class="description">
<div class="float-left">
<h5 class="title">#item.JobTitle</h5>
<div class="candidate-listing-footer">
<ul>
<li><i class="flaticon-work"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-time"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-pin"></i>#Html.DisplayFor(modelIem => item.locationName)</li>
</ul>
<h6>Deadline: Jan 31, 2019</h6>
</div>
<div>
#item.JobDescription
</div>
</div>
<div class="div-right">
#Html.ActionLink("Details", "Details", new { id = item.Id }, new { #class = "apply-button" })
Details
<i class="flaticon-heart favourite"></i>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="pagining">
#Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page }))
</div>
}

Answer 1

One solution to preserve browsing results would be to pass searchTitle and searchLocation to your SearchResult GET method as well and keep them in the ViewBag to persist search results on paging.
This is because the PagedList helper uses a Url.Action which invokes the the SearchResults GET request.
EDIT: upon further testing, I would do away with the post method all together and change your form to use the GET method for everything. I have updated the code to reflect this approach.
public ActionResult SearchResult(int? page, string searchTitle = null, string searchLocation = null)
{
ViewBag.searchTitle = searchTitle;
ViewBag.searchLocation = searchLocation;
ViewBag.page = page;
var result = new List<Job>(); //replace with AllJobModel class
if(!string.IsNullOrEmpty(ViewBag.searchTitle) || !string.IsNullOrEmpty(ViewBag.searchTitle))
{
setUpApi(searchTitle, searchLocation);
//setUpApi(searchTitle);
result = db.AllJobModel.Where(a => a.JobTitle.Contains(searchTitle) && a.locationName.Contains(searchLocation));
}
else
{
result = from app in db.AllJobModel select app;
}
return View(result.ToList().ToPagedList(page ?? 1, 5));
}
and then in your view, set the values (if any) in the searchTitle and searchLocation text boxes. Also add them to the pagedList helper so the values persist on paging.
Edit: Also gonna need to add a hidden field to persist the page value on searches.
#using (Html.BeginForm("SearchResult", "Home", FormMethod.Get))
{
<input type="hidden" name="page" value="#ViewBag.page">
<div class="job-listing-section content-area">
<div class="container">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-12">
<div class="sidebar-right">
<!-- Advanced search start -->
<div class="widget-4 advanced-search">
<form method="GET" class="informeson">
<div class="form-group">
<label>Keywords</label>
<input type="text" name="searchTitle" class="form-control selectpicker search-fields" placeholder="Search Keywords" value="#ViewBag.searchTitle">
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="searchLocation" class="form-control selectpicker search-fields" placeholder="Location" value="#ViewBag.searchLocation">
</div>
<br>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content5">
<i class="fa fa-plus-circle"></i> Date Posted
</a>
<div id="options-content5" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox15" type="checkbox">
<label for="checkbox15">
Last Hour
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox16" type="checkbox">
<label for="checkbox16">
Last 24 Hours
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox17" type="checkbox">
<label for="checkbox17">
Last 7 Days
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox18" type="checkbox">
<label for="checkbox18">
Last 30 Days
</label>
</div>
<br>
</div>
<a class="show-more-options" data-toggle="collapse" data-target="#options-content">
<i class="fa fa-plus-circle"></i> Offerd Salary
</a>
<div id="options-content" class="collapse">
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox2" type="checkbox">
<label for="checkbox2">
10k - 20k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox3" type="checkbox">
<label for="checkbox3">
20k - 30k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox4" type="checkbox">
<label for="checkbox4">
30k - 40k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox1" type="checkbox">
<label for="checkbox1">
40k - 50k
</label>
</div>
<div class="checkbox checkbox-theme checkbox-circle">
<input id="checkbox7" type="checkbox">
<label for="checkbox7">
50k - 60k
</label>
</div>
<br>
</div>
<input type="submit" value="Update" class="btn btn-success" />
</form>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12">
<!-- Option bar start -->
<div class="option-bar d-none d-xl-block d-lg-block d-md-block d-sm-block">
<div class="row">
<div class="col-lg-6 col-md-7 col-sm-7">
<div class="sorting-options2">
<span class="sort">Sort by:</span>
<select class="selectpicker search-fields" name="default-order">
<option>Relevance</option>
<option>Newest</option>
<option>Oldest</option>
<option>Random</option>
</select>
</div>
</div>
<div class="col-lg-6 col-md-5 col-sm-5">
<div class="sorting-options">
<i class="fa fa-th-list"></i>
<i class="fa fa-th-large"></i>
</div>
</div>
</div>
</div>
#foreach (var item in Model)
{
<div class="job-box">
<div class="company-logo">
<img src="~/JobImageUploads/#Html.DisplayFor(modelItem => item.UniqueJobImageName)" alt="logo">
</div>
<div class="description">
<div class="float-left">
<h5 class="title">#item.JobTitle</h5>
<div class="candidate-listing-footer">
<ul>
<li><i class="flaticon-work"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-time"></i>#Html.DisplayFor(modelIem => item.maximumSalary)</li>
<li><i class="flaticon-pin"></i>#Html.DisplayFor(modelIem => item.locationName)</li>
</ul>
<h6>Deadline: Jan 31, 2019</h6>
</div>
<div>
#item.JobDescription
</div>
</div>
<div class="div-right">
#Html.ActionLink("Details", "Details", new { id = item.Id }, new { #class = "apply-button" })
Details
<i class="flaticon-heart favourite"></i>
</div>
</div>
</div>
}
</div>
</div>
</div>
</div>
<div class="pagining">
#Html.PagedListPager(Model, page => Url.Action("SearchResult", new
{ page, searchTitle = ViewBag.searchTitle, searchLocation = ViewBag.SearchLocation }))
</div>
}
I know this is a slight change to your original design, so please let me know if you'd like to discuss it further.
Hope this helps you!