Blazor Parent and child OnInitializedAsync accessing DB context at same time

Question

Both parent and child have to access db context in order to get their specific data, bellow is their code.

Parent:

[Inject]
private IProductsService ProductService { get; set; }
private IEnumerable<ProductModel> ProdList;      
private bool FiltersAreVisible = false;

protected override async Task OnInitializedAsync()
{
  ProdList = await ProductService.GetObjects(null);            
}

Child:

[Parameter]
public IEnumerable<ProductModel> ProdList { get; set; }
[Parameter]
public EventCallback<IEnumerable<ProductModel>> ProdListChanged { get; set; } 
[Inject]
private IRepositoryService<ProdBusinessAreaModel> ProdBAreasService { get; set; }
[Inject]
private IRepositoryService<ProdRangeModel> ProdRangesService { get; set; }
[Inject]
private IRepositoryService<ProdTypeModel> ProdTypesService { get; set; }
[Inject]
private IProductsService ProductService { get; set; }        
private ProductFilterModel Filter { get; set; } = new ProductFilterModel();
private EditContext EditContext;
private IEnumerable<ProdBusinessAreaModel> ProdBAreas;
private IEnumerable<ProdRangeModel> ProdRanges;
private IEnumerable<ProdTypeModel> ProdTypes;

protected override async Task OnInitializedAsync()
{
  EditContext = new EditContext(Filter);            
  EditContext.OnFieldChanged += OnFieldChanged;

  ProdBAreas = await ProdBAreasService.GetObjects();
  ProdRanges = await ProdRangesService.GetObjects();
  ProdTypes = await ProdTypesService.GetObjects();
}

This is throwing the following exception: InvalidOperationException: A second operation was started on this context before a previous operation completed. This is usually caused by different threads concurrently using the same instance of DbContext.

Using break points I see that parent runs OnInitializedAsync and when reaches ProdList = await ProductService.GetObjects(null); jumps right away to child OnInitializedAsync.

I solved it by making all the requests from parent and then passing to child but I wonder if there is a better way to do this, leaving child with the ability to get its own data and of course without making DB context Transient..

Regards

Answer 1

Blazor does not have convenient Scopes for managing a Db. The way to resolve this is to use a Factory (no management required) and scope the actual DbContext in each of your methods with a using block.

We can't see how you implemented ProductService but it should look like

// inject a DbContextFactory and not the DbContext
public ProductService (IDbContextFactory<ProductDbContext> contextFactory)
{
    _contextFactory = contextFactory;
}

public Task<IEnumerable<ProductModel>> GetObjects()
{
   using var dbCtx = _contextFactory.CreateDbContext();

   // use dbCtx to return your results here
}

and in your Startup class

services.AddDbContextFactory<ProductDbContext>(
    options => options.UseSqlServer(config.MyConnectionString));

you can use whatever Db config you now have.

Answer 2

Welcome to the Async World. You have two processes trying to use the same DbContext.

The solution is to use multiple DbContexts managed through DbContextFactory.

Here's the relevant Ms-Docs information.

The relevant section is here - using-a-dbcontext-factory-eg-for-blazor.

You can then do something like:

public override async ValueTask<List<MyModel>> SelectAllRecordsAsync()
{
   var dbContext = this.DBContext.CreateDbContext();
   var list =  await dbContext
     .MyModelDbSet
     .ToListAsync() ?? new List<TRecord>();
  dbContext?.Dispose();
  return list;
}

IDisposable and IAsyncDisposable on Services

You need to be very careful implementing IDisposable or IAsyncDisposable on services. The Scoped Services container creates an instance of any Transient service, passes on a reference to the requester and forgets about it, leaving the garbage collector to clean it up when the component is finished with it. However, if the service implements IDisposable or IAsyncDisposable it keeps a reference, but only calls Dispose when the service container itself gets Disposed (when the user session ends). There's therefore the potential for significant memory leakage using a Transient service for DbContexts.

