Упражнение. Добавление новой страницы Razor

  • 10 мин

В предыдущем уроке вы получили исходный код проекта Contoso Pizza, а затем внесли некоторые простые изменения на домашнюю страницу. В этом уроке вы добавите в проект новую страницу Razor.

Создание страницы "Список пицц"

Чтобы создать страницу Razor, используйте .NET CLI.

  1. Так как терминал заблокирован командой dotnet watch , откройте другой терминал, щелкнув правой кнопкой мыши папку ContosoPizza в Обозреватель и выберите Открыть в интегрированном терминале.

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

    dotnet new page --name PizzaList --namespace ContosoPizza.Pages --output Pages

    Предыдущая команда:

    • Создает следующие два файла в ContosoPizza.Pages пространстве имен:
      • PizzaList.cshtml — страница Razor
      • PizzaList.cshtml.cs — сопутствующий PageModel класс
    • Хранит оба файла в подкаталоге Pages проекта.

  3. В файле Pages/PizzaList.cshtml добавьте следующий код в @{ } блок кода:

    ViewData["Title"] = "Pizza List 🍕";

    При этом задается <title> элемент для страницы.

  4. В конце файла добавьте следующий код:

    <h1>Pizza List 🍕</h1>

<!-- New Pizza form will go here -->

<!-- List of pizzas will go here -->

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

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

  6. Вернитесь в терминал и dotnet watch нажмите клавиши CTRL+R , чтобы перезагрузить приложение и обнаружить новые файлы.

Добавление страницы "Список пицц" в меню навигации

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

  1. Откройте файл Pages/Shared/_Layout.cshtml.

  2. В элементе <ul> с классом navbar-nav (начинается в строке 21) обратите внимание <li> на элементы, содержащие ссылки на страницы Главная и Конфиденциальность . Добавьте следующий код в конец списка после <li> элемента, содержащего ссылку Конфиденциальность :

    <li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/PizzaList">Pizza List 🍕</a>
</li>

    В меню навигации будет добавлена ссылка на страницу PizzaList .

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

  4. Выберите ссылку Список 🍕 пицц в меню навигации. Откроется страница Список пицц.

Регистрация класса PizzaService в контейнере внедрения зависимостей

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

  1. Откройте файл Program.cs.

  2. В разделе, который добавляет службы в контейнер, добавьте следующий код:

    builder.Services.AddScoped<PizzaService>();

    Этот код регистрирует класс в PizzaService контейнере внедрения зависимостей. Метод AddScoped указывает, что для каждого HTTP-запроса должен быть создан новый PizzaService объект . PizzaService Теперь можно внедрить в любую страницу Razor.

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

Отображение списка пицц

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

  1. Откройте Файл Pages/PizzaList.cshtml.cs.

  2. Добавьте следующие using операторы в начало файла:

    using ContosoPizza.Models;
using ContosoPizza.Services;

    Эти инструкции импортируют Pizza типы и PizzaService , которые будут использоваться на странице.

  3. В блоке ContosoPizza.Pages пространства имен замените весь PizzaListModel класс следующим кодом:

    public class PizzaListModel : PageModel
{
    private readonly PizzaService _service;
    public IList<Pizza> PizzaList { get;set; } = default!;

    public PizzaListModel(PizzaService service)
    {
        _service = service;
    }

    public void OnGet()
    {
        PizzaList = _service.GetPizzas();
    }
}

    В приведенном выше коде:

    • Создается частный объект readonly PizzaService с именем _service . Эта переменная будет содержать ссылку PizzaService на объект .
      • Ключевое слово readonly указывает, что значение переменной _service нельзя изменить после его установки в конструкторе.
    • Свойство PizzaList определяется для хранения списка пицц.
      • Тип IList<Pizza> указывает, что PizzaList свойство будет содержать список Pizza объектов .
      • PizzaList инициализируется в , default! чтобы указать компилятору, что он будет инициализирован позже, поэтому проверки безопасности null не требуются.
    • Конструктор принимает PizzaService объект .
      • Объект PizzaService предоставляется путем внедрения зависимостей.
    • Метод OnGet определяется для получения списка пицц из PizzaService объекта и сохранения его в свойстве PizzaList .

    Совет

    Если вам нужны дополнительные сведения о безопасности значений NULL, см. статью Безопасное использование NULL в C#.

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

  5. Вернитесь в терминал dotnet watch и нажмите клавиши CTRL+R , чтобы перезагрузить приложение с зарегистрированной службой и новым конструктором для PizzaListModel.

Отображение списка пицц

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

  1. Откройте файл Pages/PizzaList.cshtml.

  2. Замените комментарий <!-- List of pizzas will go here --> следующим фрагментом кода:

    <table class="table mt-5">
    <thead>
        <tr>
            <th scope="col">Name</th>
            <th scope="col">Price</th>
            <th scope="col">Size</th>
            <th scope="col">Gluten Free</th>
            <th scope="col">Delete</th>
        </tr>
    </thead>
    <tbody>
    @foreach (var pizza in Model.PizzaList)
    {
        <tr>
            <td>@pizza.Name</td>
            <td>@($"{pizza.Price:C}")</td>
            <td>@pizza.Size</td>
            <td>@(pizza.IsGlutenFree ? "✔️" : string.Empty)</td>
            <td>
                <form method="post" asp-page-handler="Delete" asp-route-id="@pizza.Id">
                    <button class="btn btn-danger">Delete</button>
                </form>
            </td>
        </tr>
    }
    </tbody>
</table>

    В приведенном выше коде:

    • Создается <table> элемент для отображения списка пицц.
    • Элемент <thead> создается для хранения заголовка таблицы.
    • Оператор @foreach внутри выполняет <tbody> итерацию по списку пицц.
      • Свойство Model ссылается на PizzaListModel объект , созданный в файле кода программной части.
      • Свойство PizzaList ссылается на PizzaList свойство, определенное в файле кода программной части.
    • Каждая итерация инструкции @foreach создает <tr> элемент для хранения данных пиццы:
      • Синтаксис Razor используется для отображения данных пиццы в элементах <td> . Этот синтаксис используется для отображения свойств объекта , хранящегося Pizza в переменной pizza .
      • Price форматируется с помощью интерполяции строк C#.
      • Тернарное выражение используется для отображения значения свойства в IsGlutenFree виде "✔️" или пустой ячейки.
      • Создается форма для удаления пиццы.
        • Атрибут asp-page-handler указывает, что форма должна быть отправлена обработчику Delete в файле кода программной части. Вы создадите этот обработчик в следующем уроке.
        • Атрибут asp-route-id указывает, что Id свойство Pizza объекта должно быть передано обработчику Delete .

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

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

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