Pagging use Ajax and Jquerry in Mvc Razor

Question

 I have a view have 10 record , i want when i click buttion loadmore then get add 10 record next from database.

  this is view

@model IEnumerable<demo.Models.Studens>

@{

ViewBag.Title = "Index";

Layout = "~/Views/Shared/_Layout.cshtml";

var page = (int)ViewData["page"];

}

<h2>Index</h2>

@foreach (var item in Model)

{

<div id="listStudent">

<p>@item._ID------@item._Name-----@item._Age----@item._Adress </p>

</div>

} <a class="page-number" href="#">Load more</a>

<script type="text/javascript">

$(document).ready(function () {

$(".page-number").click(function () {

var page = 1;

$.ajax({

type:"POST",

url: '@Url.Action("Index", "Home")',

data: { "page":page+2},

async: true,

success: function (data) {

$("#listStudent").html(data);

}

});

});

});

</script>

 

and cotroller 

 

public ActionResult Index(int page=1)

{

List<Studens> Students = Getdata(page);

ViewData["page"] = page;

return View(Students);

}