Чтобы создать свое первое приложение .NET, вам потребуется установить .NET SDK, Visual Studio Code и C# Dev Kit.
Что такое .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 9 SDK, VS Code и комплект разработки C#. Если у вас уже установлен один или несколько нужных компонентов, WinGet пропустит этот шаг установки.
Чтобы создать первое приложение .NET в Visual Studio Code, настройте свою среду:
Откройте VS Code и нажмите кнопку Расширения на панели действий VS Code слева. Введите C# на панели поиска, выберите C# Dev Kit, а затем нажмите кнопку Установить на странице расширения C# Dev Kit.
Скачайте и запустите файл конфигурации
Щелкните следующую ссылку, чтобы скачать файл WinGet:
Откройте папку загрузок и дважды щелкните файл, чтобы начать установку. Если вам будет предложено выбрать приложение для запуска файла, выберите Диспетчер пакетов Windows клиент.
После двойного щелчка по файлу откроется терминал, и вы увидите, что файл конфигурации WinGet готов к установке пакета .NET 9 SDK, VS Code, если у вас ее нет, и комплекта разработки C#.
Прочитайте лицензионное соглашение и согласитесь с ним, введя "y" в терминале и нажав ВВОД.
Примечание. Вы несете ответственность за понимание настроек конфигурации, которые решаете использовать. Корпорация Майкрософт не несет ответственности за созданный или импортированный вами файл конфигурации. Эта конфигурация может изменять настройки в Windows, устанавливать программное обеспечение, изменять настройки программного обеспечения (в том числе настройки безопасности) и принимать пользовательские соглашения со сторонними пакетами и службами от вашего имени. Запуская этот файл конфигурации, вы подтверждаете, что понимаете принципы работы соответствующих ресурсов и настроек и соглашаетесь их использовать. Лицензии на все установленные приложения предоставляются вам их владельцами. Корпорация Майкрософт не несет ответственности за сторонние пакеты и службы и не предоставляет лицензий на них.
WinGet устанавливает все необходимое для начала работы! Время установки будет зависеть от спецификаций компьютера, скорости сети и других данных. Это может занять от 5 минут до 15 минут.
Для установки некоторых этапов установки могут потребоваться разрешения на уровне администратора. Вы сможете просмотреть мигающие запросы контроля учетных записей (UAC) панели задач Windows и щелкните этот значок. Чтобы продолжить установку, необходимо выбрать "Да" при запросе.
После завершения установки вы должны увидеть выходные данные ниже в терминале.
Проверьте, все ли установлено правильно
Теперь, когда ваша среда настроена, перейдите в Поиск на Панели задач Windows и введите Visual Studio Code. Щелкните приложение, чтобы открыть VS Code.
После настройки среды откройте новый терминал VS Code. На панели инструментов выберите Терминал, а затем Новый терминал.
Примечание. Если вы откроете VS Code через терминал, вам потребуется включить доверия.
Теперь откройте новый терминал, перейдя на панель инструментов и выбрав Терминал, затем Новый терминал.
В терминале выполните следующую команду, чтобы проверить установку.
Terminal
dotnet
Если установка прошла успешно, вы должны увидеть вывод, подобный следующему:
Terminal
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. Вот как выглядит его содержимое:
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.
Запрос /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.
Components/Pages/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.
Следующий код показывает, как этого добиться. Выделенные строки показывают изменения.
В 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 продолжает увеличиваться на единицу.
Компонент Home теперь содержит собственный счетчик, показатель которого увеличивается на десять каждый раз при выборе кнопки Щелкни меня, как показано на следующем рисунке. Показатель компонента Counter (Counter.razor) в /counter продолжает увеличиваться на единицу.
Следующие шаги
Поздравляем, вы создали и запустили свое первое приложение Blazor!
Продолжайте обучение
Теперь, когда вы владеете основами, вы можете продолжить создавать свое первое приложение Blazor с модулем самостоятельного обучения Blazor в Microsoft Learn, где вы соберете приложение списка дел.
