为什么通过POSTajax发送JSON数据返回null参数？

如何解决为什么通过POSTajax发送JSON数据返回null参数？

大家下午好：）

我正在处理asp.net mvc应用程序。我正在使用JQuery DataTable来显示我的数据。实际上，我的ajax Post请求调用了一个控制器方法，该方法必须接收一些参数。问题在于它们为空。我也有Post 500错误：（

这是我的课程：

public class ClientSelectionFiltersviewmodel
    {
        public bool StrictFilteringContractTypes { get; set; }
        public string ContractTypes { get; set; }
        public string PaymentChoices { get; set; }
        public string PopulationTypes { get; set; }
    }

这是cshtml视图的一部分：

@model ClientSelectionviewmodel

@{
    ViewBag.Title = "Sélection des clients";
}

<link href="~/lib/datatables/css/dataTables.bootstrap4.min.css" rel="stylesheet" />

<h3><i class="fas fa-clipboard-list mr-3"></i> Sélection des clients</h3>
<div asp-validation-summary="All" class="text-danger mt-2"></div>

<div id="filters">
    <form method="post" asp-action="facturationWithFilters">
     <!--some code here-->...
    </form>
    <button id="btn-filter-clients" class="btn atmb-btn-blue"><i class="fas fa-filter fa-fw mr-2"></i>Filtrer les clients</button>

</div>


    <div id="client-selection" class="mt-2">

        <div class="mb-1">
            <a id="btn-send-selection" class="btn float-right atmb-btn-red">
                <i class="fas fa-feather-alt fa-fw mr-2"></i>Lancer la facturation pour les utilisateurs sélectionnés
            </a>
        </div>

        <table class="table table-striped table-hover table-sm table-bordered"
               id="tableServerSide"
               style="width:100%;">
            <thead class="thead-dark text-white">
                <tr>
                    <th>Cocher</th>
                    <th>#</th>
                    <th>Numéro de client</th>
                    <th>Types de contrats</th>
                    <th>Moyen de paiement</th>
                    <th>Population</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>



@section Scripts {

    <!--scripts DataTable-->
    <script src="~/js/modal.js"></script>
    <script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
    <script src="~/lib/datatables/js/dataTables.bootstrap4.min.js"></script>

    <!--script pour la gestion de DataTable-->
    <script type="text/javascript">

        $('#btn-filter-clients').click(function () {

            console.log($("#contractFilter").val());    //ok I get my values
            console.log($("#paymentFilter").val());     //ok I get my values
            console.log($("#populationFilter").val());  //ok I get my values
          
                console.log("début Data Table");
                $("#tableServerSide").DataTable({
                    "processing": true,"serverSide": true,"filter": true,"ajax": {
                        "url": "/clientselection/ajaxpostcall","type": "POST","datatype": "json","data": JSON.stringify({
                            filters: {
                                "ContractTypes": $("#contractFilter").val(),"PaymentChoices": $("#paymentFilter").val(),"PopulationTypes": $("#populationFilter").val(),"StrictFilteringContractTypes": $("#StrictFilteringContractTypes").is(":checked")
                            }
                        }),"contentType": "application/json","success": function (response) {
                            if (response != null) {
                                alert("Name : " + response.Name + ",Designation : " + response.Designation + ",Location :" + response.Location);
                            } else {
                                alert("Something went wrong");
                            }
                        },"failure": function (response) {
                            alert(response.responseText);
                        },"error": function (response) {
                            alert(response.responseText);
                        }
                    },"columns": [ // on définit les colonnes du tableau
                        {
                            //Cases cocher
                            "data": null,"className": "col-checkBox","render": function (data,type,row) {
                                var checkId = 'check' + row.id;
                                var isChecked = selectedIds.includes(checkId) ? ' checked="checked"' : '';
                                var checkBox = '<input id="' + checkId + '" type="checkBox" '
                                    + isChecked
                                    + ' class="server-checkBox" /> ';
                                /*
                                 <td class="col-checkBox sorting_1">
                                        <input id="check0" type="checkBox" class="server-checkBox">
                                 </td>
                                 */
                                return checkBox;
                            }
                        },{
                            //Numéro de client
                            "data": "id","className": "col-id"
                        },{
                            //Types de contrats
                            "data": "contractstypes","className": "col-contractstypes",row) {
                                var chaine = string.Join(",",row.value);
                                return chaine;
                            }
                        },{
                            //Moyen de paiement PaymentChoice
                            "data": "paymentchoice","className": "col-paymentchoice"
                        },{
                            //Population PopulationType
                            "data": "populationtype","className": "col-populationtype"
                        }
                    ]
                });
            
        });

    </script>
}

这是我的控制器方法：

 [HttpPost]
        public async Task<JsonResult> AjaxPostCall(ClientSelectionFiltersviewmodel filters)
        {
            //some code here....
            return Json(result);
        }

我用了至少6种对我不起作用的解决方案，例如：

在ajax中

“数据”：JSON.stringify（{ 过滤器：{ ContractTypes：$（“＃contractFilter”）。val（）， PaymentChoices：$（“＃paymentFilter”）。val（）， PopulationTypes：$（“＃populationFilter”）。val（）， StrictFilteringContractTypes：$（“＃StrictFilteringContractTypes”）。is（“：checked”） } }）

，然后在控制器中：

[HttpPost]
            public async Task<JsonResult> AjaxPostCall([FromBody] ClientSelectionFiltersviewmodel filters)
            {
                //some code here....
                return Json(result);
            }

不要指定"contentType": "application/json",
使用带或不带“”的json数据使用不同的语法 ...

能否请您告诉我如何解决？非常感谢。

解决方法

您的动作不太可能需要[FromBody]；尝试将JSON.stringify更改为：

"data": JSON.stringify({
   "ContractTypes": $("#contractFilter").val(),"PaymentChoices": $("#paymentFilter").val(),"PopulationTypes": $("#populationFilter").val(),"StrictFilteringContractTypes": $("#StrictFilteringContractTypes").is(":checked")
}),

此解决方案对我有用：

[HttpPost]
        public async Task<JsonResult> AjaxPostCall(ClientSelectionFiltersViewModel filters,DataTableRequestParameters parameters)
        {
//somecode...
}

在JQuery中：

var filters = {
                ContractTypes: $("#contractFilter").val().join(','),PaymentChoices: $("#paymentFilter").val().join(',PopulationTypes: $("#populationFilter").val().join(',StrictFilteringContractTypes: $("#StrictFilteringContractTypes").is(":checked")
            }

                $("#tableServerSide").DataTable({
                    "processing": true,"serverSide": true,"filter": true,"ajax": { 
                        //"url": "/clientselection/ajaxpostcall",//doesn't work!!!
                        "url": "@Url.Action("AjaxPostCall","ClientSelection")",//ok because of tag helper
                        "type": "POST","data": filters,......

感谢您的帮助！