C# Blazor 이벤트 처리하기

C# Blazor 이벤트 처리하기

 
Blazor 화면에서 사용자 조작에 의한 이벤트 발생시 처리하는 방법을 알아봅니다.
 

기본적인 이벤트 처리방법입니다.

아래는 화면에서 버튼과 체크박스가 있는 경우 클릭과 체크박스 변화에 대한 이벤트를 처리합니다.
@붙인 이벤트인자에 메서드를 연결하면 됩니다.

<PageTitle>Event Handler</PageTitle>

<h1>Event Handler Example</h1>

<h2>@headingValue</h2>

<p>
    <button @onclick="UpdateHeading">
        Update heading
    </button>
</p>

<p>
    <label>
        <input type="checkbox" @onchange="CheckChanged" /> 
        <br />
        @checkedMessage
    </label>
</p>

@code {
    private string headingValue = "Initial heading";
    private string checkedMessage = "Not changed yet";

    private void UpdateHeading()
    {
        headingValue = $"New heading ({DateTime.Now})";
    }

    private void CheckChanged()
    {
        checkedMessage = $"Last changed at {DateTime.Now}";
    }
}

위 코드에서 알수 있듯이  @onclick @onchange 이벤트에 미리 정의한 메서드 UpdateHeading() CheckChanged() 를 호출하도록 합니다.

버튼을 클릭할때 마다 heading 의 시간이 변경되고 checkbox 가 체크, 체크해제 시 아래 changed 시간이 변경됩니다.
 

이벤트처리는 비동기 호출이 가능합니다.

위 코드에서 UpdateHeading 메서드를 비동기로 변경하여 호출하면 처리됩니다.

    private async Task UpdateHeading()
    {
        await Task.Delay(2000);

        headingValue = $"New heading ({DateTime.Now})";
    }

위 코드는 2초 있다가 화면의 heading 내용이 변경됩니다.
화면이 멈추거나 다른 컨트롤 클릭에 방해되지 않습니다.
 

이벤트에는 기본 제공 이벤트 인수가 있습니다.

아래처럼 클릭이벤트에는 MouseEventArgs 이벤트 인자가 제공됩니다.

@for (var i = 0; i < 4; i++)
{
    <p>
        <button @onclick="ReportPointerLocation">
            Where's my mouse pointer for this button?
        </button>
    </p>
}

<p>@mousePointerMessage</p>

@code {
    private string? mousePointerMessage;

    private void ReportPointerLocation(MouseEventArgs e)
    {
        mousePointerMessage = $"Mouse coordinates: {e.ScreenX}:{e.ScreenY}";
    }
}

인자에는 마우스 좌표 및 키보드 키 값등 여러 값들이 있어 활용이 가능합니다.

 

람다식

아래 처럼 람다식을 이용해 메서드 정의없이 활용이 가능합니다.

    <button @onclick="@(e => headingValue = $"New heading!!!({DateTime.Now})")">
        Update New heading
    </button>

 

값 전달하기

메서드에 인자를 넣고 이벤트에서 데이터를 전달 할 수 있습니다.

<h2>@headingValue</h2>

@foreach (var buttonText in ButtonTextList)
{
    <p>
        <button @onclick="@(e => UpdateHeading(buttonText))">
            Button #@buttonText
        </button>
    </p>
}


@code {
    public List<string> ButtonTextList = new List<string>() { "A", "B", "C", "D" };

    private string headingValue = "Initial heading";

    private void UpdateHeading(string buttonText)
    {
        headingValue = $"Click heading - {buttonText}";
    }
}

결과