Paging without postback in mvc4

Question

I have to implement paging in MVC4 without postback. I have implemented paging with postback.

public ActionResult Index(int? page)
{
    var model = from r in db.Country                        
                orderby r.Description ascending
                select r;
    int pageSize = 10;
    int pageNumber = (page ?? 1);
    return View(model.ToPagedList(pageNumber, pageSize));           
}

and I have used the below code in view

<div id="pagelist">
Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

@if (Model.HasPreviousPage)
{
    @Ajax.ActionLink("<<", "Index", new { page = 1 },null)
    @Html.Raw(" ");
    @Ajax.ActionLink("< Prev", "Index", new { page = Model.PageNumber - 1 },null)
}
else
{
    @:<<
    @Html.Raw(" ");
    @:< Prev
}

@if (Model.HasNextPage)
{
    @Ajax.ActionLink("Next >", "Index", new { page = Model.PageNumber + 1 },null)
    @Html.Raw(" ");
    @Ajax.ActionLink(">>", "Index", new { page = Model.PageCount },null)
}
else
{
    @:Next >
    @Html.Raw(" ")
    @:>>
}

This code implements paging. But every time when I click on next link, the page refreshes. I want paging without page refresh.

Answer 1

You will want to take a look at Partial Views and Ajax.BeginForm. This will allow you to get new results via ajax which won't cause a postback on the page.

This blog post: http://blachniet.com/2011/08/10/partial-views-with-unobtrusive-ajax/ may help you get started.