получить значение из флажков и опубликовать список в контроллер

Question

Проверьте код ниже. Я делаю публикацию списка ProductId на моем контроллере и хотел получить его с моделью представления под названием - UpdateProductStatus. но проблема с моим текущим кодом: ajax успешно отправляет его на контроллер, но UpdateProductStatus не может получить любое значение ProductId. Это всегда возвращает ноль. Что не так я делаю здесь? Возможно, в 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);
    }
});

Вы также можете удалить dataType в вызове ajax. 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 () {
            ....
    });
});