Использование X.PagedList в модальном всплывающем окне - PullRequest
Новая
       37

Использование X.PagedList в модальном всплывающем окне

0 голосов
/ 17 января 2020

У меня есть модальное всплывающее окно на странице: 

...
<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 в AjaxOptions из PagedListRenderOptions .EnableUnobtrusiveAjaxReplacing call.

Я подумал, что 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);" позвоните мне, учитывая, что я установил UpdateTargetId в AjaxOptions вызова PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing.

Спасибо за любую помощь ...

1 Ответ

0 голосов
/ 29 января 2020

Исправлена ​​новая запись!

Добавлено 

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

вверху страницы.

...