Начало работы с ASP.NET Core

В этом руководстве показано, как создать, запустить и изменить ASP.NET Core Blazor Web App с помощью .NET CLI. Blazor — это интерфейсная веб-платформа .NET, которая поддерживает отрисовку на стороне сервера и взаимодействие клиента в одной модели программирования.

Вы узнаете, как:

• Создайте Blazor Web App.
• Запустите приложение.
• Измените приложение.
• Закройте приложение.

Prerequisites

Получите и установите последнюю версию .NET SDK на странице Загрузка .NET.

Создайте Blazor Web App

Откройте командную оболочку в подходящем расположении для примера приложения и используйте следующую команду для создания Blazor Web App. Параметр -o|--output создает папку для проекта и присваивает имя проекту BlazorSample:

dotnet new blazor -o BlazorSample

Запуск приложения

Измените текущий каталог на BlazorSample с помощью следующей команды:

cd BlazorSample

Команда dotnet watch запускает приложение и открывает браузер по умолчанию на целевой странице приложения:

dotnet watch

С помощью боковой панели приложения перейдите на страницу счетчика, где можно выбрать Click me кнопку, чтобы увеличить счетчик.

Изменение приложения

Оставьте браузер открытым с загруженной страницей счетчика. Используя dotnet watch команду для запуска приложения, вы можете внести изменения в разметку и код приложения, не перестроив приложение, чтобы отразить изменения в браузере.

Компонент CounterRazor , который отображает веб-страницу счетчика, находится Components/Pages/Counter.razor в проекте. Синтаксис Razor сочетает разметку HTML с кодом C#, позволяя повысить производительность разработчиков.

Откройте файл Counter.razor в текстовом редакторе и запишите некоторые интересные строки, которые отображают содержимое и делают функцию счетчика компонента работать.

Components/Pages/Counter.razor:

@page "/counter"

<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"

Заголовок страницы задается тегами <PageTitle> :

<PageTitle>Counter</PageTitle>

Отображается заголовок H1:

<h1>Counter</h1>

Элемент абзаца (<p>) отображает текущее число, которое хранится в переменной с именем currentCount:

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

Кнопка (<button>) позволяет пользователю увеличивать счетчик, который возникает при нажатии кнопки при выполнении метода IncrementCountC#:

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

Блок @code содержит код C#, который выполняет компонент:

• Переменная currentCount счетчика устанавливается с начальным значением нуля.
• Определяется IncrementCount метод. Код в методе увеличивает currentCount переменную по одному при каждом вызове метода.

private int currentCount = 0;

private void IncrementCount()
{
    currentCount++;
}

Давайте изменим увеличение счетчика в методе IncrementCount .

Измените строку так, чтобы currentCount увеличивался на десять каждый раз, когда вызывается IncrementCount.

- currentCount++;
+ currentCount += 10;

Сохраните файл.

После сохранения файла запущенный приложение обновляется автоматически, так как вы использовали dotnet watch команду. Вернитесь в приложение в браузере и нажмите Click me кнопку на странице счетчика. Наблюдайте, как счетчик теперь увеличивается от существующего значения один до значения одиннадцать. Каждый раз, когда кнопка выбирается, значение увеличивается на десять.

Завершение работы приложения

Выполните следующие действия.

• Закройте окно браузера.
• Чтобы завершить работу приложения, нажмите клавиши CTRL+C в командной оболочке.

Congratulations! Вы успешно завершили работу с этим руководством.

Дальнейшие шаги

Из этого руководства вы узнали, как:

• Создайте Blazor Web App.
• Запустите приложение.
• Измените приложение.
• Закройте приложение.

Дополнительные сведения об основах ASP.NET Core см. в следующих статьях:

Общие сведения об основных основах ASP.NET

Дополнительные руководства

Тип приложения	Scenario	Tutorials
Веб-приложение	Создание нового сервера и разработка клиентских веб-приложений с помощью Blazor	Создать Blazor приложение списка дел и создать Blazor приложение базы данных фильмов (обзор)
Веб-API	Обработка данных на основе сервера с помощью минимальных API	Руководство. Создание минимального API с помощью ASP.NET Core
Приложение для удалённого вызова процедур (RPC)	Разработка в соответствии с парадигмой "Сначала контракт" с использованием Protocol Buffers	Создание клиента и сервера .NET gRPC в ASP.NET Core
Приложение в режиме реального времени	Двунаправленное взаимодействие между сервером и клиентом	Начало работы с ASP.NET Core SignalR

Дополнительные ресурсы

• Общие сведения о .NET
• Visual Studio
• Visual Studio Code
• Сообщество разработчиков .NET
• .NET Live TV