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

【问题标题】：How to send two arrays simultaneously to view using JSON asp.net MVC如何使用 JSON asp.net MVC 同时发送两个数组以查看
【发布时间】：2021-02-02 02:48:51
【问题描述】：

我必须根据用户输入的值在我的视图中创建一个动态图表用户对控制器的输入很好，然后使用该输入，我的代码创建了两个数组，一个字符串数组将用作图表的标签，另一个将用作图表的数据值的 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>

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

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

任何帮助将不胜感激。

【问题讨论】：

标签： javascript asp.net json asp.net-mvc asp.net-ajax

【解决方案1】：

最初，您需要一个用于存放结果的支架。例如，您可以创建一个持有者类，如下所示

 public class MapResult
        {
            public string[] Products { get; set; }
            public int[] Quantity { get; set; }
        }

控制器

您可以从控制器中设置 MapResult 类的值，它有 2 个数组，一个用于产品，1 个用于数量。

public ActionResult DoChart(string data)
        {
            string[] product = { "Bread", "Milk", "Eggs", "Butter" };
            int[] quant = { 10, 20, 30, 40 };

            var mapResult = new MapResult()
            {
                Products = product,
                Quantity = quant
            };

            return Json(mapResult, JsonRequestBehavior.AllowGet);
        }

AJAX 成功代码

AJAX 结果包含两个数组。您可以将它们添加到您的地图中。

 success: (result, status) => {
                    alert(result.Products);
                    var ctx = document.getElementById('myChart').getContext('2d');
                    var myChart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: result.Products,
                            datasets: [{
                                label: '# of Votes',
                                data: result.Quantity,
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                yAxes: [{
                                    ticks: {
                                        beginAtZero: true
                                    }
                                }]
                            }
                        }
                    });

【讨论】：