jQuery Datatables AJAX request not hitting Web API correctly

问题

I am trying to integrate ASP.NET Web API 2 with jQuery Datatables 1.10.7.

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

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>

Here is my HTML

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

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
        { }
    }

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.

Here is a screenshot of Google Chrome network log.

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."

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

回答1:

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

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
  }
});

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

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

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

来源：https://stackoverflow.com/questions/40828790/jquery-datatables-ajax-request-not-hitting-web-api-correctly

标签

ASP.NET

asp.net-web-api

datatables