Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 English (Guyana) English (Guyana)
15369 English (Hong Kong SAR) English (Hong Kong SAR)
16393 English (India) English (India)
14345 English (Indonesia) English (Indonesia)
6153 English (Ireland) English (Ireland)
4096 English (Isle of Man) English (Isle of Man)
4096 English (Israel) English (Israel)
8201 English (Jamaica) English (Jamaica)
4096 English (Jersey) English (Jersey)
4096 English (Kenya) English (Kenya)
4096 English (Kiribati) English (Kiribati)
4096 English (Lesotho) English (Lesotho)
4096 English (Liberia) English (Liberia)
4096 English (Macao SAR) English (Macao SAR)
4096 English (Madagascar) English (Madagascar)
4096 English (Malawi) English (Malawi)
17417 English (Malaysia) English (Malaysia)
4096 English (Malta) English (Malta)
4096 English (Marshall Islands) English (Marshall Islands)
4096 English (Mauritius) English (Mauritius)
4096 English (Micronesia) English (Micronesia)
4096 English (Montserrat) English (Montserrat)
4096 English (Namibia) English (Namibia)
4096 English (Nauru) English (Nauru)
4096 English (Netherlands) English (Netherlands)
5129 English (New Zealand) English (New Zealand)
4096 English (Nigeria) English (Nigeria)
4096 English (Niue) English (Niue)
4096 English (Norfolk Island) English (Norfolk Island)
4096 English (Northern Mariana Islands) English (Northern Mariana Islands)
4096 English (Pakistan) English (Pakistan)
4096 English (Palau) English (Palau)
4096 English (Papua New Guinea) English (Papua New Guinea)
13321 English (Philippines) English (Philippines)
4096 English (Pitcairn Islands) English (Pitcairn Islands)
4096 English (Puerto Rico) English (Puerto Rico)
4096 English (Rwanda) English (Rwanda)
4096 English (Saint Kitts and Nevis) English (Saint Kitts and Nevis)
4096 English (Saint Lucia) English (Saint Lucia)
4096 English (Saint Vincent and the Grenadines) English (Saint Vincent and the Grenadines)
4096 English (Samoa) English (Samoa)
4096 English (Seychelles) English (Seychelles)
4096 English (Sierra Leone) English (Sierra Leone)
18441 English (Singapore) English (Singapore)
4096 English (Sint Maarten) English (Sint Maarten)
4096 English (Slovenia) English (Slovenia)
4096 English (Solomon Islands) English (Solomon Islands)
7177 English (South Africa) English (South Africa)
4096 English (South Sudan) English (South Sudan)
4096 English (St Helena, Ascension, Tristan da Cunha) English (St Helena, Ascension, Tristan da Cunha)

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>