Paging TagHelper - Ajax >= v4.0
Verison Notice
This document is for v4.0 and newer
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 samplePagingAjaxModel
. - 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 thePagingTagHelper
. - 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>