从 Razor Pages .Net Get 的 Ajax Json 渲染数据表问题

Question

我一直在尝试遵循 DataTables 中的这个示例（https://datatables.net/examples/api/row_details.html），但似乎无法加载表数据。我的 ajax 调用命中了 .Net .cshtml.cs 代码隐藏文件中的断点并返回 json 对象。但数据表只显示“正在加载”。如果有人知道我还可以尝试什么，并且我已经根据其他示例尝试了许多不同的事情，我将非常感激。谢谢！

这是我的 OnGet 方法，ajax 调用会调用该方法（通过断点命中进行验证）：

public JsonResult OnGetAllCustomers()
{
    List<Customer> lstCustomers = new List<Customer>();
    lstCustomers = objCustomerDAL.GetAllCustomers();
    var output = JsonConvert.SerializeObject(lstCustomers);
    return new JsonResult("\"data\":" + output);
}

这是我的表格定义：

        <div class="row">
            <table id="CustomersTable" class="display table-striped table-bordered" style="width:100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Company Name</th>
                        <th>Contact Name</th>
                        <th>Contact Title</th>
                        <th>City</th>
                        <th>State</th>
                    </tr>
                </thead>
            </table>
        </div>

这是文本可视化工具中的 JsonResult：

"data":[{"CustomerID":106,"CompanyName":"Clean Companyee","ContactName":"Mr Clean we","ContactTitle":"Washeree","Address":"111 Clean Steet","City":"Scrubee","State":"MT","ZipCode":"22222","Phone":"333-444-5555","Email":"[email protected]","DateCreated":"2024-01-30T11:29:15.997","UserIDCreated":4695,"DateLastModified":"2024-02-16T14:44:58.377","UserIDLastModified":4695},{"CustomerID":107,"CompanyName":"Bill's Paper Mill","ContactName":"Bill Sorenson","ContactTitle":"Owner","Address":"384 Running Brook Lane","City":"Dallas","State":"TX","ZipCode":"25415","Phone":"747-666-3333","Email":"[email protected]","DateCreated":"2024-01-18T14:42:10","UserIDCreated":4695,"DateLastModified":"2024-01-23T11:46:34.943","UserIDLastModified":4695},
{"CustomerID":108,"CompanyName":"The Addition Company","ContactName":"Joe Math","ContactTitle":"Mathemetician","Address":"333 Flower Lane","City":"Pittsburgh","State":"PA","ZipCode":"25412","Phone":"666-666-9999","Email":"[email protected]","DateCreated":"2024-01-16T09:14:48.127","UserIDCreated":4695,"DateLastModified":"2024-01-16T09:14:48.127","UserIDLastModified":4695}, ... etc

这是 JQuery，它与示例类似，但修改了数据列，并使用 .Net 中的 Get 与文本文件进行 Ajax。

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdn.datatables.net/2.0.0/js/dataTables.js"></script>

<script>
    // Formatting function for row details - modify as you need
    function format(d) {
        // `d` is the original data object for the row
        return (
            '<dl>' +
            '<dt>Phone: </dt>' +
            '<dd>' +
            d.phone +
            '</dd>' +
            '<dt>Email: </dt>' +
            '<dd>' +
            d.email +
            '</dd>' +
            '<dt>Extra info:</dt>' +
            '<dd>And any further details here (images etc)...</dd>' +
            '</dl>'
        );
    }

    let table = new DataTable('#CustomersTable', {
        ajax: {
            url: 'CustomersFlyout?handler=AllCustomers',
            dataSrc: 'data'
        },
        columns: [
            {
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: ''
            },
            { data: "companyname" },
            { data: "contactname" },
            { data: "contacttitle" },
            { data: "city" },
            { data: "state" }
        ],
        order: [[1, 'asc']]
    });

    table.on('click', 'td.dt-control', function (e) {
        let tr = e.target.closest('tr');
        let row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
        }
    });
</script>

我知道 Json 正在返回，但无法将数据填充到表中。

Answer 1

您的 Json 结果不是有效的 Json。在您提供的文档链接中，您可以检查

Ajax

选项卡以查看其外观。基本上你错过了开头和结尾的大括号。