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

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

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

Prerequisites

Получите и установите последнюю версию пакета SDK для .NET при загрузке .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! Вы успешно завершили работу с этим руководством.

Next steps

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

В этом руководстве показано, как создать и запустить веб-приложение ASP.NET Core с помощью .NET CLI.

Для получения инструкций Blazor, см. руководства по BlazorASP.NET Core.

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

Prerequisites

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

Создайте приложение Razor Pages

Откройте командную оболочку в подходящем расположении для примера приложения и выполните следующую команду, чтобы создать Razor приложение Pages. Параметр -o|--output создает папку для проекта и присваивает имя проекту RazorPagesSample:

dotnet new webapp -o RazorPagesSample

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

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

cd RazorPagesSample

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

dotnet watch

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

Откройте файл Pages/Index.cshtml в текстовом редакторе.

После строки с приветствием "Welcome" добавьте следующую строку, чтобы отобразить дату и время локальной системы:

<p>The time on the server is @DateTime.Now</p>

Сохраните изменения.

После сохранения файла запущенный приложение обновляется автоматически, так как вы использовали dotnet watch команду.

Обновите страницу в браузере, чтобы увидеть результат:

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

Чтобы завершить работу приложения, выполните следующие действия.

• Закройте окно браузера.
• Нажмите клавиши CTRL+C в командной оболочке.

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

Next steps

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