数据未填充到第三方 (https://datatables.net/) 数据表中。错误 - 卸载事件侦听器已弃用并将被删除

Question

错误 - 卸载事件侦听器已弃用并将被删除

任务是在.net core应用程序中加载第三方数据表中的数据。 datatables.net 门户中给出了实现步骤，我在应用程序中使用了相同的步骤，但在执行时会抛出错误“卸载事件侦听器已弃用并将被删除”并且数据未加载。在这个问题上需要帮助。

以下是我使用的代码，

代码片段：

   [HttpGet]
        public IActionResult GetAll()
        {
            List<Product> objProductList =  _unitOfWork.Product.GetAll(includeProperties: "Category").ToList();
            return Json(objProductList);
        }

下面是ajax调用：

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

function LoadDataTable() {
    dataTable = $("#tblData").DataTable({
        "ajax": {
            "URL": "/admin/product/getall",
            "type":"get"
        }, 
        "columns": [
            { "data": "title", "width": '15%' },
            { "data": "isbn", "width": '15%' },
            { "data": "listPrice", "width": '15%' },
            { "data": "author", "width": '15%' },
            { "data": "category.name", "width": '15%' }
        ]
    });
}

查看：

<table id="tblData" class="table table-bordered table-striped py-2">

当我尝试运行应用程序时，浏览器显示附加错误。[在此处输入图像描述](https://i.sstatic.net/JpHtB912.jpg)

Answer 1

我发现当

columns

中的字段名称与预期不符时，会出现

alert

弹窗。

这是我的工作示例，希望对您有所帮助。

Product.cs 和 Category.cs

namespace DataTableJSProject.Models
{
    public class Product
    {
        public int Id { get; set; }
        public string? Title { get; set; }
        public string? Isbn { get; set; }
        public decimal ListPrice { get; set; }
        public string? Author { get; set; }
        public Category? Category { get; set; }
    }

    public class Category
    {
        public string? Name { get; set; }
    }
}

Data/UnitOfWork.cs（模拟数据）

using DataTableJSProject.Models;

namespace DataTableJSProject.Data
{
    public class UnitOfWork
    {
        public List<Product> Products { get; set; }

        public UnitOfWork()
        {
            Products = new List<Product>
            {
                new Product
                {
                    Id = 1,
                    Title = "Book 1",
                    Isbn = "123456",
                    ListPrice = 29.99M,
                    Author = "Author 1",
                    Category = new Category { Name = "Category 1" } 
                },
                new Product
                {
                    Id = 2,
                    Title = "Book 2",
                    Isbn = "789012",
                    ListPrice = 49.99M,
                    Author = "Author 2",
                    Category = new Category { Name = "Category 2" }
                }
            };
        }

        public IEnumerable<Product> GetAllProducts()
        {
            return Products;
        }
    }
}

ProductController.cs

using DataTableJSProject.Data;
using Microsoft.AspNetCore.Mvc;

namespace DataTableJSProject.Controllers
{
    public class ProductController : Controller
    {
        private readonly UnitOfWork _unitOfWork;

        public ProductController(UnitOfWork unitOfWork)
        {
            _unitOfWork = unitOfWork;
        }

        [HttpGet]
        public IActionResult GetAll()
        {
            var products = _unitOfWork.GetAllProducts();
            return Json(products);
        }

        public IActionResult Index()
        {
            return View();
        }
    }
}

索引.cshtml

@{
    ViewData["Title"] = "Product List";
}

<h1>Product List</h1>

<table id="tblData" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Title</th>
            <th>ISBN</th>
            <th>List Price</th>
            <th>Author</th>
            <th>Category</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

@section Scripts {
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" />

    <script>
        $(document).ready(function () {
            LoadDataTable();
        });

        function LoadDataTable() {
            $('#tblData').DataTable({
                "ajax": {
                    "url": "/Product/GetAll",
                    "type": "GET",
                    "dataSrc": ""
                },
                "columns": [
                    { "data": "title", "width": '15%' },
                    { "data": "isbn", "width": '15%' },
                    { "data": "listPrice", "width": '15%' },
                    { "data": "author", "width": '15%' },
                    { "data": "category.name", "width": '15%' }
                ],
                "language": {
                    "emptyTable": "No data"
                }
               
            });
        }
    </script>
}

程序.cs

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

// Register UnitOfWork
builder.Services.AddSingleton<UnitOfWork>();

var app = builder.Build();

测试结果