Руководство. Начало работы с C# и ASP.NET Core в Visual Studio

  • Статья

Область применения:yesVisual Studio Visual Studio noдля Mac noVisual Studio Code

В этом учебнике по разработке в C# и ASP.NET Core вы создадите веб-приложение ASP.NET Core на языке C# в Visual Studio.

В этом учебнике показано, как выполнять следующие действия.

  • Создание проекта Visual Studio
  • Создание веб-приложения ASP.NET Core на языке C#
  • Внесение изменений в веб-приложение
  • Знакомство с функциями интегрированной среды разработки
  • Запуск веб-приложения

Предварительные условия

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

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

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

  1. В окне запуска выберите Создание нового проекта.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

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

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

    Screenshot shows the ASP.NET Core Web App project template highlighted in the New Project dialog box.

    Заметка

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

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

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

    Screenshot shows the dot NET Core cross-platform development workload in the Visual Studio Installer.

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

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

    Screenshot shows the Configure your new project window with MyCoreApp entered in the Project name field.

  4. Убедитесь, что в окне Дополнительные сведения, в поле Целевая платформа отображается значение .NET Core 3.1. В этом окне можно включить поддержку Docker и добавить поддержку проверки подлинности. В раскрывающемся меню Тип проверки подлинности имеется четыре варианта:

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

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

    Screenshot shows the default settings in the Additional information window. The Framework value is .NET Core 3.1.

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

  1. В окне запуска выберите Создание нового проекта.

    Screenshot shows the start window for Visual Studio. Create a new project option is highlighted.

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

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

    Screenshot shows the ASP.NET Core Web App project template selected and highlighted on the Create a new project page.

    Заметка

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

    Screenshot shows the Install more tools and features link that is part of the Not finding what you're looking for message.

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

    Screenshot shows the ASP.NET and web development workload in the Visual Studio Installer.

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

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

    Screenshot shows the Configure your new project window with MyCoreApp entered in the Project name field.

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

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

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

    Screenshot shows the default settings in the Additional information window. The Framework value is .NET 6.0.

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

Сведения о решении

Это решение основано на конструктивном шаблоне Страница Razor. Он отличается от конструктивного шаблона Model-View-Controller (MVC) тем, что содержит код модели и управляющий код в самой странице Razor.

Обзор решения

  1. С помощью шаблона проекта создается решение с одним проектом ASP.NET Core, который имеет имя MyCoreApp. Перейдите на вкладку Обозреватель решений, чтобы просмотреть его содержимое.

    Screenshot shows the MyCoreApp project selected in the Solution Explorer in Visual Studio.

  2. Разверните папку Pages.

    Screenshot shows the contents of the Pages folder in the the Solution Explorer in Visual Studio..

  3. Выберите файл index.cshtml и просмотрите его в редакторе кода.

    Screenshot shows the Index dot c s h t m l file open in the Visual Studio code editor.

  4. С каждым файлом CSHTML связан файл кода. Чтобы открыть файл кода в редакторе, разверните узел Index.cshtml в обозревателе решений и выберите файл Index.cshtml.cs.

    Screenshot shows Index dot c s h t m l file selected in the Solution Explorer in Visual Studio.

  5. Просмотрите файл Index.cshtml.cs в редакторе кода.

    Screenshot shows the Index dot c s h t m l dot c s file open in the Visual Studio code editor.

  6. Проект содержит папку wwwroot, которая является корневой для веб-сайта. Разверните папку, чтобы просмотреть его содержимое.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Вы можете поместить статическое содержимое сайта, например CSS, изображения и библиотеки JavaScript, напрямую в нужные пути.

  7. Проект также содержит файлы конфигурации для управления веб-приложением во время выполнения. Стандартная конфигурация приложения хранится в файле appsettings.json. Тем не менее эти параметры можно переопределить с помощью appsettings.Development.json. Разверните файл appsettings.json, чтобы просмотреть файл appsettings.Development.json.

    Screenshot shows appsettings dot j son selected and expanded in the Solution Explorer in Visual Studio.

