我无法使用 AJAX 将数据加载到 DataTable

Question

我正在构建一个具有 N 层架构的 Asp.net 核心项目。我正在使用 DataTable，我想用 Ajax 加载数据，但我忽略了一些事情。这是我的代码；

我的观点；

<script type ="text/javascript">

    $(document).ready(function (){
        $('#myTable').DataTable({
            ajax: {
                url: "/api/Values",
                dataSrc: ""
            },
            columns: [
                { data: "Id" },
                { data: "Name" },
                { data: "Description" },
                { data: "Date" },
                { data: "Deleted" },
                {
                    data: "id",
                    render: function (data, type, row,meta) {
                        return "<button class='btn btn-primary' style='margin-right:5px;' onclick=Edit("+ JSON.stringify(row) +")>Edit</button>" +
                            "<button class='btn btn-danger' onclick=Delete("+ JSON.stringify(row) +")>Delete</button>";
                    }
                },
            ]
        });
    });
</script>

我的API控制器代码；

namespace MottoUI.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        RoleManager rm = new RoleManager(new EfRoleRepository());
        IRoleService _roleService = null;

        public ValuesController(IRoleService roleService)
        {
            _roleService = roleService;
        }

        // GET: api/<ValuesController>
        [HttpGet]
        public IEnumerable<Role> GetRole()
        {
            return _roleService.GetList();
        }
}

我的实体结构；

public class Role
    {
        public Guid Id { get; set; }
        public string Name { get; set; }
        public string Description { get; set; }
        public DateTime Date { get; set; }
        public bool Deleted { get; set; }
    }

我遇到了这个错误；

ERROR SCREENSHOT

感谢您的帮助。

Answer 1

As per the error you have shared on the screenshots which means you either missing myTable Id reference on your button or you are not adding the cdn reference which you are using on your Javascript code. You should add below referece at the begining of your Javascript code:

 <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>

控制器：

    [Route("api/[controller]")]
    [ApiController]
    public class ValuesController : ControllerBase
    {
        [HttpGet]
        public IEnumerable<Role> GetRole()
        {
            var roleList = new List<Role>()
            {
                new Role(){ Id = 1,Name ="Plan A", Description= "Plan Description A", Date=DateTime.Now,Deleted= true},
                new Role(){ Id = 2,Name ="Plan B", Description= "Plan Description B", Date=DateTime.Now,Deleted= false},
                new Role(){ Id = 3,Name ="Plan C", Description= "Plan Description C", Date=DateTime.Now,Deleted= true},
                new Role(){ Id = 4,Name ="Plan D", Description= "Plan Description D", Date=DateTime.Now,Deleted= false},
                new Role(){ Id = 5,Name ="Plan E", Description= "Plan Description E", Date=DateTime.Now,Deleted= true},


            };
             return roleList;
        }
}

查看：

<h2>BindDataTableFromJson</h2>
<table id="bindDataTable" class="table table-striped table-bordered dt-responsive nowrap" width="100%" cellspacing="0">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Description</th>
            <th>Date</th>
            <th>Deleted</th>

        </tr>
    </thead>
</table>
@section scripts {
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {


            $.ajax({
                type: "GET",
                url: "https://localhost:7132/api/Values/",
                success: function (response) {
                    console.log(response);
                    $('#bindDataTable').DataTable({
                        data: response,
                        columns: [
                            { data: 'id' },
                            { data: 'name' },
                            { data: 'description' },
                            { data: 'date' },
                            { data: 'deleted' }
                            
                        ]
                    });

                },
                error: function (response) {
                    alert(response.responseText);
                }
            });

        });
    </script>
}

Note: Your this code snippet also has issue. Please make sure that you have not missed anything obvious.

{
    data: "id", render: function (data, type, row,meta) {
    return "<button class='btn btn-primary' style='margin-right:5px;' onclick=Edit("+ JSON.stringify(row) +")>Edit</button>" +

"<按钮class='btn btn-danger' onclick=Delete("+ JSON.stringify(row) +")>删除"; } },

输出：

我无法使用 AJAX 将数据加载到 DataTable

I can't load data to DataTable with AJAX

asp.net

ajax

asp.net-mvc

jquery

asp.net-core