Razor 页面路由 - 如何在下一页显示特定数据？

Question

我在本书中关注C# 8.0 and .NET Core 3.0 - Modern Cross-Platform Development

我目前在第 15 章的练习 15.2 中，我们的任务是创建一个 Razor 页面，该页面生成按国家/地区分组的客户列表。当您单击客户名称时，它会将您带到一个新页面，其中显示该客户的完整联系方式和他们的订单列表。

基本上，书中没有向我们展示/处理页面路由的练习或演示。

我需要显示一个新页面，显示所点击客户的完整联系方式。

在 customers.cshtml 页面中，我有 asp-page="./CustomerDetails" asp-route-id="@customer.CustomerID" 来捕捉他们正在点击的对象。我卡住的地方是如何将该信息翻译到我的新页面 CustomerDetails.cshtml 以便填充他们单击的客户？

这可能不是路由问题，但由于我是新手，这是我最好的猜测......

我尝试在顶部添加自定义路由约束@page "{CustomerID}"，但它只是返回页面，因为我猜测 ID 值没有传入？

CustomerDetails.cshtml

@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.cshtml.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.cshtml（以防万一您需要参考）

@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 存储库以包含解决方案以及我错过将 id 拉到下一页的地方，@pcalkins 也指出了这一点（不知道如何标记他！）。

使用 [BindProperty] 允许将信息传输到页面并正确设置 OnGet() 方法以确保传输 ID。请参阅下面的解决方案。我还在 Customer 上设置了一个 IEnumerable 属性，因为我正在获取 ID，因此无需枚举它。还设置了保存我们正在抓取的 ID 的属性。

CustomerDetails.cshtml.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.cshtml

@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>