Blazor에서 Inputbox에 Auto Focusing 주기

index.razor

@page "/"
<div class="modal-footer">
    <button type="button" class="btn btn-primary" @onclick=ShowHelloPopup>Hello Popup</button>
</div>
@code
{
    private async Task ShowHelloPopup()
    {
        ModalDialogOptions options = new ModalDialogOptions()
            {
                BackgroundClickToClose = false,
            };
        await ModalDialog.ShowDialogAsync<HelloPopup>("Hello Popup", options);
    }
}

 

 

 

 

HelloPopup.razor

@if (IsLoaded)
{
    <EditForm EditContext=editContext OnValidSubmit="Submit">
        <DataAnnotationsValidator />
        <input type="text" id="name" @bind="StudentRequeset!.Name" @ref=NameFocus />
 
        <button type="submit">Submit</button>
    </EditForm>
}
 
@code
{
    private Student? StudentRequeset { get; set; }
    private ElementReference NameFocus;
    private EditContext? editContext;
    private bool IsLoaded { get; set; } = false;
 
    protected override async Task OnInitializedAsync()
    {
        await Task.Delay(100);
        StudentRequeset = new();
        editContext = new(StudentRequeset);
 
        IsLoaded = true;
    }
 
    private async Task Submit()
    {
        await ModalDialog.ShowMessageBoxAsync("Hello", "안녕하세요", MessageBoxButtons.OK);
    }
 
    protected override async void OnParametersSet()
    {
        await InvokeAsync(StateHasChanged);
        await SetFocus();
    }
 
    private async Task SetFocus()
    {
        await NameFocus.FocusAsync();
    }
 
    public class Student
    {
        public string? Name { get; set; } = string.Empty;
    }
}

1. @ref="NameFocus"

HTML 구성요소에  속성값을 넣거나 기능을 부여

https://learn.microsoft.com/ko-kr/dotnet/architecture/blazor-for-web-forms-developers/components

2. ElementReference 변수 선언

3. OnParametersSet() 이벤트에 Focus 메서 추가

html 페이지에  OnInitialized 또는 OnInitializedAsync 이벤트에서 설정 된 것들이 랜더링 된 이후
OnParametersSet 메서드 수행

Blazor 수명주기 : https://learn.microsoft.com/ko-kr/aspnet/core/blazor/components/lifecycle?view=aspnetcore-7.0 

ASP.NET Core Razor 구성 요소 수명 주기

 

실행

 

 

 

 

기타 : Nuget에서 설치해야 하는 Popup 컨트롤 (LiquidTechnologies.Blazor.ModalDialog)

https://github.com/LiquidTechnologies/blazor-modal-dialog