Asp.net MVC 和 Chart js答案

【问题标题】：Asp.net MVC and Chart jsAsp.net MVC 和 Chart js
【发布时间】：2019-05-31 18:16:59
【问题描述】：

我想用chart.js 显示来自数据库的数据。

在 asp.net MVC 中，我有一个控制器，它从数据库中检索数据并使用以下代码在视图中显示它们：

@foreach(var items in Model)
{
    <h6>@items.title</h6>
    <h6>@items.cuntr</h6>
}

如何在chart.js 中显示@items.title 和@items.cuntr？非常感谢。

【问题讨论】：

增强语法

标签： asp.net-mvc razor chart.js

【解决方案1】：

看看这个链接：http://www.c-sharpcorner.com/article/create-free-charts-using-chart-js-in-asp-net-mvc/ 它描述了在 mvc 中使用图表的所有相关步骤。

让我们说这是你的控制器方法：

    public ActionResult Index()
    {
      ViewBag.Data = "Value,Value1,Value2,Value3"; //list of strings that you need to show on the chart. as mentioned in the example from c-sharpcorner
      ViewBag.ObjectName = "Test,Test1,Test2,Test3";
    }

您可以在视图包中返回数据并将它们传递给图表的数据属性：

这是你的观点：

@{  
    Layout = null;  
}  
<!DOCTYPE html>  
<html>  
<head>  
    <meta name="viewport" content="width=device-width" />  
    <title>Charts</title>  
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js"></script>  
    <script>  
        var barChartData =  
            {  
                labels: [@Html.Raw(ViewBag.ObjectName)], //the names displayed on the x-axis, see images below
                datasets: [{  
                    label: 'ProductWise Sales Count',  
                    backgroundColor: [  
                        "#f990a7",  
                        "#aad2ed",  
                        "#9966FF",  
                        "#99e5e5",  
                        "#f7bd83",  
                    ],  
                    borderWidth: 2,  
                    data: [@ViewBag.Data]  //what you returned back from controller. values displayed on the y-axis, see images below
                }]  
            };  

            window.onload = function () {  
                var ctx1 = document.getElementById("barcanvas").getContext("2d");  
                window.myBar = new Chart(ctx1,  
                    {  
                        type: 'bar',  
                        data: barChartData,  
                        options:  
                            {  
                                title:  
                                {  
                                    display: true,  
                                    text: "ProductWise Sales Count"  
                                },  
                                responsive: true,  
                                maintainAspectRatio: true  
                            }  
                    });  
            }  
    </script>  
</head>  
<body>  
    <div style="text-align: center">  
        <canvas id="barcanvas"></canvas>  
    </div>  
    <div style="text-align: center">  
        Disclaimer:- This data is for demo it is   
        not real data it wont relate to any company  
    </div>  
</body>  
</html>

【讨论】：

谢谢。我看到了。但我想从视图中处理它。或更简单的方法。
什么意思，你想从视图中处理它？
@masoudamirian，我会更新我的答案
非常感谢。在本教程中，它使用 dapper。但我不能用这个。因为在 dotnetnuke 中不允许。
@masoudamirian，我编辑了我的答案。无需使用小巧玲珑。 Dapper 只是一个 ORM 框架，你没有义务使用它

【解决方案2】：

您应该可以直接从ViewBag 访问它。例如@Viewbag.YourObject

我发现这个项目在创建图表时很有帮助，可能需要一些调整但可以工作

Link to MVC Charts Project

【讨论】：

【解决方案3】：

This 是迄今为止我遇到的最简单的示例，只需复制粘贴在您的视图和控制器中编写代码，并让您的叔叔鲍勃。以后可以修改

完成后，您可以像这样调用数据库：

     dr = dt.NewRow();
        dr["Employee"] = "Someone";
        dr["Credit"] = rawData.Where(a => a.person == "Someone").Count().ToString();
        dt.Rows.Add(dr);

【讨论】：