Paging is not working in MVC4 - asp.net-mvc

Question

I am designing one page where I am displaying some details with paging. Page works fine except paging. When i click on second page nothing happens. All data cureently displayed will also go. Also when i hit on second page control wont go to my action method. This is my pager code.
#Html.PagedListPager(Model.logDetails, page => Url.Action("Index",
new { page, currentFilter = ViewBag.CurrentFilter, filterdateTime=ViewBag.filterdateTimepageSize, }))
Page #(Model.logDetails.PageCount < Model.logDetails.PageNumber ? 0 : Model.logDetails.PageNumber) of #Model.logDetails.PageCount
This is my action method code.
[HttpPost]
public ActionResult Index(int? clientId, DateTime? dateofAction,string typeofDocument,string employeeID,string citizenId,int? currentFilter,DateTime? filterdateTime,int? page)
{
DB_KYC3Entities db = new DB_KYC3Entities();
ViewBag.docTypes = new SelectList(db.tm_doc_type, "doc_typeid", "doctype_name");
if (clientId != null)
{
page = 1;
}
else
{
clientId = currentFilter;
}
if(dateofAction!=null)
{
page = 1;
}
else
{
dateofAction = filterdateTime;
}
ViewBag.CurrentFilter = clientId;
ViewBag.filterdateTime = dateofAction;
int pageSize = 8;
int pageNumber = (page ?? 1);
VerificationLogBAL obj = new VerificationLogBAL();
int docType = obj.GetDocDetails(typeofDocument);
List<logDetails> logDetails = obj.getlogDetails(clientId?? default(int), dateofAction?? DateTime.Now, docType, employeeID, citizenId);
IPagedList<logDetails> pagedLog = logDetails.ToPagedList(pageNumber, pageSize);
logDetailsEnumeration model = new logDetailsEnumeration();
ViewBag.checkData = logDetails.Count;
model = new logDetailsEnumeration()
{
logDetails= pagedLog
};
return View("Index",model);
}
This is my view code.
<div class="forms">
#using (Html.BeginForm("Index", "VerificationLog", FormMethod.Post))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
<div class="message"></div>
<div class="loginUsernamePassword">
<i class="fa fa-user"></i>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dataTable tableHover">
<tr>
<th width="8%" scope="col">Client ID</th>
<th width="20%" scope="col">
<div class="form-box form-box-default">
#Html.TextBox("clientId", ViewBag.CurrentFilter as string, new { #id = "clientId", #placeholder = "Client ID", #class = "form-control", #maxlength = 20 })
</div>
</th>
<th width="10%" scope="col">Date Of Action</th>
<th width="20%" scope="col">
<div class="form-box form-box-default">
#Html.TextBox("dateofAction", ViewBag.filterdateTime as string, new { #id = "dateofAction", #placeholder = "Date Of Action", #class = "txtBox form-control calender validate[required]" })
</div>
</th>
<th width="15%" scope="col">Type Of Document</th>
<th width="17%" scope="col">
<div class="form-box form-box-default">
#*#Html.TextBox("typeofDocument", ViewBag.filterdateTime as string, new { #id = "typeofDocument", #placeholder = "Type Of Document", #class = "form-control", #maxlength = 20 })*#
#Html.DropDownList("docTypes",null,new {#id = "typeofDocument", #placeholder = "Type Of Document", #class = "form-control"})
</div>
</th>
</tr>
<tr>
<th width="15%" scope="col">Employee ID</th>
<th width="17%" scope="col">
<div class="form-box form-box-default">
#Html.TextBox("employeeID", ViewBag.filterdateTime as string, new { #id = "employeeID", #placeholder = "Employee ID", #class = "form-control", #maxlength = 20 })
</div>
</th>
<th width="15%" scope="col">Citizen ID</th>
<th width="17%" scope="col">
<div class="form-box form-box-default">
#Html.TextBox("citizenId", ViewBag.filterdateTime as string, new { #id = "citizenId", #placeholder = "Citizen ID", #class = "form-control", #maxlength = 20 })
</div>
</th>
<th width="10%" scope="col" colspan="2">
<input type="submit" value="Search" class="btn btn-primary btn-cons search" />
</tr>
</table>
</div>
}
</div>
#if (Model != null && Model.logDetails.Count != 0)
{
<br />
<h2>Verification Log</h2>
<br />
<div id="GridDetails">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="dataTable tableHover">
<tr>
<th>Label</th>
<th>Value</th>
<th>UpdatedOn</th>
<th>UpdatedBy</th>
<th>UpdatedStatus</th>
<th>RejectComment</th>
</tr>
#foreach (var group in Model.logDetails)
{
<tr>
<td>#group.contentLabel</td>
<td>#group.contentValue</td>
<td>#group.updatedOn</td>
<td>#group.updatedBy</td>
<td>#group.updatedStatus</td>
<td>#group.rejectComment</td>
</tr>
}
</table>
[HttpGet]
public ActionResult Index()
{
DB_KYC3Entities db = new DB_KYC3Entities();
ViewBag.docTypes = new SelectList(db.tm_doc_type, "doc_typeid", "doctype_name");
return View();
}
When i click on second page control wont go to my index method also. Also i have 5 textboxes so do i need to preserve the all 5 text box values in viewbag? Can someone tell me? Thanks in advance

Answer 1

PagedListPager makes a GET call, not a POST, so you need to remove the [HttpPost] attribute from the Index() method. Associated with that, you need to change the form to also make a GET
#using (Html.BeginForm("Index", "VerificationLog", FormMethod.Get))
And yes, you need to preserve the all 5 text box values in viewbag (or better using a view model) and add those values in the pagers Url.Action() in the same way your are adding currentFilter and filterdateTime