Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 French (Seychelles) français (Seychelles)
4108 French (Switzerland) français (Suisse)
4096 French (Syria) français (Syrie)
4096 French (Togo) français (Togo)
4096 French (Tunisia) français (Tunisie)
4096 French (Vanuatu) français (Vanuatu)
4096 French (Wallis and Futuna) français (Wallis-et-Futuna)
9228 French Congo (DRC) français (Congo, République démocratique du)
4096 Friulian furlan
4096 Friulian (Italy) furlan (Italie)
103 Fulah Fulah
31847 Fulah Fulah
4096 Fulah (Cameroon) Pulaar (Kameruun)
4096 Fulah (Guinea) Pulaar (Gine)
2151 Fulah (Latin, Senegal) Fulah (Sénégal)
4096 Fulah (Mauritania) Pulaar (Muritani)
1127 Fulah (Nigeria) Pulaar (Nigeria)
86 Galician galego
1110 Galician (Galician) galego (galego)
4096 Ganda Luganda
4096 Ganda (Uganda) Luganda (Yuganda)
55 Georgian ქართული
1079 Georgian (Georgia) ქართული (საქართველო)
7 German Deutsch
3079 German (Austria) Deutsch (Österreich)

Setup for ajax

  • Create a div element that will handle the updated the content
    <div class="items"></div>
  • Create a partial view to render in the target area e.g. PagingItemsPartial.cshtml. The partial view model is the same as the page model in out sample PagingAjaxModel.
  • Put the paging taghelper in the partial, currently it supports only "replace" mode for ajax, thats why we have to keep the paging inside the partial, so it will refresh with the partial data accordingly.
  • Use ajax-... attributes to add ajax support to the PagingTagHelper.
  • In the backend, create the relevant handler that will return the partial view via ajax.
  • Add reference to ajax in the Scripts section:
    <script src="https://cdn.jsdelivr.net/npm/jquery-ajax-unobtrusive@3.2.6/dist/jquery.unobtrusive-ajax.min.js"></script>

Sample partial view with Paging control included

            
@model PagingAjaxModel

<table class="table table-striped">
    <thead>
        <tr>
            <th>LCID</th>
            <th>English Name</th>
            <th>Native Name</th>
        </tr>
    </thead>
    <tbody>
        @if (Model.TotalRecords == 0)
        {
            <tr>
                <td colspan="3">No records!</td>
            </tr>
        }
        else
        {
            foreach (var c in Model.CulturesList)
            {
                <tr>
                    <td>@c.LCID</td>
                    <td>@c.EnglishName</td>
                    <td>@c.NativeName</td>
                </tr>
            }
        }
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">
                <paging page-no="Model.P"
                        page-size="Model.S"
                        total-records="Model.TotalRecords"
                        ajax="true"
                        ajax-url="?handler=AjaxPaging"
                        ajax-update="#items"
                        ajax-loading="#loading-spinner"></paging>
            </td>
        </tr>
    </tfoot>
</table>