Упражнение. Настройка проекта

  • 12 мин

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

Примечание.

В этом модуле используются .NET CLI (интерфейс командной строки) и Visual Studio Code для локальной разработки. После выполнения этого модуля можно применить основные понятия с помощью Visual Studio (Windows) или продолжения разработки с помощью Visual Studio Code (Windows, Linux и macOS).

Получение файлов проекта

Если вы используете GitHub Codespaces, просто откройте репозиторий в браузере, выберите "Код" и создайте новое пространство кода в main ветви.

Если вы не используете GitHub Codespaces, получите файлы проекта и откройте их в Visual Studio Code, выполнив следующие действия:

  1. Откройте командную оболочку и клонируйте проект из GitHub с помощью командной строки:

    git clone https://github.com/MicrosoftDocs/mslearn-create-razor-pages-aspnet-core

  2. Перейдите к каталогу mslearn-create-razor-pages-aspnet-core и откройте проект в Visual Studio Code:

    cd mslearn-create-razor-pages-aspnet-core
code .

Совет

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

Просмотр работы товарищей по команде

Давайте рассмотрим существующий код в папке ContosoPizza. Проект — это веб-приложение ASP.NET Core, созданное dotnet new webapp с помощью команды. Изменения, внесенные товарищами по команде, описаны ниже.

Совет

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

  • Папка Models была добавлена в проект.
    • Папка модели содержит Pizza класс, представляющий пиццу.
  • Папка данных была добавлена в проект.
    • Папка данных содержит PizzaContext класс, представляющий контекст базы данных. Он наследует от DbContext класса в Entity Framework Core. Entity Framework Core — это объектно-реляционное отображение (ORM), которое упрощает работу с базами данных.
  • Папка "Службы" была добавлена в проект.
    • Папка служб содержит PizzaService класс, предоставляющий методы для перечисления и добавления пиццы.
    • Класс PizzaService использует класс PizzaContext для чтения и записи пицц в базу данных.
    • Класс регистрируется для внедрения зависимостей в Program.cs (строка 10).

Entity Framework Core также создал несколько вещей:

  • Была создана папка Migrations.
    • Папка миграций содержит код для создания схемы базы данных.
  • Был создан файл базы данных SQLite ContosoPizza.db.
    • Если у вас установлено расширение SQLite (или используется GitHub Codespaces), вы можете просмотреть базу данных, щелкнув файл правой кнопкой мыши и выбрав "Открыть базу данных". Схема базы данных показана на вкладке SQLite Explorer панели обозревателя.

Просмотрите структуру проекта Razor Pages

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

Имя Описание
Pages/ Содержит Razor Pages и вспомогательные файлы. Каждая страница Razor содержит CSHTML-файл
wwwroot/ Содержит статические файлы ресурсов, такие как HTML, JavaScript и CSS.
ContosoPizza.csproj Содержит метаданные конфигурации проекта, такие как зависимости.
Program.cs Служит точкой входа приложения и настраивает поведение приложения, например маршрутизацию.

Другие заметные наблюдения:

  • Файлы страниц Razor и их парный PageModel файл класса

    Страницы Razor хранятся в каталоге Pages . Как отмечалось выше, каждая страница Razor содержит CSHTML-файл Класс PageModel позволяет разделить логику и презентацию страницы Razor, определяет обработчики страниц для запросов, а также инкапсулирует свойства данных и логику, область действия которой находится на странице Razor.

  • Структура каталогов Pages и запросы маршрутизации

    Razor Pages использует структуру каталогов Pages как стандарт для маршрутизации запросов. В следующей таблице показано, как URL-адреса сопоставляют с именами файлов:

    URL Карта со страницей Razor
    www.domain.com Pages/Index.cshtml
    www.domain.com/Index Pages/Index.cshtml
    www.domain.com/Privacy Pages/Privacy.cshtml
    www.domain.com/Error Pages/Error.cshtml

    Вложенные папки в каталоге Pages используются для упорядочивания страниц Razor. Например, если был каталог Pages/Products , URL-адреса будут отражать следующую структуру:

    URL Карта со страницей Razor
    www.domain.com/Products Pages/Products/Index.cshtml
    www.domain.com/Products/Index Pages/Products/Index.cshtml
    www.domain.com/Products/Create Pages/Products/Create.cshtml

  • Макет и другие общие файлы

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

    Файл Описание
    _ViewImports.cshtml Импортирует пространства имен и классы, используемые на нескольких страницах.
    _ViewStart.cshtml Задает макет по умолчанию для всех страниц Razor.
    Pages/Shared/_Layout.cshtml Это макет, указанный файлом _ViewStart.cshtml . Реализует общие элементы макета на нескольких страницах.
    Pages/Shared/_ValidationScriptsPartial.cshtml Предоставляет функции проверки для всех страниц.

