Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Central Atlas Tamazight (Arabic) أطلس المركزية التامازيتية
1119 Central Atlas Tamazight (Arabic, Morocco) أطلس المركزية التامازيتية (Morocco)
31839 Central Atlas Tamazight (Latin) Tamaziɣt n laṭlaṣ
2143 Central Atlas Tamazight (Latin, Algeria) Tamaziɣt n laṭlaṣ (Djazaïr)
4096 Central Atlas Tamazight (Latin, Morocco) Tamaziɣt n laṭlaṣ (Meṛṛuk)
30815 Central Atlas Tamazight (Tifinagh) ⵜⴰⵎⴰⵣⵉⵖⵜ
4191 Central Atlas Tamazight (Tifinagh, Morocco) ⵜⴰⵎⴰⵣⵉⵖⵜ (ⵍⵎⵖⵔⵉⴱ)
146 Central Kurdish کوردیی ناوەڕاست
31890 Central Kurdish کوردیی ناوەڕاست
1170 Central Kurdish (Iraq) کوردیی ناوەڕاست (عێراق)
4096 Chechen нохчийн
4096 Chechen (Russia) нохчийн (Росси)
92 Cherokee ᏣᎳᎩ
31836 Cherokee ᏣᎳᎩ
1116 Cherokee (Cherokee, United States) ᏣᎳᎩ (ᏌᏊ ᎢᏳᎾᎵᏍᏔᏅ ᏍᎦᏚᎩ)
4096 Chiga Rukiga
4096 Chiga (Uganda) Rukiga (Uganda)
30724 Chinese 中文
4096 Chinese (Simplified Han, Hong Kong SAR) 中文 (香港特别行政区)
4096 Chinese (Simplified Han, Macao SAR) 中文 (澳门特别行政区)
4 Chinese (Simplified) 中文(简体)
2052 Chinese (Simplified, China) 中文(中国)
4100 Chinese (Simplified, Singapore) 中文(新加坡)
31748 Chinese (Traditional) 中文(繁體)
3076 Chinese (Traditional, Hong Kong SAR) 中文(香港特別行政區)
5124 Chinese (Traditional, Macao SAR) 中文(澳門特別行政區)
1028 Chinese (Traditional, Taiwan) 中文(台灣)
4096 Church Slavic церковнослове́нскїй
4096 Church Slavic (Russia) церковнослове́нскїй (рѡссі́а)
4096 Colognian Kölsch
4096 Colognian (Germany) Kölsch (Doütschland)
4096 Cornish kernewek
4096 Cornish (United Kingdom) kernewek (Rywvaneth Unys)
131 Corsican Corsu
1155 Corsican (France) Corsu (Francia)
26 Croatian hrvatski
4122 Croatian (Bosnia and Herzegovina) hrvatski (Bosna i Hercegovina)
1050 Croatian (Croatia) hrvatski (Hrvatska)
5 Czech čeština
1029 Czech (Czechia) čeština (Česko)
6 Danish dansk
1030 Danish (Denmark) dansk (Danmark)
4096 Danish (Greenland) dansk (Grønland)
140 Dari درى
1164 Dari (Afghanistan) درى (افغانستان)
101 Divehi ދިވެހިބަސް
1125 Divehi (Maldives) ދިވެހިބަސް (ދިވެހި ރާއްޖެ)
4096 Duala duálá
4096 Duala (Cameroon) duálá (Cameroun)
19 Dutch Nederlands

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>