In this tutorial we will add a pager and in-line editing capabilities to the grid of our previous tutorial.

Open GridsController.cs and add another action method:

public async Task<IActionResult> AjaxServer(int? page)
{
    int pg = page.HasValue ? page.Value : 1;
    if (pg < 1) pg = 1;
 
    var model = new SimpleProductlistViewModel
    {
        Products = await Repository.GetPage<SimpleProductViewModel>(
        null,
        q => q.OrderBy(m => m.Name),
        pg, 5)
    };
    return View(model);
}

And add also a new a View for the this action method with the SimpleProductViewModel ViewModel, and with the following code:

<style>
    tfoot .pagination, thead .pagination
     {
        margin: 0;
        display: inline !important;
    }
 
    .full-cell {
        width: 100%;
    }
 
    table .input-validation-error {
        border: 1px solid red;
        background-color: mistyrose;
    }
</style>
 
<div class="explanation">
</div>
@*antiforgery is compulsory *@
<form  asp-antiforgery="true">
    <div asp-validation-summary="All" class="text-danger"></div>
    <grid asp-for="Products.Data"
          type="Immediate"
          all-properties="true"
          mvc-controller="typeof(LiveExamples.Controllers.GridsController)"
          row-id="immediate-edit-inline-example"
          operations="user => Functionalities.FullInLine"
          class="table table-condensed table-bordered">
        <toolbar zone-name="@LayoutStandardPlaces.Header">
            <pager mode="CustomPages"
                   class="pagination pagination-sm"
                   max-pages="4"
                   current-page="Products.Page"
                   page-size-default="5"
                   total-pages="Products.TotalPages"
                   skip-url-token="_zzz_"
                   url-default="@Url.Action("AjaxServer", 
                               "Grids", new {page="_zzz_" })" />
            <button type="button" data-operation="add append 0" 
                    class="btn btn-sm btn-primary">
                new product
            </button>
        </toolbar>
    </grid>
</form>

and with the following js scripts:

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
    <script src="~/lib/mvcct-controls/mvcct.controls.min.js"></script>
    <script src="~/lib/mvcct-controls/modules/mvcct.controls.ajax.min.js"></script>
    <script src="~/lib/mvcct-controls/modules/mvcct.controls.serverGrid.min.js"></script>
}

Pager and add button are inserted in a toolbar. The form is inserted just for the purpose of validating input fields when a row is in edit mode, since all rows are updated with ajax with no need to write any code!
A few comments on the style. .pagination rule removes default pager margins, so that pager fits in a small toolbar, and makes the pager an in-line element, so it can easily fit the add button. The full-cell class is added as a default to all input textboxes by the grid default column edit template. width: 100% ensures each input box fits the grid cell. Finally, table .input-validation-error changes the style of all inputs in error since input fields within grid cells can't show any error message next to them.

Done! Add a new link in the _Layout page and run!

See it live