Edit in-line grid

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>(
        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:

    tfoot .paginationthead .pagination
        displayinline !important;
    .full-cell {
    table .input-validation-error {
        border1px solid red;
<div class="explanation">
@*antiforgery is compulsory *@
<form  asp-antiforgery="true">
    <div asp-validation-summary="All" class="text-danger"></div>
    <grid asp-for="Products.Data"
          operations="user => Functionalities.FullInLine"
          class="table table-condensed table-bordered">
        <toolbar zone-name="@LayoutStandardPlaces.Header">
            <pager mode="CustomPages"
                   class="pagination pagination-sm"
                               "Grids"new {page="_zzz_" })" />
            <button type="button" data-operation="add append 0" 
                    class="btn btn-sm btn-primary">
                new product

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

Fork me on GitHub