Краткое руководство. Создание первого веб-приложения ASP.NET Core с помощью Visual StudioQuickstart: Use Visual Studio to create your first ASP.NET Core web app

В этом введении в использование Visual Studio (которое займет от 5 до 10 минут) с помощью шаблона проекта ASP.NET и языка программирования C# будет создано простое веб-приложение "Hello, World".In this 5-10 minute introduction to how to use Visual Studio, you'll create a simple "Hello World" web app by using an ASP.NET project template and the C# programming language.

Перед началомBefore you begin

Установка Visual StudioInstall Visual Studio

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

Установите Visual Studio бесплатно со страницы скачиваемых материалов Visual Studio, если еще не сделали этого.If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

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

В этом кратком руководстве содержатся снимки экрана, использующие темную тему.This quickstart tutorial includes screenshots that use the dark theme. Если вы не используете темную тему, но хотите переключиться на нее, см. страницу Персонализация интегрированной среды разработки и редактора Visual Studio.If you aren't using the dark theme but would like to, see the Personalize the Visual Studio IDE and Editor page to learn how.

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

Сначала вы создадите проект веб-приложения ASP.NET Core.To start, you'll create an ASP.NET Core web application project. Для этого типа проекта уже имеются все нужные файлы шаблонов, необходимые для создания веб-приложения, что избавляет вас от лишней работы.The project type comes with all template files to create a web app, before you've even added anything!

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

  2. В верхней строке меню последовательно выберите Файл > Создать > Проект.From the top menu bar, choose File > New > Project.

  3. В левой панели диалогового окна Новый проект разверните узел Visual C# и выберите .NET Core.In the left pane of the New Project dialog box, expand Visual C#, and then choose .NET Core. В средней области выберите Веб-приложение ASP.NET Core.In the middle pane, choose ASP.NET Core Web Application.

    Затем назовите файл HelloWorld и нажмите кнопку ОК.Then, name your file HelloWorld and choose OK.

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

    Примечание

    Если категория шаблона проекта .NET Core отсутствует, выберите слева ссылку Открыть Visual Studio Installer.If you don't see the .NET Core project template category, choose the Open Visual Studio Installer link in the left pane. (В зависимости от параметров отображения может потребоваться выполнить прокрутку.)(Depending on your display settings, you might have to scroll to see it.)

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

    Запускается Visual Studio Installer.The Visual Studio Installer launches. Выберите рабочую нагрузку ASP.NET и разработка веб-приложений, а затем щелкните Изменить.Choose the ASP.NET and web development workload, and then choose Modify.

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

    (Возможно, перед тем как продолжить установку рабочей нагрузки, придется закрыть Visual Studio.)(You might have to close Visual Studio before you can continue installing the new workload.)

  4. В верхнем раскрывающемся меню диалогового окна Создать веб-приложение ASP.NET Core выберите ASP.NET Core 2.1.In the New ASP.NET Core Web Application dialog box, select ASP.NET Core 2.1 from the top drop-down menu. Затем выберите Веб-приложение и нажмите кнопку ОК.Next, choose Web Application, and then choose OK.

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

    Примечание

    Если ASP.NET Core 2.1 не отображается, убедитесь, что вы используете самый последний выпуск Visual Studio.If you don't see ASP.NET Core 2.1, make sure that you are running the most recent release of Visual Studio. Дополнительные сведения об обновлении установки см. на странице Обновление до последнего выпуска Visual Studio.For more information about how to update your installation, see the Update Visual Studio to the most recent release page.

Через некоторое время файл проекта откроется в Visual Studio.Soon after, Visual Studio opens your project file.

  1. Запустите Visual Studio.Open Visual Studio.

  2. На начальном экране выберите Создать проект.On the start window, choose Create a new project.

    Просмотр окна "Создание проекта"

  3. В поле поиска окна Создание проекта введите ASP.NET.On the Create a new project window, enter or type ASP.NET in the search box. Затем выберите C# в списке языков и Windows в списке платформ.Next, choose C# from the Language list, and then choose Windows from the Platform list.

    Применив фильтры языка и платформы, выберите шаблон Веб-приложение ASP.NET Core и нажмите кнопку Далее.After you apply the language and platform filters, choose the ASP.NET Core Web Application template, and then choose Next.

    Выбор шаблона C# для веб-приложения ASP.NET Core

    Примечание

    Если шаблон Веб-приложение ASP.NET Core отсутствует, его можно установить из окна Создание проекта.If you do not see the ASP.NET Core Web Application template, you can install it from the Create a new project window. В сообщении Не нашли то, что искали? выберите ссылку Установка других средств и компонентов.In the Not finding what you're looking for? message, choose the Install more tools and features link.

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

    После этого в Visual Studio Installer выберите рабочую нагрузку ASP.NET и разработка веб-приложений.Then, in the Visual Studio Installer, choose the ASP.NET and web development workload.

    Рабочая нагрузка "Веб-приложение ASP.NET Core" в Visual Studio Installer

    Затем нажмите кнопку Изменить в Visual Studio Installer.After that, choose the Modify button in the Visual Studio Installer. Вам может быть предложено сохранить результаты работы; в таком случае сделайте это.You might be prompted to save your work; if so, do so. Выберите Продолжить, чтобы установить рабочую нагрузку.Next, choose Continue to install the workload. После этого вернитесь к шагу 2 в процедуре Создание проекта.Then, return to step 2 in this "Create a project" procedure.

  4. В поле Имя проекта окна Настроить новый проект введите HelloWorld.In the Configure your new project window, type or enter HelloWorld in the Project name box. Затем нажмите Создать.Then, choose Create.

    В окне "Настроить новый проект" назовите проект "HelloWorld"

  5. Убедитесь в том, что в верхнем раскрывающемся меню окна Создать веб-приложение ASP.NET Core отображается ASP.NET Core 3.0.In the Create a new ASP.NET Core Web Application window, verify that ASP.NET Core 3.0 appears in the top drop-down menu. Выберите Веб-приложение, включающее примеры Razor Pages.Then, choose Web Application, which includes example Razor Pages. Затем выберите Создать.Next, choose Create.

    Окно "Create a new ASP.NET Core Web Application" (Создание веб-приложения ASP.NET Core)

    Новый проект открывается в Visual Studio.Visual Studio opens your new project.

