jQuery Datatables AJAX 请求未正确命中 Web API

Posted 2023-05-07

【中文标题】jQuery Datatables AJAX 请求未正确命中 Web API

【英文标题】：jQuery Datatables AJAX request not hitting Web API correctly

【发布时间】：2017-04-11 06:13:57

【问题描述】：

我正在尝试将 ASP.NET Web API 2 与 jQuery Datatables 1.10.7 集成。

我想在我的数据表中使用服务器端处理，所以我使用了 Nuget 包 DataTables.AspNet.WebApi2

这是我的javascript

<script>
    $(document).ready(function () 
        $('#example').dataTable(
            "serverSide": true,
            "ajax": "/api/StudentsBasicInfo/GetPaginatedStudentsList2",
            columns: [
            
                name: 'FirstName',
                data: 'FirstName',
                title: "First Name",
                sortable: false,
                searchable: false
            ,
            
                name: 'LastName',
                data: "LastName",
                title: "Last Name",
                sortable: false,
                searchable: false
            
            ]
        );
    );
</script>

这是我的 html

<table id="example" class="display" cellspacing="0" >
</table>

这是我的 Web API

    public JsonResult<IDataTablesResponse> GetPaginatedStudentsList2(IDataTablesRequest request)
    
        StudentsInfoHybrid searchObj = new StudentsInfoHybrid();

        StudentsBasicInfoBL blClass = new StudentsBasicInfoBL();

        try
        
            searchObj.PageSize = request.Length;
            searchObj.Offset = request.Start;
            searchObj.count = false;

            //get the list of students
            var students = blClass.GetAllStudentsHybridInfo(searchObj);

            //filter list according to the criteria passed in the request object
            var filteredStudents = students.Where(i => i.FirstName.Contains(request.Search.Value)).ToList();

            //reset page size and offset so that count of total objects can be obtained
            searchObj.PageSize = 0;
            searchObj.Offset = 0;

            var totalCount = blClass.CountAllStudentsHybridInfo(searchObj);

            var response = DataTablesResponse.Create(request, students.Count(), filteredStudents.Count(), filteredStudents);

            return new DataTablesJsonResult(response, Request);

        
        catch (Exception ex)
        
            return null;
        
        finally
         
    

我的代码构建完美，但是在数据表调用 Web API 的执行过程中，我可以在调试模式下看到 IDataTablesRequest 请求 对象为空。

这是谷歌浏览器网络日志的截图。

正如我从网络日志中看到的那样，Web API 正在返回这个我不知道的异常。

"Message":"An error has occurred.","ExceptionMessage":"A null value was returned where an instance of IHttpActionResult was expected."

我还附上了 Google Chrome 网络日志中我的请求的另一个屏幕截图。

【参考方案1】：

您的 webapi controller 方法需要一个 IDataTablesRequest 类型的对象，同时向 webapi 发送 ajax 调用您没有发送任何内容。

您需要使用ajax的data参数发送IDataTablesRequest object。您可以在javascript中使用Object创建IDataTablesRequest的对象并发送到webapi。

var request = new Object();
request.Length = 10;
request.Start = 1;
$('#example').dataTable( 
  "ajax": 
    "url": "/api/StudentsBasicInfo/GetPaginatedStudentsList2",
    "data": request
  
);

如果您已将 webapi 方法修饰为 HttpPost，您可能还需要将 property type 设置为 POST 或 ajax。

更多详情，您可以查看以下链接

https://datatables.net/reference/option/ajax.data

https://cmatskas.com/server-side-jquery-datatables-with-asp-net/