Using X.PagedList on a modal pop-up

Question

I've got a modal pop up on a page:

...
<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 -->
...

That I pop up:

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

On that modal dialog I display a list of companies with this PagedListPager on the bottom setup like this:

<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>

When I click on a given page element rendered by the PagedListPager control it does call the the Action " CompanySearch " from the Controller " Admin " as specified in the Url.Action but it renders the PartialView that is returned all by itself on the whole page instead of injecting the partial view into the "#companySearchModalContent" Div I've set as the UpdateTargetId in the AjaxOptions of the PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing call.

I figured the PagedListPager would do this. I added some jQuery code to call the appropriate ajax injection " $('#companySearchModalContent').html(data); " but I don't have a way to get the page number, search and sort parameters to come along with that the user clicked on from the pager control and don't know how to set the url and data appropriately in the .ajax code block.

$('#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;
});

I would expect the PageListPager to make that "$('#companySearchModalContent').html(data);" call for me given that I've set the UpdateTargetId in the AjaxOptions of the PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing call.

Thanks for any help...

Answer 1

Fixed the newel post!

Added

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

at the top of the page.