使用外键构造数据表

Question

如果有人能帮我解决这个问题，我将不胜感激。我正在尝试让 Javascript table 显示在我正在编写的 Razor 页面应用程序中。它主要工作，但我遇到了一个有外键的列的问题。该专栏始终空白。所以，我正在使用 Visual studio 2019 社区和 .net core 3.2。
行为不端的 table 看起来像这样

如您所见，“类别”列是空白的。主页有这个代码

<div class="col-12 border p-3">

<table id="DT_load" class="table table-sm table-striped table-bordered" style="width:100%">
    <thead>
        <tr>

            <th>Date</th>
            <th>Category</th>
            <th>Valuation</th>
            <th>Actions</th>


        </tr>
    </thead>
</table>

</div>
@section Scripts
{

<script src="~/js/valuationsList.js"></script>

}

它调用的javascript文件在这里：

var dataTable;


$(document).ready(function () {
loadDataTable();
});

function loadDataTable() {

dataTable = $('#DT_load').dataTable
    ({

        "ajax":
        {
            "url": "/api/valuations",
            "type": "GET",
            "datatype": "json"
        },
        "columns":
            [
              { "data": "date", "width": "30%" },
              { "data": "category", "width": "20%" },
                { "data": "valuation", "width": "15%" },
                {

                    "data": "id",
                    "render": function (data) {
                        return `
                     <div class="text-center">
                     <a href="/Valuations/Edit?id=${data}" class='btn btn-link text-blue' style='cursor:pointer; width:70px;'>
                         Edit
                     </a>
                     &nbsp;
                     <a href="/Valuations/Delete?id=${data}" class='btn btn-link text-blue' style='cursor:pointer; width:70px;'>
                         Delete
                     </a>

                     </div>`;
                    }, "width": "25%"
                }
            ],
        "language":
            {
            "emptyTable": "no data found"
        },
        "width": "100%"
    });
}

控制器中的相关方法如下所示

        [HttpGet]
    public async Task<IActionResult> GetAll()
    {
        return Json(new { data = await _context.CategoryValuations.ToListAsync() });
    }

最后，我尝试访问的 table 看起来像这样：

并且 category_id 字段是外键到类别 table，如下所示：

如果我在 javascript 文件中使用“类别”，则该列为空白。 category_id returns 一个错误。非常感谢收到任何帮助。

提前致谢。

根据谢尔盖的评论。这是 classes.

一、父分类class

using System;
using System.Collections.Generic;

namespace Investments10.Models
{
public partial class Category
{
    public Category()
    {
        CategoryPerformance = new HashSet<CategoryPerformance>();
        CategoryValuations = new HashSet<CategoryValuations>();
        TransferValuesTransferFrom = new HashSet<TransferValues>();
        TransferValuesTransferTo = new HashSet<TransferValues>();
    }

    public int Id { get; set; }
    public string Category1 { get; set; }
    public bool InUse { get; set; }

    public virtual ICollection<CategoryPerformance> CategoryPerformance {get; set; }
    public virtual ICollection<CategoryValuations> CategoryValuations { get; set; }
    public virtual ICollection<TransferValues> TransferValuesTransferFrom { get; set; }
    public virtual ICollection<TransferValues> TransferValuesTransferTo { get; set; }
}
}

现在类别估值 class 是类别的外键。

using System;
using System.Collections.Generic;

namespace Investments10.Models
{
public partial class CategoryValuations
{
    public int Id { get; set; }
    public DateTime Date { get; set; }
    public decimal Valuation { get; set; }
    public int CategoryId { get; set; }

    public virtual Category Category { get; set; }
}
}

Answer 1

尝试此操作代码：

  
    public async Task<JsonResult> GetAll()
    {
        return Json(new { data = await _context.CategoryValuations
                                  .Select( i=> new {
                                    id=i.Id,
                                    categoryId=i.CategoryId,
                                    date=i.Date,
                                    category=i.Category.Category1,
                                    valuation=i.Valuation
                                   })
                                  .ToListAsync() 
                        });
    }

使用外键构造数据表

constructing a datatable with a foreign key

javascript

c#

entity-framework-core

.net-core

razor-pages