Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Tachelhit (Tifinagh) ⵜⴰⵛⵍⵃⵉⵜ
4096 Tachelhit (Tifinagh, Morocco) ⵜⴰⵛⵍⵃⵉⵜ (ⵍⵎⵖⵔⵉⴱ)
4096 Taita Kitaita
4096 Taita (Kenya) Kitaita (Kenya)
40 Tajik Тоҷикӣ
31784 Tajik (Cyrillic) тоҷикӣ
1064 Tajik (Cyrillic, Tajikistan) тоҷикӣ (Тоҷикистон)
73 Tamil தமிழ்
1097 Tamil (India) தமிழ் (இந்தியா)
4096 Tamil (Malaysia) தமிழ் (மலேசியா)
4096 Tamil (Singapore) தமிழ் (சிங்கப்பூர்)
2121 Tamil (Sri Lanka) தமிழ் (இலங்கை)
4096 Tasawaq Tasawaq senni
4096 Tasawaq (Niger) Tasawaq senni (Nižer)
68 Tatar Татар
1092 Tatar (Russia) Татар (Россия)
74 Telugu తెలుగు
1098 Telugu (India) తెలుగు (భారత దేశం)
4096 Teso Kiteso
4096 Teso (Kenya) Kiteso (Kenia)
4096 Teso (Uganda) Kiteso (Uganda)
30 Thai ไทย
1054 Thai (Thailand) ไทย (ไทย)
81 Tibetan བོད་ཡིག
1105 Tibetan (China) བོད་ཡིག (ཀྲུང་ཧྭ་མི་དམངས་སྤྱི་མཐུན་རྒྱལ་ཁབ།)

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>