ASP.NET Core Jquery Ajax 发送数组失败

Question

我尝试向 ProductsController 发送多语言对象，控制器接受没有错误的方法并且对象具有正确的 Id 和标记，但 Names 和 Briefs 数组为空！

我尝试了 HttpPOST、HttpPUT、HttpOptions 但没有成功。

JS代码：

    var dataToSend = new FormData();

    var Names = $.makeArray();
    var Briefs = $.makeArray();

    Names.push({ LangCode: 'en', Value: 'TEST' });
    Names.push({ LangCode: 'de', Value: 'TOST' });

    Briefs.push({ LangCode: 'en', Value: 'FOO' });
    Briefs.push({ LangCode: 'de', Value: 'BAR' });

    dataToSend.append("Id", productId);
    dataToSend.append("Tag", "SampleTag");
    dataToSend.append("Names", Names);
    dataToSend.append("Briefs", Briefs);


    $.ajax({
        type: 'PUT',
        contentType: 'application/json; charset=utf-8',
        url: "/api/products/" + productId,
        data: dataToSend,
        processData: false,
        contentType: false,
        success: function (data) {
            DoST();
        },
        error: function (xhr, textStatus, error) {
            var response = JSON.parse(xhr.responseText);
            DoST();
        }
    });

C# 代码如下： 我使用 LangValue 对象通过应用程序传递不同的语言值，它按预期工作，但不通过 ajax 填充！

    public class LangValue
    {
        public string LangCode { get; set; }
        public string Value { get; set; }
    }

    public class Product
    {
        public int Id { get; set; }
        public string Tag { get; set; }
        public IList<LangValue> Names { get; set; }
        public IList<LangValue> Briefs { get; set; }
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> PutProductLangs(int id, Product product)
    {
        PRODUCT Id and Tag are filled but Names and Briefs arrays are EMPTY!!!
        return NoContent();
    }

Answer 1

如果您使用FormData 发送数据，您需要将.append() 每个单独的name/value 发送到FormData。由于它是一个集合，因此您必须包含 集合索引器（必须从零开始且连续），如下所示：

formData.append("obj[0].Field1", field1Val)
formData.append("obj[0].Field2", field2Val)
 ...
formData.append("obj[1].Field1", field1Val)
formData.append("obj[1].Field2", field2Val)

因此，将您的代码更新为如下所示：

JS

<script>
$("#btn").click(function () {
    function addItems(formdata, Items, name) {
        for (var i = 0; i < Items.length; i++) {
            addSingleItem(formdata, Items[i], name + "[" + i + "]");
        }
    }
    function addSingleItem(formdata, item, name) {
        for (var key in item) {
            formdata.append(name + "." + key,  item[key]);
        }
    }

    var Names = $.makeArray();
    var Briefs = $.makeArray();

    Names.push({ LangCode: 'en', Value: 'TEST' });
    Names.push({ LangCode: 'de', Value: 'TOST' });

    Briefs.push({ LangCode: 'en', Value: 'FOO' });
    Briefs.push({ LangCode: 'de', Value: 'BAR' });

    var formData = new FormData();

    formData.append("Id", productId);
    formData.append("Tag", "SampleTag");
    addItems(formData, Names, "Names");
    addItems(formData, Briefs, "Briefs");


$.ajax({
    type: 'PUT',
    url: "/api/products/" + productId,
    data: formData,
    processData: false,
    contentType: false,
    success: function (data) {
        alert("success!");
    },
    error: function (xhr, textStatus, error) {
        var response = JSON.parse(xhr.responseText);
        alert("error!");
    }
});
});

</script>

控制器

[HttpPut("{id}")]
public async Task<IActionResult> PutProductLangs(int id, [FromForm]Product product)
{
        return NoContent();
}