Руководство по Blazor. Создайте свое первое приложение

Введение

Цель

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

Обязательные требования

Никто.

Время завершения

10–15 минут + время для скачивания и установки

Сценарий

Создайте, используйте и измените простой компонент счетчика.

Загрузить и установить

Скачать Visual Studio 2022

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

Во время установки следует выбрать рабочую нагрузку ASP.NET и веб-разработки (по ссылка для установки выше этот параметр уже предварительно выбран).

У вас уже есть Visual Studio 2022?

Если у вас уже есть решение Visual Studio 2022, обновите его и установите требуемую рабочую нагрузку:

Нажмите клавишу Windows, введите Установщик Visual Studio и нажмите клавишу Enter.
При появлении запроса разрешите программе установки обновить себя.
Если доступно обновление для Visual Studio 2022, будет показана кнопка Обновить. Нажмите ее для обновления перед изменением установки. Это руководство подходит только для Visual Studio 2022 версии 17.8 и более поздних версий.
Найдите свою установку Visual Studio 2022 и нажмите кнопку Изменить.
Если он еще не выбран, выберите рабочую нагрузку ASP.NET и веб-разработка и нажмите кнопку Изменить. В противном случае просто закройте диалоговое окно.

Чтобы начать создавать приложения .NET, загрузите и установите .NET SDK.

Проверьте, все ли установлено правильно

После установки откройте новый терминал и выполните следующую команду:

Command prompt

dotnet --version

Если установка выполнена успешно, вы должны увидеть версию 8.0.100 или более позднюю:

Command prompt

8.0.100

Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.

Произошла ошибка?

Создайте свое приложение

Запустите Visual Studio и выберите Создать новый проект.
В окне Создать новый проект введите в поле поиска Blazor и нажмите клавишу ВВОД.
Выберите шаблон Веб-приложение Blazor и нажмите Далее.
В окне Настройте новый проект введите BlazorApp в качестве имени проекта и нажмите Далее.
В окне Дополнительные сведения в раскрывающемся списке Платформа выберите .NET 8.0 (условия долгосрочной поддержки), если она еще не выбрана, и нажмите кнопку Создать.

При создании веб-приложения Blazor можно выбрать различные параметры, например, включать ли проверку подлинности, какие интерактивные режимы отрисовки включить и какую часть приложения вы хотите сделать интерактивной. Для этого приложения убедитесь, что значения по умолчанию выбраны следующим образом:
- Тип проверки подлинности: нет
- Интерактивный режим отрисовки: сервер
- Расположение взаимодействия: на страницу/компонент

Проект создан и загружен в Visual Studio. Ознакомьтесь с содержимым проекта с помощью Обозревателя решений.

Было создано несколько файлов, чтобы предоставить вам готовое к запуску простое приложение Blazor.

Program.cs — это точка входа для приложения, запускающего сервер и настройки службы приложений и ПО промежуточного слоя.
Внутри каталога Components:
- App.razor — это корневой компонент приложения.
- Routes.razor настраивает маршрутизатор Blazor.
- Каталог Pages содержит несколько примеров веб-страниц для приложения.
BlazorApp.csproj определяет проект приложения и его зависимости, и его можно просмотреть, дважды щелкнув узел проекта BlazorApp в обозревателе решений.
Файл launchSettings.json в каталоге Properties определяет различные параметры профиля для локальной среды разработки. Номер порта автоматически назначается при создании проекта и сохраняется в этом файле.

Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.

В терминале выполните следующую команду, чтобы создать приложение:

Command prompt

dotnet new blazor -o BlazorApp

Эта команда создает новый проект веб-приложения Blazor и помещает его в новый каталог с именем BlazorApp в текущем расположении.

Перейдите в новый каталог BlazorApp, созданный предыдущей командой:

Command prompt

cd BlazorApp

Взгляните на содержимое каталога BlazorApp.

Command prompt

ls

В каталоге BlazorApp было создано несколько файлов, чтобы предоставить вам простое приложение Blazor, готовое к запуску.

Program.cs — это точка входа для приложения, запускающего сервер и настройки службы приложений и ПО промежуточного слоя.
Внутри каталога Components:
- App.razor — это корневой компонент приложения.
- Routes.razor настраивает маршрутизатор Blazor.
- Каталог Pages содержит несколько примеров веб-страниц для приложения.
BlazorApp.csproj определяет проект приложения и его зависимости.
Файл launchSettings.json в каталоге Properties определяет различные параметры профиля для локальной среды разработки. Номер порта автоматически назначается при создании проекта и сохраняется в этом файле.

Запишите путь к каталогу BlazorApp, так как вы будете использовать его позже в этом руководстве.

Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.

Запустите свое приложение

