Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
1076 isiXhosa (South Africa) isiXhosa (eMzantsi Afrika)
53 isiZulu isiZulu
1077 isiZulu (South Africa) isiZulu (iNingizimu Afrika)
16 Italian italiano
1040 Italian (Italy) italiano (Italia)
4096 Italian (San Marino) italiano (San Marino)
2064 Italian (Switzerland) italiano (Svizzera)
4096 Italian (Vatican City) italiano (Città del Vaticano)
17 Japanese 日本語
1041 Japanese (Japan) 日本語 (日本)
4096 Javanese Basa Jawa
4096 Javanese Basa Jawa
4096 Javanese (Indonesia) Basa Jawa (Indonesia)
4096 Javanese (Javanese) ꦧꦱꦗꦮ
4096 Javanese (Javanese, Indonesia) ꦧꦱꦗꦮ (Indonesia)
4096 Jola-Fonyi joola
4096 Jola-Fonyi (Senegal) joola (Senegal)
4096 Kabuverdianu kabuverdianu
4096 Kabuverdianu (Cabo Verde) kabuverdianu (Kabu Verdi)
4096 Kabyle Taqbaylit
4096 Kabyle (Algeria) Taqbaylit (Lezzayer)
4096 Kako kakɔ
4096 Kako (Cameroon) kakɔ (Kamɛrun)
4096 Kalenjin Kalenjin
4096 Kalenjin (Kenya) Kalenjin (Emetab Kenya)
4096 Kamba Kikamba
4096 Kamba (Kenya) Kikamba (Kenya)
75 Kannada ಕನ್ನಡ
1099 Kannada (India) ಕನ್ನಡ (ಭಾರತ)
113 Kanuri Kanuri
1137 Kanuri (Nigeria) Kanuri (Nigeria)
96 Kashmiri کٲشُر
4096 Kashmiri (Devanagari) कॉशुर
2144 Kashmiri (Devanagari) कॉशुर
1120 Kashmiri (Perso-Arabic) کٲشُر
4096 Kashmiri (Perso-Arabic) کٲشُر (اَربی)
63 Kazakh қазақ тілі
1087 Kazakh (Kazakhstan) қазақ тілі (Қазақстан)
83 Khmer ភាសាខ្មែរ
1107 Khmer (Cambodia) ភាសាខ្មែរ (កម្ពុជា)
134 K'iche' K'iche'
31878 K'iche' K'iche'
1158 K'iche' (Guatemala) K'iche' (Guatemala)
4096 Kikuyu Gikuyu
4096 Kikuyu (Kenya) Gikuyu (Kenya)
135 Kinyarwanda Kinyarwanda
1159 Kinyarwanda (Rwanda) Kinyarwanda (U Rwanda)
65 Kiswahili Kiswahili
4096 Kiswahili (Congo DRC) Kiswahili (Jamhuri ya Kidemokrasia ya Kongo)
1089 Kiswahili (Kenya) Kiswahili (Kenya)

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>