Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
2115 Uzbek (Cyrillic, Uzbekistan) ўзбекча (Ўзбекистон)
31811 Uzbek (Latin) o‘zbek
1091 Uzbek (Latin, Uzbekistan) o‘zbek (Oʻzbekiston)
4096 Uzbek (Perso-Arabic) اوزبیک
4096 Uzbek (Perso-Arabic, Afghanistan) اوزبیک (افغانستان)
4096 Vai ꕙꔤ
4096 Vai (Latin) Vai
4096 Vai (Latin, Liberia) Vai (Laibhiya)
4096 Vai (Vai) ꕙꔤ
4096 Vai (Vai, Liberia) ꕙꔤ (ꕞꔤꔫꕩ)
2051 Valencian (Spain) valencià (Espanya)
51 Venda Tshivenḓa
1075 Venda (South Africa) Tshivenḓa (South Africa)
42 Vietnamese Tiếng Việt
1066 Vietnamese (Vietnam) Tiếng Việt (Việt Nam)
4096 Volapük Volapük
4096 Volapük (World) Volapük (World)
4096 Vunjo Kyivunjo
4096 Vunjo (Tanzania) Kyivunjo (Tanzania)
4096 Walser Walser
4096 Walser (Switzerland) Walser (Schwiz)
82 Welsh Cymraeg
1106 Welsh (United Kingdom) Cymraeg (Y Deyrnas Unedig)
98 Western Frisian Frysk
1122 Western Frisian (Netherlands) Frysk (Nederlân)

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>