Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Afar Qafar
4096 Afar (Djibouti) Qafar (Yabuuti)
4096 Afar (Eritrea) Qafar (Eretria)
4096 Afar (Ethiopia) Qafar (Otobbia)
54 Afrikaans Afrikaans
4096 Afrikaans (Namibia) Afrikaans (Namibië)
1078 Afrikaans (South Africa) Afrikaans (Suid-Afrika)
4096 Aghem Aghem
4096 Aghem (Cameroon) Aghem (Kàmàlûŋ)
4096 Akan Akan
4096 Akan (Ghana) Akan (Gaana)
28 Albanian shqip
1052 Albanian (Albania) shqip (Shqipëri)
4096 Albanian (Kosovo) shqip (Kosovë)
4096 Albanian (Macedonia, FYRO) shqip (Republika e Maqedonisë)
1156 Alsatian (France) Elsässisch (Frànkrisch)
94 Amharic አማርኛ
1118 Amharic (Ethiopia) አማርኛ (ኢትዮጵያ)
1 Arabic العربية
5121 Arabic (Algeria) العربية (الجزائر)
15361 Arabic (Bahrain) العربية (البحرين)
4096 Arabic (Chad) العربية (تشاد)
4096 Arabic (Comoros) العربية (جزر القمر)
4096 Arabic (Djibouti) العربية (جيبوتي)
3073 Arabic (Egypt) العربية (مصر)

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>