如何使用jQuery.dataTables 1.10发送和接收JSON到ASP.NET WebMethod后端? [英] How do you send and receive JSON with jQuery.dataTables 1.10 to a ASP.NET WebMethod backend?

问题描述

jQuery DataTables 1.10版与以前的DataTables版本相比，发生了很多变化，包括它如何处理Ajax请求和响应.

Version 1.10 of jQuery DataTables changes a ton of things from the previous versions of DataTables, including how it handles the Ajax requests and responses.

该库的开发人员没有使用ASP.NET后端的任何经验，因此尽管过去曾提出一些WebMethods的细微差别，但显然他们在此版本中并未考虑它们.

The developers of the library do not have any experience working with an ASP.NET backend, so although some of the nuances of WebMethods have been brought up to them in the past, they apparently didn't consider them in this version.

例如，dataSrc DataTables选项应该是我们处理ASP.NET WebMethods用{d: [response]}包装其所有Ajax响应这一事实的地方.

For example, the dataSrc DataTables option should be where we deal with the fact that ASP.NET WebMethods wrap all of their Ajax responses with {d: [response]}.

相反，DataTables仅查看dataSrc设置以查找数据属性，而不查看其余所需的响应信息(draw，recordsTotal，recordsFiltered和error).我的记忆可能不正确，但是我很确定用于处理此问题的dataSrc设置就可以了.

Instead, DataTables only looks at the dataSrc setting to find the data property, not the rest of the required response information (draw, recordsTotal, recordsFiltered, and error). My memory could be incorrect, but I'm pretty sure the dataSrc setting used to handle this just fine.

推荐答案

以下是我的解决方案.可能有一种更简单的方法来执行此操作，但是下面设置dataTables的方法似乎是将JSON发送和接收到ASP.NET WebMethod的最可重用的方法.请发布其他对您有用的方法.希望有人会以一种不太随意的方式来做"d"事情.

Below is my solution. There may be an easier way to do this, but the way I setup dataTables below seemed to be most reusable way of sending and receiving JSON to a ASP.NET WebMethod. Please post other ways that have worked for you. Hopefully someone will have a less wonky way of doing the "d" thing.

var $table = $('#TableId');
var url = 'page.aspx/WebMethodName';
var extraData = {
    something: 'value1',
    somethingElse: 'value2'
};

事件处理程序处理从服务器接收数据.我将所有内容从d属性移到对象的根.

Event handler handles receiving the data from the server. I move everything from the d property into the root of the object.

$table.on('xhr.dt', function (e, settings, json)
                {
                    /// <summary>
                    /// Fix for asp.net WebMethod compatibility.
                    /// If json has a d property, then response came from a WebMethod. 
                    /// DataTables needs the contents of the d property to be in the root.
                    /// </summary>
                    /// <param name="e">The jQuery event object.</param>
                    /// <param name="settings">The jquery.DataTables settings object.</param>
                    /// <param name="json">The data returned from the server.</param>

                    if(json.d)
                    {
                        var data = json.d;

                        // Clear out json.d to free up memory
                        json.d = undefined;

                        $.extend(json, data);
                    }

                    // Note no return - we have to manipulate the data directly in the JSON object.
                    // WHY, OH WHY, CAN'T WE JUST RETURN?
                }
);

DataTable初始化.我将数据序列化以尽可能晚地发送到服务器，以便给自己很多机会添加到请求中.

DataTable initialization. I serialize the data to send to the server as late as possible to give myself plenty of opportunity to add to the request.

$table.DataTable({
    ajax: {
        {
            url: url,
            type: 'POST',
            contentType: 'application/json',
            processData: false, // important so the raw data makes it to the beforeSend handler
            beforeSend:function(  jqXHR,  settings )
                {
                    /// <summary>
                    /// Converts to json for transmission and adds any extra data desired.
                    /// </summary>
                    /// <param name="jqXHR">The jqXHR object.</param>
                    /// <param name="settings">The settings object.</param>
                    /// <param name="data">The data that will be sent to the server.</param>

                    var data = settings.data;

                    // I postponed the serialization as long as possible, so this is the
                    // last chance to attach extra data to send along
                    data.extraData = extraData;


                    settings.data = JSON.stringify({ WebMethodParameterName: data });
                }
        }
    }
});

在服务器端，我创建了一些类来对dataTables发送并需要作为响应的结构进行建模. T是每一行数据的类型. DataTablesResponse具有构造函数重载，该重载采用request.draw值并将其粘贴在响应中，因此我不必记住.

On the server side I've created classes to model the structure that dataTables sends and requires as a response. T is the type for each row of data. The DataTablesResponse has a constructor overload which takes the request.draw value and sticks it in the response so I don't have to remember.

[WebMethod]
public static DataTablesResponse<T> WebMethodName(DataTablesRequest request)
{
    var response = new DataTablesResponse<T>(request);

    // Do something to get my data
    List<T> results = GetMyData();

    response.data = results;
    return response;
}

作为旁注，我试图将其发布到dataTables.net论坛，但是由于某些原因我无法将其保存在草稿中……因此它将保留在此处.

As a side note, I attempted to post this to the dataTables.net forums, but I can't get it past draft for some reason... so it will live here instead.

这篇关于如何使用jQuery.dataTables 1.10发送和接收JSON到ASP.NET WebMethod后端?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！