如何使用数组隔离标签和总值并通过查看

Question

如何在单独的变量中分离标签和总值，然后返回到视图，标签值显示在标签和总值中显示总计我显示的代码可以是任何一个告诉我该怎么做。 这里是我的控制器和脚本，我使用chart.js和我想要标签变量中的值标签值和总变量中的总值，这里是数组合，表示标签和总值数组合。

<script> 
var myLabels = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(ViewBag.unitdata)); 
var myData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject()); 
    var PieChartData = 
     { 
      labels: myLabels, 
      datasets: [{ 
       label: 'ProductWise Sales Count', 
       backgroundColor: [ 
        "#f990a7", 
        "#aad2ed", 
        "#9966FF", 
        "#99e5e5", 
        "#f7bd83", 
       ], 
       borderWidth: 2, 
       data:myData 
      }] 
     }; 

     window.onload = function() { 
      var ctx1 = document.getElementById("Piecanvas").getContext("2d"); 
      window.myBar = new Chart(ctx1, 
       { 
        type: 'pie', 
        data: PieChartData, 
        options: 
         { 
          title: 
          { 
           display: true, 
           text: "ProductWise Sales Count" 
          }, 
          responsive: true, 
          maintainAspectRatio: true 
         } 
       }); 
     } 
</script> 

public ActionResult Index() 
    { 
     MemberData(); 
     return View(); 
    } 

    [HttpPost] 
    public JsonResult MemberData() 
    { 

     List<object> unitdata = new List<object>(); 
     unitdata.Add(new object[] 
        { 
         "Status", "Total" 
        }); 
     using (SqlConnection con = new SqlConnection(constr)) 
     { 
      using (SqlCommand cmd = new SqlCommand("Sp_testing", con)) 
      { 

       cmd.CommandType = CommandType.StoredProcedure; 
       cmd.Connection = con; 
       con.Open(); 
       using (SqlDataReader mReader = cmd.ExecuteReader()) 
       { 
        while (mReader.Read()) 
        { 
         unitdata.Add(new object[] 
        { 
         mReader["Status"], mReader["Total"] 
        }); 
        } 
       } 
       con.Close(); 
      } 
     } 
     return Json(unitdata); 
    } 

Answer 1

您可以创建一个视图模型类，将同时包含标签和数据：

public class ChartJsViewModel { 
    public List<object> unitdata {get; set;} 
    public List<object> labels {get; set;} 
} 

并使用它像这样：

[HttpPost] 
public JsonResult MemberData() 
{ 

    List<object> unitdata = new List<object>(); 
    List<object> labels = new List<object>(); 

    // Populate the unitdata and labels from your database 
    ..... 

    ChartJsViewModel chartModel = new ChartJsViewModel { 
     unitdata = unitdata, 
     labels = labels 
    }; 

    return Json(chartModel); 
} 

然后，您可以反序列化chartModel的Json在视图页面中。

在视图中可以有类似：

@model namespace.folder.ChartJsModelView 

<div> 
Chart JS Components 
</div> 

<script> 
var myLabels = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(@Model.labels)); 
var myData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(@Model.unitdata)); 

/* Other chartjs script functions */ 
...... 
</script>