Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Soga (Uganda) Olusoga (Yuganda)
119 Somali Soomaali
4096 Somali (Djibouti) Soomaali (Jabuuti)
4096 Somali (Ethiopia) Soomaali (Itoobiya)
4096 Somali (Kenya) Soomaali (Kiiniya)
1143 Somali (Somalia) Soomaali (Soomaaliya)
4096 South Ndebele isiNdebele
4096 South Ndebele (South Africa) isiNdebele (South Africa)
10 Spanish español
11274 Spanish (Argentina) español (Argentina)
4096 Spanish (Belize) español (Belice)
16394 Spanish (Bolivia) español (Bolivia)
4096 Spanish (Brazil) español (Brasil)
13322 Spanish (Chile) español (Chile)
9226 Spanish (Colombia) español (Colombia)
5130 Spanish (Costa Rica) español (Costa Rica)
23562 Spanish (Cuba) español (Cuba)
7178 Spanish (Dominican Republic) español (República Dominicana)
12298 Spanish (Ecuador) español (Ecuador)
17418 Spanish (El Salvador) español (El Salvador)
4096 Spanish (Equatorial Guinea) español (Guinea Ecuatorial)
4106 Spanish (Guatemala) español (Guatemala)
18442 Spanish (Honduras) español (Honduras)
22538 Spanish (Latin America) español (Latinoamérica)
2058 Spanish (Mexico) español (México)

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>