如何将控制器数据加载到javascript数组中？ [英] How can I load controller data into javascript array?

问题描述

大家好，



我正在通过MVC3开发一个选举应用程序（由于一些限制）。我做了一切。它工作正常。但是，我需要一些图表来显示我的应用程序。



找到一些东西，与'静态数字'一起工作正常。我想加载自己的数据来自数据库。我不擅长Javascript。这是我遇到麻烦的地方。

Hello everyone,

I am developing an election app via MVC3(Due to some restrictions). I did everything. It works fine. However, I need some charts to visualize my app.

Found something, working fine with 'static numbers'. I want to load my own data which comes from database. I am not good at Javascript. Here is where I have troubles.

var barChartData = {
                   labels: ["App1", "App2", "App3", "App3", "App4", "App5", "Soru6"],
                   datasets: [
                                       {
                                           fillColor: "rgba(233, 78, 2, 0.9)",
                                           strokeColor: "rgba(233, 78, 2, 0.9)",
                                           highlightFill: "#e94e02",
                                           highlightStroke: "#e94e02",
                                           data: [65, 59, 90, 81, 56, 55, 40]
                                       },
                                       {
                                           fillColor: "rgba(79, 82, 186, 0.9)",
                                           strokeColor: "rgba(79, 82, 186, 0.9)",
                                           highlightFill: "#4F52BA",
                                           highlightStroke: "#4F52BA",
                                           data: [40, 70, 55, 20, 45, 70, 60]
                                       }
                                   ]

               };

首先，我想从db中将一些标签加载到Labels数组中。 （表：用户，列应用程序）

然后，我想将一些数据加载到数据数组中。 （表UserQuestion，Column QuestionAnswerRate）



我可以通过Model或ViewBag获取这两个数据。但无法装入数组。



我该怎么做？



什么我试过了：



我试过了

1-通过ViewBag加载

2 - 通过模型加载

First, I want to load some labels into Labels array from db . (Table: User, Column Apps)
Then, I want to load some data into data array. (Table UserQuestion, Column QuestionAnswerRate)

I am able to get both of these data via Model or ViewBag. However can't load into array.

How can I do this?

What I have tried:

I have tried
1- To load via ViewBag
2- To load via Model

推荐答案

创建一个与要显示的属性匹配的类，即它将具有名为Label< string>的标签属性，a属性称为数据集，它是包含属性fillColour等的对象列表。



在控制器中，您可以创建此类的实例并从数据中填充它并传递给它对于视图，要么作为整个模型，要么作为模型的属性，如果您需要传递其他东西，那么您的模型将具有ChartData属性，该属性是您填充的图表数据的实例。



在视图中执行类似

Create a class that matches the properties you want to show, ie it will have a property called labels that is List<string>, a property called datasets that is a List of objects that contain properties fillColour etc.

In your controller you create an instance of this class and populate it from your data and pass it to the view, either as the whole model, or as a property of the model if you need to pass other things, so your model will have a "ChartData" property that is an instance of your populated chart data.

In the view do something like

var barChartData = @Json.Encode(Model.ChartData)

你可能需要; < br $>

you might need;

var barChartData = @Html.Raw(Json.Encode(Model.ChartData))

这将生成html，将barChartData js变量设置为应具有正确属性的json对象。查看页面源代码，看看你的输出与你需要的匹配程度，然后根据需要进行调整。



编辑：如果MVC3中没有Json.Ensode，那么使用任何东西支持将数据序列化为JSON，google为例。

That will generate html that will set the barChartData js variable to be a json object that should have the correct properties. View the page source to see how well your output matches what you need then tweak as appropriate.

if Json.Ensode isn't available in MVC3 then use whatever is supported to serialise the data to JSON, google for examples.

我建​​议使用名为HighCharts的图表构建JS库。这是一个很棒的工具，易于使用，有大量文档



可在互动中找到您网页的JavaScript图表| Highcharts [ ^ ]

May i suggest utilising chart building JS library called HighCharts. It's a great tool, easy to use with plenty of documentation

can be found at Interactive JavaScript charts for your webpage | Highcharts[^]

这篇关于如何将控制器数据加载到javascript数组中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！