为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

临摹微笑 2023-05-25 18:09:14
我必须根据用户将输入到我视图中 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 来创建我的图表。任何帮助将非常感激。
查看完整描述

1 回答

?
天涯尽头无女友

TA贡献1831条经验 获得超9个赞

最初,您需要一个支架来存放您的结果。例如,您可以创建一个如下所示的 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

                                    }

                                }]

                            }

                        }

                    });


查看完整回答
反对 回复 2023-05-25
  • 1 回答
  • 0 关注
  • 98 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信