asp.net-core - Razor 页面 Datatables.net Ajax 回发

Question

我在我的剃须刀页面中使用 datatables.net，我有一个下拉列表，用于更改下面数据表中的数据是代码

 $(document).ready(function () {
        //$("#taskDt").DataTable();
       var table = $("#taskDt").DataTable({

        paging: true,
        responsive: true,
        searching: true,

        ordering: true,
        order: [[1, "asc"]]
        });
$("#ddlGroup").change(function(){
                var a= $("#ddlGroup Option:Selected").text();
                var b= $("#ddlGroup Option:Selected").val();
                //alert(b);
                //this.form.submit();
       $.ajax({
        //dataType: 'json',
        url: '/page/Index?handler=GET',
        type: 'GET',
        dataType: "text",
        data: { "Id": b },
        processing: true,
        serverSide: true,

        
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        success: function (data) {


             console.log(data);
             //table.ajax.reload();
             $('#taskDt').DataTable().ajax.reload(true)

            //$('#taskDt').DataTable().ajax.reload();

            
        },
        error: function () {
            alert("AJAX Request Failed, Contact Support");
        }
    });

            })

好吧，返回的数据是完整的 html 页面，我收到无效 JSON 的错误，当我设置 dataType：“JSON”如果失败并警告 ajax 请求失败

任何帮助都感激不尽。

标签： asp.net-corerazordatatablesrazor-pages

Answer 1

这是一个演示，展示如何在下拉列表更改时更新数据表数据：

模型：

public class Test
    {
        public int Id { get; set; }
        public string Name { get; set; }

    }

测试数据表.cshtml：

<select id="ddlGroup">
    <option>Choose Id</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>

</select>
<table id="taskDt">
    <thead>
        <tr>
            <td>Id</td>
            <td>Name</td>
        </tr>
    </thead>
    <tbody></tbody>
</table>
@section scripts{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script>
        var table;
        function LoadData() {
            table = $("#taskDt").DataTable({
                "ajax": {
                    url: '?handler=GET',
                    type: 'GET',
                    processing: true,
                    serverSide: true,
                },
                "columns": [
                    { "data": "id", "width": "50%" },
                    { "data": "name", "width": "50%" },
                    ],
                paging: true,
                responsive: true,
                searching: true,

                ordering: true,
                order: [[1, "asc"]]
            });
        }
        $(document).ready(function () {
            LoadData();
        })
        $("#ddlGroup").change(function () {
            table.ajax.url("?handler=GET&&Id=" + $("#ddlGroup Option:Selected").val()).load();
            });
    </script>
} 

TestDataTable.cshtml.cs（我用假数据来测试）：

 public class TestDataTableModel : PageModel
        {
            public void OnGet()
            {
            }
            public JsonResult OnGetGet(int? Id)
            {
                List<Test> l = new List<Test>();
                if (Id == null)
                {
                    l = new List<Test> { new Test { Id = 1, Name = "1" }, new Test { Id = 2, Name = "2" },new Test { Id = 3, Name = "3" } };
                }
                else 
                {
                    l = new List<Test> { new Test { Id = Convert.ToInt32(Id), Name = Id+"" }};
    
                }
                return new JsonResult(new { draw = 1, recordsFiltered = l.Count(), recordsTotal = l.Count(), data = l });
            }
        }

结果：