如何解决在视图页面上的 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# 或服务端代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。