使用对控制器的ajax调用创建分页

Question

我有以下.cshtml页：

@model LumpSumInvoice.Business.ViewModels.ProductViewModel
            @{
                App.ButtonNew = true;
            }

            <div class="container">
                <h2>Products</h2>
                <div class="table-responsive-sm">
                    <table class="table table-bordered table-hover">
                        <thead>                                
                            <tr>
                                <th style="display:none;">
                                    @Html.DisplayNameFor(model => model.Id)
                                </th>
                                <th>
                                    @Html.DisplayNameFor(model => model.Id)
                                </th>
                            </tr>                                
                        </thead>
                        <tbody class="tbody"></tbody>
                    </table>
                </div>
            </div>
            <div class="modal animated faster zoomIn" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-md modal-dialog-centered">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="myModalLabel">Add product</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <form>                                    
                                @Html.AntiForgeryToken()                    
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="floating-label-form-group input-group-sm">
                                            <span>
                                                <label for="Name">Name</label>
                                                @Html.EditorFor(model => model.Id, new { htmlAttributes = new { @class = "form-control", disabled = "disabled", placeholder = "Id", style = "display:none;" } })
                                                @Html.ValidationMessageFor(model => model.Id, "", new { @class = "text-danger" })
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-sm-6">
                                        <div class="floating-label-form-group input-group-sm">
                                            <span>
                                                <label for="Name">Name</label>
                                                @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control", placeholder = "Name" } })
                                                @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
                                            </span>
                                        </div>
                                    </div>
                                </div>                                    
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" id="btnAdd" onclick="return Add();">Add</button>
                            <button type="button" class="btn btn-info" id="btnUpdate" style="display:none;" onclick="Update();">Update</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>

            <script src="@Url.Content("~/Scripts/CustomScripts/product-crud.js")"></script>

这是我的Product控制器操作：

    public JsonResult List(int? pageNo)
    {           
        int pageSize = 3;
        int pageNumber = (pageNo ?? 1);            

        var products = productRepositoryService.GetAll(UserId).ToPagedList(pageNumber, pageSize);
        return Json(products, JsonRequestBehavior.AllowGet);
    }

以下是对动作的Ajax调用，它还负责呈现数据表：

function loadProductData() {
$.ajax({
    url: "/Product/List",
    type: "GET",
    contentType: "application/json;charset=utf-8",
    dataType: "json",
    success: function (result) {
        var html = '';
        $.each(result, function (key, item) {
            html += '<tr>';
            html += '<td style="display:none;">' + item.Id + '</td>';
            html += '<td>' + item.Name + '</td>';
            html += '<td><a href="#" class = "btn btn-lump-sum btn-sm fa fa-edit" onclick="return getbyID(' + item.Id + ')"></a> <span></span>' +
                '<div class="delete-section"><a href="#" class = "btn btn-secondary btn-sm fa fa-trash" onclick="Delete(' + item.Id + ')"></a>';
            html += '</tr>';
        });
        $('.tbody').html(html);
    },
    error: function (errormessage) {
        alert(errormessage.responseText);
    }
});
}

我想知道在这种情况下不使用razor语法实现分页的最佳方法是什么？我应该如何调整ajax调用以及如何显示分页（引导）html标记，以将页面值（pageNo）传递给（List）控制器操作？