Краткое руководство. Создание первого веб-приложения ASP.NET Core с помощью Visual Studio

В этом введении в использование Visual Studio (которое займет от 5 до 10 минут) с помощью шаблона проекта ASP.NET и языка программирования C# будет создано простое веб-приложение "Hello, World".

Перед началом

Установка Visual Studio

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.

Выбор темы (необязательно)

В этом кратком руководстве содержатся снимки экрана, использующие темную тему. Если вы не используете темную тему, но хотите узнать, как переключиться на нее, см. страницу Практическое руководство. Персонализация интегрированной среды разработки и редактора Visual Studio.

Создание проекта

Сначала вы создадите проект веб-приложения ASP.NET Core. Для этого типа проекта уже имеются все нужные файлы шаблонов, необходимые для создания веб-приложения, что избавляет вас от лишней работы.

  1. Откройте Visual Studio 2017.

  2. В верхней строке меню последовательно выберите Файл > Создать > Проект.

  3. В левой панели диалогового окна Новый проект разверните узел Visual C# и выберите .NET Core. В средней области выберите Веб-приложение ASP.NET Core.

    Затем назовите файл HelloWorld и нажмите кнопку ОК.

    Создание проекта веб-приложения ASP.NET Core для C#

    Observação

    Если категория шаблона проекта .NET Core отсутствует, выберите слева ссылку Открыть Visual Studio Installer. (В зависимости от параметров отображения может потребоваться выполнить прокрутку.)

    Открыть Visual Studio Installer в диалоговом окне "Новый проект"

    Запускается Visual Studio Installer. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.

    Рабочая нагрузка ASP.NET в установщике Visual Studio

    (Возможно, перед тем как продолжить установку рабочей нагрузки, придется закрыть Visual Studio.)

  4. В верхнем раскрывающемся меню диалогового окна Создать веб-приложение ASP.NET Core выберите ASP.NET Core 2.1. Затем выберите Веб-приложение и нажмите кнопку ОК.

    Диалоговое окно "Создать веб-приложение ASP.NET Core"

    Observação

    Если ASP.NET Core 2.1 не отображается, убедитесь, что вы используете самый последний выпуск Visual Studio. Дополнительные сведения об обновлении установки см. на странице Обновление до последнего выпуска Visual Studio.