Запуск, отладка и внесение изменений

  1. Нажмите кнопку IIS Express на панели инструментов, чтобы выполнить сборку приложения и запустить его в режиме отладки. Кроме того, можно нажать клавишу F5 или выбрать пункт меню Отладка>Начать отладку в строке меню.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Заметка

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

    Может также появиться запрос о том, хотите ли вы принять сертификат IIS SSL Express. Чтобы просмотреть код в веб-браузере, выберите Да, а затем снова Да, если появится предупреждение системы безопасности о дальнейшей обработке.

  2. Visual Studio откроет окно браузера. В строке меню вы должны увидеть названия страниц Home (Главная) и Privacy (Конфиденциальность).

  3. Выберите в строке меню страницу Privacy. На открытой в браузере странице Privacy отображается текст, заданный в файле Privacy.cshtml.

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. Вернитесь в Visual Studio и нажмите клавиши SHIFT+F5, чтобы завершить отладку. Также после этого закроется проект в окне браузера.

  5. В Visual Studio откройте файл Privacy.cshtml для редактирования. Затем удалите строку Use this page to detail your site's privacy policy (Эта страница предназначена для политики конфиденциальности сайта) и добавьте вместо нее строку This page is under construction as of @ViewData["TimeStamp"] (Эта страница находится в разработке с ["метка_времени"]).

    Screenshot shows the Privacy dot c s h t m l file open in the Visual Studio code editor with the updated text.

  6. Теперь изменим код. Выберите файл Privacy.cshtml.cs. Затем очистите директивы using в начале файла, как описано ниже.

    Выберите любую из выделенных серым цветом директив using Под курсором или в поле слева отобразится меню Быстрые действия (значок лампочки). Выберите лампочку, а затем команду Удалить ненужные директивы Using.

    Screenshot shows the Privacy dot c s h t m l file in the Visual Studio code editor with the Quick Actions tooltip exposed for a greyed out using directive.

    Теперь выберите команду Просмотреть изменения, чтобы увидеть, что изменится.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Выберите Применить. Visual Studio удалит из файла ненужные директивы using.

  7. Затем в методе OnGet() замените основную часть таким кодом:

    public void OnGet()
{
   string dateTime = DateTime.Now.ToShortDateString();
   ViewData["TimeStamp"] = dateTime;
}

  8. Обратите внимание, что в поле DateTime отображается подчеркивание волнистой линией. Подчеркивание волнистой линией появилось, потому что этот тип находится за пределами области.

    Screenshot shows an error mark, in the form of a wavy underline, for DateTime in the Visual Studio code editor.

    Откройте панель инструментов Список ошибок, чтобы просмотреть там те же самые ошибки. Если вы не видите панель инструментов Список ошибок, выберите Представление>Список ошибок в верхней строке меню.

    Screenshot shows the Error List toolbar in Visual Studio with DateTime listed.

  9. Давайте исправим эту ошибку. В редакторе кода установите курсор в любую строку с ошибкой, а затем в поле слева выберите меню "Быстрые действия" (значок лампочки). В раскрывающемся меню выберите using System;, чтобы добавить эту директиву в начало файла и устранить ошибки.

    Screenshot shows the Quick Actions options from its drop-down menu with a mouseover on using System.

  10. Нажмите клавишу F5, чтобы открыть проект в веб-браузере.

  11. В верхней части веб-сайта выберите пункт Privacy (Конфиденциальность), чтобы просмотреть изменения.

    Screenshot showing the updated Privacy page that includes the changes you made.

  12. Закройте веб-браузер, нажмите клавиши SHIFT+F5, чтобы остановить отладку.

