Если вы работаете на Mac с чипом Apple M1 или M2, вам необходимо установить версию Arm64 для SDK.
Проверьте, все ли установлено правильно
После установки откройте новую командную строку и выполните следующую команду:
После установки откройте новый терминал и выполните следующую команду:
Command prompt
dotnet --version
Если установка выполнена успешно, вы должны увидеть версию 8.0.100 или более позднюю:
Command prompt
8.0.100
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Произошла ошибка?
Если вы получаете сообщение об ошибке 'dotnet' is not recognized as an internal or external command, убедитесь, что вы открыли новую командную строку. Если быстрый перезапуск компьютера не устраняет проблему, нажмите кнопку У меня возникла проблема, чтобы получить помощь в устранении проблемы.
Создайте свое приложение
В командной строке выполните следующую команду, чтобы создать приложение:
Command prompt
dotnet new blazor -o BlazorApp
Эта команда создает новый проект веб-приложения Blazor и помещает его в новый каталог с именем BlazorApp в текущем расположении.
Перейдите в новый каталог BlazorApp, созданный предыдущей командой:
Command prompt
cd BlazorApp
Взгляните на содержимое каталога BlazorApp.
Command prompt
dir
В каталоге BlazorApp было создано несколько файлов, чтобы предоставить вам простое приложение Blazor, готовое к запуску.
Program.cs — это точка входа для приложения, запускающего сервер и настройки службы приложений и ПО промежуточного слоя.
Внутри каталога Components:
App.razor — это корневой компонент приложения.
Routes.razor настраивает маршрутизатор Blazor.
Каталог Pages содержит несколько примеров веб-страниц для приложения.
BlazorApp.csproj определяет проект приложения и его зависимости.
Файл launchSettings.json в каталоге Properties определяет различные параметры профиля для локальной среды разработки. Номер порта автоматически назначается при создании проекта и сохраняется в этом файле.
Запишите путь к каталогу BlazorApp, так как вы будете использовать его позже в этом руководстве.
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Произошла ошибка?
Если вы получили сообщение вроде Не удалось создать шаблон "Веб-приложение Blazor". Отказано в доступе к пути "C:\Windows\System32\BlazorApp", измените текущий каталог на другой, в котором у вас есть разрешения на создание новой папки, и попробуйте выполнить команду еще раз.
Если Windows не удается найти SDK при попытке создать проект, и вы уверены, что установили SDK, на своем компьютере, возможно, есть проблема с переменной среды PATH. Инструкции по диагностике и устранению этой проблемы см. в этом публикации Stack Overflow.
Если вы не можете решить возникшую проблему, нажмите кнопку Я столкнулся с проблемой ниже, чтобы получить помощь в устранении проблемы.
Запустите свое приложение
В командной строке выполните следующую команду:
Command prompt
dotnet watch
Команда dotnet watch создаст и запустит приложение, а затем будет обновлять его всякий раз при внесении изменений в код. Вы можете остановить приложение в любое время, выбрав Ctrl+C.
Дождитесь, пока приложение сообщит, что прослушивает порт http://localhost:<номер порта> и браузер откроется на странице с этим адресом.
Перейдя на следующую страницу, вы увидите, что ваше первое приложение 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 устанавливает заголовок текущей страницы, чтобы он отображался на вкладке браузера.
Произошла ошибка?
Если вы не можете решить возникшую проблему, нажмите кнопку Я столкнулся с проблемой ниже, чтобы получить помощь в устранении проблемы.
Попробуйте счетчик
В работающем приложении перейдите на страницу «Счетчик», щелкнув вкладку «Счетчик» на боковой панели слева. После этого должна появиться следующая страница:
Используйте кнопку Нажми мeня, чтобы увеличить счетчик без обновления страницы. Для увеличения счетчика на веб-странице обычно требуется написать JavaScript, но с Blazor вы можете использовать C#.
Вы можете найти реализацию компонента Counter в файле Counter.razor, расположенном в каталоге Components/Pages.
Запрос /counter в браузере, как указано в директиве @page вверху, заставляет компонент Counter отображать свое содержимое.
Каждый раз, когда нажимается кнопка Нажми меня:
Событие onclick запускается.
Вызывается метод IncrementCount.
Значение currentCount увеличивается.
Компонент визуализируется, чтобы показать обновленный счетчик.
Добавить компонент
Каждый из файлов .razor определяет компонент пользовательского интерфейса, который можно использовать повторно.
Откройте файл Home.razor в любом текстовом редакторе. Файл Home.razor уже существует и был создан при выполнении команды dotnet new. Он находится в папке 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 />
После сохранения этого изменения команда dotnet watch применит его к запущенному приложению, и компонент Counter отобразится на главной странице.
Изменить компонент
Параметры компонента задаются с помощью атрибутов или дочернего содержимого, что позволяет устанавливать свойства дочернего компонента. Определите параметр компонента Counter и укажите, насколько его показатель увеличивается при каждом нажатии кнопки:
Добавьте общедоступное свойство для IncrementAmount с атрибутом [Parameter].
Измените метод IncrementCount, чтобы использовать IncrementAmount при увеличении значения currentCount.
Следующий код показывает, как этого добиться. Выделенные строки показывают изменения.
В Home.razor обновите элемент <Counter>, чтобы добавить атрибут IncrementAmount, который изменяет величину приращения на десять, как показано выделенной строкой в следующем коде:
Components/Pages/Home.razor
@page "/"<PageTitle>Home</PageTitle><h1>Hello, world!</h1>Welcome to your new app.<Counter IncrementAmount="10" />
Компонент Home теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter (Counter.razor) в /counter продолжает увеличиваться на единицу.
Следующие шаги
Поздравляем, вы создали и запустили свое первое приложение Blazor!
Продолжайте обучение
Теперь, когда вы владеете основами, вы можете продолжить создавать свое первое приложение Blazor с модулем самостоятельного обучения Blazor в Microsoft Learn, где вы соберете приложение списка дел.