Edit detail grid

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>(
        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;
@*antiforgery is compulsory *@
<form asp-antiforgery="true">
    <div asp-validation-summary="All" class="text-danger"></div>
    <grid asp-for="Products.Data"
          operations="user => Functionalities.FullDetail"
          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-detail append 0"
                    class="btn btn-sm btn-primary">
                new product
        <toolbar zone-name="@LayoutStandardPlaces.Footer">
            <paste-html name="pager" />

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

Fork me on GitHub