Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 German (Belgium) Deutsch (Belgien)
1031 German (Germany) Deutsch (Deutschland)
4096 German (Italy) Deutsch (Italien)
5127 German (Liechtenstein) Deutsch (Liechtenstein)
4103 German (Luxembourg) Deutsch (Luxemburg)
2055 German (Switzerland) Deutsch (Schweiz)
8 Greek Ελληνικά
4096 Greek (Cyprus) Ελληνικά (Κύπρος)
1032 Greek (Greece) Ελληνικά (Ελλάδα)
111 Greenlandic kalaallisut
1135 Greenlandic (Greenland) kalaallisut (Kalaallit Nunaat)
116 Guarani Avañe’ẽ
1140 Guarani (Paraguay) Avañe’ẽ (Paraguái)
71 Gujarati ગુજરાતી
1095 Gujarati (India) ગુજરાતી (ભારત)
4096 Gusii Ekegusii
4096 Gusii (Kenya) Ekegusii (Kenya)
104 Hausa Hausa
31848 Hausa (Latin) Hausa
4096 Hausa (Latin, Ghana) Hausa (Gana)
4096 Hausa (Latin, Niger) Hausa (Nijar)
1128 Hausa (Latin, Nigeria) Hausa (Najeriya)
117 Hawaiian ʻŌlelo Hawaiʻi
1141 Hawaiian (United States) ʻŌlelo Hawaiʻi (ʻAmelika Hui Pū ʻIa)
13 Hebrew עברית
1037 Hebrew (Israel) עברית (ישראל)
57 Hindi हिन्दी
1081 Hindi (India) हिन्दी (भारत)
14 Hungarian magyar
1038 Hungarian (Hungary) magyar (Magyarország)
105 Ibibio Ibibio-Efik
1129 Ibibio (Nigeria) Ibibio-Efik (Nigeria)
15 Icelandic íslenska
1039 Icelandic (Iceland) íslenska (Ísland)
112 Igbo Igbo
1136 Igbo (Nigeria) Igbo (Naịjịrịa)
33 Indonesian Indonesia
1057 Indonesian (Indonesia) Indonesia (Indonesia)
4096 Interlingua interlingua
4096 Interlingua (France) interlingua (Francia)
4096 Interlingua (World) interlingua (World)
93 Inuktitut Inuktitut
31837 Inuktitut (Latin) Inuktitut
2141 Inuktitut (Latin, Canada) Inuktitut (Kanatami)
30813 Inuktitut (Syllabics) ᐃᓄᒃᑎᑐᑦ
1117 Inuktitut (Syllabics, Canada) ᐃᓄᒃᑎᑐᑦ (ᑲᓇᑕᒥ)
127 Invariant Language (Invariant Country) Invariant Language (Invariant Country)
60 Irish Gaeilge
2108 Irish (Ireland) Gaeilge (Éire)
52 isiXhosa isiXhosa

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>