如何同时发送两个数组以使用 JSON asp.net MVC 查看

Question

我必须根据用户将输入到我视图中 beginform 中包含的输入的值在我的视图中创建一个动态图表，但是它必须异步完成因此我使用 Ajax 和 Json 的原因，我发送用户输入很好地连接到控制器，然后使用该输入我的代码创建了两个数组，一个字符串数组将用作图表的标签，另一个是用作图表数据值的 int 数组。

我的问题是我只能发送上面提到的那些数组之一，不能同时发送它们，我不确定如何完成，我在某处读到我可以将数组作为集合发送，但我不是确定这是否正确。

控制器中的代码（为了便于说明，我删除了所有与问题无关的代码并对其进行了简化）：

        public ActionResult DoChart(string data)

        {

            string[] product = {"Bread", "Milk", "Eggs", "Butter"};

            int[] quant = {10, 20, 30, 40};

            return Json(product, JsonRequestBehavior.AllowGet);

        }

我视图中的 Javascript 代码：

<script>

    $(() => {

        $("form#chartForm").on("submit", (e) => {

            e.preventDefault();

            let obj = {

                quantity: $("#quantity").val()

            };

            $.ajax({

                url: "@Url.Action("DoChart")",

                method: "GET",

                data: {

                    data: JSON.stringify(obj)

                },

                success: (product, status) => {

                    alert(product);

                    var ctx = document.getElementById('myChart').getContext('2d');

                    var myChart = new Chart(ctx, {

                        type: 'bar',

                        data: {

                            labels: product,

                            datasets: [{

                                label: '# of Votes',

                                data: [1,2,3,4,5,6,7,8],

                                borderWidth: 1

                            }]

                        },

                        options: {

                            scales: {

                                yAxes: [{

                                    ticks: {

                                        beginAtZero: true

                                    }

                                }]

                            }

                        }

                    });

                }

            });

        });

    });

</script>

所以在我上面的代码中，我发送了产品数组，然后为我的图表设置标签，但我也想发送量化数组并为我的图表设置数据值。

PS：我正在使用 Chart.Js 来创建我的图表。

任何帮助将非常感激。

Answer 1

最初，您需要一个支架来存放您的结果。例如，您可以创建一个如下所示的 holder 类&nbsp;public class MapResult&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public string[] Products { get; set; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public int[] Quantity { get; set; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp;控制器您可以从控制器设置 MapResult 类的值，它有 2 个数组，一个用于产品，一个用于数量。public ActionResult DoChart(string data)&nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; string[] product = { "Bread", "Milk", "Eggs", "Butter" };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; int[] quant = { 10, 20, 30, 40 };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var mapResult = new MapResult()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Products = product,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Quantity = quant&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return Json(mapResult, JsonRequestBehavior.AllowGet);&nbsp; &nbsp; &nbsp; &nbsp; }AJAX 成功代码AJAX 结果包含两个数组。您可以将它们添加到地图中。&nbsp;success: (result, status) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(result.Products);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ctx = document.getElementById('myChart').getContext('2d');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var myChart = new Chart(ctx, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: 'bar',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; labels: result.Products,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; datasets: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; label: '# of Votes',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: result.Quantity,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; borderWidth: 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; options: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; scales: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yAxes: [{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ticks: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; beginAtZero: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }]&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });