Blazor를 사용하여 ASP.NET Core로 첫 웹앱을 빌드하세요.

Windows Linux macOS

카운터 사용해 보기

실행 중인 앱에서 왼쪽 사이드바의 카운터 탭을 클릭하여 카운터 페이지로 이동합니다. 그런 다음 페이지를 표시해야 합니다.

카운터 페이지에는 페이지에 표시된 횟수를 증가시키는 클릭 단추가 표시됩니다.

페이지를 새로 고치지 않고 카운트를 늘리려면 나를 클릭하세요 버튼을 선택하세요. 웹 페이지에서 카운터를 증가시키려면 일반적으로 JavaScript를 작성해야 하지만 Blazor에서는 C#을 사용할 수 있습니다.

Components/Pages 디렉터리에 있는 Counter.razor 파일에서 Counter 구성 요소의 구현을 찾을 수 있습니다.

Components/Pages/Counter.razor
@page "/counter"
@rendermode InteractiveServer

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

맨 위의 @page 지시문에 지정된 대로 브라우저에서 /counter를 요청하면 Counter 구성 요소가 해당 콘텐츠를 렌더링합니다. @rendermode 지시문은 구성 요소에 대해 대화형 서버 렌더링을 사용하도록 설정하여 브라우저에서 사용자 인터페이스 이벤트를 처리할 수 있도록 합니다.

[클릭] 버튼을 선택할 때마다:

  • onclick 이벤트가 발생합니다.
  • IncrementCount 메서드가 호출됩니다.
  • currentCount가 증가합니다.
  • 업데이트된 수를 표시하기 위해 구성 요소가 렌더링됩니다.
계속