In this tutorial we will detail editing capabilities to the grid of our previous tutorials.

Open GridsController.cs and add another action method:

[ResponseCache(Duration = 0, NoStore = true)]
public async Task<IActionResult> DetailServer(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>
 
 
@*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-detail-edit-example"
          operations="user => Functionalities.FullDetail"
          class="table table-condensed table-bordered">
        <toolbar zone-name="@LayoutStandardPlaces.Header">
            <pager mode="CustomPages"
                   copy-html="pager"
                   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("DetailServer",
                               "Grids", new {page="_zzz_" })" />
            <button type="button" data-operation="add-detail append 0"
                    class="btn btn-sm btn-primary">
                new product
            </button>
        </toolbar>
        <toolbar zone-name="@LayoutStandardPlaces.Footer">
            <paste-html name="pager" />
        </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 has been copied with copy-html="pager" and pasted in the footer toolbar with: <paste-html name="pager" />

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

See it live