Javascript 如何使用JSON asp.net MVC同时发送两个数组以查看
我必须根据用户输入的值在视图中创建一个动态图表,该值包含在我视图中的beginform中,但必须异步完成,因此我使用Ajax和Json,我将用户输入发送到控制器,然后使用该输入,我的代码创建两个数组一个字符串数组用作图表的标签,另一个int数组用作图表的数据值 我的问题是,我只能发送上面提到的其中一个数组,不能同时发送它们,我不确定如何做到这一点,我在某个地方读到,我可以将数组作为集合发送,但我不确定这是否正确 控制器中的代码(我已删除了与问题无关的所有代码,并将其简化以便于说明): 我的视图中的Javascript代码:Javascript 如何使用JSON asp.net MVC同时发送两个数组以查看,javascript,asp.net,json,asp.net-mvc,asp.net-ajax,Javascript,Asp.net,Json,Asp.net Mvc,Asp.net Ajax,我必须根据用户输入的值在视图中创建一个动态图表,该值包含在我视图中的beginform中,但必须异步完成,因此我使用Ajax和Json,我将用户输入发送到控制器,然后使用该输入,我的代码创建两个数组一个字符串数组用作图表的标签,另一个int数组用作图表的数据值 我的问题是,我只能发送上面提到的其中一个数组,不能同时发送它们,我不确定如何做到这一点,我在某个地方读到,我可以将数组作为集合发送,但我不确定这是否正确 控制器中的代码(我已删除了与问题无关的所有代码,并将其简化以便于说明): 我的视图中
<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>
$(() => {
$(“表格”#图表表格”)。在(“提交”、(e)=>{
e、 预防默认值();
设obj={
数量:$(“#数量”).val()
};
$.ajax({
url:“@url.Action”(“DoChart”)”,
方法:“获取”,
数据:{
数据:JSON.stringify(obj)
},
成功:(产品、状态)=>{
警报(产品);
var ctx=document.getElementById('myChart').getContext('2d');
var myChart=新图表(ctx{
类型:'bar',
数据:{
标签:产品,
数据集:[{
标签:“#投票数”,
数据:[1,2,3,4,5,6,7,8],
边框宽度:1
}]
},
选项:{
比例:{
雅克斯:[{
滴答声:{
贝吉纳泽罗:是的
}
}]
}
}
});
}
});
});
});
因此,在上面的代码中,我发送产品数组,然后为图表设置标签,但我也想发送quant数组,并为图表设置数据值
PS:我正在使用Chart.Js创建我的图表
任何帮助都将不胜感激。最初,您需要一个持有者来保存您的结果。例如,您可以创建一个holder类,如下所示
public class MapResult
{
public string[] Products { get; set; }
public int[] Quantity { get; set; }
}
控制器
您可以从控制器设置MapResult类的值,它有两个数组,一个用于产品,一个用于数量
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
}
}]
}
}
});
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
}
}]
}
}
});