Open the project of the previous tutorial. Since, now we need a database, if not already done, please apply all pending migrations to the database.
Open the Package Manager Consolle, go to to your web project folder with: cd src\YourApplicationName, and execute dotnet ef database update

Now we create a Products table. Add the following model to you project:

public enum Currency
{
    [Display(Name = "$")]
    Dollar,
    [Display(Name = "€")]
    Euro,
    [Display(Name = "£")]
    Pound,
    [Display(Name = "¥")]
    Yen
};
public class Product
{
    public int Id { get; set; }
    [MaxLength(256)]
    public string Description { get; set; }
    [MaxLength(128)]
    public string Name { get; set; }
    public decimal Price { get; set; }
    public Currency ChosenCurrency { get; set; }
    public bool Available { get; set; }
 
    
 
}

Then open Data\ApplicationDbContext.cs and add the following property to the Application DBContext:

public DbSet<Product> Products { get; set; }

Add a new migration say "business1" with: dotnet ef migrations add business1,
and update the DB again: dotnet ef database update

Now that we have a new DB table, let select "View Data" on the new table in Sql Server Object Explorer, and add some rows.

We need also 2 item ViewModels, one for the list mode, and the other for the detail mode:

public class SimpleProductViewModel 
{
    public int? Id { get; set; }
    [MaxLength(128)]
    [ColumnLayout(DetailWidthsAsString = "100 50")]
    [Required]
    [Display(Name = "Name", Order = 400)]
    public string Name { get; set; }
    [ColumnLayout(DetailWidthsAsString = "60 30")]
    [Display(Name = "Price", Order = 300)]
    public decimal Price { get; set; }
    [Display(Name = "Cur", Order = 280)]
    [ColumnLayout(WidthsAsString = "10", DetailWidthsAsString = "40 20")]
    public Currency ChosenCurrency { get; set; }
    [ColumnLayout(DetailWidthsAsString = "20")]
    [Display(Name = "Av", Order = 230)]
    public bool Available { get; set; }
 
}   
 
public class SimpleProductViewModelDetail: SimpleProductViewModel
{
    [MaxLength(256)]
    [Display(Name = "Description", Order = 100)]
    [ColumnLayout(DetailWidthsAsString = "80")]
    [DisplayFormat(NullDisplayText = "no description available")]
    public string Description { get; set; }
}

We need also an overall View ViewModel:

public class SimpleProductlistViewModel
{
    public DataPage<SimpleProductViewModel> Products { get; set; }
}

Now we may create our repository class, by inheriting form the CRUDRepository:

public class ProductRepository :
    DefaultCRUDRepository<ApplicationDbContext, Product>
{
    private ApplicationDbContext db;
    public ProductRepository(ApplicationDbContext db)
       : base(db, db.Products) { this.db = db; }
}

In this very simple example our repository doesn't add further methods.

Now it is time of our controller. We will inherit from ServerCrudController<VMD, VMS, D>. This way we have all grid ajax operations already in place with no need to write further code:

public class GridsController :
    ServerCrudController<SimpleProductViewModelDetail,
        SimpleProductViewModel,
        int?>
{
 
    public GridsController(ProductRepository repository,
        IStringLocalizerFactory factory, IHttpContextAccessor accessor)
        : base(factory, accessor)
    {
        Repository = repository;
    }
    [ResponseCache(Duration = 0, NoStore = true)]
    public async Task<IActionResult> ReadonlyServer()
    {
        var model = new SimpleProductlistViewModel
        {
            Products = await Repository.GetPage<SimpleProductViewModel>(
            null,
            q => q.OrderBy(m => m.Name),
            1, 20)
        };
        return View(model);
    }
}

Finally, add a View for the ReadonlyServer action method with the SimpleProductViewModel ViewModel, and with the following code:

<grid asp-for="Products.Data"
      type="Immediate"
      all-properties="true"
      mvc-controller="typeof(LiveExamples.Controllers.GridsController)"
      row-id="readonly-example"
      operations="user => Functionalities.ReadOnly | Functionalities.ShowDetail"
      class="table table-condensed table-bordered" />

and with the following js scripts:

@section Scripts {
    <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>
}

Done! Now add a link in the _Layout page as in the previous tutorial and run it!

Our readonly grid shows als data items in detail mode, with a smart layout!

See it live