如何同时发送两个数组以使用 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 类

 public class MapResult

        {

            public string[] Products { get; set; }

            public int[] Quantity { get; set; }

        } 

控制器

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

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

                                    }

                                }]

                            }

                        }

                    });