[Blazor] Blazor + Mysql > C#/.Net/Blazor/IIS

1. BlazorServer 웹프로젝트 생성 
 

[DBLibrary]

2. mysql 연동에 사용할 DBLibrary  프로젝트(Class Library) 생성 

    - Dapper(2.0.78)

    - Mysql.Data(8.0.23) 설치(nuget)

3. 디비 접근 구조 인터페이스 IDbAccess 생성

namespace DBLibrary
{
    public interface IDbAccess
    {
        Task<List<T>> LoadData<T, U>(string sql, U parameters, string connectionString);
        Task SaveData<T>(string sql, T parameters, string connectionString);
    }
}

4. DB 접근 구조(IDbAccess)에 대한 인터페이스 구현(MysqlAccess)

namespace DBLibrary
{
    public class MysqlAccess : IDbAccess
    {
        public async Task<List<T>> LoadData<T, U>(string sql, U parameters, string connectionString)        
        {
            using (IDbConnection connection = new MySqlConnection(connectionString))            {
                var rows = await connection.QueryAsync<T>(sql, parameters);
                return rows.ToList();
            }
        }
 
        public Task SaveData<T>(string sql, T parameters, string connectionString)        {
            using (IDbConnection connection = new MySqlConnection(connectionString))
            {
                return connection.ExecuteAsync(sql, parameters);
            }
        }
    }

5. BlazorServer 웹프로젝트 Dependencies에 DBLibrary 연결등록

6. [Shared] -> appsettings.json 에 mysql DB정보 세팅

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "AllowedHosts": "*",
  "ConnectionStrings": {
    "default": "Server=localhost;Port=3306;database=blazor;user id=blazor;password=1111;charset=utf8"
   //"default": "Server=localhost;Port=3306;database=blazor;user id=blazor;password=1111;OldGuids=True;charset=utf8"
  }
}

7. BlazorServer 프로젝트  Startup.cs 에서 ConfigureServices 부품박스(컨테이너)에 부품사용등록

public void ConfigureServices(IServiceCollection services)
   {
       services.AddRazorPages();
       services.AddServerSideBlazor();
       services.AddSingleton<IDbAccess, MysqlAccess>();
   }

8. Blazor People.razor 페이지에서 사용

[데이타 모델 구조]

namespace BlazorServer.Models
{
    public class PersonModel
    {
        public string Name { get; set; }
        public string Point { get; set; }
    }
}

[ razor 페이지에 부품 연결(inject) 사용]

@page "/people"
 
@using DBLibrary
@using BlazorServer.Models
@using Microsoft.Extensions.Configuration
@inject IDbAccess _data
@inject IConfiguration _config
 
<h3>People</h3>
 
<button class="btn btn-primary" @onclick="InsertData">Insert</button>
<button class="btn btn-warning" @onclick="UpdateData">Update</button>
<button class="btn btn-danger" @onclick="DeleteData">Delete</button>
 
@if (people == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @foreach (var p in people)
    {
        <p>
            @p.Name @p.Point
        </p>
    }
}

@code {
    List<PersonModel> people;
 
    private async Task InsertData()
    {
        string sql = "insert into people (Name, Point) values (@Name, @Point);";
        await _data.SaveData(sql, new { Name = "Billy", Point = "300" }, _config.GetConnectionString("default"));
        await OnInitializedAsync();
    }
 
    private async Task UpdateData()
    {
        string sql = "update people set Name = @Name where Point = @Point";
        await _data.SaveData(sql, new { Name = "Timothy", Point = "100" }, _config.GetConnectionString("default"));
        await OnInitializedAsync();
    }
 
    private async Task DeleteData()
    {
        string sql = "delete from people where Point = @Point";
        await _data.SaveData(sql, new { Point = "70" }, _config.GetConnectionString("default"));
        await OnInitializedAsync();
    }
 
    protected override async Task OnInitializedAsync()
    {
        string sql = "select * from people";
        people = await _data.LoadData<PersonModel, dynamic>(sql, new { }, _config.GetConnectionString("default"));
    }
 
}

[People 페이지를 partial behind code로 만든다면 아래와 같다. 분리가 프로그램 같아서 좋다.]

[People.razor]

@page "/people"
<h3>People</h3>
 
<button class="btn btn-primary" @onclick="InsertData">Insert</button>
<button class="btn btn-warning" @onclick="UpdateData">Update</button>
<button class="btn btn-danger" @onclick="DeleteData">Delete</button>
 
@if (people == null)
{
    <p><em>Loading...</em></p>
}
else
{
    @foreach (var p in people)
    {
        <p>
            @p.Name @p.Point
        </p>
    }
}
 

[People.razor.cs]

using BlazorServer.Models;
using DBLibrary;
using Microsoft.AspNetCore.Components;
using Microsoft.Extensions.Configuration;
using System.Collections.Generic;
using System.Threading.Tasks;
 
 
namespace BlazorServer.Pages
{
    public partial class People
    {
        [Inject]
        public IDbAccess _data { get; set; }
        [Inject]
        public IConfiguration _config { get; set; }
 
        List<PersonModel> people;
 
        private async Task InsertData()
        {
            string sql = "insert into people (Name, Point) values (@Name, @Point);";
            await _data.SaveData(sql, new { Name = "Billy", Point = "300" }, _config.GetConnectionString("default"));
            await OnInitializedAsync();
        }
 
        private async Task UpdateData()
        {
            string sql = "update people set Name = @Name where Point = @Point";
            await _data.SaveData(sql, new { Name = "Timothy", Point = "100" }, _config.GetConnectionString("default"));
            await OnInitializedAsync();
        }
 
        private async Task DeleteData()
        {
            string sql = "delete from people where Point = @Point";
            await _data.SaveData(sql, new { Point = "70" }, _config.GetConnectionString("default"));
            await OnInitializedAsync();
        }
 
        protected override async Task OnInitializedAsync()
        {
            string sql = "select * from people";
            people = await _data.LoadData<PersonModel, dynamic>(sql, new { }, _config.GetConnectionString("default"));
        }
    }
}

//위 소스 개선할 점 -> MysqlAccess 변수명을 DbAccess 로 변경필요

MysqlAccess.cs ->DbAccess.cs 로 파일명 변경

[DbAccess.cs]

[Startup.cs]

[이유]

DI 패턴 목적이 DB종류가 바뀔때 소스 수정을 최소화 하는것인데, MysqlAccess 로 변수명을 결정짓고 있다.

처음부터 DbAccess 로 하고, 만약 DB가 변경된다면 오로지 DbAccess.cs 에서 각 DB연동 로직만 변경하면 된다.