PagedList.MVC Refresh Partial View

Question

I am calling a partial view with render action

@{ Html.RenderAction("GetEmployerJobs", "Job"); }

my GetEmployerJobs controller action looks like this

public ActionResult GetEmployerJobs(int? p, string id)
{
    var jobs = repository.GetEmployerJobs(id);

    int pageSize = 1;
    int pageNumber = (p ?? 1);

    return PartialView("~/Views/Dashboard/Employer/_GetEmployerJobPartial.cshtml", jobs.ToPagedList(pageNumber, pageSize));
}

And my partial view contains the pager

@Html.PagedListPager(Model, p => Url.Action("GetEmployerJobs", "Job", new { p }))

The call to GetEmployerJobs is a child action so it is not working, if i remove child action attribute, only the partial view is rendered upon pager click.

How do i refresh this partial view after pager click, I looked around for options such as using AJAX but couldn't figure out how to implement it using PagedList.MVC

Answer 1

You Can use ajax to refresh the partial view without refreshing the entire page

First install package jQuery.Ajax.Unobtrusive using command

Install-Package jQuery.Ajax.Unobtrusive

and make sure jQuery-xxxx.js and jquery.unobtrusive-ajax.js are included before the pager

Add the code line @{ Html.RenderAction("GetEmployerJobs", "Job"); } between <div id='ajaxpanel'> tag with id ajaxpanel

then add this java script code after the pager in the partial view

 <script> 
    $(".pagination > li > a").attr('data-ajax-update', '#ajaxpanel');
    $(".pagination > li > a").attr('data-ajax-mode', 'replace');
    $(".pagination > li > a").attr('data-ajax', 'true');
 </script>