Создайте свое первое веб-приложение с ASP.NET Core с помощью Blazor
Введение
Цель
Build your first web app with ASP.NET Core using Blazor in Visual Studio Code.
Обязательные требования
Никто.
macOS 12.0 или более поздних версий.
Время завершения
10–15 минут + время для скачивания и установки
Сценарий
Создайте, используйте и измените простой компонент счетчика.
Prefer Visual Studio or the CLI?
If you prefer, you can also get started with Blazor using Visual Studio or the command-line interface.
Загрузить и установить
Чтобы создать свое первое приложение .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.
- Scroll down and select Blazor Web App.
- Выберите расположение папки для сохранения проекта.
- Name the project
BlazorAppin the command palette when prompted. Press Enter to confirm.
Включите доверие рабочей области, установив флажок и выбрав Да, я доверяю авторам.
Если у вас есть подписка на Visual Studio, войдите в свою учетную запись. Если вы не видите всплывающий запрос, щелкните значок C# в строке состояния VS Code в правом нижнем углу окна.
In the Side Bar, make sure the VS Code Explorer is open. Here you will see the BlazorApp folder and the Solution Explorer.Follow along with the video below to: collapse the BlazorApp folder, open the Solution Explorer, open the BlazorApp project, and drag and drop the Solution Explorer higher.
- Collapse the
BlazorAppfolder in the VS Code Explorer. - Нажмите на шеврон слева от Обозревателя решений, чтобы развернуть его.
- Click on the chevron to the left of the
BlazorAppproject in the Solution Explorer to expand it. - Drag and drop the Solution Explorer below BlazorApp.
Your project is created and loaded in Visual Studio Code. Take a look at the contents of your project using Solution Explorer.
Было создано несколько файлов, чтобы предоставить вам готовое к запуску простое приложение Blazor.
Program.cs— это точка входа для приложения, запускающего сервер и настройки службы приложений и ПО промежуточного слоя.-
Внутри каталога
Components:App.razor— это корневой компонент приложения.Routes.razorнастраивает маршрутизатор Blazor.- Каталог
Pagesсодержит несколько примеров веб-страниц для приложения.
BlazorApp.csprojопределяет проект приложения и его зависимости, и его можно просмотреть, дважды щелкнув узел проекта BlazorApp в обозревателе решений.- Файл
launchSettings.jsonв каталогеPropertiesопределяет различные параметры профиля для локальной среды разработки. Номер порта автоматически назначается при создании проекта и сохраняется в этом файле.
Если все в порядке, нажмите кнопку Продолжить ниже, чтобы перейти к следующему шагу.
Запустите свое приложение
Select the Run and Debug icon in the Activity Bar on the left side of your workspace.
Select the blue Run and Debug button.
Visual Studio Code will open up a menu of launch configurations. Select C#: BlazorApp [Default Configuration].
Then you need to select a debugger. Select C#.
Дождитесь запуска приложения в браузере. При переходе на следующую страницу, вы успешно запустите свое первое приложение Blazor!
You can stop the app at any time by clicking on the stop button in the top toolbar.
To re-run your application, select the dropdown menu to the right of the run button in the top right, and select Run project associated with this file.
Отображаемая страница определяется файлом 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 />Re-run the app to see the changes. The Counter component will then show up on the home page.
После сохранения этого изменения команда 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 от начала до конца:
Вас также может заинтересовать...
