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

  • Статья

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

В этом руководстве по разработке C# с помощью ASP.NET Core вы создадите веб-приложение C# ASP.NET Core в 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 that shows the ASP.NET Core Web App project template highlighted in the New Project dialog box in Visual Studio.

    Примечание.

    Если шаблон Консольное приложение отсутствует, его можно установить в окне Создание проекта.

    В разделе "Не найти то, что вы ищете?", в нижней части списка шаблонов выберите ссылку "Установить дополнительные средства и функции".

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

    В установщике Visual Studio выберите ASP.NET и веб-разработку.

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

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

    Вернитесь к шагу 2 в процедуре Создание проекта.

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

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

  4. Убедитесь, что в окне Дополнительные сведения, в поле Целевая платформа отображается значение .NET Core 3.1.

    В этом окне можно включить поддержку Docker и добавить поддержку проверки подлинности. В раскрывающемся меню Тип проверки подлинности имеется четыре варианта:

    • Нет. Проверка подлинности отсутствует.
    • Отдельные учетные записи: эти проверки подлинности хранятся в локальной или azure-базе данных.
    • платформа удостоверений Майкрософт. Этот параметр использует идентификатор Microsoft Entra или Microsoft 365 для проверки подлинности.
    • Windows: подходит для приложений интрасети.

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

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET Core 3.1.

  5. Нажмите кнопку создания.

Новый проект открывается в 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 that 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 выберите рабочую нагрузку ASP.NET и веб-разработки .

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

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

    Вернитесь к шагу 2 в процедуре Создание проекта.

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

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

  4. В окне дополнительных сведений убедитесь, что .NET 8.0 отображается в поле Target Framework.

    В этом окне можно включить поддержку Docker и добавить поддержку проверки подлинности. В раскрывающемся меню Тип проверки подлинности имеется четыре варианта:

    • Нет. Проверка подлинности отсутствует.
    • Отдельные учетные записи: эти проверки подлинности хранятся в локальной или azure-базе данных.
    • платформа удостоверений Майкрософт. Этот параметр использует идентификатор Microsoft Entra или Microsoft 365 для проверки подлинности.
    • Windows: подходит для приложений интрасети.

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

    Screenshot that shows the default settings in the Additional information window where the target framework is set to .NET 8.0.

  5. Нажмите кнопку создания.

Новый проект открывается в 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 непосредственно в пути, где они нужны.

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

  7. Разверните файл 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.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-код для текста, отображаемого на домашней странице.

    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. В веб-браузере на домашней странице отображаются новые изменения.

    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.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-код для текста, отображаемого на домашней странице.

    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. В веб-браузере на домашней странице отображаются новые изменения.

    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