Создание и запуск приложенияCreate and run the app

  1. В обозревателе решений разверните папку Страницы и выберите About.cshtml.In the Solution Explorer, expand the Pages folder, and then choose About.cshtml.

    Выбор файла About.cshtml из обозревателя решений

    Этот файл соответствует странице с заголовком О программе веб-приложения, которое запускается в веб-браузере.This file corresponds to a page that's named About in the web app, which runs in a web browser.

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

    В редакторе на странице О программе появится HTML-код для области дополнительной информации.In the editor, you'll see HTML code for the "additional information" area of the About page.

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

  2. Измените текст для чтения "дополнительная информация" на Hello World! .Change the "additional information" text to read "Hello World!".

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

  3. В обозревателе решений разверните About.cshtml и выберите About.cshtml.cs.In the Solution Explorer, expand About.cshtml, and then choose About.cshtml.cs. (Файл также соответствует странице О программе в веб-браузере.)(This file also corresponds with the About page in a web browser.)

    Выбор файла About.cshtml из обозревателя решений

    В редакторе появится код C#, который содержит текст для области описания приложения на странице О программе.In the editor, you'll see C# code that includes text for the "application description" area of the About page.

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

  4. Измените текст сообщения для чтения "описание приложения" на Мое сообщение.Change the "application description" message text to read "What's my message?".

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

  5. Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

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

    Примечание

    Если выводится сообщение об ошибке с текстом Не удается подключиться к веб-серверу IIS Express или сообщение об ошибке, где упоминается SSL-сертификат, закройте Visual Studio.If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. После этого откройте Visual Studio с помощью пункта Запуск от имени администратора контекстного меню.Next, open Visual Studio by using the Run as administrator option from the right-click context menu. Затем снова запустите приложение.Then, run the application again.

  6. В веб-браузере убедитесь, что страница О программе содержит введенный вами текст.In the web browser, verify that the About page includes your updated text.

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

  7. Закройте веб-браузер.Close the web browser.

Проверка работыReview your work

Просмотрите следующую анимацию для проверки работы, выполненной в предыдущем разделе.View the following animation to check the work that you completed in the previous section.

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

Поздравляем с завершением этого краткого руководства!Congratulations on completing this Quickstart! Надеемся, что вы узнали что-то новое о C#, ASP.NET Core и интегрированной среде разработки Visual Studio IDE.We hope you learned a little bit about C#, ASP.NET Core, and the Visual Studio IDE (integrated development environment).

  1. В обозревателе решений разверните папку Страницы и выберите Index.cshtml.In the Solution Explorer, expand the Pages folder, and then choose Index.cshtml.

    Выбор файла Index.cshtml из обозревателя решений

    Этот файл соответствует странице с заголовком Home (Домашняя) веб-приложения, которое запускается в веб-браузере.This file corresponds to a page that's named Home in the web app, which runs in a web browser.

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

    В редакторе отображается HTML-код для текста, содержащегося на странице Home (Домашняя).In the editor, you'll see HTML code for the text that appears on the Home page.

    HTML-код из файла Index.cshtml для домашней страницы в редакторе Visual Studio

  2. Измените текст "Welcome" на "Hello World! ".Change the "Welcome" text to read "Hello World!".

    В редакторе Visual Studio измените сообщение "Welcome" в HTML-коде по умолчанию на сообщение "Hello World"

  3. Выберите IIS Express или нажмите клавиши CTRL+F5, чтобы запустить приложение и открыть его в веб-браузере.Choose IIS Express or press Ctrl+F5 to run the app and open it in a web browser.

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

    Примечание

    Если выводится сообщение об ошибке с текстом Не удается подключиться к веб-серверу IIS Express или сообщение об ошибке, где упоминается SSL-сертификат, закройте Visual Studio.If you get an error message that says, Unable to connect to web server 'IIS Express', or an error message that mentions an SSL certificate, close Visual Studio. После этого откройте Visual Studio с помощью пункта Запуск от имени администратора контекстного меню.Next, open Visual Studio by using the Run as administrator option from the right-click context menu. Затем снова запустите приложение.Then, run the application again.

  4. В веб-браузере убедитесь, что страница Home (Домашняя) содержит введенный вами текст.In the web browser, verify that the Home page includes your updated text.

    Обновленная страница "Home" (Домашняя) с внесенными изменениями

  5. Закройте веб-браузер.Close the web browser.

Дальнейшие действияNext steps

Для получения дополнительных сведений перейдите к следующему руководству:To learn more, continue with the following tutorial:

См. также разделSee also

Публикация веб-приложения в службе приложений Azure с помощью Visual StudioPublish your web app to Azure App Service by using Visual Studio