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

Shuaib 发表于 Dev

帅布

我正在尝试将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" width="100%">
</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的过程中，我可以在Debug模式下看到IDataTablesRequest请求 对象为null。

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

从网络日志中可以看到，Web API返回了此异常，我对此一无所知。

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

我还将在Google Chrome的网络日志中附加另一个有关我的请求的屏幕截图。

迈拉吉·艾哈迈德（Mairaj ahmad）

您的webapi controller方法IDataTablesRequest在发送ajax调用给webapi您时不期望任何类型的对象。

您需要发送IDataTablesRequest objectusingdata参数ajax。可以在javascript中创建IDataTablesRequestusing对象Object并发送到webapi。

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

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

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

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。