Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor
Введение
Цель
Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor.
Обязательные требования
Никто.
macOS 12.0 или более поздних версий.
Время завершения
10–15 минут + время для скачивания и установки
Сценарий
Создайте, используйте и измените простой компонент счетчика.
Загрузить и установить
При желании вы также можете начать работу с 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.
Скачать пакет SDK x64 для .NET 8 (Intel)
Скачать пакет SDK Arm64 для .NET 8 (Apple Silicon)
Если вы работаете на Mac с чипом Apple M1 или M2, вам необходимо установить версию Arm64 для SDK.
Проверьте, все ли установлено правильно
После установки откройте новый терминал и выполните следующую команду:
dotnet --version
Если установка выполнена успешно, вы должны увидеть версию 8.0.100 или более позднюю:
8.0.100
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Произошла ошибка?
Если вы получаете сообщение об ошибке zsh: command not found: dotnet, убедитесь, что вы открыли новое окно терминала. Если вы не можете решить проблему, нажмите кнопку Я столкнулся с проблемой, чтобы получить помощь в устранении проблемы.
Если вы получаете сообщение об ошибке dotnet: command not found, убедитесь, что вы открыли новое окно терминала. Если вы не можете решить проблему, нажмите кнопку Я столкнулся с проблемой, чтобы получить помощь в устранении проблемы.
Создайте свое приложение
-
Запустите 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
определяет различные параметры профиля для локальной среды разработки. Номер порта автоматически назначается при создании проекта и сохраняется в этом файле.
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
В терминале выполните следующую команду, чтобы создать приложение:
dotnet new blazor -o BlazorApp
Эта команда создает новый проект веб-приложения Blazor и помещает его в новый каталог с именем BlazorApp
в текущем расположении.
Перейдите в новый каталог BlazorApp
, созданный предыдущей командой:
cd BlazorApp
Взгляните на содержимое каталога BlazorApp
.
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!
В терминале выполните следующую команду:
dotnet watch
Команда dotnet watch
создаст и запустит приложение, а затем будет обновлять его всякий раз при внесении изменений в код. Вы можете остановить приложение в любое время, выбрав Ctrl+C.
Дождитесь, пока приложение сообщит, что прослушивает порт http://localhost:<номер порта> и браузер откроется на странице с этим адресом.
Дождитесь, пока приложение сообщит, что прослушивает порт http://localhost:<port number>, а затем откройте браузер и перейдите по этому адресу.
Перейдя на следующую страницу, вы увидите, что ваше первое приложение Blazor запущено!
Отображаемая страница определяется файлом Home.razor
, расположенным в каталоге Components/Pages
. Вот как выглядит его содержимое:
@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
.
@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
.
Откройте файл Home.razor
в любом текстовом редакторе. Файл Home.razor
уже существует и был создан при выполнении команды dotnet new
. Он находится в папке Components/Pages
внутри созданного ранее каталога BlazorApp
.
Добавьте компонент Counter
на главную страницу приложения, добавив элемент <Counter />
в конец файла Home.razor
.
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter />
Нажмите кнопку "Горячая перезагрузка", чтобы применить изменения к работающему приложению. Компонент Counter
появится на главной странице.
После сохранения этого изменения команда dotnet watch
применит его к запущенному приложению, и компонент Counter
отобразится на главной странице.
Изменить компонент
Параметры компонента задаются с помощью атрибутов или дочернего содержимого, что позволяет устанавливать свойства дочернего компонента. Определите параметр компонента Counter
и укажите, насколько его показатель увеличивается при каждом нажатии кнопки:
- Добавьте общедоступное свойство для
IncrementAmount
с атрибутом[Parameter]
. - Измените метод
IncrementCount
, чтобы использоватьIncrementAmount
при увеличении значенияcurrentCount
.
Следующий код показывает, как этого добиться. Выделенные строки показывают изменения.
@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
, который изменяет величину приращения на десять, как показано выделенной строкой в следующем коде:
@page "/"
<PageTitle>Home</PageTitle>
<h1>Hello, world!</h1>
Welcome to your new app.
<Counter IncrementAmount="10" />
Примените изменения к приложению, щелкнув кнопку горячей перезагрузки XAML. Компонент Home
теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter
(Counter.razor
) в /counter
продолжает увеличиваться на единицу.
Компонент Home
теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter
(Counter.razor
) в /counter
продолжает увеличиваться на единицу.
Следующие шаги
Поздравляем, вы создали и запустили свое первое приложение Blazor!
Продолжайте обучение
Теперь, когда вы владеете основами, вы можете продолжить создавать свое первое приложение Blazor с модулем самостоятельного обучения Blazor в Microsoft Learn, где вы соберете приложение списка дел.
Microsoft Learn: создание приложения Blazor со списком задач
Blazor для начинающих
Узнайте, как создать полнофункциональное приложение Blazor от начала до конца:
Вас также может заинтересовать...