Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor

Windows Linux macOS

Попробуйте счетчик

В работающем приложении перейдите на страницу «Счетчик», щелкнув вкладку «Счетчик» на боковой панели слева. После этого должна появиться следующая страница:

На странице счетчика представлена кнопка «Нажми меня», чтобы увеличить счетчик, отображаемый на странице.

Используйте кнопку Нажми мeня, чтобы увеличить счетчик без обновления страницы. Для увеличения счетчика на веб-странице обычно требуется написать JavaScript, но с Blazor вы можете использовать C#.

Вы можете найти реализацию компонента Counter в файле Counter.razor, расположенном в каталоге Components/Pages.

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++;
    }
}

Запрос /counter в браузере, как указано в директиве @page вверху, заставляет компонент Counter отображать свое содержимое. Директива @rendermode включает интерактивную серверную отрисовку компонента, чтобы он мог обрабатывать события пользовательского интерфейса из браузера.

Каждый раз, когда нажимается кнопка Нажми меня:

  • Событие onclick запускается.
  • Вызывается метод IncrementCount.
  • Значение currentCount увеличивается.
  • Компонент визуализируется, чтобы показать обновленный счетчик.
Продолжить