Как сделать пейджинг с использованием частичного просмотра в asp.net MVC 5

Question

Я попытался сделать пейджинг из источника здесь , и он не работает правильно с частичным представлением. Похоже, учебник возвращается с json, но я использовал, чтобы вернуться с частичнымпосмотреть с моделью. Пейджинг не работает, и я думаю PaggingTemplate (response.TotalPages, response.CurrentPage) этот код не работает. Пожалуйста, помогите мне с этим.

_PostList

вот мое частичное представление. пожалуйста, вы можете проверить мой частичный вид.

@using PagedList
@model AungMyoSannPortal.Models.PagedData<AungMyoSannPortal.Models.Post>
@foreach (var item in Model.Data)
{
    <div class="container-fluid" style="margin-top:25px!important">
        <div class="col-sm-8" style="padding-left:30%">
            <div class="card w-40" style=" max-width: 60rem; border: 1px solid; padding: 0px; ">
                <img src="~/Content/images/pic01.jpg" />
                <div class="card-body" style="font-family: Times New Roman, Times, serif;">
                    <div><b>@item.PostTitle</b></div>
                    <br />
                    <div class="card-footer">
                        <div class="row">
                            <div class="col-sm-2">
                                <i class="fa fa-thumbs-up" style="font-size:20px;cursor:pointer; color:black;"><i style="font-family: Times New Roman, Times, serif; font-style:normal;margin-left:10px">Like</i></i>
                            </div>
                            <div class="col-sm-3">
                                <i class="fa fa-commenting" style="font-size:20px;cursor:pointer; color:black;margin-right:80%" onclick="ADD1(@item.Id)"><i style="font-family: Times New Roman, Times, serif; font-style:normal;margin-left:10px">Comment</i></i>
                            </div>
                            <div class="col-sm-2">
                                <i class="fa fa-share-square-o" style="font-size:20px;cursor:pointer; color:black;"><i style="font-family: Times New Roman, Times, serif; font-style:normal;margin-left:10px">Share</i></i>
                            </div>
                        </div>
                    </div>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div id="addmodal"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
}

<br />
<div class="row justify-content-center">
    <div id="paged">
    </div>
</div>

Post.cshtml

@{
    ViewBag.Title = "Post";
}
<div class="container-fluid">
    <div class="col-sm-8" style="padding-left:30%">
        <div class="card w-40" style="text-align:center; max-width: 60rem;">
            <div style="background-color:#0077B5; color:white;">
                <i class="fa fa-pencil-square-o" style="font-size:36px;cursor:pointer; padding:20px" onclick="PostADD()"><i style="font-family: Times New Roman, Times, serif; font-style:normal">&nbsp;&nbsp;&nbsp;Start Post</i></i>
            </div>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

                <div id="addmodal"></div>

            </div>
        </div>
    </div>
</div>

<div class="PostList">
</div>

