如何在 .NET Core Razor 页面中使用 foreach 循环对 table 数据进行分组？

Question

我在跟书C# 8.0and .NET Core 3.0 - Modern Cross-Platform Development

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

采取一些简单的步骤，我构建了一个页面，其中包含一张卡片，其中将 header 作为国家/地区，然后在卡片上列出每个客户的姓名。但是，我的 foreach 循环正在吐出 Customer.Country 下的每个数据列。所以如果有 11 个国家有德国，它会制作 11 张以德国为标题的卡片（see image）。

它还在每个国家/地区下填充所有客户的姓名。

我发现我可以使用 GroupBy() 但正如我在下面解释的那样，这会导致无效的转换异常。

customers.cshtml

@page
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using NorthwindEntitiesLib
@model NorthwindWeb.Pages.CustomersModel
<div class="row">
    <h1 class="display2">Customers</h1>
</div>
<div class="row">
    @foreach (Customer customer in Model.Customers)
    {
        <div class="card border-info mb-3" style="max-width: 18rem">
            <div class="card-header text-white bg-info">
                @customer.Country
            </div>
            <ul class="list-group list-group-flush">
                @foreach (var name in Model.Customers)
                {
                    <li class="list-group-item">@name.ContactName</li>
                }
            </ul>
        </div>
    }
</div>

customers.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 NorthwindContextLib;
using NorthwindEntitiesLib;

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

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

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


        public void OnGet()
        {
            Customers = db.Customers
                .ToArray();

        }
    }
}

NorthwindEntitesLib

namespace NorthwindEntitiesLib
{
  public class Customer
  {
    public string CustomerID { get; set; }

    public string CompanyName { get; set; }

    public string ContactName { get; set; }

    public string ContactTitle { get; set; }

    public string Address { get; set; }

    public string City { get; set; }

    public string Region { get; set; }

    public string PostalCode { get; set; }

    public string Country { get; set; }

    public string Phone { get; set; }

    public string Fax { get; set; }

    public ICollection<Order> Orders { get; set; }
  }
}

我曾尝试使用 GroupBy 对国家/地区进行分组，然后填充列表，但它给出了无效的字符串类型转换错误。

@foreach (Customer customer in Model.Customers.GroupBy(c =>c.Country))
    {
        <div class="card border-info mb-3" style="max-width: 18rem">
            <div class="card-header text-white bg-info">
                @customer.Country
            </div>
            <ul class="list-group list-group-flush">
                @foreach (var name in Model.Customers)
                {
                    <li class="list-group-item">@name.ContactName</li>
                }
            </ul>
        </div>
    }

InvalidCastException: 无法将类型 'System.Linq.Grouping`2[System.String,NorthwindEntitiesLib.Customer]' 的 object 转换为类型 'NorthwindEntitiesLib.Customer'.

Answer 1

GroupBy 是System.Linq 的命令。您不能在不提及 System.Linq 的情况下简单地在随机位置使用它。

Answer 2

好的，所以 GroupBy 给你一个 Key 属性。这就是您将用于国家/地区名称的内容。

所以基本上，您将使用以下内容（警告未经测试）

@foreach (var country in Model.Customers.GroupBy(c =>c.Country))
    {
        <div class="card border-info mb-3" style="max-width: 18rem">
            <div class="card-header text-white bg-info">
                @country.Key
            </div>
            <ul class="list-group list-group-flush">
                @foreach (var customer in country.ToArray())
                {
                    <li class="list-group-item">@customer.ContactName</li>
                }
            </ul>
        </div>
    }

如何在 .NET Core Razor 页面中使用 foreach 循环对 table 数据进行分组？

How do i group table data using foreach loop in .NET Core Razor page?

c#

asp.net-mvc

asp.net-core

razor-pages