如何将剃刀代码后面的对象列表绑定到cshtml中的剑道图

Question

我正在尝试将Razor Code background页面中的数据绑定到.cshtml文件，以加载Kendo图表。我试图实现的是在酒吧里进行男性和女性计数，X轴是入场术语，Y轴是男性和女性的计数。

目前，数据未绑定到图表。

请在下面找到我尝试过的内容。

public async Task<IActionResult> OnGetStudentMDProgramAll()
{
AllStudents = await _studentService.GetStudentProgramsAll();

foreach (var student in AllStudents)
{
StudentBreakdownReportModel std_brk_rpt_mdl = new StudentBreakdownReportModel();
std_brk_rpt_mdl.AdmissionTerm = student.AdmissionTerm;
std_brk_rpt_mdl.Female = AllStudents.Where(ad =>  ad.Student.Gender == "F").ToList().Count().ToString();
std_brk_rpt_mdl.Male = AllStudents.Where(ad =>  ad.Student.Gender == "M").ToList().Count().ToString();
std_brk_rpt_mdl.FemaleResidency_SC = AllStudents.Where(ad =>  ad.Student.Gender == "F" && ad.Student.Code == "SC").ToList().Count().ToString();
std_brk_rpt_mdl.FemaleResidency_SPR = AllStudents.Where(ad =>  ad.Student.Gender == "F" && ad.Student.Code == "SPR").ToList().Count().ToString();
std_brk_rpt_mdl.FemaleResidency_INTL = AllStudents.Where(ad =>  ad.Student.Gender == "F" && ad.Student.Code == "INTL").ToList().Count().ToString();
std_brk_rpt_mdl.MaleResidency_SC = AllStudents.Where(ad =>  ad.Student.Gender == "M" && ad.Student.Code == "SC").ToList().Count().ToString();
std_brk_rpt_mdl.MaleResidency_SPR = AllStudents.Where(ad =>  ad.Student.Gender == "M" && ad.Student.Code == "SPR").ToList().Count().ToString();
std_brk_rpt_mdl.MaleResidency_INTL = AllStudents.Where(ad =>  ad.Student.Gender == "M" && ad.Student.Code == "INTL").ToList().Count().ToString();
Report.Add(std_brk_rpt_mdl);
}
return new JsonResult(Report, new JsonSerializerSettings() { ContractResolver = new DefaultContractResolver() });
}

请在下面找到Razor页面代码

@(Html.Kendo().Chart<Models.StudentBreakdownReportModel>()
.Name("mdchart")
.Title("Student Intake by Residency and Gender for MD Program")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
)
.DataSource(ds => ds.Read(read => read.Type(HttpVerbs.Get).Url(Url.Page("StudentBreakdownReport", "StudentMDProgramAll"))))
.Series(series =>
{
series.Column(model => model.Female).Name("Female").CategoryField("AdmissionTerm");
series.Column(model => model.Male).Name("Male").CategoryField("AdmissionTerm");
})
.SeriesColors(
"#cd1533", "#009bd7"
)
.CategoryAxis(axis => axis
.Labels(labels => labels.Rotation(-90))
.MajorGridLines(lines => lines.Visible(false))
)
.ValueAxis(axis => axis.Numeric()
.Line(line => line.Visible(false))
)
.Tooltip(tooltip => tooltip
.Visible(true)
.Format("{0:N0}")
)
)

请找到我在这里得到的当前图表

Answer 1

从发布的代码中很难找到问题。请详细说明调试信息。

1. 检查Report在action中是否为空。

2. 检查DataSource的路径。

---

这是ASP.NET Core中剑道图的演示。

@addTagHelper *, Kendo.Mvc

<div class="demo-section k-content wide">
<kendo-chart name="chart">
<chart-title text="Gross domestic product growth /GDP annual %/"></chart-title>
<chart-legend position="ChartLegendPosition.Top"></chart-legend>
<series-defaults type="ChartSeriesType.Column"></series-defaults>
<series>
<series-item name="India" data="new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }"></series-item>
<series-item name="Russian Federation" data="new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }"></series-item>
<series-item name="Germany" data="new double[] { 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 }"></series-item>
<series-item name="World" data="new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }"></series-item>
</series>
<value-axis>
<value-axis-item>
<labels format="{0}%"></labels>
<line visible="false" />
</value-axis-item>
</value-axis>
<category-axis>
<category-axis-item categories='new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "20010", "2011", }'>
<labels>
<chart-category-axis-labels-padding top="135" />
</labels>
<line visible="false" />
</category-axis-item>
</category-axis>
<tooltip visible="true" format="{0}%" template="#= series.name #: #= value #"></tooltip>
</kendo-chart>
</div>