Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Arabic (Eritrea) العربية (إريتريا)
2049 Arabic (Iraq) العربية (العراق)
4096 Arabic (Israel) العربية (إسرائيل)
11265 Arabic (Jordan) العربية (الأردن)
13313 Arabic (Kuwait) العربية (الكويت)
12289 Arabic (Lebanon) العربية (لبنان)
4097 Arabic (Libya) العربية (ليبيا)
4096 Arabic (Mauritania) العربية (موريتانيا)
6145 Arabic (Morocco) العربية (المملكة المغربية)
8193 Arabic (Oman) العربية (عمان)
4096 Arabic (Palestinian Authority) العربية (السلطة الفلسطينية)
16385 Arabic (Qatar) العربية (قطر)
1025 Arabic (Saudi Arabia) العربية (المملكة العربية السعودية)
4096 Arabic (Somalia) العربية (الصومال)
4096 Arabic (South Sudan) العربية (جنوب السودان)
4096 Arabic (Sudan) العربية (السودان)
10241 Arabic (Syria) العربية (سوريا)
7169 Arabic (Tunisia) العربية (تونس)
14337 Arabic (United Arab Emirates) العربية (الإمارات العربية المتحدة)
4096 Arabic (World) العربية (العالم)
9217 Arabic (Yemen) العربية (اليمن)
43 Armenian Հայերեն
1067 Armenian (Armenia) Հայերեն (Հայաստան)
77 Assamese অসমীয়া
1101 Assamese (India) অসমীয়া (ভাৰত)

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>