Изменение главной страницы

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

    Screenshot shows Index dot c s h t m l selected under the Pages node in the Solution Explorer.

    Файл Index.cshtml соответствует странице с заголовком Home (Главная) веб-приложения, которое запускается в веб-браузере.

    Screenshot shows the Home page for the web app in the browser window.

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

    Screenshot shows the Index dot c s h t m l file for the Home page in the Visual Studio code editor.

  2. Замените текст Welcome на Hello World!

    Screenshot shows the Index dot c s h t m l file in the Visual Studio code editor with the Welcome text changed to Hello World!.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. В веб-браузере вы увидите новые изменения на странице Home (Главная).

    Screenshot shows the Home page for the web app in the browser window. The updated text says Hello World!

  5. Закройте веб-браузер, нажмите клавиши SHIFT+F5, чтобы остановить отладку, и сохраните проект. Теперь можно закрыть Visual Studio.

Обзор решения

  1. С помощью шаблона проекта создается решение с одним проектом ASP.NET Core, который имеет имя MyCoreApp. Перейдите на вкладку Обозреватель решений, чтобы просмотреть его содержимое.

    Screenshot shows the MyCoreApp project selected and its content in the Solution Explorer in Visual Studio.

  2. Разверните папку Pages.

    Screenshot shows the contents of the Pages folder in the Solution Explorer.

  3. Выберите файл index.cshtml и просмотрите его в редакторе кода.

    Screenshot shows the Index.cshtml file open in the Visual Studio code editor.

  4. С каждым файлом CSHTML связан файл кода. Чтобы открыть файл кода в редакторе, разверните узел Index.cshtml в обозревателе решений и выберите файл Index.cshtml.cs.

    Screenshot shows Index.cshtml file selected in the Solution Explorer in Visual Studio.

  5. Просмотрите файл Index.cshtml.cs в редакторе кода.

    Screenshot shows the Index.cshtml.cs file open in the Visual Studio code editor.

  6. Проект содержит папку wwwroot, которая является корневой для веб-сайта. Разверните папку, чтобы просмотреть его содержимое.

    Screenshot shows the w w w root folder selected in the Solution Explorer in Visual Studio.

    Вы можете поместить статическое содержимое сайта, например CSS, изображения и библиотеки JavaScript, напрямую в нужные пути.

  7. Проект также содержит файлы конфигурации для управления веб-приложением во время выполнения. Стандартная конфигурация приложения хранится в файле appsettings.json. Тем не менее эти параметры можно переопределить с помощью appsettings.Development.json. Разверните файл appsettings.json, чтобы просмотреть файл appsettings.Development.json.

    Screenshot shows appsettings.json selected and expanded, which exposes appsettings.Development.json, in the Solution Explorer in Visual Studio.

