用Razor模型数据填充javascript图表
我想用MVC6/Razor中的viewmodel中的数据填充一个折线图 我的模型是用Razor模型数据填充javascript图表,javascript,asp.net-mvc,razor,asp.net-core-mvc,chart.js,Javascript,Asp.net Mvc,Razor,Asp.net Core Mvc,Chart.js,我想用MVC6/Razor中的viewmodel中的数据填充一个折线图 我的模型是 public class LeaderboardViewModel { public List<LeaderboardViewEntry> LeaderboardViewEntries { get; set; } public HistoicPointsViewModel HistoicPoints { get; set; } } public class HistoicPoint
public class LeaderboardViewModel
{
public List<LeaderboardViewEntry> LeaderboardViewEntries { get; set; }
public HistoicPointsViewModel HistoicPoints { get; set; }
}
public class HistoicPointsViewModel
{
public HistoicPointsViewModel()
{
PlayerHistores = new List<PlayerHistoricViewModel>();
}
public DateTime[] YAxisDates { get; set; }
public List<PlayerHistoricViewModel> PlayerHistores { get; set; }
}
public class PlayerHistoricViewModel
{
public PlayerHistoricViewModel()
{
Points = new List<int?>();
}
public string PlayerName { get; set; }
public List<int?> Points { get; set; }
}
您需要将模型列表编码为json。您可以使用razor中的json帮助器进行编码,请尝试以下操作:
var datelist = @Html.Raw(Json.Encode(Model.HistoicPoints.YAxisDates.Select(v => v.ToString("MMMM")));
TOSTRINGMMM将为您提供整个月份的名称
对玩家来说也是一样
var playerHistory = @Html.Raw(Json.Encode(Model.HistoicPoints.PlayerHistores.Select(v => new
{
label = v.PlayerName,
fillColor = String.Format("rgba({0},{1},{2},{3})", Color.Blue.R, Color.AliceBlue.G, Color.AliceBlue.B, Color.AliceBlue.A),
strokeColor = String.Format("rgba({0},{1},{2},{3})", Color.Blue.R, Color.AliceBlue.G, Color.AliceBlue.B, Color.AliceBlue.A),
pointColor = String.Format("rgba({0},{1},{2},{3})", Color.Blue.R, Color.AliceBlue.G, Color.AliceBlue.B, Color.AliceBlue.A),
pointStrokeColor = "#fff",
pointHighlightFill = "#fff",
pointHighlightStroke = "rgba(220,220,220,1)",
data = v.Points
})));
如果您想使用颜色类或只是将rgba设置为字符串,我已经使用颜色类创建了颜色
基本上,您可以在javascript代码中实现这一点
var data = {
labels: '@datelist',
datasets: '@playerHistory'
};
我认为最简单的方法是创建相应的ChartModel,将其序列化为您需要的确切JSON结构:
public class DtatsetModel
{
public string label {get;set;}
public const string fillColor = "rgba(220,220,220,0.2)";
public const string strokeColor = "rgba(220,220,220,1)";
public const string pointColor = "rgba(220,220,220,1)";
public const string pointStrokeColor = "#fff";
public const string pointHighlightFill = "#fff";
public const string pointHighlightStroke = "rgba(151,187,205,1)";
public List<string> data {get;set;}
public DtatsetModel(PlayerHistoricViewModel x)
{
this.label = x.PlayerName;
this.data = x.Points.Where(p=>p.HasValue).Select(p=>p.ToString());
}
}
public class ChartModel
{
public List<string> labels {get;set;}
public List<DtatsetModel> datasets {get;set;}
public ChartModel(HistoicPointsViewModel x)
{
this.labels = x.Select(d=>d.ToString("MMMM"));
this.datasets = x.PlayerHistores.Select(h=>new DtatsetModel(h));
}
}
然后在视图中,您可以执行以下操作
<script type="text/javascript">
var data = @Html.Raw(JsonConvert.SerializeObject(new ChartModel(Model.HistoicPoints)))
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);
</script>
对于序列化,我使用了首先,我建议不要混合使用javascript和razor,因为内联javascript很容易用于XSS 我将使用razor中创建的一些不可见元素上的数据属性,然后从javascript中读取这些数据属性 因此,只需使用数据属性创建div
通过这种方式,您将javascript与razor解耦 如果这是asp.net MVC 6,为什么会有asp.net MVC 4标记?顺便问一下,您的视图中的模型是什么?@ataravati抱歉清理了它,将Viewmodel添加到视图中,并将Viewmodel添加到类中使用内联javascript有多个缺点,但是内联javascript容易出现在XSS中-您是如何得出这个结论的?如果您允许内联javascript,那么您就容易出现XSS。如果您使用的CSP不允许任何内联javascript,那么您就可以防止您的站点受到相当大范围的攻击。将不执行内联javascript节
public class DtatsetModel
{
public string label {get;set;}
public const string fillColor = "rgba(220,220,220,0.2)";
public const string strokeColor = "rgba(220,220,220,1)";
public const string pointColor = "rgba(220,220,220,1)";
public const string pointStrokeColor = "#fff";
public const string pointHighlightFill = "#fff";
public const string pointHighlightStroke = "rgba(151,187,205,1)";
public List<string> data {get;set;}
public DtatsetModel(PlayerHistoricViewModel x)
{
this.label = x.PlayerName;
this.data = x.Points.Where(p=>p.HasValue).Select(p=>p.ToString());
}
}
public class ChartModel
{
public List<string> labels {get;set;}
public List<DtatsetModel> datasets {get;set;}
public ChartModel(HistoicPointsViewModel x)
{
this.labels = x.Select(d=>d.ToString("MMMM"));
this.datasets = x.PlayerHistores.Select(h=>new DtatsetModel(h));
}
}
<script type="text/javascript">
var data = @Html.Raw(JsonConvert.SerializeObject(new ChartModel(Model.HistoicPoints)))
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);
</script>
@foreach (PlayerHistoricViewModel x in Model.HistoicPoints.PlayerHistores)
{
<div
class="players"
data-label= "x.PlayerName",
data-fillColor= "rgba(220,220,220,0.2)",
data-strokeColor= "rgba(220,220,220,1)",
data-pointColor= "rgba(220,220,220,1)",
data-pointStrokeColor= "#fff",
data-pointHighlightFill= "#fff",
data-pointHighlightStroke= "rgba(220,220,220,1)",
data-points= "x.Points"//this will maybe need some work to make json array
/>
}
var datasets = [];
$("div.players").each(function(){
var testdata = {
label = $(this).data('label');
fillColor = $(this).data('label');
...
points = $(this).data('points');
//if datapoints will be json array then it will be automatically parsed as such
}
datasets.push(testdata);
});