Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor
Введение
Цель
Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor в Visual Studio Code.
Обязательные требования
Никто.
macOS 12.0 или более поздних версий.
Время завершения
10–15 минут + время для скачивания и установки
Сценарий
Создайте, используйте и измените простой компонент счетчика.
Предпочитаете Visual Studio или CLI?
При желании вы также можете начать работу с Blazor с помощью Visual Studio или интерфейса командной строки.
Загрузить и установить
Чтобы создать свое первое приложение .NET, вам потребуется установить .NET SDK, Visual Studio Code и C# Dev Kit.
.NET SDK (Software Development Kit) — это бесплатная коллекция инструментов и библиотек с открытым исходным кодом, которые вам понадобятся для создания и запуска приложений с использованием C#. C# — это современный объектно-ориентированный язык программирования, который вы будете использовать в этом уроке.
Visual Studio Code (VS Code) — самый популярный в мире легкий, бесплатный редактор кода с открытым исходным кодом. Здесь вы напишите код C#.
C# Dev Kit — это мощный набор расширений VS Code, упрощающий разработку на C#. Он помогает писать, тестировать и отлаживать код при создании приложений.
Файл конфигурации .NET Winget установит для вас .NET 8 SDK, VS Code и C# Dev Kit. Если у вас уже что-то установлено, Winget пропустит этот шаг установки.
Чтобы создать первое приложение .NET в Visual Studio Code, настройте свою среду:
-
Скачайте и установите пакет SDK для .NET:
Скачать пакет SDK x64 для .NET 8 (Intel)
Скачать пакет SDK Arm64 для .NET 8 (Apple Silicon)Если вы работаете на Mac с чипом Apple M1 или M2, вам необходимо установить версию Arm64 для SDK.
-
Скачайте и установите VS Code:
-
Откройте VS Code и нажмите кнопку Расширения на панели действий VS Code слева. Введите C# на панели поиска, выберите C# Dev Kit, а затем нажмите кнопку Установить на странице расширения C# Dev Kit.
![C# Dev Kit VS Code]()
Нажмите на ссылку ниже, чтобы скачать файл.
Откройте папку загрузок и дважды щелкните файл, чтобы начать установку.
Выберите инструкции по установке Терминала или Dev Home
После двойного щелчка по файлу откроется терминал, и вы увидите, что файл конфигурации Winget готов к установке .NET 8 SDK, VS Code, если у вас его нет, и C# Dev Kit.
Прочитайте лицензионное соглашение и согласитесь с ним, введя "y" в терминале и нажав ВВОД.
Заметка. Вы ответственны за понимание настроек конфигурации, которые вы выбираете для выполнения. Корпорация Майкрософт не несет ответственности за созданный или импортированный вами файл конфигурации. Эта конфигурация может изменять настройки в Windows, устанавливать программное обеспечение, изменять настройки программного обеспечения (включая настройки безопасности) и принимать пользовательские соглашения со сторонними пакетами и службами от вашего имени. Запуская этот файл конфигурации, вы подтверждаете, что понимаете и соглашаетесь с этими ресурсами и настройками. Все установленные приложения лицензированы их владельцами. Корпорация Майкрософт не несет ответственности за сторонние пакеты или службы и не предоставляет им лицензий.
Winget сейчас устанавливает все необходимое для начала работы! Выполнение этого процесса займет около 5 минут, и по его выполнении вы увидите в терминале вывод, показанный ниже.
После двойного щелчка по файлу откроется Dev Home, и вы увидите, что файл конфигурации Winget готов к установке .NET 8 SDK, VS Code, если у вас его нет, и C# Dev Kit.
Прочитайте лицензионное соглашение и согласитесь с ним, нажав "Я соглашаюсь и хочу продолжить" в левом нижнем углу, а затем нажав "Настроить от имени администратора" в правом нижнем углу. Выберите "Да" при появлении вопроса, хотите ли вы разрешить Dev Home вносить изменения на этом устройстве.
Заметка. Вы ответственны за понимание настроек конфигурации, которые вы выбираете для выполнения. Корпорация Майкрософт не несет ответственности за созданный или импортированный вами файл конфигурации. Эта конфигурация может изменять настройки в Windows, устанавливать программное обеспечение, изменять настройки программного обеспечения (включая настройки безопасности) и принимать пользовательские соглашения со сторонними пакетами и службами от вашего имени. Запуская этот файл конфигурации, вы подтверждаете, что понимаете и соглашаетесь с этими ресурсами и настройками. Все установленные приложения лицензированы их владельцами. Корпорация Майкрософт не несет ответственности за сторонние пакеты или службы и не предоставляет им лицензий.
Dev Home сейчас устанавливает все необходимое для начала работы! Выполнение займет около 5 минут, и по завершении вы увидите результат в окне ниже.
Проверьте, все ли установлено правильно
Теперь, когда ваша среда настроена, перейдите в Поиск на Панели задач Windows и введите Visual Studio Code. Щелкните приложение, чтобы открыть VS Code.
После настройки среды откройте новый терминал VS Code. На панели инструментов выберите Терминал, а затем Новый терминал.
Заметка. Обратите внимание, что если вы открываете VS Code через терминал, вам необходимо включить Доверие рабочей области.
Теперь откройте новый терминал, перейдя на панель инструментов и выбрав Терминал, затем Новый терминал.
В терминале выполните следующую команду, чтобы проверить установку.
dotnet
Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:
Usage: dotnet [options]
Usage: dotnet [path-to-application]
Options:
-h|--help Display help.
--info Display .NET information.
--list-sdks Display the installed SDKs.
--list-runtimes Display the installed runtimes.
path-to-application:
The path to an application .dll file to execute.Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Произошла ошибка?
Если вы получили сообщение об ошибке dotnet не распознается как внутренняя или внешняя команда, откройте новый терминал VS Code. Если перезапуск VS Code или перезагрузка компьютера не решает проблему, воспользуйтесь кнопкой У меня возникла проблема, чтобы получить помощь в ее устранении.
Создайте свое приложение
- Откройте палитру команд в VS Code, нажав CTRL+SHIFT+P.
- Откройте палитру команд в VS Code, нажав CMD+SHIFT+P.
- Введите .NET: , чтобы просмотреть команды, которые можно выполнить с помощью C# Dev Kit!
- Найдите и выберите .NET: новый проект, чтобы создать новый проект .NET.
- Прокрутите вниз и выберите веб-приложение Blazor.
- Выберите расположение папки для сохранения проекта.
- При появлении соответствующего запроса назовите проект
BlazorAppв палитре команд. Нажмите клавишу Ввод для подтверждения.
Включите доверие рабочей области, установив флажок и выбрав Да, я доверяю авторам.
Если у вас есть подписка на Visual Studio, войдите в свою учетную запись. Если вы не видите всплывающий запрос, щелкните значок C# в строке состояния VS Code в правом нижнем углу окна.
На боковой панели проверьте, открыт лиVS Code Explorer. Здесь вы увидите папку BlazorApp и Обозреватель решений.Следуйте инструкциям в видео ниже, чтобы: свернуть папку BlazorApp, открыть Обозреватель решений, открыть проект BlazorApp и перетащить Обозреватель решений выше.
- Сверните папку
BlazorAppв обозревателе VS Code. - Нажмите на шеврон слева от Обозревателя решений, чтобы развернуть его.
- Нажмите на шеврон слева от проекта
BlazorAppв Обозревателе решений, чтобы развернуть его. - Перетащите Обозреватель решений под BlazorApp.
Проект создан и загружен в Visual Studio. Ознакомьтесь с содержимым проекта с помощью Обозревателя решений.
Было создано несколько файлов, чтобы предоставить вам готовое к запуску простое приложение Blazor.
Program.cs— это точка входа для приложения, запускающего сервер и настройки службы приложений и ПО промежуточного слоя.-
Внутри каталога
Components:App.razor— это корневой компонент приложения.Routes.razorнастраивает маршрутизатор Blazor.- Каталог
Pagesсодержит несколько примеров веб-страниц для приложения.
BlazorApp.csprojопределяет проект приложения и его зависимости, и его можно просмотреть, дважды щелкнув узел проекта BlazorApp в обозревателе решений.- Файл
launchSettings.jsonв каталогеPropertiesопределяет различные параметры профиля для локальной среды разработки. Номер порта автоматически назначается при создании проекта и сохраняется в этом файле.
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Запустите свое приложение
Выберите значок Запуск и отладка на Панели действий в левой части рабочего пространства.
Нажмите синюю кнопку Запустить и выполнить отладку.
Visual Studio Code откроет меню конфигураций запуска. Выберите C#: BlazorApp [Конфигурация по умолчанию].
Затем необходимо выбрать отладчик. Выберите C#.
Дождитесь запуска приложения в браузере. При переходе на следующую страницу, вы успешно запустите свое первое приложение 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 от начала до конца:
Вас также может заинтересовать...
