Radzen.Blazor의 DatePicker를 대화 상자에서 표시

소개

<본 기사의 대상자>
Blazor(블레이저)를 시작했지만, 다이얼로그 표시 & 반환이 잘 움직이지 않는 사람

<기사 개요>
Radzen.Blazor는 매우 강력한 전면 프레임 워크를 제공하지만 DialogService 주위가 다루기 어렵다고 느꼈기 때문에 일반적인 EventCallback에서 결과를 반환하는 방법에 대한 설명입니다.
참고 URL: h tps://b 라 d 젠. 코 m/아아 g

개발 환경

Visual Studio 2019 v16.4.5(Bootstrap v4.3.1)
Radzen.Blazor v2.1.20

설정

Visual Studio 2019 설정
htps : // / cs. mic로소 ft. 코 m / 그럼 jp / ぃ す あ ls つぢ お / い ん た lぃぃ w = vs - 2019

Blazor 프로젝트 생성 절차
파일 > 새로 만들기 > 프로젝트...에서 새 프로젝트를 만듭니다.



작성하면 다음 구성으로 솔루션이 작성됩니다.

Radzen.Blazor 설정
h tps://b 라 d 젠. 코 m / 게 ts r d

실행
　【F5】로 빌드 실행됩니다.
레거시 Edge는 대응하고 있지 않으므로 최신 Edge를 추천합니다. Chrome에서도 움직이지만 Edge가 더 빠릅니다.

방법

기본 구성 변경

NavMenu.razor를 변경하여 캘린더 화면을 불러올 수 있습니다.
25행에 다음을 삽입한다.

NavMenu.razor

        <li class="nav-item px-3">
            <NavLink class="nav-link" href="calendar">
                <span class="oi oi-calendar" aria-hidden="true"></span> Calendar
            </NavLink>
        </li>

새 파일 추가

다음 두 가지를 추가합니다.
・Calendar.razor : 캘린더 화면(위의 내비게이션 메뉴의 천이처)
· CalendarDialog.razor : 캘린더 화면의 버튼을 눌러 표시하는 캘린더 대화 상자 화면

Calendar.razor

@page "/calendar"

<h3>Calendar</h3>

<div>日付：@CurrentDatetimePrint</div>

<RadzenButton Text="ダイアログ表示" Click="RadzenButton_Click"></RadzenButton>

<CalendarDialog @ref="calendarDialog" currentDatetime="_currentDatetime" OnSelected="CalendarDialog_Selected"></CalendarDialog>

@code {

    private CalendarDialog calendarDialog { get; set; }

    private DateTime _currentDatetime { get; set; } = DateTime.Now;

    public string CurrentDatetimePrint
    {
        get
        {
            return string.Format("{0}", _currentDatetime.ToString("yyyyMMdd"));
        }
    }

    private void RadzenButton_Click()
    {
        calendarDialog.Open();
    }

    private void CalendarDialog_Selected(DateTime result)
    {
        _currentDatetime = result;
    }

}

CalendarDialog.razor

<div class="modal @ModalClass" tabindex="-1" role="dialog" style="display:@ModalDisplay">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <RadzenDatePicker TValue="DateTime" Inline="true" Change="@(args => Change(args, "Calendar", "MM/dd/yyyy"))" />
            </div>
            <div class="modal-footer">
                <button @onclick="OnClickOK">OK</button>
                <button @onclick="OnClickCancel">Cancel</button>
            </div>
        </div>
    </div>
</div>

@if (ShowBackdrop)
{
    <div class="modal-backdrop fade show"></div>
}

@code {

    [Parameter]
    public DateTime currentDatetime { get; set; } = DateTime.Now;
    [Parameter]
    public EventCallback<DateTime> OnSelected { get; set; }

    private DateTime _resultDatetime;

    public string ModalDisplay = "none;";
    public string ModalClass = "";
    public bool ShowBackdrop = false;

    public void Open()
    {
        ModalDisplay = "block;";
        ModalClass = "Show";
        ShowBackdrop = true;
        StateHasChanged();
    }

    public void Close()
    {
        ModalDisplay = "none";
        ModalClass = "";
        ShowBackdrop = false;
        StateHasChanged();
    }

    DateTime calendarDialogResult = DateTime.Now;

    void Change(DateTime? value, string name, string format)
    {
        _resultDatetime = (DateTime)value;
        StateHasChanged();
    }

    private void OnClickOK()
    {
        OnSelected.InvokeAsync(_resultDatetime);
        Close();
        StateHasChanged();
    }

    private void OnClickCancel()
    {
        OnSelected.InvokeAsync(currentDatetime);
        Close();
        StateHasChanged();
    }

}

포인트로서는
"