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; }
    }

}

jQuery：

 $('#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

您当前的代码正在为ajax调用发送如下所示的有效负载。

{"UpdateProductStatus":["ProductId:0","ProductId:1"]}

您的操作方法参数是UpdateProductStatus对象的列表。因此，为了使模型绑定与您当前的操作方法参数签名一起正常工作，有效负载应如下所示。

[{"ProductId":"1"},{"ProductId":"2"}]

无需指定参数名称。只需传递一系列项目，每个项目都有一个ProductId属性及其值。

var allSelectedProductIdWithKey = [];
$('.chkItems:checked').each(function () {
    allSelectedProductIdWithKey.push({ ProductId: $(this).val() });
});

var things = JSON.stringify(allSelectedProductIdWithKey);

$.ajax({
    contentType: 'application/json; charset=utf-8',
    type: 'POST',
    url: '/Products/AppendClientFilter',
    data: things,
    success: function (res) {
        console.log('Successs', res);
    },
    failure: function (response) {
        console.log('Error', response);
    }
});

您也可以在ajax调用中删除dataType。 jQuery ajax将从响应标头中猜测正确的类型，在这种情况下，您将显式返回JSON。

Answer 2

要绑定到控制器方法，您需要发送一个对象数组，其中包含ProductId的名称/值对。要构建对象数组，请使用

$('#btnActivate').on('click', function () {
    var allSelectedProductId = [];
    $('.chkItems:checked').each(function() {
        allSelectedProductId.push({ ProductId: $(this).val() });
    });
    var things = JSON.stringify({ UpdateProductStatus: allSelectedProductId });

    $.ajax({
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        type: 'POST',
        url: '/Products/UpdateProductStatus',
        data: things,
        success: function () {
            ....
    });
});

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

2 个答案: