控制器上的DataTableEditor插件空字符串参数

时间:2019-07-11 07:39:12

标签: javascript jquery datatables jquery-datatables-editor

早上,我已经解决了一段时间了,无法弄清楚我对这段代码有什么疑问。目的是拥有一个网格(DataTable)并允许对该数据进行在线编辑(Editor)。我有从一个ajax调用获取数据的数据表,而编辑器正在使用另一个来更新记录。初始ajax很好并且可以正确填充,但是当我启动更新时,我发送的参数为null。这是一些代码:

    <div>
      <table id="post-table" class="table table-striped" style="width:100%">
        <thead>
           <tr role="row">
               <th>postID</th><th></th><th></th><th></th><th></th>
           </tr>
        </thead>
        <tbody></tbody>
     </table>
   </div>

    <script src="~/Content/DataTables-1.10.18/js/jquery.dataTables.js"></script>
    <script src="~/Content/editor-1.9.0/js/dataTables.editor.js"></script>

    <link rel="stylesheet" type="text/css" href="~/Content/DataTables-1.10.18/css/jquery.dataTables.css">

     <script language="javascript" type="text/javascript">
        var editor;

        editor = new $.fn.dataTable.Editor(
        {
           ajax: {
              edit: {
                 type: "POST",
                 url: "/ActivationCampaign/UpdatePostRecord",
                 dataType: "json",
                 contentType: "application/json",
                                    data: function (data) {

                                        var obj = data.data;
                                        var key = Object.keys(obj)[0];

                                        var theJson = {};
                                        theJson["campaignVersionID"] = @ViewBag.CampaignID;
                                        theJson["salesChannelID"] = @ViewBag.SalesChannel;
                                        theJson["postID"] = key;
                                        theJson['amount'] = obj[key].amount;

                                        return JSON.stringify(theJson);
                                    }
                                }
                            },
                            table: "#post-table",
                            idSrc: "postID",
                            fields: [{
                                label: "",
                                name: "amount"
                            }]
                        }),

                        $(document).ready(function () {
                            $('#post-table').DataTable({
                                "ajax": {
                                    "url": "/ActivationCampaign/LowLevelBudgetsForChannel?campaignID=@ViewBag.CampaignID&SalesChannelID=@ViewBag.SalesChannel",
                                    "type": "GET",
                                    "datatype": "json",
                                    "dataSrc": ''
                                },
                                "pagingType": "simple",
                                "columnDefs": [
                                    {"targets": [0], "visible": false, "searchable": false, "title": "post-id"},
                                    {"targets": [1], "title": "Post" },
                                    {"targets": [2], "title": "Post Number"},
                                    {"targets": [3], "title": "Allocated Amount", "className": "allocated-column editable"},
                                    {"targets": [4], "title": "Consumed Amount"}
                                ],
                                "columns": [
                                    { "data": "postID" },
                                    { "data": "postName"},
                                    { "data": "postNumber" },
                                    { "data": "amount" },
                                    { "data": "formatedAmount" },
                                ],
                                "initComplete": function (settings, json)
                                {
                                    populateConsumed();
                                }
                            });
                        },

                        $('#post-table').on('click', 'tbody td:not(:first-child)', function (e)
                        {
                            editor.inline(this);
                        }));//end of doc ready

                        function populateConsumed()
                        {
                            var totalAmount = 0;

                            $(".allocated-column").each(function () {

                                var values = $(this).text().replace(',', '');
                                if (values > 0)
                                {
                                    totalAmount += parseFloat(values);
                                }
                            });

                            $('#txtchangeBudget').val(JSON.stringify(totalAmount).replace(/\B(?=(\d{3})+(?!\d))/g, ","));
                        }
                    </script>




                    </div>

动作:

[System.Web.Mvc.HttpGet]
    public JsonResult LowLevelBudgetsForChannel(int campaignID, int salesChannelID)
    {//TODO get defensive on the parameters
        return Json(activationCampaignService.GetLowLevelBudgetsForChannel(
            campaignID, salesChannelID),
            JsonRequestBehavior.AllowGet
        );
    }        

    [System.Web.Http.HttpPost]
    public JsonResult UpdatePostRecord([FromBody]string budgetRecord)
    {
        if(budgetRecord == null)
        {

        }

        return Json("hello");
        //return Json(activationCampaignService.UpdatePostRecord(budgetRecord));
    }

LowLevelBudgetsForChannel调用工作正常,但UpdatePostRecord中的budgetRecord始终为空值。请注意,HttpPost属性来自与另一个不同的包,但是我只是更改了一个包,但是我担心现在同时安装了System.Net.HttpSystem.Web.Http,有人知道会出现什么问题吗?原因。

由于我需要构造要发送的json,并且要发送的数据代表多个表中的数据,因此我希望发送字符串并在操作中对其进行处理。居然IE调试器显示它认为我正在发送此消息:

{"campaignVersionID":186,"salesChannelID":45,"postID":"20","amount":"1001"}

我已经进入了旧系统,这有很多错误,但是我不认为这与它有任何关系,而且我只是没有正确设置。我最初没有正确设置内容类型或数据类型或from body属性,但是遵循该建议并不能解决我的问题。有什么建议吗?

[编辑] Iam当前认为,这与发生序列化有关,因为我在上面安装了Fiddler,并且值已在请求正文中发送。

1 个答案:

答案 0 :(得分:0)

最后,我只需要创建与我发送的javascript结构匹配的类型,然后就可以正确填充所有内容。因此,可能是某种底层的序列化错误。有人有理由为什么字符串不能这样绑定吗?