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

问题描述

我必须在用户视图中创建一个动态图表，该值基于用户将要输入到我的视图中beginform包含的输入中的值，但是它必须异步完成，因此为什么我使用Ajax和Json，所以我发送用户向控制器的输入很好，然后使用该输入，我的代码创建两个Arrays，一个字符串数组将用作我的图表标签，另一个则是一个int数组，用作图表的数据值。

我的问题是我只能发送上述数组中的一个，不能同时发送它们，而且我不确定这样做如何，我读过某个地方可以将数组作为集合发送，但是我我不确定这是否正确。

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

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

            return Json(product,JsonRequestBehavior.AllowGet);
        }

我的视图中的Java代码：

<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创建图表。

任何帮助将不胜感激。

解决方法

最初，您需要一个持有人才能获得结果。例如，您可以创建如下的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
                                    }
                                }]
                            }
                        }
                    });