C#/Blazor

[Blazor] PopUp 메세지 처리하기 - LiquidTechnologies.Blazor.ModalDialog

kjun.kr 2023. 1. 3. 22:10
728x90
728x170

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. 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 띄우기

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

3

6. Popup 처리하기
팝업으로 띄울 화면 정의
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);
    }
}

팝업 띄울때 파라미터를 전달하고 전달 받은 파라미터를 팝업에서 받아 처리할 수 있습니다.
화면에서는 아래 처럼 사용합니다.

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";
}


* 전체코드
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

 

728x90
그리드형
저작자표시 비영리 변경금지