如何在ASP.Net Core 3.1中动态更新表中具有两行标题的表的第一行标题的范围和内容？

如何解决如何在ASP.Net Core 3.1中动态更新表中具有两行标题的表的第一行标题的范围和内容？

我正在尝试创建一个包含2行标题的表，它们都从2个独立的数据库表中动态更新。内容更新部分正常，可以正常工作。问题在于，第一行中的单元格必须跨越第二行中该特定类别的条目数。
我已经将第二行类别按元素及其ID进行了分组，对ID进行了计数并将其放入ViewBag中。

第一行模型：

    [Table("categories")]
    public class CategoriesModel
    {
        [Column("category_id")]
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        [Required]
        public int CategoryId { get; set; }

        [Column("category_name")]
        //[Required]
        public string CategoryName { get; set; }
    }

第二行模型：

[Table("materials")]
    public class MaterialModel
    {
        [Column("material_id")]
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        [Required]
        public int MaterialId { get; set; }

        [Column("height_x_width")]
        [Required]
        public string Dimensions { get; set; }

        [Column("category_id")]
        [Required]
        public int CategoryId { get; set; }

        public List<CategoriesModel> MaterialCategory { get; set; }
    }

ViewModel：

public class NationalCampaignViewModel
    {
        public string Campaign { get; set; }

        public IEnumerable<RestaurantModel> Restaurant { get; set; }

        public IEnumerable<CategoriesModel> Categories { get; set; }

        public IEnumerable<MaterialModel> Materials { get; set; }

        public IEnumerable<OptionModel> Options { get; set; }
    }

ViewModelController：

public class NationalCampaignViewModelController : Controller
    {
        private readonly McDdbContext _context;

        public NationalCampaignViewModelController(McDdbContext context)
        {
            _context = context;
        }

        // GET: NationalCampaign
        public async Task<IActionResult> Index(int? id)
        {
            var campaign = await _context.NationalCampaigns.FirstOrDefaultAsync(m => m.Id == id);
            var restaurant = await _context.Restaurants.ToListAsync();
            //var stl = await _context.STL.ToListAsync();
            //var dtl = await _context.DTL.ToListAsync();
            var categories = await _context.CategoriesModel.ToListAsync();
            var options = await _context.OptionModel.ToListAsync();
            var materials = await _context.MaterialModel.ToListAsync();
            var colSpan = materials.OrderBy(x => x.CategoryId).GroupBy(x => x.CategoryId).ToDictionary(g => g.Key,g => g.Count());
            ViewBag.ColSpan = colSpan.Values;

            var tables = new NationalCampaignViewModel
            {
                Campaign = campaign.CampaignName,Restaurant = from r in restaurant select r,Categories = from c in categories orderby c.CategoryId select c,//Options = from o in options select o,Materials = from m in materials orderby m.CategoryId select m
            };

            if (id == null)
            {
                return NotFound();
            }


            return View(tables);
        }

视图：

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}



<h1>@Model.Campaign</h1>

<div class="container">
    <div class="row">
        <div class="col">
            <table class="table-bordered">

                @foreach (var span in ViewBag.ColSpan)
                {
                    <colgroup>
                        <col span="@span" />
                    </colgroup>
                }
                <thead>
                    <tr align="center">
                        <th>@Html.DisplayNameFor(model => model.Restaurant.FirstOrDefault().Restaurant_Name)</th>

                        @foreach (var c in Model.Categories)
                        {
                            <th scope="colgroup">@c.CategoryName</th>
                        }
                    </tr>
                    <tr>
                        <th>Dimensions</th>
                        @foreach (var m in Model.Materials)
                        {
                            
                            <th>@m.Dimensions</th>
                        }
                    </tr>
                </thead>
                <tbody>
                    @*@foreach (var item in Model.Restaurant)
            {
                <tr>
                    <td>
                        <a asp-controller="Restaurant" asp-action="Edit"
                           asp-route-id="@item.Restaurant_Id">@Html.DisplayFor(modelItem => item.Restaurant_Name)</a>
                    </td>
                </tr>
            }*@
                </tbody>
            </table>
        </div>

具有要跨越的列数的表：

解决方法

用字典解决。

控制器：

var colSpan = materials.OrderBy(x => x.CategoryId).GroupBy(x => x.CategoryId).ToDictionary(g => g.Key,g => g.Count());
            Dictionary<string,int> headerValues = new Dictionary<string,int>();

            List<string> keys = new List<string>();

            foreach (var category in categories)
            {
                keys.Add(category.CategoryName);
            }


            headerValues = keys.Zip(colSpan.Values,(k,v) => new { k,v })
              .ToDictionary(x => x.k,x => x.v);

            ViewBag.ColSpan = headerValues;

查看：

@foreach (var item in ViewBag.Colspan)
                        {
                            <th colspan="@item.Value">@item.Key</th>
                        }