如何将 JavaScript 数组从 Ajax 发送到控制器

Question

无法从 ajax post 获取控制器中的对象值。

我有一个 jQuery 数据 table，第一列是复选框，我需要 return 将选定的行 ID 发送到控制器。我可以获得我需要的一切，但它在控制器中始终为空。

 Model:
    public class Values
    {
        public Guid ID { get; set; }
    }


View JS & Ajax on button click:
    function SubAll() {
        var values = [];

    $('#timesheet').find('input[type="checkbox"]:checked').each(function (index, rowId) {
            //this is the current checkbox
            var temp = $(this).closest('tr').attr('id');

            if (String(temp) === String("undefined")) {
                //skip; it is the select all box
            }
            else {
                //push to array
                values.push(temp);
            }
        });

        console.log(values);
        var data = { ID: values };
        console.log(data);

        $.ajax({
            url: "@Url.Action("ApproveAllTimesheets", "Admin")",
            type: 'POST',
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (result) {
                alert(result);
            },
            error: function (xhr, textStatus) {
                if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
                else {
                    alert('Content load failed!', "info");
                }
            }
        });
    };


Controller:
    [HttpPost]
    [ValidateAntiForgeryToken]
    public void ApproveAllTimesheets(List<Values> value)
    {}

在按钮上单击数组 'values' 如果选择了一个框（工作正常），则会填充 id，然后它会变成一个对象 'data' 以匹配方法签名和模型，并且字符串化。当在控制器方法上命中断点时，值永远不会存在。我错过了什么？

    **UPDATE:**
    function SubAll() {
        var values = [];

        $('#timesheet').find('input[type="checkbox"]:checked').each(function (index, rowId) {
            //this is the current checkbox
            var temp = $(this).closest('tr').attr('id');

            if (String(temp) === String("undefined")) {
                //skip; it is the select all box
            }
            else {
                //push to array
                values.push({ Id: temp });
            }
        });

        console.log(values);

        $.ajax({
            url: "/Admin/ApproveAllTimesheets",
            type: "POST",
            data: values,
            dataType: "html",
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (result) {
                alert(result);
            },
            error: function (xhr, textStatus) {
                if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
                else {
                    alert('Content load failed!', "info");
                }
            }
        });
    };

    **Method Signature:**
    public IActionResult ApproveAllTimesheets( List<Value> values)

    **Class**
     public class Value
     {
        public Guid ID { get; set; }
     }

更新 #3

    Model:
    public class Value
    {
        public string TimeId { get; set; }
    }

    Ajax:
    function SubAll() {
        //var selectedValues = $('#timesheet').DataTable().column(0).checkboxes.selected().toArray();
        var dataJSON = { TimeId: "test" };

        console.log(dataJSON);

        $.ajax({
            url: "/Admin/ApproveAllTimesheets",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(dataJSON),
            success: function (result) {
                alert(result);
            },
            error: function (xhr, textStatus) {
                if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
                else {
                    alert('Content load failed!', "info");
                }
            }
        });
      };

    Controller:
    public ActionResult ApproveAllTimesheets([FromBody]Value information)

Answer 1

如果这是你的JSON

{ <-- This here is the start of your object
    "id": 1;
}

这需要绑定到模型

class AnyModel {
    public int Id {get; set;}
}

如果您在 JSON

中有列表

{
  [
    ...Some objects
  ]
}

您需要在您的控制器中接受一个模型

class AnyModel {
   public List<SomeOtherModel> ListObject {get; set;}
}

更新

您想将 'Values' 的列表存储在另一个模型中。

class Value {
    public Guid Id {get;set;}
}

class ValueContainer {
   public List<Value> Values {get; set;}
}

现在您想将 JSON 绑定到您的 ValueContainer 对象。当您发送 JSON 时，您需要 [FromBody] 以便 JSON 绑定到您的模型。

public IActionResult ApproveAllTimesheets([FromBody] ValueContainer values) {}

更新 2

抱歉仔细查看您的 JS 代码（旧代码），您应该使用以下结构：

class ValueContainer {
   public List<Guid> Id {get; set;}
}

List<Guid> 是您绑定到 JSON 对象中的 id 的值数组。控制器保持不变。

public IActionResult ApproveAllTimesheets([FromBody] ValueContainer values) {}

Answer 2

您应该像 javascript 普通对象一样插入 ID：

 values.push({
            ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe8",

        });

以下代码供您参考：

function SubAll() {
    var values = [];
    values.push({
        ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe6",

    });
    values.push({
        ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe7",

    });
    values.push({
        ID: "d88b44e4-1009-47d6-9f2f-f675dca89fe8",

    });


    $.ajax({
        type: "POST",
        url: "/Admin/ApproveAllTimesheets",
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(values),
        success: function (result) {
            alert(result);
        },
        error: function (xhr, textStatus) {
            if (xhr.status == 401) { alert("Session Expired!"); window.location = "/Account"; }
            else {
                alert('Content load failed!', "info");
            }
        }
    });

};

控制器：

public void ApproveAllTimesheets([FromBody]List<Values> value)
{

}

型号：

public class Values
{
    public Guid ID { get; set; }
}

Answer 3

所以我的更新 #3 正在运行，现在我遇到了一个不同的问题，所以我将 post 提出一个新问题。

如何将 JavaScript 数组从 Ajax 发送到控制器

How do I send the JavaScript Array to the Controller from Ajax

asp.net-ajax

asp.net-mvc-5

asp.net-core