[RESOLVED]ASP,NET MVC 4 Ajax Paging with Filter

Hello,

I have an ASP.NET MVC 4 application to implement log viewing page with ajax paging using PagedList and PagedList.Mvc(got from NuGet). I also implement two filters with displaying the table. My question is how could I pass the filter with ajax call.

My code:

Controller:

public ActionResult Logs(string currentFiler, int? page)
{

     const int pageSize = 10; //for testing purpose, to be adjustetd
     int pageIndex = (page ?? 1) – 1;
     int pageNumber = (page ?? 1);

     IEnumerable<LoggingDashBoardViewModel> logs = _logReportingReposioty.GetAllLogs().OrderByDescending(d => d.LogDateTime);//.Take(10); //.Skip(pageSize * (page – 1));

     var Logs = logs.ToPagedList(pageNumber, pageSize);

     if (Request.IsAjaxRequest())
     return PartialView("_Logs", Logs);

     return View(Logs);
}

View(Logs.cshtml):

@model PagedList.IPagedList<ProMaster.Infrastructure.Logging.ViewModels.LoggingDashBoardViewModel>

<div class="content_info">
<div class="log_head" style="margin-top: -.5em; width: 97%; margin-left: -0.1em;">
<span>
Log Level:
<select id="level" style="background-color: rgb(238, 240, 241); font-size: .95em;">
<option value="1">ALL</option>
<option value="2">INFO</option>
<option value="3">WARN</option>
<option value="4">ERROR</option>
</select>
</span>
<span>
Log Period:
<select id="period" style="background-color: rgb(238, 240, 241); font-size: .95em;">
<option value="1">All</option>
<option value="2">Last 7 Days</option>
<option value="3">Last 14 Days</option>
<option value="4">Last 30 Days</option>
<option value="5">Last 180 Days</option>
</select>
</span>

</div>

<div id="loglist">
@Html.Partial("_Logs")

</div>

<br />

</div>

and ParialView(_Logs.cshtml)

<table>

….

</table>

<span id="pager" style="float:right;">

     @Html.PagedListPager(Model, page => Url.Action("Logs", new { page, currenFilter = ViewBag.CurrentFiler }), new PagedListRenderOptions {

           LinkToFirstPageFormat = "<<",
           LinkToPreviousPageFormat = "<",
           LinkToNextPageFormat = ">",
           LinkToLastPageFormat = ">>",

})

</span>

<script type="text/javascript">

$(‘#pager’).on(‘click’, ‘a’, function () {
/

$.ajax({
url: this.href,
type: ‘GET’,
cache: false,
success: function (result) {
$(‘#loglist’).html(result);
}
});
return false;
});
</script>

The issue I have is the first ajax call with filter works as expected, but by clicking on 2nd page, the filter is lost, I guess I need to get the filter inside the ajax call, but how, please help and point me to a solution.

Thanks so much in advance.

Hi,

According to your discription, it seems that maybe your search string for filter is lost by clicking on 2nd page. If that, you can try passing the parameter via using the data option of the $.ajax function.

For more information, please refer to the similar discussion:

http://stackoverflow.com/questions/8486132/jquery-ajax-passing-value-from-mvc-view-to-controller

Leave a Reply