Нажмите кнопку Начать отладку (зеленая стрелка) на панели инструментов отладки в Visual Studio, чтобы запустить приложение.

После запуска приложения вы можете применить изменения кода к запущенному приложению, нажав кнопку горячей перезагрузки XAML.

Вы можете остановить приложение в любое время, нажав кнопку Стоп на верхней панели инструментов.

При первом запуске веб-приложения в Visual Studio будет настроен сертификат разработки для размещения приложения по протоколу HTTPS, а затем будет предложено доверять сертификату. Мы рекомендуем согласиться доверять сертификату. Сертификат будет использоваться только для локальной разработки, и без него большинство браузеров будут жаловаться на безопасность веб-сайта.

Дождитесь запуска приложения в браузере. При переходе на следующую страницу, вы успешно запустите свое первое приложение Blazor!

Отображаемая страница определяется файлом Home.razor, расположенным в каталоге Components/Pages. Вот как выглядит его содержимое:

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

Он уже содержит код, который устанавливает его в качестве домашней страницы и отображает текст Hello, world! и Welcome to your new app. Компонент PageTitle устанавливает заголовок текущей страницы, чтобы он отображался на вкладке браузера.

Произошла ошибка?

Если вы получили сообщение об ошибке "Ваше соединение не является частным" с кодом ошибки NET::ERR_CERT_INVALID, попробуйте перезапустить все окна браузера, чтобы новый сертификат мог быть получен браузером, и снова запустите приложение.

Если вы не можете решить возникшую проблему, нажмите кнопку Я столкнулся с проблемой ниже, чтобы получить помощь в устранении проблемы.

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

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

Используйте кнопку Нажми м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 увеличивается.
Компонент визуализируется, чтобы показать обновленный счетчик.

Добавить компонент

Каждый из файлов .razor определяет компонент пользовательского интерфейса, который можно использовать повторно.

Откройте файл Home.razor в Visual Studio. Файл Home.razor уже существует и создан при создании проекта. Он находится в папке Components/Pages внутри созданного ранее каталога BlazorApp.

Добавьте компонент Counter на главную страницу приложения, добавив элемент <Counter /> в конец файла Home.razor.

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter />

Нажмите кнопку "Горячая перезагрузка", чтобы применить изменения к работающему приложению. Компонент Counter появится на главной странице.

Изменить компонент

Параметры компонента задаются с помощью атрибутов или дочернего содержимого, что позволяет устанавливать свойства дочернего компонента. Определите параметр компонента Counter и укажите, насколько его показатель увеличивается при каждом нажатии кнопки:

Добавьте общедоступное свойство для IncrementAmount с атрибутом [Parameter].
Измените метод IncrementCount, чтобы использовать IncrementAmount при увеличении значения currentCount.

Следующий код показывает, как этого добиться. Выделенные строки показывают изменения.

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;

    [Parameter]
    public int IncrementAmount { get; set; } = 1;

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

В Home.razor обновите элемент <Counter>, чтобы добавить атрибут IncrementAmount, который изменяет величину приращения на десять, как показано выделенной строкой в следующем коде:

Components/Pages/Home.razor

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<Counter IncrementAmount="10" />

Примените изменения к приложению, щелкнув кнопку горячей перезагрузки XAML. Компонент Home теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter (Counter.razor) в /counter продолжает увеличиваться на единицу.

Следующие шаги

Поздравляем, вы создали и запустили свое первое приложение Blazor!

Продолжайте обучение

Теперь, когда вы владеете основами, вы можете продолжить создавать свое первое приложение Blazor с модулем самостоятельного обучения Blazor в Microsoft Learn, где вы соберете приложение списка дел.

Microsoft Learn: создание приложения Blazor со списком задач

Blazor для начинающих

Узнайте, как создать полнофункциональное приложение Blazor от начала до конца:

Вас также может заинтересовать...

Документация по Blazor

Просмотрите нашу документацию по Blazor, чтобы узнать, как создавать потрясающие веб-приложения.

Концепции публикации Blazor

Следите за Microsoft Learn, чтобы узнать, как опубликовать приложение Blazor и API .NET с помощью статических веб-приложений Azure.

Создайте REST API

Создайте REST API с помощью ASP.NET

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

Введение

Цель

Обязательные требования

Время завершения

Сценарий

Загрузить и установить

У вас уже есть Visual Studio 2022?

Проверьте, все ли установлено правильно

Произошла ошибка?

Создайте свое приложение

Запустите свое приложение

Произошла ошибка?

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

Добавить компонент

Изменить компонент

Следующие шаги

Продолжайте обучение

Blazor для начинающих

Документация по Blazor

Концепции публикации Blazor

Создайте REST API

Сообщить о проблеме

Обеспечить обратную связь