BlazorDatasheet 에 동적 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용

BlazorDatasheet 에 dynamic 바인딩 처리하기 - SQLiteDB/Dapper 이용

 

DB 쿼리결과 데이터를 BalzorDatasheet 에 바인딩하여 표시하는 방법을 알아봅니다.

쿼리결과에 대한 모델은 정해져 있지 않은  dynamic 형태로 반환받아 처리하는 방법입니다.

 

1. Blazor ssr 프로젝트 생성 및 BalzorDatasheet nuget package 설치 및 설정

2025.03.02 - [코딩/Blazor] - BlazorDatasheet 사용하기

BlazorDatasheet 사용하기

 

2. SQLite 파일 설정 및 테이블 생성

Dapper, Microsofr.Data.Sqlite nuget package 를 설치합니다.

sqlite 파일 경로 설정을 위해

Program.cs 에 아래 내용을 추가합니다.

// SQLite 데이터베이스 연결 추가
builder.Services.AddScoped<IDbConnection>((sp) =>
{
    // wwwroot 폴더에 데이터베이스 파일 생성
    var dbPath = Path.Combine(builder.Environment.WebRootPath, "products.db");
    return new SqliteConnection($"Data Source={dbPath}");
});

 

다음으로 테이블 생성 및 데이터를 삽입하는 DatabaseInitializer 를 작성하고

using System.Data;

using Dapper;

namespace BlazorSheetTest.Components
{
    public static class DatabaseInitializer
    {
        public static void Initialize(IDbConnection connection)
        {
            connection.Execute(@"
            CREATE TABLE IF NOT EXISTS Products (
                Id INTEGER PRIMARY KEY AUTOINCREMENT,
                Name TEXT NOT NULL,
                Price REAL NOT NULL,
                Quantity INTEGER NOT NULL
            )");

            // 샘플 데이터 삽입
            connection.Execute(@"
            INSERT OR IGNORE INTO Products (Name, Price, Quantity) 
            VALUES 
                ('Laptop', 1200, 5),
                ('Keyboard', 50, 20),
                ('Mouse', 30, 15)");
        }
    }
}

Program.cs 에 코드를 추가합니다.

// SQLite 데이터베이스 초기화
using (var scope = app.Services.CreateScope())
{
    using var connection = scope.ServiceProvider.GetRequiredService<IDbConnection>();
    connection.Open();
    DatabaseInitializer.Initialize(connection);
}

샘플 데이터 삽입코드는 한번 실행하고 주석 처리해야합니다.(직접 DB 를 작성해도 됩니다.)

아래는 Program.cs 의 전체 코드입니다.

using System.Data;

using BlazorDatasheet.Extensions;

using BlazorSheetTest.Components;

using Microsoft.Data.Sqlite;

namespace BlazorSheetTest;

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        // BlazorDatasheet 추가
        builder.Services.AddBlazorDatasheet();

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

        // SQLite 데이터베이스 연결 추가
        builder.Services.AddScoped<IDbConnection>((sp) =>
        {
            // wwwroot 폴더에 데이터베이스 파일 생성
            var dbPath = Path.Combine(builder.Environment.WebRootPath, "products.db");
            return new SqliteConnection($"Data Source={dbPath}");
        });

        var app = builder.Build();

        // SQLite 데이터베이스 초기화
        using (var scope = app.Services.CreateScope())
        {
            using var connection = scope.ServiceProvider.GetRequiredService<IDbConnection>();
            connection.Open();
            DatabaseInitializer.Initialize(connection);
        }

        // Configure the HTTP request pipeline.
        if (!app.Environment.IsDevelopment())
        {
            app.UseExceptionHandler("/Error");
            // 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.UseHttpsRedirection();

        app.UseAntiforgery();

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

        app.Run();
    }
}

 

3. 데이터 바인딩

dapper 를 이용해 쿼리를 실행하고 결과 데이터를 바인딩합니다.

private async Task OnDynamicBinding()
{
    sheet.Commands.PauseHistory();  // 히스토리 저장 중지
    sheet.BatchUpdates();  // 배치 업데이트 시작

    try
    {
        // 1. 동적 쿼리 실행
        var products = await DbConnection.QueryAsync("SELECT * FROM Products");
        var productsList = products.ToList();

        if (!productsList.Any()) return;  // 데이터가 없으면 중지

        // 2. 첫 번째 행에서 컬럼 이름 추출
        var firstRow = (IDictionary<string, object>)productsList.First();
        var columnNames = firstRow.Keys.ToList();

        // 3. 시트 크기 설정 (행 개수, 컬럼 개수)
        sheet = new Sheet(productsList.Count, columnNames.Count);

        // 4. 컬럼 헤더 설정
        for (int i = 0; i < columnNames.Count; i++)
        {
            sheet.Columns.SetHeadings(i, i, columnNames[i]);
        }

        // 5. 데이터 변환 및 시트에 적용
        var dataValues = productsList
            .Select(row => ((IDictionary<string, object>)row)
                .Values
                .Select(value => ConvertToCellValue(value)) // 데이터 변환
                .ToArray())
            .ToArray();

        // 6. 셀에 데이터 설정
        sheet.Cells.SetValues(0, 0, dataValues);
    }
    finally
    {
        // 7. 업데이트 종료 및 UI 갱신
        sheet.EndBatchUpdates();
        sheet.Commands.ResumeHistory();
        sheet.ScreenUpdating = true;
    }
}

 

결과