BlazorでMySQLを使う方法

winget install Microsoft.DotNet.SDK.9

add-apt-repository ppa:dotnet/backports
apt install dotnet-sdk-9.0

dotnet new blazor -o .

using System.ComponentModel.DataAnnotations;

namespace BlazorApp.Models
{
    public class User
    {
        public int Id { get;set; }
        public string UserName { get; set; }
        public string Email { get; set; }
        public string Password { get; set; }
    }
}

dotnet new tool-manifest

dotnet tool install Microsoft.dotnet-scaffold

dotnet scaffold

Pick a scaffolding category: 

  API
  Aspire
> Blazor
  Identity
  MVC
  Razor Pages
  (Show All)

  Navigation
    Exit

Pick a scaffolding command:

  Blazor Identity (dotnet-scaffold-aspnet)
  Razor Component (dotnet-scaffold-aspnet)
> Razor Components with EntityFrameworkCore (CRUD) (dotnet-scaffold-aspnet)        

  Navigation
    Back
    Exit

.NET project file:

> BlazorApp (BlazorApp.csproj) 

  Navigation
    Back
    Exit

Model Name:

> User (User)
  Program (Program) 

  Navigation        
    Back
    Exit

Enter a new value for 'Data Context Class' (< to go back) :  MySqlContext

Database Provider:

  npgsql-efcore (npgsql-efcore)       
> sqlserver-efcore (sqlserver-efcore) 
  sqlite-efcore (sqlite-efcore)       
  cosmos-efcore (cosmos-efcore)       

  Navigation
    Back
    Exit

Page Type:

> CRUD (CRUD)
  Create (Create)
  Delete (Delete)
  Details (Details)
  Edit (Edit)
  Index (Index)

  Navigation
    Back
    Exit

Include Prerelease packages?: 

  Yes
> No

  Navigation
    Back
    Exit

BlazorApp
├─Components
│   └─Pages
│       └─UserPages
│           ├─Create.razor
│           ├─Delete.razor
│           ├─Details.razor
│           ├─Edit.razor
│           └─Index.razor
└─MySqlContext.cs

using Microsoft.EntityFrameworkCore;

public class MySqlContext(DbContextOptions<MySqlContext> options) : DbContext(options)
{
    public DbSet<BlazorApp.Models.User> User { get; set; } = default!;
}

        <div class="nav-item px-3">
            <NavLink class="nav-link" href="users">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Users
            </NavLink>
        </div>

C:\MAMP\bin\mysql\bin>mysql -uroot -proot
mysql: [Warning] Using a password on the command line interface can be insecure.
Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 3
Server version: 5.7.24 MySQL Community Server (GPL)

Copyright (c) 2000, 2018, Oracle and/or its affiliates. All rights reserved.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

create database blazorapp;
grant all privileges on blazorapp.* to blazor@'localhost' identified by 'password'; 
exit;

dotnet tool install dotnet-ef

dotnet add package MySql.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore
dotnet add package Microsoft.EntityFrameworkCore.Design

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft.AspNetCore": "Warning"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "MySQLContext": "Server=127.0.0.1;Database=blazorapp;Uid=blazor;Pwd=password;"
  }
}

using BlazorApp.Components;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);
var connectionString = builder.Configuration.GetConnectionString("MySqlContext") ?? throw new InvalidOperationException("Connection string 'MySqlContext' not found.");

builder.Services.AddDbContextFactory<MySqlContext>(options => options.UseMySQL(connectionString));

builder.Services.AddQuickGridEntityFrameworkAdapter();

builder.Services.AddDatabaseDeveloperPageExceptionFilter();

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
    app.UseMigrationsEndPoint();
}

app.UseHttpsRedirection();


app.UseAntiforgery();

app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

dotnet ef migrations add CreateUserTable

Migrations
    ├─20250520060552_CreateUserTable.cs
    ├─20250520060552_CreateUserTable.Designer.cs
    └─MySqlContextModelSnapshot.cs

dotnet clean

dotnet ef database update

dotnet ef migrations add AdCampgroundTable
dotnet ef database update

dotnet ef database drop
dotnet ef migrations remove

dotnet ef migrations add CreateTable
dotnet ef database update

// injectディレクティブで依存機能を注入します。
@inject IDbContextFactory<MySqlContext> DbFactory
@using BlazorApp.Models

// codeディレクティブ内でDbContextを作成して保存等の処理を行っている様です。
@code {
    [SupplyParameterFromForm]
    private User User { get; set; } = new();

    private async Task AddUser()
    {
        using var context = DbFactory.CreateDbContext();
        context.User.Add(User);
        await context.SaveChangesAsync();
        NavigationManager.NavigateTo("/users");
    }
}