Запуск проекта в первый раз

Давайте запустите проект, чтобы увидеть его в действии.

  1. Щелкните правой кнопкой мыши папку ContosoPizza в обозревателе и выберите "Открыть в интегрированном терминале". Откроется окно терминала в контексте папки проекта.

  2. В окне терминала введите следующую команду:

    dotnet watch

    Команда:

    • Выполняет построение проекта.
    • Запускает приложение.
    • Отслеживает изменения файлов и перезапускает приложение при обнаружении изменения.

  3. Интегрированная среда разработки предложит открыть приложение в браузере. Выберите Открыть в браузере.

    Совет

    Вы также можете открыть приложение, найдя URL-адрес в окне терминала. Удерживайте клавишу CTRL и щелкните URL-адрес, чтобы открыть его в браузере.

  4. Сравните отрисованную домашнюю страницу со Pages/Index.cshtml в интегрированной среде разработки:

    • Просмотрите сочетание кода HTML, Razor и C# в файле.
      • Синтаксис Razor обозначается символами @ .
      • Код C# заключен в @{ } блоки. Обратите внимание на директивы в верхней части файла.
      • Директива @page указывает, что этот файл является страницей Razor.
      • Директива @model указывает тип модели для страницы (в данном случае , IndexModelкоторый определен в Pages/Index.cshtml.cs).
    • Просмотрите блок кода C#.
      • Код задает значение Title элемента в ViewData словаре на начальную страницу.
      • Словарь ViewData используется для передачи данных между страницей Razor и классом IndexModel .
      • Во время выполнения значение Title используется для установки элемента страницы <title>.

Оставьте приложение запущенным в окне терминала. Мы будем использовать его в предстоящих уроках. Тоже оставьте вкладку браузера с запущенным приложением Contoso Pizza. Вы внесете изменения в приложение, и браузер автоматически обновится, чтобы отобразить изменения.

Настройка целевой страницы

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

  1. В Pages/Index.cshtml замените код в блоке кода C# следующим кодом:

    ViewData["Title"] = "The Home for Pizza Lovers";
TimeSpan timeInBusiness = DateTime.Now - new DateTime(2018, 8, 14);

    Предыдущий код:

    • Задает значение элемента Title в словаре ViewData на "Дом для любителей пиццы".
    • Вычисляет время, прошедшее с момента открытия бизнеса.

  2. Измените HTML следующим образом:

    • Замените <h1> элемент следующим кодом:

      <h1 class="display-4">Welcome to Contoso Pizza</h1>

    • Замените <p> элемент следующим кодом:

      <p class="lead">The best pizza in town for @Convert.ToInt32(timeInBusiness.TotalDays) days!</p>

    Предыдущий код:

    • Изменяет заголовок на "Добро пожаловать в Contoso Pizza".
    • Отображает количество дней, прошедших с момента открытия бизнеса.
      • Символ @ используется для переключения с HTML на синтаксис Razor.
      • Метод Convert.ToInt32 используется для преобразования TotalDays свойства переменной timeInBusiness в целое число.
      • Класс Convert является частью пространства имен System, который автоматически импортируется элементом <ImplicitUsings> в файле ContosoPizza.csproj.

  3. Сохраните файл. Вкладка браузера с приложением автоматически обновляется, чтобы отобразить изменения. Если вы используете GitHub Codespaces, файл сохраняется автоматически, но вам потребуется обновить вкладку браузера вручную.

Внимание

Внимательно следите за окном терминала при dotnet watch каждом сохранении файла. Иногда ваш код может содержать то, что называется грубым редактированием. Это означает, что измененный код нельзя перекомпилировать без перезапуска приложения. Если появится запрос на перезапуск приложения, нажмите y клавишу (да) или a (всегда). Вы всегда можете остановить приложение, дважды нажав клавиши CTRL+C в окне терминала, а затем перезапустить его, снова выполнив команду dotnet watch .

Вы внесли первые изменения на странице Razor! В следующем уроке вы добавите новую страницу в приложение, чтобы отобразить список пицц.