<!---- //End-bottom-grids---->
    <!--- //End-content---->
    <!--- //Them phan nay vao _Layout.cshtm---->
    @RenderSection("load", required: false)
    <!---start-footer---->
	-----------------------------------
    Sau do add moi 1 PartialView ten la _viewIndex trong thu muc Home
@using PagedList.Mvc
@using PagedList
@model PagedList.IPagedList<MvcApplication2.Models.Product>

@foreach (var item in Model.Select((model, index) => new { model, index }))
{

    <div onclick="location.href='/Product/ProductDetails/@Html.DisplayFor(modelItem => item.model.id)';" class="@((item.index+1) % 3 == 0 ? "product-grid fade last-grid": "product-grid fade")">
        <div class="product-grid-head">
            <ul class="grid-social">
                <li><a class="facebook" href="#"><span> </span></a></li>
                <li><a class="twitter" href="#"><span> </span></a></li>
                <li><a class="googlep" href="#"><span> </span></a></li>
                <div class="clear"> </div>
            </ul>
            <div class="block">
                <div class="starbox small ghosting"> </div> <span> (46)</span>
            </div>
        </div>
        <div class="product-pic">

            <a href="/Product/ProductDetails/@Html.DisplayFor(modelItem => item.model.id)"><img src="../images/product2.jpg" title="product-name" /></a>
            <p>
                <a href="/Product/ProductDetails/@Html.DisplayFor(modelItem => item.model.id)"><small>Nike</small> @Html.DisplayFor(modelItem => item.model.name) <small>Phantom</small> FG</a>
                <span>@Html.DisplayFor(modelItem => item.model.status)</span>
            </p>
        </div>
        <div class="product-info">

            <div class="product-info-cust">
                @Html.ActionLink("Details", "ProductDetails", "Product", new { id = item.model.id }, null)
            </div>
            <div class="product-info-price">



                <a href="/Product/ProductDetails/@Html.DisplayFor(modelItem => item.model.id)">&#163; @Html.DisplayFor(modelItem => item.model.price) </a>

            </div>
            <div class="clear"> </div>
        </div>
        <div class="more-product-info">
            <span> </span>
        </div>
    </div>
}
<div class="clear"> </div>
@Html.PagedListPager(Model, page => Url.Action("Index","Home", new { page }), PagedListRenderOptions.OnlyShowFivePagesAtATime)
--------------------------
sua lai controller Home
public ActionResult Index(int page =1)
        {
            int numpage = page;
            int pagesize = 3;
            ViewData["numpage"] = numpage;
            List<Product> pr = ssde.Products.OrderBy(x => x.date_create).ToList();

            return Request.IsAjaxRequest()
                 ? (ActionResult)PartialView("_viewIndex", pr.ToPagedList(numpage, pagesize))
                : View(pr.ToPagedList(numpage, pagesize));
        }
------------------------------
Index.cshtml thi thay the phan nay
                 <p> Sản phẩm mới nhất</p>
                        <div id="_viewIndex">
                            @Html.Partial("_viewIndex", Model)
                        </div>


                        @section load{
                            <script type="text/javascript">
                                function ChangeUrl(page, url) {
                                    if (typeof (history.pushState) != "undefined") {
                                        var obj = { Page: page, Url: url };
                                        history.pushState(obj, obj.Page, obj.Url);
                                    } else {
                                        alert("Browser does not support HTML5.");
                                    }


                                }
                                    function search() {
                                        $.ajax({

                                            url: "/Home/Index?page=2",
                                            success: function (result) {
                                                ChangeUrl("Index", "/Home/Index?page=2");
                                                $('#_viewIndex').html(result);
                                            }
                                        });
                                    }
                                    function search1() {
                                        $.ajax({

                                            url: "/Home/Index?page=1",
                                            success: function (result) {
                                                ChangeUrl("Index", "/Home/Index?page=1");
                                                $('#_viewIndex').html(result);
                                            }
                                        });
                                    }

                                $(function () {
                                    $('#a').click(function () {
                                        search();
                                    })
                                    $('#test').click(function () {
                                        search();
                                    })
                                    $('#b').click(function () {
                                        search1();
                                    })

                                    $('body').on('click', '#_viewIndex .pagination a', function (event) {
                                        event.preventDefault();
                                        console.log('page');
                                        var url1 = $(this).attr('href');
                                        console.log(url1);

                                        $.ajax({
                                            url: url1,
                                            success: function (result) {
                                                ChangeUrl('Index', url1);
                                                $('#_viewIndex').html(result);
                                            }
                                        });
                                    });
                                })
                            </script>
                        }
                            <div class="clear"> </div>
                        </div>
                    </div>


                    <div class="clear">

                    </div>

                </div>
            </div>

        </body>
    </html>