Поделиться через

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

  • Статья

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

В этом руководстве показано, как:

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

Необходимые условия

Чтобы завершить работу с этим руководством, вам потребуется:

  • Установлен Visual Studio. Перейдите на страницу загрузки Visual Studio, чтобы скачать бесплатную версию. Дополнительные сведения об обновлении до последней версии Visual Studio см. в обновлениях Visual Studio.
  • Установлены ASP.NET и рабочий процесс веб-разработки. Чтобы проверить или установить эту рабочую нагрузку в Visual Studio, выберите Инструменты>Получить средства и компоненты. Дополнительные сведения см. в разделе Изменение рабочих нагрузок или отдельных компонентов.

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

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

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

    На снимке экрана показано начальное окно Visual Studio. Опция создания нового проекта выделена.

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

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

    снимок экрана, на котором показан шаблон проекта ASP.NET Core Web App, выделенный в диалоговом окне

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

    Снимок экрана, отображающий окно

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

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

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

    Оставьте поле Включить Docker не отмеченным и выберите Нет в качестве типа проверки подлинности.

    снимок экрана, показывающий параметры по умолчанию в окне дополнительных сведений, в котором целевая платформа имеет значение .NET Core 3.1.

  5. Выберите Создать.

Visual Studio открывает новый проект.

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

    снимок экрана: начальная страница Visual Studio. Выделена опция

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

    После применения фильтров языков, платформы и типов проекта выберите шаблон ASP.NET Core Web App (Razor Pages), а затем выберите Далее.

    снимок экрана, на котором показан выбранный шаблон проекта ASP.NET Core Web App и выделенный на странице

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

    Скриншот, показывающий окно

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

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

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

    Оставьте флажок Включить поддержку контейнеров неустановленным и выберите Нет для типа проверки подлинности.

    снимок экрана, показывающий параметры по умолчанию в окне дополнительных сведений, в котором целевая платформа имеет значение .NET 8.0.

  5. Выберите Создать.

Visual Studio открывает новый проект.

О вашем решении

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

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

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

    снимок экрана: проект MyCoreApp, выбранный в обозревателе решений в Visual Studio.

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

    снимок экрана: содержимое папки Pages в обозревателе решений в Visual Studio..

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

    Скриншот показывает, что файл index.chtml открыт в редакторе кода Visual Studio.

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

    Снимок экрана показывает файл Index.cshhtml, выбранный в обозревателе решений в Visual Studio.

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

    Снимок экрана показывает файл Index dot c s h t m l dot c, открытый в редакторе кода Visual Studio.

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

    Снимок экрана показывает корневую папку w w w, выбранную в обозревателе решений в Visual Studio.

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

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

  7. Разверните файл appsettings.json, чтобы просмотреть файл appsettings.Development.json.

    Скриншот показывает файл appsettings.json, выбранный и развернутый в Обозревателе решений в Visual Studio.

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

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

    снимок экрана: кнопка I S Express, выделенная на панели инструментов в Visual Studio.

    Заметка

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

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

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

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

    снимок экрана: страница

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

  5. В Visual Studio откройте Privacy.cshtml для редактирования. Затем удалите предложение, Эту страницу можно использовать для подробной информации о политике конфиденциальности сайта и замените ее Эта страница находится в стадии создания с @ViewData["TimeStamp"].

    снимок экрана показывает файл Privacy.html, открытый в редакторе кода Visual Studio с обновленным текстом.

  6. Теперь давайте изменим код. Выберите Privacy.cshtml.cs. Затем очистите директивы using в верхней части файла с помощью следующего ярлыка:

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

    снимок экрана показывает файл Privacy.cshtml в редакторе кода Visual Studio с подсказкой

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

    снимок экрана: диалоговое окно

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

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

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

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

    на снимке экрана показана метка ошибки в виде волнистого подчеркивания для DateTime в редакторе кода Visual Studio.

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

    Снимок экрана показывает панель инструментов списка ошибок в Visual Studio, где указан DateTime.

  9. Давайте исправим эту ошибку. В редакторе кода поместите курсор на строку, содержащую ошибку, и выберите лампочку быстрых действий в левом поле. Затем в раскрывающемся меню выберите , используя System. добавьте эту директиву в начало вашего файла и устраните ошибки.

    Снимок экрана показывает параметры быстрых действий из раскрывающегося меню при наведении курсора на

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

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

    снимок экрана, на котором показана обновленная страница конфиденциальности, содержащая внесенные изменения.

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

