Ajax is not enabled until after I change another ajax element on the same page about aspnetcore HOT 6 CLOSED

@CybrZr00 HI, thank you for your feedback. Actually, the pager tag will append page={0} as the href attribute of the <a> element. The AJAX feature is enabled when data-ajax attribute is set on the element when you introduced the Microsoft Unobtrusive Ajax library.

It is important to know that AJAX is not provided by the <pager> tag. It ONLY helps you to add data-ajax related attributes on link elements, and the Unobtrusive Ajax library will search for these tags and then add event handler on them to enable the AJAX behavior. In another words, you may try to put <a> tag in your page with data-ajax="true" set on it, and you may test if the AJAX feature is correctly enabled, and then, you should check the generated final HTML code from <pager> tag has the same AJAX related settings, which means the links inside the pager are also AJAX enabled.

Hope the above message is helpful, and please feel free to reply if you have any new question :-)

from aspnetcore.

Ah yes thats probably the issue, I needed to add the extra attributes, or at least some initial defaults. As a work around I used the old way (Obtrusive?) for the initial ajax call in a $(document).ready, which then updated the pager for me, as I was unable to get the setting-link-attr-asp-action="" and setting-link-attr-asp-route-perPage="" to work.

from aspnetcore.

@CybrZr00 Hi, I'm not quite clear about your detailed design, could you please show a minimal example to reproduce the problem?

Thank you and waiting for your kind reply :-)

from aspnetcore.

Hopefully this helps:
I have a master page which loads a partial, it also has some filters:

                <form method="get" asp-controller="Review" asp-action="GetReviews" data-ajax="true" data-ajax-update="#filter" data-ajax-mode="replace">
                    @{
                        var reviewCount = ReviewController.GetReviewsTotalToList();
                        ViewBag.ReviewCount = reviewCount;
                    }
                    <table class="striped bordered">
                        <tr>
                            <th>Reviews per page:</th>
                        </tr>
                        <tr>
                            <td><select name="perPage" onchange="$(this.form).submit();" asp-items="@ViewBag.ReviewCount" id="perPage" class="dropdown-button btn" data-ajax="true" style="max-width:10rem"></select></td>
                        </tr>
                    </table>
                </form>

<div class="reviewView" id="filter" style="margin-bottom:5rem">
        @await Html.PartialAsync("ShowReviewDetails", Model)        
    </div>

That partial has a paged list, this is the code for the pager:

`            Page @(Model.TotalPage < Model.PageIndex ? 1 : Model.PageIndex) of @Model.TotalPage
            <form method="get" data-ajax="true" ajax-mode="replace" ajax-update="#filter" >
                <pager id="pager1"
                       class="pagination"
                       setting-link-attr-data-ajax-update="#filter"
                       setting-link-attr-data-ajax-mode="replace"
                       setting-link-attr-data-ajax="true" />`

When the pager first loads, it doesn't use the routes I need, and doesn't seem to use ajax, even if I use setting-link-attr-asp-controller="" or setting-link-attr-route-GetReview="" but if I use a jquery function to update #filter after page load, all of the url info is placed for me

    var addy = window.location.protocol + "//" + window.location.host + "/";    
    var perPage = $("#perPage").val();
    $("#filter").load(addy + '/Review/GetReviews?perPage=' + perPage);

I now face new problems as I am trying to make an SPA using ViewComponents, and using the pager loads http://url/?page=2 which seems to break things. I can upload the first project in a zip if you like, but I am learning so it might be a mess :)

from aspnetcore.

@CybrZr00 Thank your for your detailed explaination and sorry for delayed reply. Actually, the pager will use the current URL as the base address when generate the pager link. This works for most scenes, however, if you use SPA, frame or other techinques which rendering nested HTML, the base routing address captured by the tag helper may not be the value you actual wanted, this problem is caused by MVC and HTML design. As a workaround, you may manually set the link URL generator, the following code shows an example:

<pager item-default-link='PagerItemLinkGenerators.Custom((int page) => Url.Action("Index", "Home", new { page = page }))' />

In the above code, the pager will generate the link address /Home/Index?page=1 for the first page.

Hope it helps :-)

from aspnetcore.

I'm closing this issue since the author has no response for days. Pelease feel free to reopen it or submit new issues if you have any further problem.

from aspnetcore.