728x90
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);
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
'C# > Blazor' 카테고리의 다른 글
| [Blazor] refresh 이벤트 처리하기 (0) | 2023.01.16 |
|---|---|
| [Blazor] Blazor Form 사용하기 - EditForm Model (0) | 2023.01.13 |
| [Blazor] Blazored.Toast 사용하여 Toast Message 표시하기 (0) | 2023.01.02 |
| [Blazor] LifeCycle (0) | 2023.01.02 |
| [Blazor] EventCallback 이용하여 부모에게 값 전달하기 (0) | 2023.01.02 |