Изменение домашней страницы

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

    Снимок экрана показывает, что файл Index.cshtml выбран в узле Pages в обозревателе решений.

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

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

    В редакторе кода видно HTML-код текста, который отображается на странице Главная.

    Снимок экрана показывает файл index.cshmtl на главной странице в редакторе кода Visual Studio.

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

    снимок экрана: файл index dot c h m l в редакторе кода Visual Studio с текстом приветствия, измененным на Hello World!.

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

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

  4. В веб-браузере вы увидите новые изменения на странице home.

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

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

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

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

    снимок экрана: выбранный проект MyCoreApp и его содержимое в обозревателе решений в Visual Studio.

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

    снимок экрана: содержимое папки Pages в обозревателе решений.

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

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

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

    снимок экрана: файл Index.cshtml, выбранный в обозревателе решений в Visual Studio.

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

    снимок экрана: файл Index.cshtml.cs открыт в редакторе Visual Studio Code.

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

    снимок экрана: корневая папка w w, выбранная в обозревателе решений в Visual Studio.

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

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

    Снимок экрана показывает, что appsettings.json выбран и развернут, что открывает appsettings.Development.jsonв обозревателе решений в Visual Studio.

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

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

    снимок экрана: кнопка https, выделенная на панели инструментов в Visual Studio.

    Заметка

    Вы также можете получить сообщение, которое спрашивает, хотите ли вы принять ssl-сертификат ASP.NET Core. Чтобы просмотреть код в веб-браузере, выберите Да, а затем выберите Да, если появится предупреждение системы безопасности. Дополнительные сведения о применении SSL см. в ASP.NET Core.

  2. Visual Studio запускает окно браузера. Затем в строке меню должны отображаться домашняя страница и страница конфиденциальности.

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

    снимок экрана: страница

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

  5. В Visual Studio откройте Privacy.cshtml для редактирования. Затем удалите предложение, Эту страницу можно использовать для подробной информации о политике конфиденциальности сайта и замените на Эта страница находится на стадии разработки с @ViewData["TimeStamp"].

    снимок экрана: файл Privacy.cshtml открыт в редакторе Visual Studio Code с обновленным текстом.

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

    Наведите указатель мыши или выберите неактивную директиву using. Значок лампочки для быстрых действий отображается под курсором или на левом поле. Выберите лампочку, а затем щелкните стрелку развертывания рядом с Удалить ненужные.

    На снимке экрана показан файл Privacy.cshtml в редакторе Visual Studio Code с открытой подсказкой

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

    снимок экрана: диалоговое окно

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

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

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

    Измените текст метода OnGet() в Privacy.cshtml.cs на следующий код:

    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. В верхней части веб-сайта выберите Конфиденциальность, чтобы просмотреть изменения.

    снимок экрана со страницей конфиденциальности MyCoreApp, включающей изменения, внесенные для добавления даты.

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

Изменение домашней страницы

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

    Снимок экрана показывает Index.cshtml, который выбран под узлом Pages в разделе решений.

    Файл Index.cshtml соответствует домашней странице в веб-приложении, которое выполняется в веб-браузере.

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

    В редакторе кода вы видите HTML-код текста, который появляется на странице Главная.

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

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

    снимок экрана: файл Index.cshtml в редакторе Visual Studio Code с текстом приветствия изменен на Hello World!.

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

    снимок экрана: кнопка https, выделенная на панели инструментов для Visual Studio.

  4. В веб-браузере вы увидите новые изменения на странице home.

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

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

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

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

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

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

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