如何在asp.net Core中将模型对象传递给javascript函数

Jia*_*ing 5 javascript .net-core chart.js asp.net-core

我在将模型对象传递给 .cshtml(asp.net Core项目)中的 javascript 函数时遇到问题。我做了很多搜索,但找不到解决这个问题的方法。我使用 ChartJs 行示例构建了一个 Web 应用程序。

网络应用 js文件

.cshtml 文件中有一个 js 函数,

<script>       
        document.getElementById('addData').addEventListener('click', function() {
            if (config.data.datasets.length > 0) {
                var month = MONTHS[config.data.labels.length % MONTHS.length];
                config.data.labels.push(month);
                config.data.datasets.forEach(function(dataset) {
                    dataset.data.push(randomScalingFactor());
                });

                window.myLine.update();
            }
        });
    </script>
Run Code Online (Sandbox Code Playgroud)

我是 ASP.NET Core 和 js 的新手。如果有办法将数据从模型添加到 js 函数?谢谢!

Jia*_*ing 5

我已经解决了这个问题!

解决方案:

模型:

public class SalesViewModel
    {
        public string salesdate { get; set; }
        public int salesprice { get; set; }
    }
Run Code Online (Sandbox Code Playgroud)

数据:

public class SalesContext
    {
        public string ConnectionString { get; set; }

        public SalesContext(string connectionString)
        {
            this.ConnectionString = connectionString;
        }
        public SalesContext()
        {          
        }

        public List<SalesViewModel> GetAllData()
        {
            List<SalesViewModel> list = new List<SalesViewModel>();
            list.Add(new SalesViewModel() { salesdate = "1", salesprice = 3 });
            list.Add(new SalesViewModel() { salesdate = "2", salesprice = 6 });
            list.Add(new SalesViewModel() { salesdate = "3", salesprice = 7 });
            list.Add(new SalesViewModel() { salesdate = "4", salesprice = 2 });
            list.Add(new SalesViewModel() { salesdate = "5", salesprice = 1 });

            return list;
        }
    }
Run Code Online (Sandbox Code Playgroud)

控制器:

using Newtonsoft.Json;
public IActionResult Chart()
        {
            SalesContext sc = new SalesContext();
            string json = JsonConvert.SerializeObject(sc.GetAllData());
            //ViewData["chart"] = json;
            ViewBag.Sales = json;
            return View(sc.GetAllData());
        }
Run Code Online (Sandbox Code Playgroud)

看法:

document.getElementById('addData').addEventListener('click', function() {
            if (config.data.datasets.length > 0) {
                var salesdata = @Html.Raw(ViewBag.Sales);
                config.data.datasets.forEach(function(dataset) {
                        for (var i = 0; i < salesdata.length; i++) {
                            var month = MONTHS[config.data.labels.length % MONTHS.length];
                            config.data.labels.push(month);
                            dataset.data.push(salesdata[i].salesprice);
                        }
                });

                window.myLine.update();
            }
        });
Run Code Online (Sandbox Code Playgroud)

用于var salesdata = @Html.Raw(ViewBag.Sales)从控制器获取数据!

用于salesdata[i].salesprice将数据推送到数据集!

谢谢!