Search code examples
c#asp.net-coreentity-framework-coreblazorblazor-webassembly

Blazor WASM cannot use Entity Framework Core

I am writing a Blazor WASM application in .NET 8. Today I tried to add fetching of database data to my app but I can't seem to get Entity Framework Core working. I am using the same libraries as I do always.

I have everything written like I always do but I just can't seem to find the issue. When I try to run the app and I try to fetch data from context in OnInitializedAsync method I get the following error in the console:

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]

Unhandled exception rendering component: Type MySql.Data.EntityFrameworkCore.Infrastructure.Internal.MySQLOptionsExtension+ExtensionInfo has invalid vtable method slot 5 with method none System.TypeLoadException: Type MySql.Data.EntityFrameworkCore.Infrastructure.Internal.MySQLOptionsExtension+ExtensionInfo has invalid vtable method slot 5 with method none

at Microsoft.EntityFrameworkCore.DbContextOptions.GetHashCode()
at System.Collections.Concurrent.ConcurrentDictionary2[[Microsoft.EntityFrameworkCore.Infrastructure.IDbContextOptions, Microsoft.EntityFrameworkCore, Version=8.0.8.0, Culture=neutral, PublicKeyToken=adb9793829ddae60],[System.ValueTuple2[[System.IServiceProvider, System.ComponentModel, Version=8.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a],[System.Collections.Generic.IDictionary2[[System.String, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e],[System.String, System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]], System.Private.CoreLib, Version=8.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]].GetOrAdd[ValueTuple2](IDbContextOptions key, Func3 valueFactory, ValueTuple2 factoryArgument)
at Microsoft.EntityFrameworkCore.Internal.ServiceProviderCache.GetOrAdd(IDbContextOptions options, Boolean providerRequired)
at Microsoft.EntityFrameworkCore.DbContext.get_ContextServices() at Microsoft.EntityFrameworkCore.DbContext.get_Model()
at Microsoft.EntityFrameworkCore.Internal.InternalDbSet1[[MyProject.Components.Models.Player, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].get_EntityType() at Microsoft.EntityFrameworkCore.Internal.InternalDbSet1[[MyProject.Components.Models.Player, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].CheckState()
at Microsoft.EntityFrameworkCore.Internal.InternalDbSet1[[MyProject.Components.Models.Player, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].get_EntityQueryable() at Microsoft.EntityFrameworkCore.Internal.InternalDbSet1[[MyProject.Components.Models.Player, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].System.Collections.Generic.IEnumerable.GetEnumerator() at System.Collections.Generic.List1[[MyProject.Components.Models.Player, MyProject, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]]..ctor(IEnumerable1 collection) at System.Linq.Enumerable.ToList[Player](IEnumerable`1 source) at MyProject.Pages.Home.OnInitializedAsync() in C:\Users\FilipMráz\source\repos\MyProject\MyProject\Pages\Home.razor:line 112 at Microsoft.AspNetCore.Components.ComponentBase.RunInitAndSetParametersAsync()

This is the code:

protected override async Task OnInitializedAsync()
{
    var a = context.CreateDbContext().Players.ToList();

    foreach (var item in a)
    {
        Console.WriteLine(item.Id);
    }
}

This is my DbContext and the entity of the DbSet:

public class CustomDbContext : DbContext
{
    public DbSet<Player> Players {  get; set; }
    public DbSet<Tournament> Tournaments { get; set; }

    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder)
    {
        optionsBuilder.UseMySQL("myConString");
    }
}

[Table("Players")]
public class Player
{
    public int Id { get; set; }
}
Solution

  • Blazor WebAssembly apps run in a WebAssembly/Browser sandbox that prevents most direct database connections. So, we can't directly interaction with a SQL Server database or using Entity Framework Core (EF Core) on the client-side.

    To use EF core in a Blazor WebAssembly application, you can create an ASP.NET Core Web API or Blazor Server application as the backend, then in the Blazor WebAssembly client use HttpClient to call the API method fetch or send data.

    Besides, you can also try to create a Blazor Web application using Blazor Web App Template, then select the Auto (Server and WebAssembly) mode as below:

    blazor web app

    After that, in then Server application, you can use EF core and create API endpoint (don't forget to enable related middleware and service in Program.cs):

    blazer app