Маршрутизация страниц Razor - как показать данные c на следующей странице?

Question

Я слежу за книгой C# 8.0 и. NET Core 3.0 - Современная кроссплатформенная разработка

Я сейчас прохожу в главе 15 с упражнением 15.2 где нам поручено создать страницу Razor, на которой будет отображаться список клиентов, сгруппированных по странам. Когда вы нажимаете на имя клиента, вы попадаете на новую страницу, на которой показаны полные контактные данные этого клиента и список его заказов.

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

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

На странице customers.cs html у меня есть asp-page="./CustomerDetails" asp-route-id="@customer.CustomerID", чтобы фиксировать, на кого они нажимают. Я застрял в том, как мне перевести эту информацию на мою новую страницу CustomerDetails.cs html, чтобы заполнить клиента, на который они нажимают?

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

Я пробовал добавить настраиваемое ограничение маршрутизации @page "{CustomerID}" вверху, но это просто возвращает страницу, так как я предполагаю, что значение идентификатора не пройти?

CustomerDetails.cs html

@page "{CustomerID}"
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using NorthwindEntitiesLib
@using NorthwindWeb.Pages
@model NorthwindWeb.Pages.CustomerDetailsModel
@{
    ViewData["Title"] = "Customer Details";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Customer Details</h1>

<div class="card mb-3" style="max-width: 800px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="img/profile-placeholder.png" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">Contact Name </h5>
                <p class="card-text">Company: </p>
                <p class="card-text">Title: </p>
                <p class="card-text">Phone Number: </p>
                <p class="card-text">Fax: </p>
            </div>
        </div>
    </div>
</div>
<div>
    @*Make into a table later*@
    <h5 class="">Orders:</h5>
    <ul class="list-unstyled">
        <li>Order item</li>
    </ul>
</div>

CustomerDetails.cs html .cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.CodeAnalysis.CSharp.Syntax;
using Microsoft.EntityFrameworkCore;
using Microsoft.EntityFrameworkCore.Metadata.Internal;
using NorthwindContextLib;
using NorthwindEntitiesLib;

namespace NorthwindWeb.Pages
{
    public class CustomerDetailsModel : PageModel
    {
        private Northwind db;

        public CustomerDetailsModel(Northwind injectedContext)
        {
            db = injectedContext;
        }

        public IEnumerable<Customer> Customers { get; set; }


        public IActionResult OnGet(string id)
        {
            if (id == null)
            {
                return NotFound();
            }

            Customers = db.Customers.Where(c=>c.CustomerID == id);

            if (Customers == null)
                return NotFound();

            return Page();
        }
    }
}

customer.cs html (на всякий случай для справки)

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using NorthwindEntitiesLib
@model NorthwindWeb.Pages.CustomersModel
@{
    ViewData["Title"] = "Customers";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}
<div class="row">
    <h1 class="display2">Customers</h1>
</div>
<div class="container">
    <div class="row">
        @foreach (var country in Model.Customers
            .GroupBy(c => c.Country)
            .OrderBy(c => c.Key))
        {
            <div class="card border-info mb-3 mr-3" style="width: 12rem">
                <div class="card-header text-white bg-info">
                    @country.Key
                </div>
                <div class="list-group">
                    @foreach (var customer in country.ToArray())
                    {
                        <a asp-page="./CustomerDetails" asp-route-id="@customer.CustomerID" 
                           class="list-group-item list-group-item-action">@customer.ContactName</a>
                    }
                </div>
            </div>
        }
    </div>
</div>

Answer 1

Автор книги обновил свой репозиторий Github, включив в него решение, и где я пропустил вытаскивание идентификатора на следующую страницу, как также указал @pcalkins (не знаю, как его пометить!).

Использование [BindProperty] позволило передать информацию на страницу и правильно настроить метод OnGet () для обеспечения передачи идентификатора. См. Решение ниже. Я также устанавливал свойство IEnumerable для Customer, когда не было необходимости перечислять его, поскольку я хватаю идентификатор. Также было настроено свойство для хранения идентификатора, который мы собираем.

CustomerDetails.cs html .cs

namespace NorthwindWeb.Pages
{
    public class CustomerDetailsModel : PageModel
    {
        private Northwind db;

        public CustomerDetailsModel(Northwind injectedContext)
        {
            db = injectedContext;
        }

        [BindProperty]
        public Customer Customer { get; set; }

        [BindProperty(SupportsGet = true)]
        public String ID { get; set; }

        public void OnGet()
        {
            Customer = db.Customers
                .Where(c => c.CustomerID == ID)
                .Include(c => c.Orders)
                .ThenInclude(c => c.OrderDetails)
                .ThenInclude(c => c.Product)
                .FirstOrDefault();
        }
    }
}

Частичная часть для отображения кода на HTML страница CustomerDetails.cs html

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using NorthwindEntitiesLib
@model NorthwindWeb.Pages.CustomerDetailsModel
@{
    ViewData["Title"] = "Customer Details";
    Layout = "~/Pages/Shared/_Layout.cshtml";
}

<h1>Customer Details</h1>

<div class="card mb-3" style="max-width: 800px;">
    <div class="row no-gutters">
        <div class="col-md-4">
            <img src="img/profile-placeholder.png" class="card-img" alt="...">
        </div>
        <div class="col-md-8">
            <div class="card-body">
                <h5 class="card-title">@Model.Customer.ContactName</h5>
                <p class="card-text">Company: @Model.Customer.CompanyName</p>
                <p class="card-text">Title: @Model.Customer.ContactTitle</p>
                <p class="card-text">Phone Number: @Model.Customer.Phone</p>
                <p class="card-text">Fax: @Model.Customer.Fax</p>
            </div>
        </div>
    </div>
</div>
<div>