Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Wolaytta ወላይታቱ
4096 Wolaytta (Ethiopia) ወላይታቱ (ኢትዮጵያ)
136 Wolof Wolof
1160 Wolof (Senegal) Wolof (Senegaal)
1073 Xitsonga (South Africa) Xitsonga (South Africa)
4096 Yangben nuasue
4096 Yangben (Cameroon) nuasue (Kemelún)
120 Yi ꆈꌠꁱꂷ
1144 Yi (China) ꆈꌠꁱꂷ (ꍏꉸꏓꂱꇭꉼꇩ)
61 Yiddish ייִדיש
1085 Yiddish (World) ייִדיש (וועלט)
106 Yoruba Èdè Yorùbá
4096 Yoruba (Benin) Èdè Yorùbá (Orílɛ́ède Bɛ̀nɛ̀)
1130 Yoruba (Nigeria) Èdè Yorùbá (Orílẹ́ède Nàìjíríà)
4096 Zarma Zarmaciine
4096 Zarma (Niger) Zarmaciine (Nižer)

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>