Paging TagHelper - Ajax >= v4.0

Ajax Sample : Cultures Table

LCID English Name Native Name
4096 Dutch (Aruba) Nederlands (Aruba)
2067 Dutch (Belgium) Nederlands (België)
4096 Dutch (Bonaire, Sint Eustatius and Saba) Nederlands (Bonaire, Sint Eustatius en Saba)
4096 Dutch (Curaçao) Nederlands (Curaçao)
1043 Dutch (Netherlands) Nederlands (Nederland)
4096 Dutch (Sint Maarten) Nederlands (Sint-Maarten)
4096 Dutch (Suriname) Nederlands (Suriname)
4096 Dzongkha རྫོང་ཁ
3153 Dzongkha (Bhutan) རྫོང་ཁ (འབྲུག)
102 Edo Ẹ̀dó
1126 Edo (Nigeria) Ẹ̀dó (Nigeria)
4096 Embu Kĩembu
4096 Embu (Kenya) Kĩembu (Kenya)
9 English English
4096 English (American Samoa) English (American Samoa)
4096 English (Anguilla) English (Anguilla)
4096 English (Antigua and Barbuda) English (Antigua and Barbuda)
3081 English (Australia) English (Australia)
4096 English (Austria) English (Austria)
4096 English (Bahamas) English (Bahamas)
4096 English (Barbados) English (Barbados)
4096 English (Belgium) English (Belgium)
10249 English (Belize) English (Belize)
4096 English (Bermuda) English (Bermuda)
4096 English (Botswana) English (Botswana)

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>