jQueryDataTables警告：表id={id}ASP.NETCore專案中的Ajax錯誤狀態代碼400

我正在嘗試在我的 ASP.NET Core 專案中使用 jQuery Datatables。我的 Controller 類具有以下代碼：

[Route("api/[controller]")]
[ApiController]
public class UsersController : ControllerBase
{
    private readonly IUsersService usersService;

    public UsersController(IUsersService usersService)
    {
        this.usersService = usersService;
    }

    [HttpPost("GetUsers")]
    public IActionResult GetUsers()
    {
        try
        {
            var draw = this.Request.Form["draw"].FirstOrDefault();
            var start = this.Request.Form["start"].FirstOrDefault();
            var length = this.Request.Form["length"].FirstOrDefault();
            var sortColumn = this.Request.Form["columns["   this.Request.Form["order[0][column]"].FirstOrDefault()   "][name]"].FirstOrDefault();
            var sortColumnDirection = this.Request.Form["order[0][dir]"].FirstOrDefault();
            var searchValue = this.Request.Form["search[value]"].FirstOrDefault();
            int pageSize = length != null ? Convert.ToInt32(length) : 0;
            int skip = start != null ? Convert.ToInt32(start) : 0;
            int recordsTotal = 0;

            var userData = this.usersService.GetUsersData(sortColumn, sortColumnDirection, searchValue);

            recordsTotal = userData.Count();

            var data = userData.Skip(skip).Take(pageSize).ToList();
            var jsonData = new { draw, recordsFiltered = recordsTotal, recordsTotal, data };

            return this.Ok(jsonData);
        }
        catch (Exception e)
        {
            throw;
        }
    }
}

我注入具有以下方法的 IUsersService：

public IEnumerable<ApplicationUser> GetUsersData(string sortColumn, string sortColumnDirection, string searchValue)
    {
        var users = this.usersRepository.All();
        var userData = from user in users select user;

        if (!(string.IsNullOrEmpty(sortColumn) && string.IsNullOrEmpty(sortColumnDirection)))
        {
            userData = userData.OrderBy(sortColumn   " "   sortColumnDirection);
        }

        if (!string.IsNullOrEmpty(searchValue))
        {
            userData = userData.Where(s => s.FirstName.Contains(searchValue)
                                || s.MiddleName.Contains(searchValue)
                                || s.LastName.Contains(searchValue)
                                || s.BirthDate.ToShortDateString().Contains(searchValue)
                                || s.Gender.ToString().Contains(searchValue)
                                || s.PhoneNumber.Contains(searchValue));
        }

        return userData;
    }

我的 Index.cshtml 檔案如下：

@{
    this.ViewData["Title"] = "Home Page";
}

<link href="~/lib/datatables.net-bs5/dataTables.bootstrap5.min.css" rel="stylesheet" />

<div class="container-fluid">
    <br />
    <div style="width:90%; margin:0 auto;">
        <table id="usersTable" class="table table-striped table-bordered dt-responsive nowrap"
               width="100%" cellspacing="0">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>@GlobalConstants.FirstName</th>
                    <th>@GlobalConstants.MiddleName</th>
                    <th>@GlobalConstants.LastName</th>
                    <th>@GlobalConstants.BirthDate</th>
                    <th>@GlobalConstants.Gender</th>
                    <th>@GlobalConstants.PhoneNumber</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@section Scripts
{
    <script src="~/lib/datatables.net/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables.net-bs5/dataTables.bootstrap5.min.js"></script>
    <script src="~/js/usersTable.js"></script>
}

我的 usersTable.js 包含以下代碼：

$(document).ready(function () {
    $("#usersTable").DataTable({
        "processing": true,
        "serverSide": true,
        "filter": true,
        "ajax": {
            "url": "/api/Users/GetUsers",
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [{
            "targets": [0],
            "visible": false,
            "searchable": false
        }],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "firstName", "name": "First Name", "autoWidth": true },
            { "data": "middleName", "name": "Middle Name", "autoWidth": true },
            { "data": "lastName", "name": "Last Name", "autoWidth": true },
            { "data": "birthDate", "name": "Birth Date", "autoWidth": true },
            { "data": "gender", "name": "Gender", "autoWidth": true },
            { "data": "phoneNumber", "name": "Phone Number", "autoWidth": true },
        ]
    });
});

當我啟動應用程式時，我收到以下錯誤： “DataTables 警告：table id=usersTable - Ajax 錯誤。有關此錯誤的更多資訊，請參閱http://datatables.net/tn/7”。 錯誤狀態代碼是 400。我嘗試除錯應用程式，我注意到我在 ApiController 中 GetUsers() 方法開頭的斷點從未到達。我究竟做錯了什么？我在不同的論壇中搜索了很多不同的解決方案，但似乎沒有什么對我有用。我是新手，所以我可能遺漏了一些東西。請幫忙！

uj5u.com熱心網友回復：

1. 確保您的 API 路由正確且可訪問

2. 將此行放在 Razor 視圖中：

   @Html.AntiForgeryToken()
   

3. 將此配置添加到您的startup或program（.net 6）類

   services.AddAntiforgery(o => o.HeaderName = "XSRF-TOKEN");
   

4. 在 DataTable JS 配置中，添加以下配置：

    "ajax": {
        "url": "/api/Users/GetUsers",
        "beforeSend": function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
               $('input:hidden[name="__RequestVerificationToken"]').val());
         },
         "type": "POST",
         "datatype": "json"
     },
   

標籤：阿贾克斯 asp.net 核心 数据表 http-status-code-400 asp.net-api控制器

上一篇：如何在.net核心中將字串回應（文本）轉換為JSON回應

下一篇：如何顯示來自每個物件的請求總數