在模态弹出窗口上使用 X.PagedList

Question

我在页面上弹出了一个模式：

...
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="companySearchModal" aria-hidden="true" id="companySearchModal"> 
      <div class="modal-dialog" role="document"> 
         <div class="modal-content"> 
           <div id="companySearchModalContent"></div> 
         </div><!-- /.modal-content --> 
     </div><!-- /.modal-dialog --> 
   </div><!-- /.modal -->
...

我弹出的那个：

...
    $('#companySearchModalContent').html(data); 
    $('#companySearchModal').modal(options); 
    $('#companySearchModal').modal('show');
...

在那个模态对话框中，我在底部设置中显示了带有此 PagedListPager 的公司列表，如下所示：

<div>
    Page @(Model.PageCount < Model.PageNumber ? 0 : Model.PageNumber) of @Model.PageCount

    <div id="companySearchPager">
        @Html.PagedListPager(
                                Model,
                                page => Url.Action("CompanySearch",
                                                   "Admin",
                                                     new
                                                          {
                                                              sortOrder = ViewBag.CurrentSort,
                                                              currentFilter = ViewBag.CurrentFilter,
                                                              page = page
                                                     }),
                                PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
                                    new AjaxOptions
                                        {
                                            HttpMethod = "GET",
                                            UpdateTargetId = "companySearchModalContent"
                                        }
                                    )
                                )
    </div>
</div>

当我单击由 PagedListPager 控件呈现的给定页面元素时，它会从控制器调用操作“CompanySearch” “Admin”在 Url.Action 中指定，但它呈现返回的 PartialView全部独立于整个页面，而不是将部分视图注入 "#companySearchModalContent" Div 我已设置为 UpdateTargetId 在 PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing 调用的 AjaxOptions 中。

我认为 PagedListPager 可以做到这一点。我添加了一些 jQuery 代码来调用适当的 ajax 注入 "$('#companySearchModalContent').html(data);" 但我没有办法获取页码、搜索和排序参数以及用户从寻呼机控件单击的参数，并且不知道如何设置 url 和 data 适当地在 .ajax 代码块中。

$('#companySearchPager').click(function (e) {
    e.preventDefault();
    $.ajax({           
        type: 'GET',
        // How to get the page value the user clicked on?
        // data: {"page": #},
        // How to get the url? This would work if I could get the page #.
        // url: '@Url.Action("CompanySearch", "Admin")',
        success: function (data) {
            debugger;
            $('#companySearchModalContent').html(data);
        },
        error: function () {
            showAlert("Employer content load failed.", "warning", 5000);
        }
    });
    return false;
});

我希望 PageListPager 生成“$('#companySearchModalContent').html(data);”考虑到我已经在 PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing 调用的 AjaxOptions 中设置了 UpdateTargetId，所以打电话给我。

感谢您的帮助...

Answer 1

修复了 newel post!

已添加

<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

在页面顶部。

在模态弹出窗口上使用 X.PagedList

Using X.PagedList on a modal pop-up

javascript

ajax

jquery

pagedlist