在视图页面上的 javascript 上使用 Viewbag 数据

问题描述

在我的项目中，我尝试将 javascript 图表与数据库中的数据一起使用，

首先我用viewbag发送了我的数据

 public IActionResult Index()
    {
        var student = _context.Student.Select(x => x.Name).ToList();
        ViewBag.student = student;
        var notes = _context.Student.Select(y => y.Note).ToList();
        ViewBag.notes = notes;

        return View();
    }

所以在 javascript 中预制图表有这样的代码；

   $('#graph2').graphify({
    start: 'donut',obj: {
        id: 'lol',legend: false,showPoints: true,width: 775,legendX: 450,pieSize: 200,shadow: true,height: 400,animations: true,x: [2000,2001,2002,2003,2004,2005,2006],points: [17,33,64,22,87,45,38],xdist: 90,scale: 12,ydist: 35,grid: false,xName: 'Year',datanames: ['Amount'],design: {
            lineColor: 'red',tooltipFontSize: '20px',pointColor: 'red',barColor: 'blue',areaColor: 'orange'
            }
        }
    });

我想将我的 viewbag 数据添加到 x 和点数组中，我尝试了这样的操作；

@foreach(var item in (List<string>Viewbag.student)
{x.push(item);} 

但它根本不起作用。

解决方法

你不能像那样混合 Razor 和 JavaScript。您必须记住，Razor 渲染发生在服务器上，一旦完成，结果将作为静态 HTML 提供给浏览器，浏览器只会解释它并运行 JavaScript。

因此，为了将信息从 Razor 传递到 JavaScript，您需要以一种能够在渲染过程中幸存下来的方式进行操作。

这样做的一个好方法是将您的数据序列化为 JSON 并将其存储在 JavaScript 代码可以访问的变量中。您可以在 Razor 视图中使用 Json.Serialize 方法来执行此操作：

<script>
var studentData = @Json.Serialize(ViewBag.Student);
var notesData = @Json.Serialize(ViewBag.Notes);

// now do something with those JavaScript variables…
</script>

@… 部分将由 Razor 渲染器执行，因此渲染结果可能如下所示：

<script>
var studentData = ["student1","student2","student3"];
var notesData = [123,456,789];

// now do something with those JavaScript variables…
</script>

该结果现在是有效的 JavaScript，可以由客户端正确执行。

,

首先，您不应该这样做，或者从控制器操作发送 json 对象，然后在您的视图中使用它。一个快速肮脏的解决方案是使用 @: 调用 js 代码，例如：

@foreach(var item in (List<string>ViewBag.student)
{
  @:x.push("@item");
}

因为 @ 表明这是 razor 或服务器端 c# 代码，如果我们需要循环服务器端并在其中使用 js 执行某些操作，我们可以使用 @: 来判断它不是 c# 或服务端代码。