在模式弹出窗口上使用 X.PagedList答案

【问题标题】：Using X.PagedList on a modal pop-up在模式弹出窗口上使用 X.PagedList
【发布时间】：2020-01-17 15:53:03
【问题描述】：

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

...
<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 控件呈现的给定页面元素时，它会从控制器“Admin 调用操作“CompanySearch” >" 在 Url.Action 中指定，但它呈现在整个页面上全部返回的 PartialView，而不是将部分视图注入 " #companySearchModalContent" Div 我已在 PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing 调用的 AjaxOptions 中设置为 UpdateTargetId。

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

$('#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，请给我打电话。

感谢您的帮助...

【问题讨论】：

标签： javascript jquery ajax pagedlist

【解决方案1】：

修复了新帖子！

添加

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

在页面顶部。

【讨论】：