@section scripts{

    <script type="text/javascript">
        $(function () {
            PostList();
             @*PostList('@Url.Action("_PostList", "Community")', '.PostList');
            initComponents();*@
        });

             @*function initComponents() {
            $('.PostList').on("click", ".pagedList a", function (e) {
                e.preventDefault();
                var $a = $(this).attr("href");
                try {
                    var buttonlink  = $a.split(/=/);
                    page = buttonlink [1];
                    if (page == null) {
                        page = 1;
                    }
                }
                catch (e) {
                    page = 1;
                }

                PostList('@Url.Action("_PostList", "Community")', '.PostList');
            });
        }*@

        function PostList() {
            $.ajax({
                cache: false,
                url: "@Url.Action("_PostList", "Community")",
                beforeSend: function () {

                },
                success: function (PostData) {
                    $(".PostList").empty().append(PostData);
                },
                complete: function () {

                }
            });
        }

        function CommentList() {
            $.ajax({
                cache: false,
                url: "@Url.Action("_CommentList", "Community")",
                beforeSend: function () {

                },
                success: function (CommentData) {
                    $(".CommentList").empty().append(CommentData);
                },
                complete: function () {

                }
            });
        }

        function PostADD() {

            $('#myModal').modal('show');
            $.ajax({
                cache: false,
                url: '@Url.Action("_Form", "Community")',
                 data: {
                    FormType: 'Add',
                    ID:0
                },
                beforeSend: function () {

                },
                success: function (myData) {
                    if (myData != null) {

                        $("#addmodal").empty().append(myData);
                    }

                },
               complete: function () {
                    $("#addform").submit(function (e) {
                        e.preventDefault();
                        $.ajax({
                            cache: false,
                            url: '@Url.Action("ADD", "Community")',
                            type: "POST",
                            data: $(this).serialize(),
                            beforeSend: function () {

                            },
                            success: function (myData) {
                                if (myData != null) {
                                    alert("Success");
                                    $('#myModal').modal('hide');

                                }

                            },
                            complete: function () {

                            }

                        });
                    });


                }

            })
        }

          function ADD(id) {
                     ADD1(id);
          }

         function ADD1(ID) {

            $('#myModal').modal('show');
            $.ajax({
                cache: false,
                url: '@Url.Action("_ComForm", "Community")',
                 data: {
                    FormType: 'Add',
                    ID:ID
                },
                beforeSend: function () {

                },
                success: function (myData) {
                    if (myData != null) {

                        $("#addmodal").empty().append(myData);
                    }

                },
               complete: function () {
                    $("#addform").submit(function (e) {
                        e.preventDefault();
                        $.ajax({
                            cache: false,
                            url: '@Url.Action("ComADD", "Community")',
                            type: "POST",
                            data: $(this).serialize(),
                            beforeSend: function () {

                            },
                            success: function (myData) {
                                if (myData != null) {
                                    alert("Success");
                                    $('#myModal').modal('hide');

                                }

                            },
                            complete: function () {

                            }

                        });
                    });


                }

            })
        }



       $(document).ready(function () {
        //Initially load pagenumber=1
        GetPageData(1);
    });
    function GetPageData(pageNum, pageSize) {
        //After every trigger remove previous data and paging
        $(".PostList").empty();
        $("#paged").empty();
        $.ajax({
                cache: false,
                url: '@Url.Action("_PostList","Community")',
                data: {   pageNumber: pageNum,
                    pageSize: pageSize 
                },

                beforeSend: function () {

                },
                success: function (response) { 
                //   var rowData;
                //for (var i = 0; i < response.Data.length; i++) {
                //    rowData = rowData + '<tr><td>' + response.Data[i].Id + '</td><td>' + response.Data[i].Name + '</td></tr>';

                 $(".PostList").append(response);
                PaggingTemplate(response.TotalPages, response.CurrentPage);

                },
                complete: function () {

                }
            });

    }
    //This is paging temlpate ,you should just copy paste
    function PaggingTemplate(totalPage, currentPage) {
        var template = "";
        var TotalPages = totalPage;
        var CurrentPage = currentPage;
        var PageNumberArray = Array();


        var countIncr = 1;
        for (var i = currentPage; i <= totalPage; i++) {
            PageNumberArray[0] = currentPage;
            if (totalPage != currentPage && PageNumberArray[countIncr - 1] != totalPage) {
                PageNumberArray[countIncr] = i + 1;
            }
            countIncr++;
        };
        PageNumberArray = PageNumberArray.slice(0, 5);
        var FirstPage = 1;
        var LastPage = totalPage;
        if (totalPage != currentPage) {
            var ForwardOne = currentPage + 1;
        }
        var BackwardOne = 1;
        if (currentPage > 1) {
            BackwardOne = currentPage - 1;
        }

        template = "<p>" + CurrentPage + " of " + TotalPages + " pages</p>"
        template = template + '<ul class="pager">' +
            '<li class="previous"><a href="#" onclick="GetPageData(' + FirstPage + ')"><i class="fa fa-fast-backward"></i>&nbsp;First</a></li>' +

            '<li><a href="#" onclick="GetPageData(' + BackwardOne + ')"><i class="glyphicon glyphicon-backward"></i></a>';

        var numberingLoop = "";
        for (var i = 0; i < PageNumberArray.length; i++) {
            numberingLoop = numberingLoop + '<a class="page-number active" onclick="GetPageData(' + PageNumberArray[i] + ')" href="#">' + PageNumberArray[i] + ' &nbsp;&nbsp;</a>'
        }
        template = template + numberingLoop + '<a href="#" onclick="GetPageData(' + ForwardOne + ')" ><i class="glyphicon glyphicon-forward"></i></a></li>' +
            '<li class="next"><a href="#" onclick="GetPageData(' + LastPage + ')">Last&nbsp;<i class="fa fa-fast-forward"></i></a></li></ul>';
        $("#paged").append(template);
        $('#selectedId').change(function () {
            GetPageData(1, $(this).val());
        });
    }
    </script>

}

контроллер

 public ActionResult _PostList(int pageNumber = 1, int pageSize = 5)
        {
            using (AungMyoSannABCContext post = new AungMyoSannABCContext())
            {

                List<Post> listData = post.Post.ToList();
                var pagedData = Pagination.PagedResult(listData, pageNumber, pageSize);
                return PartialView("_PostList", pagedData);
                //return Json(pagedData, JsonRequestBehavior.AllowGet);
                //PostCount<Post> result = new PostCount<Post>();
                //var pagedList = new StaticPagedList<Post>(result.Result, page, pageSize, result.TotalCount);
                //var model = new PostCountList<Post>
                //{
                //    Result = pagedList,
                //    TotalPage = result.TotalPage,
                //    TotalCount = result.TotalCount
                //};
                //return PartialView("_PostList", model);
                //List<Post> result = post.Post.ToList();
                //return PartialView("_PostList", result);
            }
        }