返回动态数组从控制器Asp.Net MVC

我可以用下面返回动态数组从控制器Asp.Net MVC

<script> 
     var pieChartData = [ 
     { label: "Data 1", data: 16, color: "#62cb31", }, 
     { label: "Data 2", data: 6, color: "#A4E585", }, 
     { label: "Data 3", data: 22, color: "#368410", }, 
     { label: "Data 4", data: 32, color: "#8DE563", } 
    ]; 

    var pieChartOptions = { 
     series: { 
      pie: { 
       show: true 
      } 
     }, 
     grid: { 
      hoverable: true 
     }, 
     tooltip: true, 
     tooltipOpts: { 
      content: "%p.0%, %s", // show percentages, rounding to 2 decimal places 
      shifts: { 
       x: 20, 
       y: 0 
      }, 
      defaultTheme: false 
     } 
    }; 

    $.plot($("#_ByRegion"), pieChartData, pieChartOptions); 
</script>

现在代码生成饼图就像画什么，我想要做的是产生var data = []动态地从控制器。这个怎么做？此外，数据来自数据库。

来源

2017-02-24 FrostyPinky

使用AJAX调用，并从控制器恢复二维数组 –

@SorangwalaAbbasali如何做到这一点任何的例子吗？ :) – FrostyPinky

结合Pranav Patel和Ghanshyam Singh回答我能够能够达到所需的输出

型号

public class GenderPieChart_Model 
{ 
    public string GenderDesc { get; set; } 
    public int GenderID { get; set; } 
}

控制器

public JsonResult Gender() 
{ 
    Dashboard_Layer data = new Dashboard_Layer(); 
    var lst = data.Gender(); 
    return Json(lst, JsonRequestBehavior.AllowGet); 
}

个业务层

public IEnumerable<GenderPieChart_Model> Gender() 
    { 
     List<GenderPieChart_Model> data = new List<GenderPieChart_Model>(); 
     using (SqlConnection con = new SqlConnection(Connection.MyConn())) 
     { 
      SqlCommand com = new SqlCommand("dbo.sp_Project_DashBoard 4", con); 
      con.Open(); 
      SqlDataReader reader = com.ExecuteReader(); 
      while (reader.Read()) 
      { 
       GenderPieChart_Model value = new GenderPieChart_Model(); 
       value.GenderDesc = Convert.ToString(reader.GetValue(0)); 
       value.GenderID = Convert.ToInt32(reader.GetValue(1)); 
       data.Add(value); 
      } 
     } 
     return data; 
    }

查看

<div class="flot-chart-content" id="_ByGender" style="height: 150px"></div> 
<script> 
$(document).ready(function() { 
    $.ajax({ 
     type: "POST", 
     url: "@Url.Action("Gender", "Dashboard")", 
     content: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function (data) { 
      var myData = data; 
      var pieChartData = []; 
      $.each(data, function (i,v) { 
       pieChartData.push({ label: v.GenderDesc, data: v.GenderID, color: "#62cb31", }); 
      }) 
      var pieChartOptions = { 
       series: { 
        pie: { 
         show: true 
        } 
       }, 
       grid: { 
        hoverable: true 
       }, 
       tooltip: true, 
       tooltipOpts: { 
        content: "%p.0%, %s", // show percentages, rounding to 2 decimal places 
        shifts: { 
         x: 20, 
         y: 0 
        }, 
        defaultTheme: false 
       } 
      }; 
      $.plot($("#_ByGender"), pieChartData, pieChartOptions); 
     } 
    }) 

}); 
</script>

来源

2017-02-24 08:18:51 FrostyPinky

当您的控制器处于就绪事件和获取数据（您的控制器返回的Json）可以进一步处理时，您可以调用。您可以尝试像下面

<script> 
$(document).ready(function(){ 
    $.ajax({ 
     type: "POST", //GET or POST 
     url: "<YOUR URL>", 
     data: "<YOUR PARAMETER IF NEEDED>", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     success: function(data){ //data is your json returned from controller 
     var myData = JSON.parse(data); 

     //create your 'pieChartData' from object 'myData' 
     //pieChartData = 

     var pieChartOptions = { 
      series: { 
       pie: { 
        show: true 
       } 
      }, 
      grid: { 
       hoverable: true 
      }, 
      tooltip: true, 
      tooltipOpts: { 
       content: "%p.0%, %s", // show percentages, rounding to 2 decimal places 
       shifts: { 
        x: 20, 
        y: 0 
       }, 
       defaultTheme: false 
      } 
     }; 

     $.plot($("#_ByRegion"), pieChartData, pieChartOptions); 
     } 
    }); 
}); 
</script>

来源

2017-02-24 06:40:20

它会说'在JSON的位置意外的令牌o – FrostyPinky

其简单的只是从你的控制器返回JSON：

首先创建一个模型类的属性

public class Chart 
{ 
    public string label{get;set;} 
    public string data{get;set;} 
    public string color{get;set;} 
}

MVC操作方法： -

public JsonResult Chart() 
{ 
    List<Chart> chartList=new List(); 
    // Code to fetch Data in List chartList 
    return Json(chartList,JsonRequestBehaviour.AllowGet); 
}

阿贾克斯电话： -

<script> 
$(document).ready(function(){ 
    $.ajax({ 
     type: "POST", //GET or POST 
     url: "/Controller/Chart", 
     data: "<YOUR PARAMETER IF NEEDED>", 
     dataType: "json", 
     success: function(data){ 
      $.each(data,function(i,index){ 
      // Code to plot Chart here 

      }); 
     } 

    }); 
}); 
</script>

来源

2017-02-24 07:00:45

返回动态数组从控制器Asp.Net MVC

回答

相关问题