如何将两个数组作为 POST 请求参数从 AJAX 发送到 MVC 控制器（ASP .NET Core 3.1 剃须刀）？

Question

我正在尝试发送两个对象数组作为发布请求参数。

.cshtml 文件中来自前端的 POST 请求

var PostFunctions = {
    PostTest: function () {
        const sampleIds = [1, 2, 3];
        const sampleStrings = ["1", "2", "3"];
        var data = {
            'sampleIds': sampleIds,
            'sampleStrings': sampleStrings
        };
        $.ajax({
            type: "POST",
            url: "/Home/GetSamplesNames",
            data: JSON.stringify(data),
            async: false,
            contentType: "application/json; charset=utf-8",
            success: function () {}
        });
    }
};

控制器中的 GetSamplesNames() 代码

[HttpPost]
public JsonResult GetSamplesNames([FromBody] List<UInt32> sampleIds, [FromBody] List<String> sampleStrings)
{
    return new JsonResult(new List<String>() { "test" });
}

但是在调试中两个参数都是空的

我对参数 stringify 的错误是什么？

提前谢谢你。

Answer 1

对于 ASP.NET CORE 应用程序，您需要创建一个模型，其中包含您想要传递给控制器​​方法的参数。

例如，List<UInt32> sampleIds, [FromBody] List<String> sampleStrings 您需要创建一个类，例如：

public class SampleClass
{
    List<UInt32> SampleIds {get; set;}
    List<string> SampleStrings {get; set;}
}

这就是你的控制器方法声明：

[HttpPost] // I don't think you need this
public JsonResult GetSamplesNames([FromBody] SampleClass params)

然后在您的 Javascript 函数中，您将执行以下操作：

    // The names in this object have to be the same as the class created
    var params = {
        SampleIds = sampleIds,
        SampleStrings = sampleStrings
    };

    $.ajax({
        type: "POST",
        url: "/Home/GetSamplesNames",
        data: JSON.stringify(data),
        contentType: "application/json",
        success: function () {}
    });

Answer 2

这对我有用：

    [HttpPost]
    public JsonResult GetSamplesNames(List<uint> sampleIds, List<string> sampleStrings)
    {
        return new JsonResult(new List<String>() { "test" });
    }

<script type="text/javascript">

var PostTest = function () {
    var sampleIds = [1, 2, 3];
    var sampleStrings = ["1", "2", "3"];
    var data = {
        'sampleIds': sampleIds,
        'sampleStrings': sampleStrings
    };
    $.post('/Home/GetSamplesNames', $.param({ sampleIds: sampleIds, sampleStrings: sampleStrings}, true), function (data) { });
}

Answer 3

JSON stringify 将您的对象转换为字符串，我认为它不符合您的控制器参数，因为您需要 2 个列表。

试试这个；

var PostFunctions = {
    PostTest: function () {
        const ids = [1, 2, 3];
        const strings = ["1", "2", "3"];
        var passData = {
            sampleIds: ids,
            sampleStrings: strings
        };
        $.ajax({
            type: "POST",
            url: "/Home/GetSamplesNames",
            data: passData,
            async: false,
            contentType: "application/json; charset=utf-8",
            dataType: 'json', // since the server will return json object, you need to indicate dataType
            success: function (response) { alert(response); },
            error: function(err){ alert(err); },
        });
    }
};

Answer 4

试试这个：

var PostFunctions = {
        PostTest: function () {
            const _sampleIds = [1, 2, 3];
            const _sampleStrings = ["1", "2", "3"];

            $.ajax({
                type: "POST",
                url: "/Home/GetSamplesNames",
                data: {sampleIds : _sampleIds, sampleStrings : _sampleStrings},
                async: false,
                contentType: "application/json; charset=utf-8",
                success: function () {}
            });
        }
    };

在你的控制器中：

[HttpPost]
public JsonResult GetSamplesNames(List<UInt32> sampleIds,List<String> sampleStrings)
{
    return new JsonResult(new List<String>() { "test" });
}