如何显示来自另一个 table 的列数据而不是数据 table 的外键数据

Question

我正在 ASP.NET Core 3.1 中实现一个解决方案。我有一个数据表，我想通过如下所示的 ajax 调用将数据加载到其中，并将数据完全加载到其中：

jQuery(document).ready(function ($) {
    $("#myDummyTable").DataTable({
 
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false,
 
 
        "ajax": {
            "url": "MyData/GetData",
            "type": "POST",
            "datatype": "jason"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
 
         "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "name", "name": "Name", "autoWidth": true },
            { "data": "applicantId", "name": "applicantId", "autoWidth": true },
 
        ]
 
    });
});

但我的问题是上一栏中的 applicantId 是另一个名为 Applicant 的 table 的外键，而不是 applicantId 值本身，它是一个数字，我想在 jQuery 数据 table 视图中显示相关 Applicant 的列 Name 的数据。

如果有人可以建议如何执行此操作，我将不胜感激。

Answer 1

你似乎想显示嵌套模型列，你可以查看下面的演示：

型号：

public class Test
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int ApplicantId { get; set; }
    public Applicant Applicant { get; set; }
}
public class Applicant
{
    public int Id { get; set; }
    public string Name { get; set; }
    public List<Test> Tests { get; set; }
}

查看：

<table id="myDummyTable" class="display" style="width:100%">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>applicantname</th>

        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>id</th>
            <th>goodsName</th>
            <th>applicantname</th>
        </tr>
    </tfoot>
</table>

JS 可见：

@section Scripts
{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        jQuery(document).ready(function ($) {
            $("#myDummyTable").DataTable({
                "ajax": {
                    "url": "/MyData/GetData", //be sure the request url is correct,it should be `/xxx/xxx` not `xxx/xxx`
                    "type": "POST",
                    "datatype": "json"
                },

                "columns": [
                    { "data": "id", "name": "Id", "autoWidth": true },
                    { "data": "name", "name": "Name", "autoWidth": true },

                       //change here...
                    { "data": "applicant.name", "name": "applicant.name", "autoWidth": true },

                ]

            });
        });
    </script>
}

控制器：

[HttpPost]
[Route("MyData/GetData")]
public IActionResult TestData()
{
    var data = new List<Test>()
    {
        new Test(){Id=1,Name="aa",Applicant=new Applicant(){ Id=1,Name="app1"} },
        new Test(){Id=2,Name="bb",Applicant=new Applicant(){ Id=1,Name="app2"} },
        new Test(){Id=3,Name="bb",Applicant=new Applicant(){ Id=1,Name="app3"} }
    };
    return Json(new { data = data });
}

结果：

如何显示来自另一个 table 的列数据而不是数据 table 的外键数据

How to display a column data from another table instead of foreign key data for a datatable

asp.net-core

datatables

jquery-plugins