从复选框中获取值并作为列表发布到控制器

Question

检查下面的代码。我正在ProductId向我的控制器发布一个列表，并希望使用名为- 的视图模型接收它UpdateProductStatus。但我当前代码的问题是：ajax 成功将其发布到控制器，但UpdateProductStatus无法获取ProductId. 这总是返回 null。我在这里做错了什么？我认为可能在 ajax 中我做错了。我该如何解决这个问题以将所有内容ProductId作为列表表单控制器接收？提前致谢

控制器：

[HttpPost]

        public IActionResult UpdateProductStatus([FromBody]List<UpdateProductStatus> UpdateProductStatus)

        {

            return Json("ok");

        }

查看型号：

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

namespace BlexzWeb.ViewModels

{

    public class UpdateProductStatus

    {

        public int ProductId { get; set; }

    }

}

查询：

 $('#btnActivate').on('click', function () {

            var allSelectedProductId = [];

            var allSelectedProductIdWithKey = [];

            $('.chkItems:checked').each(function() {

                allSelectedProductId.push($(this).val());

            });

            for (var _allSelectedProductId in allSelectedProductId) {

                allSelectedProductIdWithKey.push('ProductId'+':'+_allSelectedProductId);

            }

            console.log(allSelectedProductIdWithKey);

            //var things = JSON.stringify(allSelectedProductIdWithKey);

            var things = JSON.stringify({ 'UpdateProductStatus': allSelectedProductIdWithKey });

            console.log(things);

            $.ajax({

                contentType: 'application/json; charset=utf-8',

                dataType: 'json',

                type: 'POST',

                url: '/Products/UpdateProductStatus',

                data: things,

                success: function () {

                    console.log('sssss');

                },

                failure: function (response) {

                    console.log('fffff');

                }

            });

html:

                                        <input type="checkbox" class="chkItems" value="1">

                                        <input type="checkbox" class="chkItems" value="2">

<button id="btnActivate">Button</button>

Answer 1

要绑定到您的控制器方法，您需要发送一个包含名称/值对的对象数组ProductId。要构建对象数组，请使用$('#btnActivate').on('click', function () {&nbsp; &nbsp; var allSelectedProductId = [];&nbsp; &nbsp; $('.chkItems:checked').each(function() {&nbsp; &nbsp; &nbsp; &nbsp; allSelectedProductId.push({ ProductId: $(this).val() });&nbsp; &nbsp; });&nbsp; &nbsp; var things = JSON.stringify({ UpdateProductStatus: allSelectedProductId });&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; contentType: 'application/json; charset=utf-8',&nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; &nbsp; &nbsp; url: '/Products/UpdateProductStatus',&nbsp; &nbsp; &nbsp; &nbsp; data: things,&nbsp; &nbsp; &nbsp; &nbsp; success: function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ....&nbsp; &nbsp; });});

Answer 2

您当前的代码正在为 ajax 调用发送如下所示的有效负载。{"UpdateProductStatus":["ProductId:0","ProductId:1"]}您的操作方法参数是UpdateProductStatus对象列表。因此，要使模型绑定与您当前的操作方法参数签名正常工作，您的有效负载应如下所示。[{"ProductId":"1"},{"ProductId":"2"}]无需指定参数名称。只需传递一个项目数组，每个项目都有一个ProductId属性和它的值。var allSelectedProductIdWithKey = [];$('.chkItems:checked').each(function () {&nbsp; &nbsp; allSelectedProductIdWithKey.push({ ProductId: $(this).val() });});var things = JSON.stringify(allSelectedProductIdWithKey);$.ajax({&nbsp; &nbsp; contentType: 'application/json; charset=utf-8',&nbsp; &nbsp; type: 'POST',&nbsp; &nbsp; url: '/Products/AppendClientFilter',&nbsp; &nbsp; data: things,&nbsp; &nbsp; success: function (res) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('Successs', res);&nbsp; &nbsp; },&nbsp; &nbsp; failure: function (response) {&nbsp; &nbsp; &nbsp; &nbsp; console.log('Error', response);&nbsp; &nbsp; }});您还可以删除dataTypein ajax 调用。jQuery ajax 将从响应标头中猜测正确的类型，在您的情况下，您将显式返回 JSON。