在 ASP.NET Core 中发布 jQuery 数据表会导致 400 错误

Question

我在前端设置了一个 DataTables 表，并进行服务器端处理，因为它是一个大型数据集。我已设置 Ajax 调用，如下所示，以回发到同一应用程序中的 MVC 控制器。

Ajax 调用：

ajax: {
    url: '/test',
    type: 'POST',
    contentType: 'application/json',
    dataType: 'json',
    data: function (d) {
        return JSON.stringify(d);
    }
}

控制器：

[Route("[controller]")]
[AllowAnonymous]
public class TestController : Controller
{
    [HttpPost]
    public IActionResult Post([FromBody]DataTablesRequest request)
    {
        // Content removed for brevity
        return Ok();
    }
}

出于某种原因，我总是收到 400 错误，并且控制器操作从未被命中。我认为这可能与我也实现了 .NET Identity 有关，所以也许这是一个授权问题，但添加

[AllowAnonymous]

属性没有帮助，我还尝试将

xhrFields: { withCredentials: true }

添加到 Ajax 调用中没有什么区别。

顺便说一句，

DataTablesRequest

模型看起来像这样：

public class DataTablesRequest
{
    public int Draw { get; set; }
    public int Start { get; set; }
    public int Length { get; set; }
    public DataTablesOrder[] Order { get; set; }
    public DataTablesColumn[] Columns { get; set; }
    public DataTablesSearch Search { get; set; }
}

public class DataTablesOrder
{
    public int Column { get; set; }
    public string Dir { get; set; }
}

public class DataTablesColumn
{
    public string Data { get; set; }
    public string Name { get; set; }
    public bool Searchable { get; set; }
    public bool Orderable { get; set; }
    public DataTablesSearch Search { get; set; }
}

public class DataTablesSearch
{
    public string Value { get; set; }
    public bool Regex { get; set; }
}

...这是在正文中发送的 JSON 示例：

{  
   "draw":1,
   "columns":[  
      {  
         "data":"col1",
         "name":"",
         "searchable":true,
         "orderable":true,
         "search":{  
            "value":"",
            "regex":false
         }
      },
      {  
         "data":"col2",
         "name":"",
         "searchable":true,
         "orderable":true,
         "search":{  
            "value":"",
            "regex":false
         }
      },
      {  
         "data":"col3",
         "name":"",
         "searchable":true,
         "orderable":true,
         "search":{  
            "value":"",
            "regex":false
         }
      },
      {  
         "data":"col4",
         "name":"",
         "searchable":true,
         "orderable":true,
         "search":{  
            "value":"",
            "regex":false
         }
      }
   ],
   "order":[  
      {  
         "column":1,
         "dir":"desc"
      }
   ],
   "start":0,
   "length":25,
   "search":{  
      "value":"",
      "regex":false
   }
}

更新：

看起来这实际上与 SSL 有关。我刚刚在 Postman 中发送了请求并检查了 Postman 控制台，显示以下内容：

Answer 1

你应该从ApiController继承而不是Controller

示例来自 ASP.NET Web API 入门

using ProductsApp.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Web.Http;

namespace ProductsApp.Controllers
{
    public class ProductsController : ApiController
    {
        Product[] products = new Product[] 
        { 
            new Product { Id = 1, Name = "Tomato Soup", Category = "Groceries", Price = 1 }, 
            new Product { Id = 2, Name = "Yo-yo", Category = "Toys", Price = 3.75M }, 
            new Product { Id = 3, Name = "Hammer", Category = "Hardware", Price = 16.99M } 
        };

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

        public IHttpActionResult GetProduct(int id)
        {
            var product = products.FirstOrDefault((p) => p.Id == id);
            if (product == null)
            {
                return NotFound();
            }
            return Ok(product);
        }
    }
}

Answer 2

这是因为您的 DataTable ajax 帖子没有正确获取路线。因此，为了简单起见，首先从 Controller 中删除

[Route("[controller]")]

，然后编写如下：

'ajax': {
     'url': '@Url.Action("Post", "Test")',
     'method': 'POST',
     'contentType': 'application/json',
     'data': function (d) {
          return JSON.stringify(d);
     }
 }

我已经从工作代码中发布了此内容。

如果您需要全部内容，则如下：

var dataTable = $("#yourDataTableId").DataTable({
            'processing': true,
            'serverSide': true,
            "order": [[0, 'desc']],
            'ajax': {
                'url': '@Url.Action("Post", "Test")',
                'method': 'POST',
                'contentType': 'application/json',
                'data': function (d) {
                    return JSON.stringify(d);
                }
            },
            "lengthMenu": [[5, 10], [5, 10]],
            "lengthChange": true,
            "searching": true,
            "scrollX": true,
            fixedColumns: {
                leftColumns: 1,
                rightColumns: 1
            },
            'columns': [
                { data: "yourColumnName", name: "YourColumnName" }

                //Other columns

            ]
 });

Answer 3

花了一天的时间调查并仔细查看错误后，以下是调查结果的摘要：

1. 打开开发者控制台，转到网络选项卡，选择您的请求，然后检查有效负载部分。将此与 POST 请求中发送的 JSON 和服务器端的 DataTablesRequest 进行比较，以确保所有参数匹配。

2. 除了使用[AllowAnonymous]和[HttpPost]之外，尝试在操作级别添加[IgnoreAntiforgeryToken]。这明确告诉服务器此 POST 请求不需要令牌。

这两个步骤对我有用，希望对其他人也有帮助。