Index.razor

@page "/"
@implements IDisposable
@using AutoMapper
@using DevExpress.Blazor.Internal

@inject IDbContextFactory<NorthwindContext> NorthwindContextFactory
@inject IGlobalOptionsService GlobalOptionsService

@if(IsLoading) {
    <text>Loading...</text>
}else {
    <DxGrid Data="Products"
            EditMode="GridEditMode.EditRow"
            CustomizeEditModel="Grid_CustomizeEditModel"
            EditModelSaving="Grid_EditModelSaving">
        <Columns>
            <DxGridCommandColumn DeleteButtonVisible="false" Width="15%" />
            <DxGridDataColumn FieldName="ProductName" Width="25%" />
            <DxGridDataColumn FieldName="CategoryId" Caption="Category Name" Width="10%">
                <EditSettings>
                    <DxComboBoxSettings Data="Categories" ValueFieldName="CategoryId" TextFieldName="CategoryName"/>
                </EditSettings>
            </DxGridDataColumn>
            <DxGridDataColumn FieldName="UnitPrice" DisplayFormat="c" Width="10%">
                <EditSettings>
                    <DxSpinEditSettings MinValue="0M" Mask="n3" />
                </EditSettings>
            </DxGridDataColumn>
            <DxGridDataColumn FieldName="UnitsInStock" />
            <DxGridDataColumn FieldName="QuantityPerUnit" Width="15%" />   
            <DxGridDataColumn FieldName="Discontinued" />
        </Columns>
    </DxGrid>
}

@code {
    NorthwindContext Northwind { get; set; }
    List<Product> Products { get; set; }
    List<Category> Categories { get; set; }

    IMapper ProductMapper { get; set; }
    bool IsLoading { get; set; } = true;

    protected override async Task OnInitializedAsync() {
        var config = new MapperConfiguration(c => c.CreateMap<Product, EditableProduct>().ReverseMap());
        ProductMapper = config.CreateMapper();

        Northwind = NorthwindContextFactory.CreateDbContext();
        Products = await Northwind.Products.ToListAsync();
        Categories = await Northwind.Categories.ToListAsync();

        GlobalOptionsService.GlobalOptions.ShowValidationIcon = true;

        IsLoading = false;
    }

    void Grid_CustomizeEditModel(GridCustomizeEditModelEventArgs e) {
        var editableProduct = new EditableProduct();
        if(!e.IsNew)
            ProductMapper.Map((Product)e.DataItem, editableProduct);
        e.EditModel = editableProduct;
    }

    async Task Grid_EditModelSaving(GridEditModelSavingEventArgs e) {
        var editableProduct = (EditableProduct)e.EditModel;
        var product = e.IsNew
            ? new Product()
            : Northwind.Products.Find(e.Grid.GetDataItemValue(e.DataItem, "ProductId"));
        ProductMapper.Map(editableProduct, product);

        if(e.IsNew)
            await Northwind.Products.AddAsync(product);
        await Northwind.SaveChangesAsync();

        Products = await Northwind.Products.ToListAsync();
    }

    public void Dispose() {
        Northwind?.Dispose();
    }
}