[Blazor] With MudBlazor

[CODE_REAPER]

MudBlazor를 활용한 UI 구성 지식을 정리합니다.

편의상 MudBlazor Template로 프로젝트를 생성해서 작업합니다.

[파란매]

궁금하네요 기대

[iamjinseok]

앗, 저도 관심있습니다. ㅋㅋㅋ

[CODE_REAPER]

MudDialog

MudBlazor 문서
https://mudblazor.com/components/dialog

Source code (GitHub)
https://github.com/ChoiHM/MB-MudDialogSample

---

기본적인 사항

Global 설정

Shared>MainLayout.razor 파일을 열어서 제일 윗 부분을 봅니다.

@inherits LayoutComponentBase

<MudThemeProvider />
<MudDialogProvider /> @* <-- MudDialogProvider 인스턴스 정의 및 Global setting *@
<MudSnackbarProvider />

설정은 아래와 같이 구체적으로 할 수 있으며, Dialog 호출시 별다른 옵션을 지정해주지 않으면 Global 설정을 상속받습니다.

<MudDialogProvider
    FullWidth="true"
    MaxWidth="MaxWidth.ExtraSmall"
    CloseButton="true"
    DisableBackdropClick="true"
    NoHeader="true"
    Position="DialogPosition.Center"
    CloseOnEscapeKey="true"
/>

---

Dialog 호출

1. Dialog 입력값 리턴

이제 간단하게 테스트를 위한 버튼 2개과 Dialog 컴포넌트도 2개 만들겠습니다.
페이지는 Index.razor를 대충 수정하겠습니다. 버튼을 2개 추가하고 onclick 이벤트를 연결합니다.

• Index.razor

@page "/"
@inject IDialogService _dialogService
@using MudDialogSample.Dialog;

<PageTitle>Index</PageTitle>

<MudText Typo="Typo.h3" GutterBottom="true">Dialog테스트</MudText>

<MudStack Row="true" Class="mb-5" Spacing="1">
    <MudButton Variant="Variant.Outlined" Size="Size.Small"
               @onclick="NewFolder">새 폴더</MudButton>

    <MudButton Variant="Variant.Outlined" Size="Size.Small"
               @onclick="NewFolderAsync">새 폴더 Async</MudButton>

    <MudButton Variant="Variant.Outlined" Size="Size.Small" Color="Color.Info" StartIcon="@Icons.Material.Filled.CloudUpload"
               @onclick="Upload">업로드</MudButton>
</MudStack>

<MudText>폴더명: @NewFolderName</MudText>

@code {
    private string NewFolderName = string.Empty;

    private void NewFolder()
    {
        // 리턴값이 필요하다면 Show함수로는 받아올 수 없어요!
        var dialog = _dialogService.Show<DlgNewFolder>("새 폴더 만들기",
        new DialogOptions() { CloseOnEscapeKey = true });
        //var result = dialog.Result.Result;
    }

    private async void NewFolderAsync()
    {
        var dialog = await _dialogService.ShowAsync<DlgNewFolder>("새 폴더 만들기",
        new DialogOptions() { CloseOnEscapeKey = true });
        var result = await dialog.Result;

        if (result == null || result.Canceled) { return; }
        if (result?.Data != null)
        {
            if (string.IsNullOrWhiteSpace(result.Data.ToString()))
            {
                return;
            }
            NewFolderName = result.Data.ToString();
            StateHasChanged();
        }
    }

    private async void Upload()
    {
    }
}

ShowAsync메서드 오류 표시 해결 방법

MudTemplate을 이용해서 프로젝트를 생성하면, 구버전이 설치된 경우가 많습니다.
따라서 ShowAsync함수가 제공되지 않는 버전을 사용하면 오류가 발생하므로, 아래와 같이 업데이트 해주는 것이 좋습니다.
(저의 경우 6.0.13이 설치되어 있으며, 6.2.2로 업데이트 진행했습니다.)

프로젝트에 Dialog 폴더도 하나 생성하여 Dialog용도로 컴포넌트를 생성합니다.
'새 폴더'를 위한 항목이므로 DlgNewFolder.razor로 생성했습니다.

• DlgNewFolder.razor 소스코드

<MudDialog DefaultFocus="DefaultFocus.FirstChild">
  <DialogContent>
      <MudForm ReadOnly="false">
          <MudTextField T="string" Label="폴더명" @bind-Value="FolderName" Immediate="true" 
OnKeyDown="keydown"></MudTextField>
      </MudForm>
  </DialogContent>
  <DialogActions>
      <MudButton Color="Color.Primary" ButtonType="ButtonType.Submit"
OnClick="Submit">생성</MudButton>
      <MudButton OnClick="Cancel">취소</MudButton>
  </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter]
    public string FolderName { get; set; }

    void Submit() => MudDialog.Close(DialogResult.Ok(FolderName));
    void Cancel() => MudDialog.Cancel();

    private void keydown(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            MudDialog.Close(DialogResult.Ok(FolderName));
        }
    }
}

MudBlazor에는 FocusTrap이라는 객체가 있습니다. 이와 관련된 설명은 MudBlazor 문서를 참고해주세요.
간략하게 설명드리자면 MudDialog에는 기본적으로 FocusTrap이 들어가 있어서

<MudDialog DefaultFocus="DefaultFocus.FirstChild">

이렇게 DefaultFocus를 FirstChild로 세팅만 해주셔도 객체 내부의 첫번째 요소에 자동으로 포커스가 생기게 됩니다.
또한 아래와 같이 첫번째 요소인 TextField에 onkeydown 이벤트를 수신함으로써, 엔터키에 반응할 수 있도록 해놨습니다.

<MudTextField T="string" Label="폴더명" @bind-Value="FolderName" Immediate="true" 
OnKeyDown="keydown"></MudTextField>

자! 이제 실행해서 페이지를 띄우고 ‘새 폴더 Async’ 버튼을 눌러봅니다.

처음 포커스가 TextField로 가 있을겁니다.
DotNetDev 입력 후 엔터!

시간 관계상 “Dialog로 파라미터 넘겨주기” (업로드 버튼)는 다음 시간에 추가하도록 할게요!