Запуск, отладка и внесение изменений

  1. Нажмите кнопку IIS Express на панели инструментов, чтобы выполнить сборку приложения и запустить его в режиме отладки. Кроме того, можно нажать клавишу F5 или выбрать пункт меню Отладка>Начать отладку в строке меню.

    Screenshot shows the I I S Express button highlighted in the toolbar in Visual Studio.

    Заметка

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

    Может также появиться запрос о том, хотите ли вы принять сертификат IIS SSL Express. Чтобы просмотреть код в веб-браузере, выберите Да, а затем снова Да, если появится предупреждение системы безопасности о дальнейшей обработке.

  2. Visual Studio откроет окно браузера. В строке меню вы должны увидеть названия страниц Home (Главная) и Privacy (Конфиденциальность).

  3. Выберите в строке меню страницу Privacy. На открытой в браузере странице Privacy отображается текст, заданный в файле Privacy.cshtml.

    Screenshot shows the MyCoreApp Privacy page with the following text: Use this page to detail your site's privacy policy.

  4. Вернитесь в Visual Studio и нажмите клавиши SHIFT+F5, чтобы завершить отладку. Также после этого закроется проект в окне браузера.

  5. В Visual Studio откройте файл Privacy.cshtml для редактирования. Затем удалите строку Use this page to detail your site's privacy policy (Эта страница предназначена для политики конфиденциальности сайта) и добавьте вместо нее строку This page is under construction as of @ViewData["TimeStamp"] (Эта страница находится в разработке с ["метка_времени"]).

    Screenshot shows the Privacy.cshtml file open in the Visual Studio code editor with the updated text.

  6. Теперь изменим код. Выберите файл Privacy.cshtml.cs. Очистите директивы using в начале файла, как описано ниже.

    Выберите любую из выделенных серым цветом директив using Под курсором или в поле слева отобразится меню Быстрые действия (значок лампочки). Выберите лампочку, а затем щелкните стрелку развертывания рядом с удалением ненужных операций.

    Screenshot shows the Privacy.cshtml file in the Visual Studio code editor with the Quick Actions tooltip open and Preview changes highlighted.

    Теперь выберите команду Просмотреть изменения, чтобы увидеть, что изменится.

    Screenshot shows the Preview Changes dialog box. The dialog box shows the directive being removed, and previews the code change after the removal.

    Выберите Применить. Visual Studio удалит из файла ненужные директивы using.

  7. Затем создайте строку с текущей датой, отформатированной в соответствии с вашим языком и региональными параметрами или регионом, с помощью метода DateTime.ToString.

    • Первый аргумент метода указывает, как должна отображаться дата. В этом примере используется описатель формата (d), который указывает короткий формат даты.
    • Вторым аргументом является объект CultureInfo, указывающий язык и региональные параметры или регион для даты. Второй аргумент определяет, помимо прочего, язык любых слов в дате и тип используемых разделителей.

    В методе OnGet() измените текст на следующий код.

    public void OnGet()
{
   string dateTime = DateTime.Now.ToString("d", new CultureInfo("en-US"));
   ViewData["TimeStamp"] = dateTime;
}

  8. Обратите внимание, что следующая using директива автоматически добавляется в начало файла:

    using System.Globalization;

    System.Globalization содержит класс CultureInfo .

  9. Нажмите клавишу F5, чтобы открыть проект в веб-браузере.

  10. В верхней части веб-сайта выберите пункт Privacy (Конфиденциальность), чтобы просмотреть изменения.

    Screenshot showing the Privacy page of the MyCoreApp that includes the changes made to add the date.

  11. Закройте веб-браузер, нажмите клавиши SHIFT+F5, чтобы остановить отладку.

Изменение главной страницы

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

    Screenshot shows Index.cshtml selected under the Pages node in the Solution Explorer.

    Файл Index.cshtml соответствует странице с заголовком Home (Главная) веб-приложения, которое запускается в веб-браузере.

    Screenshot shows the Home page for the web app in the browser window.

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

    Screenshot shows the Index.cshtml file for the Home page in the Visual Studio code editor.

  2. Замените текст Welcome на Hello World!

    Screenshot shows the Index.cshtml file in the Visual Studio code editor with the 'Welcome' text changed to 'Hello World!'.

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

    Screenshot shows the IIS Express button highlighted in the toolbar for Visual Studio.

  4. В веб-браузере вы увидите новые изменения на странице Home (Главная).

    Screenshot shows the Home page for the web app in the browser window. The updated text says 'Hello World!'

  5. Закройте веб-браузер, нажмите клавиши SHIFT+F5, чтобы остановить отладку, и сохраните проект. Теперь можно закрыть Visual Studio.

Далее

Поздравляем с завершением этого учебника! Надеемся, что вам понравилось изучать C#, ASP.NET Core и интегрированную среду разработки Visual Studio. Дополнительные сведения о создании веб-приложения или веб-сайта с помощью C# и ASP.NET вы найдете в следующих руководствах:

Создание веб-приложения Razor Pages с помощью ASP.NET Core

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

Средства для контейнеров в Visual Studio

См. также

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