时间戳

首页 > 解决方案 > 如何将后面的剃刀代码中的对象列表绑定到cshtml中的剑道图表

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

问题描述

我正在尝试将我的 Razor 代码隐藏页面中的数据绑定到我的 .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}")
    )
)

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

标签： c#asp.net-coredata-bindingrazor-pagestelerik-charting

解决方案

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

  1. 检查Report为空或不在action。

  2. 检查DataSource.

这是ASP.NET Core中Kendo-chart的演示。

@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>

推荐阅读