jQuery Datatables AJAX请求无法正确访问Web API

问题描述

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

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

I want to use Server Side processing in my Datatables, so I am used the Nuget package DataTables.AspNet.WebApi2

这是我的JavaScript

Here is my 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" width="100%">
</table>

这是我的Web API

Here is my 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的过程中，我可以在Debug模式下看到 IDataTablesRequest请求 对象为空。

My code builds perfectly, but during execution when datatable calls the Web API, I can see in Debug mode that the IDataTablesRequest request object is null.

这是Google Chrome网络日志的屏幕截图。

Here is a screenshot of Google Chrome network log.

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

As I can see from the Network Log, the Web API is returning this exception which I have no clue about.

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

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

I am also attaching another screenshot of what my Request looks like from Google Chrome's network log.

推荐答案

您的 webapi控制器方法期望对象类型为 IDataTablesRequest 的对象，同时向 webapi发送ajax调用您什么都不发送。

Your webapi controller method is expecting an object of type IDataTablesRequest while sending ajax call to webapi you are not sending anything.

您需要使用<$ c $发送 IDataTablesRequest对象 ajax 的c> data 参数。您可以使用<$创建 IDataTablesRequest 对象c $ c> Object 并发送到webapi。

You need to send IDataTablesRequest object using data parameter of ajax.You can create an object of IDataTablesRequest using Object in javascript and send to webapi.

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

您可能还需要设置属性类型如果您已将webapi方法修饰为 HttpPost ajax 的 POST c>。

You also may need to set property type as POST of ajax if you have decorated your webapi method as HttpPost.

有关更多详细信息，请检查以下链接

For more details you can check below links

这篇关于jQuery Datatables AJAX请求无法正确访问Web API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！