Через некоторое время файл проекта откроется в Visual Studio.

  1. На начальном экране выберите Создать проект.

    Снимок экрана: окно запуска в Visual Studio с выделенным параметром "Создать проект".

  2. В окне Создание проекта выберите C# в списке языков. Затем выберите Windows в списке платформ и Веб-сайт в списке типов проектов.

    Применив фильтры по языку, платформе и типу проекта, выберите шаблон Веб-приложение ASP.NET Core и щелкните Далее.

    Снимок экрана: окно "Создать проект" с фильтром, примененным к параметрам C#, Windows и "Интернет". Шаблон проекта "Веб-приложение ASP.NET Core" выделен.

    Observação

    Если шаблон Консольное приложение отсутствует, его можно установить в окне Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.

    Снимок экрана: выделенная ссылка "Установка других средств и компонентов" в сообщении "Не нашли то, что искали?".

    После этого в Visual Studio Installer выберите рабочую нагрузку ASP.NET и разработка веб-приложений.

    Снимок экрана: рабочая нагрузка "Кросс-платформенная разработка .NET Core" в Visual Studio Installer.

    Затем нажмите кнопку Изменить в Visual Studio Installer. Сохраните результаты работы, когда появится такой запрос. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.

  3. В поле Имя проекта окна Настроить новый проект введите HelloWorld. Теперь щелкните Далее.

    Снимок экрана: окно "Настроить новый проект", где в поле "Имя проекта" введено HelloWorld.

  4. В окне Дополнительные сведения убедитесь, что в раскрывающемся меню вверху указано .NET Core 3.1. Обратите внимание, что вы можете включить поддержку Docker, установив флажок. Также вы можете включить поддержку проверки подлинности, нажав кнопку "Изменить способ проверки подлинности". Здесь доступны следующие варианты.

    • Нет: проверка подлинности не используется.
    • Индивидуальные учетные записи: они хранятся в локальной базе данных или базе данных Azure.
    • Платформа удостоверений Майкрософт: в этом варианте для проверки подлинности используется Active Directory, Azure AD или Microsoft 365.
    • Windows: подходит для приложений интрасети.

    Не устанавливайте флажок Включить Docker и установите флажок Нет в разделе "Тип проверки подлинности". Затем выберите Создать.

    Снимок экрана: окно "Дополнительные сведения" с выбранным в поле "Платформа" вариантом .NET Core 3.1.

    В Visual Studio откроется новый проект.

  1. На начальном экране выберите Создать проект.

    Снимок экрана: окно запуска в Visual Studio с выделенным параметром "Создать проект".

  2. В окне Создание проекта выберите C# в списке языков. Затем выберите Windows в списке платформ и Веб-сайт в списке типов проектов.

    Применив фильтры по языку, платформе и типу проекта, выберите шаблон Веб-приложение ASP.NET Core и щелкните Далее.

    Снимок экрана: окно "Создать проект" с фильтром, примененным к параметрам C#, Windows и "Интернет". Шаблон проекта "Веб-приложение ASP.NET Core" выделен.

    Observação

    Если шаблон Консольное приложение отсутствует, его можно установить в окне Создание проекта. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.

    Снимок экрана: выделенная ссылка "Установка других средств и компонентов" в сообщении "Не нашли то, что искали?".

    После этого в Visual Studio Installer выберите рабочую нагрузку ASP.NET и разработка веб-приложений.

    Снимок экрана: рабочая нагрузка "Кросс-платформенная разработка .NET Core" в Visual Studio Installer.

    Затем нажмите кнопку Изменить в Visual Studio Installer. Сохраните результаты работы, когда появится такой запрос. Выберите Продолжить, чтобы установить рабочую нагрузку. После этого вернитесь к шагу 2 в процедуре Создание проекта.

  3. В поле Имя проекта окна Настроить новый проект введите HelloWorld. Теперь щелкните Далее.

    Снимок экрана: окно "Настроить новый проект", где в поле "Имя проекта" введено HelloWorld.

  4. Убедитесь, что в окне Дополнительные сведения, в поле Платформа отображается значение .NET 6.0. Обратите внимание, что вы можете включить поддержку Docker, установив флажок. Также можно добавить поддержку проверки подлинности, выбрав значение из раскрывающегося списка Тип проверки подлинности. Здесь доступны следующие варианты.

    • Нет: проверка подлинности не используется.
    • Индивидуальные учетные записи: они хранятся в локальной базе данных или базе данных Azure.
    • Платформа удостоверений Майкрософт: в этом варианте для проверки подлинности используется Active Directory, Azure AD или Microsoft 365.
    • Windows: подходит для приложений интрасети.

    Не устанавливайте флажок Включить Docker и установите флажок Нет в разделе "Тип проверки подлинности". Затем выберите Создать.

    Снимок экрана: окно "Дополнительные сведения" с выбранным в поле "Платформа" вариантом ".NET 6.0".

    В Visual Studio откроется новый проект.

Создание и запуск приложения

  1. В обозревателе решений разверните папку Страницы и выберите About.cshtml.

    Снимок экрана: Обозреватель решений Visual Studio, показывающий файлы в проекте HelloWorld. Папка "Страницы" развернута и выбран параметр About.cshtml.

    Этот файл соответствует странице с заголовком О программе веб-приложения, которое запускается в веб-браузере.

    Страница "О программе" в веб-приложении

    В редакторе на странице О программе появится HTML-код для области дополнительной информации.

    Код HTML для области дополнительной информации в редакторе Visual Studio

  2. Измените текст для чтения "дополнительная информация" на Hello World!.

    Изменение значения по умолчанию кода HTML для области дополнительной информации в редакторе Visual Studio

  3. В обозревателе решений разверните About.cshtml и выберите About.cshtml.cs. (Файл также соответствует странице О программе в веб-браузере.)

    Снимок экрана: Обозреватель решений Visual Studio, показывающий файлы в проекте HelloWorld. Параметр About.cshtml развернут, и выбран About.cshtml.cs.

    В редакторе появится код C#, который содержит текст для области описания приложения на странице О программе.

    Код C# для области описания приложения в редакторе Visual Studio

  4. Измените текст сообщения для чтения "описание приложения" на Мое сообщение.

    Изменение текста сообщения по умолчанию для области описания приложения в редакторе Visual Studio

  5. Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.

    Нажмите кнопку "IIS Express" в Visual Studio

    Observação

    Если выводится сообщение об ошибке с текстом Не удается подключиться к веб-серверу IIS Express или сообщение об ошибке, где упоминается SSL-сертификат, закройте Visual Studio. После этого откройте Visual Studio с помощью пункта Запуск от имени администратора контекстного меню. Затем снова запустите приложение.

  6. В веб-браузере убедитесь, что страница О программе содержит введенный вами текст.

    Обновленная страница About (О программе) с внесенными изменениями

  7. Закройте веб-браузер.