There is a workaround (not solution) using OwningComponentBase<T> instead of ComponentBase for the component. This creates a services container for the lifetime of the Component and thus Dispose gets run when the component goes out of scope. There's still the potential for memory leaks, but the lifespan is much shorter!

Answer 3

You should implement the DbContext factory in order to prevent a situation when two or more units of work for the same request compete for the same resources. See code sample below how to do that. Generally speaking, you should always implement the DbContext factory... However, it is a better code design to retrieve your data from a single location, as for instance, from your parent component, and pass it to its child component in the form of parameters. Still better, it is a good idea to create a service that implement the State and Notify patterns to provide data to interested components, notify them of changes, and generally manage and handle everything related to data. The FlightFinder Blazor App sample created by maestro Steve Anderson is a good example how to do that. However, you should follow your heart, and code as you wish. I'm just pointing out the recommended patterns.

Here's the code sample you can preview and adapt into your app:

ContactContext.cs

/// <summary>
    /// Context for the contacts database.
    /// </summary>
    public class ContactContext : DbContext
    {
        /// <summary>
        /// Magic string.
        /// </summary>
        public static readonly string RowVersion = nameof(RowVersion);

        /// <summary>
        /// Magic strings.
        /// </summary>
        public static readonly string ContactsDb = nameof(ContactsDb).ToLower();

        /// <summary>
        /// Inject options.
        /// </summary>
        /// <param name="options">The <see cref="DbContextOptions{ContactContext}"/>
        /// for the context
        /// </param>
        public ContactContext(DbContextOptions<ContactContext> options)
            : base(options)
        {
            Debug.WriteLine($"{ContextId} context created.");
        }

        /// <summary>
        /// List of <see cref="Contact"/>.
        /// </summary>
        public DbSet<Contact> Contacts { get; set; }

        /// <summary>
        /// Define the model.
        /// </summary>
        /// <param name="modelBuilder">The <see cref="ModelBuilder"/>.</param>
        protected override void OnModelCreating(ModelBuilder modelBuilder)
        {
            // this property isn't on the C# class
            // so we set it up as a "shadow" property and use it for concurrency
            modelBuilder.Entity<Contact>()
                .Property<byte[]>(RowVersion)
                .IsRowVersion();

            base.OnModelCreating(modelBuilder);
        }

        /// <summary>
        /// Dispose pattern.
        /// </summary>
        public override void Dispose()
        {
            Debug.WriteLine($"{ContextId} context disposed.");
            base.Dispose();
        }

        /// <summary>
        /// Dispose pattern.
        /// </summary>
        /// <returns>A <see cref="ValueTask"/></returns>
        public override ValueTask DisposeAsync()
        {
            Debug.WriteLine($"{ContextId} context disposed async.");
            return base.DisposeAsync();
        }
    } 

ConfigureServices

 // register factory and configure the options
            #region snippet1
            services.AddDbContextFactory<ContactContext>(opt =>
                opt.UseSqlite($"Data Source={nameof(ContactContext.ContactsDb)}.db")
                .EnableSensitiveDataLogging());
            #endregion 

Here's how you inject it into your component:

@inject IDbContextFactory<ContactContext> DbFactory

And here's a code sample how to use it:

using var context = DbFactory.CreateDbContext();

        // this just attaches
        context.Contacts.Add(Contact);

        try
        {
            await context.SaveChangesAsync();
            Success = true;
            Error = false;
            // ready for the next
            Contact = new Contact();
            Busy = false;
        }
        catch (Exception ex)
        {
            Success = false;
            Error = true;
            ErrorMessage = ex.Message;
            Busy = false;
        }

UPDATE:

Parent passing to child data and using only one context throught the hole scope is how much better performing then DB context Factory?

First off, you should implement the DbContext factory in any case, right !? Once again, I do not suggest to use "Parent passing...the hole scope" instead of implementing the DbContext factory. In Blazor you must implement the DbContext factory resource racing. OK. But It is also recommended to expose your data from a single location: be it a service or a parent component. In the Component Model used in framework like Angular and Blazor, data is usually flows downstream, from a parent to its child. I'm sure you saw many code samples that do that, and this is how you should code.