[Blazor] Modal 띄우기 - Blazored.Modal

이전 포스팅에서 Dialog 를 띄우는걸 포스팅 했었는데

2023.01.03 - [C#/Blazor] - [Blazor] PopUp 메세지 처리하기 - LiquidTechnologies.Blazor.ModalDialog

Blazored 에도 Modal 이 있어 소개합니다.

1. Blazor WebAssembly 프로젝트 생성

2. Blazored.Modal 누겟 패키지 설치

3. Program.cs 에 코드 추가 및 Using 코드 추가

Program.cs 에 아래 코드 추가

using Blazored.Modal;

builder.Services.AddBlazoredModal();

_Imports.razor 에 using 추가

@using Blazored.Modal
@using Blazored.Modal.Services

 

App.razor 에서 아래 처럼 <CascadingBlazoredModal> 태그로 전체를 감싸게합니다.

<CascadingBlazoredModal>
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
            <FocusOnNavigate RouteData="@routeData" Selector="h1" />
        </Found>
        <NotFound>
            <PageTitle>Not found</PageTitle>
            <LayoutView Layout="@typeof(MainLayout)">
                <p role="alert">Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingBlazoredModal>

4. Modal 에 사용될 화면 추가

Confirm.razor

<div>
    <p>Please click one of the buttons below to close or cancel the modal.</p>

    <button @onclick="Close" class="btn btn-primary">Close</button>
    <button @onclick="Cancel" class="btn btn-secondary">Cancel</button>
</div>

@code {

    [CascadingParameter] BlazoredModalInstance BlazoredModal { get; set; } = default!;

    async Task Close() =>  await BlazoredModal.CloseAsync(ModalResult.Ok(true));
    async Task Cancel() => await BlazoredModal.CancelAsync();

}

5. 화면에서 사용

Index.razor

@page "/"

<PageTitle>Blazored Modal Samples</PageTitle>

<h1>Blazored Modal Samples</h1>

<hr class="mb-5" />

<p>
    This is an example of using Blazored Modal in its most simplistic form.
</p>

<button @onclick="ShowModal" class="btn btn-primary">Show Modal</button>

@code {

    [CascadingParameter] public IModalService Modal { get; set; } = default!;

    void ShowModal() => Modal.Show<Confirm>("Welcome to Blazored Modal");

}

결과

[Source]
https://github.com/kei-soft/Blazor.AppTest/tree/master/Blazor.BlazoredTest

GitHub - kei-soft/Blazor.AppTest