C# Blazor Dialog 처리하기 (LiquidTechnologies.Blazor.ModalDialog)

Blazor - Dialog 처리하기 (LiquidTechnologies.Blazor.ModalDialog)

LiquidTechnologies.Blazor.ModalDialog 패키지를 이용하여 MessageBox 를 띄우거나

특정 화면을 팝업으로 띄우는 방법입니다.

1. LiquidTechnologies.Blazor.ModalDialog Nuget 패키지 설치

2. Program.cs 에 코드 추가

using Blazor.ModalDialog;
builder.Services.AddModalDialog();

Program.cs

using Blazor.ModalDialog;

using LiquidTest;

using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddModalDialog();

await builder.Build().RunAsync();

3. global using 처리

using Blazor.ModalDialog;

_Imports.razor

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using LiquidTest
@using LiquidTest.Shared

@using Blazor.ModalDialog

4. wwwroot 의 index.html 파일에 link, script 추가

<link href="_content/LiquidTechnologies.Blazor.ModalDialog/liquid-modal-dialog.css" rel="stylesheet" />
<script src="_content/LiquidTechnologies.Blazor.ModalDialog/liquid-modal-dialog.js"></script>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>LiquidTest</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="LiquidTest.styles.css" rel="stylesheet" />
    <link href="_content/LiquidTechnologies.Blazor.ModalDialog/liquid-modal-dialog.css" rel="stylesheet" />
</head>

<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
    <script src="_content/LiquidTechnologies.Blazor.ModalDialog/liquid-modal-dialog.js"></script>
</body>

</html>

5. MessageBox 띄우기 - Confirm Dialog

MessageBoxDialogResult result = await ModalDialog.ShowMessageBoxAsync("Simple Message Box", "Click OK/Cancel", MessageBoxButtons.OKCancel);

6. 화면을 Dialog 로 띄우기

팝업으로 띄울 화면 정의
SignUpForm.razor

@inject IModalDialogService ModalDialogService

<p>Form Id input Parameter : @FormId</p>

<div class="simple-form">

    <div class="form-group">
        <label for="first-name">First Name</label>
        <input @bind="FirstName" type="text" class="form-control" id="first-name" placeholder="Enter First Name" />
    </div>

    <div class="form-group">
        <label for="last-name">Last Name</label>
        <input @bind="LastName" type="text" class="form-control" id="last-name" placeholder="Enter Last Name" />
    </div>

    <button @onclick="Ok_Clicked" class="btn btn-primary">Submit</button>
    <button @onclick="Cancel_Clicked" class="btn btn-secondary">Cancel</button>
</div>


@code {

    [Parameter]
    public string FirstName { get; set; }
    [Parameter]
    public string LastName { get; set; }
    [Parameter]
    public int FormId { get; set; }

    private void Ok_Clicked()
    {
        if (string.IsNullOrWhiteSpace(FirstName) && string.IsNullOrWhiteSpace(LastName))
        {
            return;
        }
        else
        {
            ModalDialogParameters resultParameters = new ModalDialogParameters();
            resultParameters.Set("FullName", FirstName + " " + LastName);
            ModalDialogService.Close(true, resultParameters);
        }
    }

    void Cancel_Clicked()
    {
        ModalDialogService.Close(false);
    }
}

위 코드를 보면 부모로 부터 FormID 를 parameter 로 전달받고 있으며 OK 버튼클릭시 부모에 전달할 데이터를

ModelDialogParameter 에 설정하여 전달할 수 있습니다.

Dialog 를.호출할 부모 화면에서는 아래처럼 사용합니다.

var parameters = new ModalDialogParameters();
parameters.Add("FormId", 11);

ModalDialogResult result = await ModalDialog.ShowDialogAsync<SignUpForm>("Sign Up Form", null, parameters);

if (result.Success)
{
    Message = "User info : " + result.ReturnParameters.Get<string>("FullName");
}
else
{
    Message = "User Cancelled";
}

ReturnParameters 에서 전달 받은 값을 Get<string> 로 꺼내 값을 가져올 수 있습니다.

* 전체코드
Index.razor

@page "/"

@inject IModalDialogService ModalDialog

<p>
    <button @onclick="ShowMessageBox" class="btn btn-primary">Show MessageBox</button>
    <br />
    @LastMessageBoxResult
</p>

<p>
    <button @onclick="ShowPopupSignUp" class="btn btn-primary">Show Sign Up Popup</button>
    <br />
    @Message
</p>

@code {

    string LastMessageBoxResult = "Not Set";
    string Message = "Requesting Data From User";

    async void ShowMessageBox()
    {
        MessageBoxDialogResult result = await ModalDialog.ShowMessageBoxAsync("Simple Message Box", "Click OK/Cancel", MessageBoxButtons.OKCancel);

        LastMessageBoxResult = result.ToString();

        StateHasChanged();
    }

    async void ShowPopupSignUp()
    {
        var parameters = new ModalDialogParameters();
        parameters.Add("FormId", 11);

        ModalDialogResult result = await ModalDialog.ShowDialogAsync<SignUpForm>("Sign Up Form", null, parameters);

        if (result.Success)
        {
            Message = "User info : " + result.ReturnParameters.Get<string>("FullName");
        }
        else
        {
            Message = "User Cancelled";
        }

        StateHasChanged();
    }
}

결과

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

GitHub - kei-soft/Blazor.AppTest

Contribute to kei-soft/Blazor.AppTest development by creating an account on GitHub.

github.com

저작자표시 비영리 변경금지

'코딩 > Blazor' 카테고리의 다른 글

C# Blazor Toast Message 표시하기 (0)	2024.04.22
C# Blazor LifeCycle 확인 (0)	2024.04.22
C# Blazor EditContext 를 이용해 Validation 처리하기 (0)	2024.04.22
C# Blazor Refresh 이벤트 처리하기 (0)	2024.04.18
C# Blazor Required 항목 Validation 에서 제외하기 (Disable 처리) (0)	2024.04.18