Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Portuguese (São Tomé and Príncipe) português (São Tomé e Príncipe)
4096 Portuguese (Switzerland) português (Suíça)
4096 Portuguese (Timor-Leste) português (Timor-Leste)
4096 Prussian prūsiskan
4096 Prussian (World) prūsiskan (swītai)
70 Punjabi ਪੰਜਾਬੀ
31814 Punjabi پنجابی
4096 Punjabi ਪੰਜਾਬੀ
1094 Punjabi (India) ਪੰਜਾਬੀ (ਭਾਰਤ)
2118 Punjabi (Pakistan) پنجابی (پاکستان)
107 Quechua Runasimi
1131 Quechua (Bolivia) Runasimi (Bolivia)
3179 Quechua (Peru) Runasimi (Perú)
2155 Quichua (Ecuador) Runasimi (Ecuador)
24 Romanian română
2072 Romanian (Moldova) română (Republica Moldova)
1048 Romanian (Romania) română (România)
23 Romansh rumantsch
1047 Romansh (Switzerland) rumantsch (Svizra)
4096 Rombo Kihorombo
4096 Rombo (Tanzania) Kihorombo (Tanzania)
4096 Rundi Ikirundi
4096 Rundi (Burundi) Ikirundi (Uburundi)
25 Russian русский
4096 Russian (Belarus) русский (Беларусь)

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>