Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
19466 Spanish (Nicaragua) español (Nicaragua)
6154 Spanish (Panama) español (Panamá)
15370 Spanish (Paraguay) español (Paraguay)
10250 Spanish (Peru) español (Perú)
4096 Spanish (Philippines) español (Filipinas)
20490 Spanish (Puerto Rico) español (Puerto Rico)
3082 Spanish (Spain, International Sort) español (España, alfabetización internacional)
21514 Spanish (United States) español (Estados Unidos)
14346 Spanish (Uruguay) español (Uruguay)
8202 Spanish (Venezuela) español (Venezuela)
4096 Standard Moroccan Tamazight ⵜⴰⵎⴰⵣⵉⵖⵜ
4096 Standard Moroccan Tamazight (Tifinagh) ⵜⴰⵎⴰⵣⵉⵖⵜ
4096 Standard Moroccan Tamazight (Tifinagh, Morocco) ⵜⴰⵎⴰⵣⵉⵖⵜ (ⵍⵎⵖⵔⵉⴱ)
29 Swedish svenska
4096 Swedish (Åland Islands) svenska (Åland)
2077 Swedish (Finland) svenska (Finland)
1053 Swedish (Sweden) svenska (Sverige)
132 Swiss German Schwiizertüütsch
4096 Swiss German (Liechtenstein) Schwiizertüütsch (Liächteschtäi)
4096 Swiss German (Switzerland) Schwiizertüütsch (Schwiiz)
90 Syriac ܣܘܪܝܝܐ
1114 Syriac (Syria) ܣܘܪܝܝܐ (ܣܘܪܝܐ)
4096 Tachelhit ⵜⴰⵛⵍⵃⵉⵜ
4096 Tachelhit (Latin) Tashelḥiyt
4096 Tachelhit (Latin, Morocco) Tashelḥiyt (lmɣrib)

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>