Проверка работы

Просмотрите следующую анимацию для проверки работы, выполненной в предыдущем разделе.

Просмотрите анимированный GIF-файл, демонстрирующий создание и запуск простого веб-приложения ASP.NET Core в Visual Studio на C#

Поздравляем с завершением этого краткого руководства! Надеемся, что вы узнали что-то новое о C#, ASP.NET Core и Visual Studio IDE (интегрированной среде разработки).

  1. В обозревателе решений разверните папку Страницы и выберите Index.cshtml.

    Снимок экрана: файл index.cshtml, выбранный в развернутой папке "Страницы" в Обозревателе решений.

    Этот файл соответствует странице с заголовком Home (Домашняя) веб-приложения, которое запускается в веб-браузере.

    Снимок экрана: домашняя страница веб-приложения в окне браузера.

    В редакторе отображается HTML-код для текста, содержащегося на странице Home (Домашняя).

    Снимок экрана: файл Index.cshtml на домашней странице в редакторе кода Visual Studio.

  2. Измените текст "Welcome" на "Hello World!".

    Снимок экрана: файл Index.cshtml в редакторе кода Visual Studio. Текст "Добро пожаловать" изменился на "Hello World!".

  3. Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.

    Снимок экрана: кнопка IIS Express, выделенная в Visual Studio.

    Observação

    Если выводится сообщение об ошибке с текстом Не удается подключиться к веб-серверу IIS Express или сообщение об ошибке, где упоминается SSL-сертификат, закройте Visual Studio. После этого откройте Visual Studio с помощью пункта Запуск от имени администратора контекстного меню. Затем снова запустите приложение.

  4. В веб-браузере убедитесь, что страница Home (Домашняя) содержит введенный вами текст.

    Снимок экрана: домашняя страница веб-приложения в окне браузера с обновленным сообщением "Hello World!".

  5. Закройте веб-браузер.

  1. В обозревателе решений разверните папку Страницы и выберите Index.cshtml.

    Снимок экрана: файл index.cshtml, выбранный в развернутой папке "Страницы" в Обозревателе решений.

    Этот файл соответствует странице с заголовком Home (Домашняя) веб-приложения, которое запускается в веб-браузере.

    Снимок экрана: домашняя страница веб-приложения в окне браузера.

    В редакторе отображается HTML-код для текста, содержащегося на странице Home (Домашняя).

    Снимок экрана: файл Index.cshtml на домашней странице в редакторе кода Visual Studio.

  2. Измените текст "Welcome" на "Hello World!".

    Снимок экрана: файл Index.cshtml в редакторе кода Visual Studio. Текст "Добро пожаловать" изменился на "Hello World!".

  3. Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.

    Снимок экрана: кнопка IIS Express, выделенная в Visual Studio.

    Observação

    Если выводится сообщение об ошибке с текстом Не удается подключиться к веб-серверу IIS Express или сообщение об ошибке, где упоминается SSL-сертификат, закройте Visual Studio. После этого откройте Visual Studio с помощью пункта Запуск от имени администратора контекстного меню. Затем снова запустите приложение.

  4. В веб-браузере убедитесь, что страница Home (Домашняя) содержит введенный вами текст.

    Снимок экрана: домашняя страница веб-приложения в окне браузера с обновленным сообщением "Hello World!".

  5. Закройте веб-браузер.

Следующие шаги

Дополнительные сведения о создании веб-приложений ASP.NET вы найдете в следующих руководствах:

Или узнайте, как контейнеризировать веб-приложения с помощью Docker:

См. также

Публикация веб-приложения в службе приложений Azure с помощью Visual Studio