pagedlist.mvc ajax,ASP.NET PagedList.MVC for ajax with PartialView

I am using PagedList.Mvc and have a bit of problem. So I have an Index view where I can select country from a dropdownlist and submit using ajax.

View:

@model testModel.Models.Test

@using (Ajax.BeginForm("GetEmployee", "Test", new AjaxOptions

{

HttpMethod = "POST",

UpdateTargetId = "showResult"

}))

{

@Html.AntiForgeryToken()

@Html.DropDownList("CountryId", null, "-- Select Country --")

}

In my GetEmployee Controller method, I am looping through the db and pass the model object to the partial view.

Controller:

[HttpPost]

public ActionResult GetEmployee(int CountryId, int? page)

{

var model = db.Employee

.Include(x => x.Country)

.Where(x => x.Country.CountryId == CountryId)

.ToList();

int pageSize = 3;

int pageNumber = (page ?? 1);

return PartialView("PartialEmployee", model.ToPagedList(pageNumber, pageSize));

}

In my partialEmployee view, I am showing the employee names in the table.

PartialEmployee view:

@model PagedList.IPagedList

@using PagedList.Mvc;

@{

Layout = null;

}

Username

@foreach (var item in Model)

{

@Html.DisplayFor(modelItem => item.EmployeeName)

}

Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@Html.PagedListPager(Model, page => Url.Action("Index", new { page }))

So the problem here is that when I click on the next page (ex: 2) it returns back to the index page without any table showing in UpdateTargetId.

Any suggestions or sample codes would be greatly appreciated.