ASP.NET MVC中新增模型图表无法显示问题求助

以下是你代码中存在的关键问题及对应的修复代码：

核心问题点 #

1. 控制器中错误使用未定义的dbContext变量，应改为注入的_context
2. AJAX请求URL指向旧控制器方法，需匹配当前DowntimeController的GetDdata方法
3. 视图中错误将字符串类型的Reason当作日期处理，导致标签显示异常
4. AJAX配置中contextType拼写错误，应为contentType
5. 统计数据生成逻辑会重复添加数据，导致数据库冗余
6. 实体模型缺少命名空间，可能导致EF Core无法正确识别

修复后的代码 #

控制器（DowntimeController） #

using ASPNETPFE.Data;
using Microsoft.AspNetCore.Authorization;
using Microsoft.AspNetCore.Mvc;
using System.Linq;
using ASPNETPFE.Models.Domain;

namespace ASPNETPFE.Controllers
{
    [Authorize]
    public class DowntimeController : Controller
    {
        private readonly MVCDemoDbContext _context;

        public DowntimeController(MVCDemoDbContext context)
        {
            _context = context;
        }

        public IActionResult IndexDowntime()
        {
            // 清空现有统计数据，避免重复添加
            _context.Downtime.RemoveRange(_context.Downtime);
            _context.SaveChanges();

            var result = _context.Trss
                .GroupBy(x => x.Reason)
                .Select(s => new DowntimeOccurence
                {
                    DowntimeSum = s.Sum(d => d.Downtime),
                    Reason = s.Key,
                    Occurence = s.Count()
                })
                .OrderByDescending(g => g.DowntimeSum)
                .ToList();

            // 批量添加统计结果
            _context.Downtime.AddRange(result);
            _context.SaveChanges();

            return View(result);
        }

        public IActionResult ShowDdata()
        {
            return View();
        }

        [HttpPost]
        public List<object> GetDdata()
        {
            List<object> data = new List<object>();

            List<string> labels = _context.Downtime.Select(p => p.Reason).ToList();
            data.Add(labels);

            List<int> values = _context.Downtime.Select(p => p.Occurence).ToList();
            data.Add(values);

            return data;
        }
    }
}

模型（DowntimeOccurence） #

using System.ComponentModel.DataAnnotations;
using ASPNETPFE.Models.Domain;

namespace ASPNETPFE.Models.Domain
{
    public class DowntimeOccurence
    {
        [Key]    
        public int Idd { get; set; }

        public int DowntimeSum { get; set; }
        public string Reason { get; set; }
        public int Occurence { get; set; }
    }
}

视图（ShowDdata） #

@{ 
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<p>
    <div class="row">
        <div class="col-1">
            <label><b>Chart-Type</b></label>
        </div>
        <div class="col-2">
            <select id="ChartType" class="form-control" style="width:150px;">
                <option selected>--Select Chart Type--</option>
                <option>bar</option>
                <option>line</option>
            </select>
        </div>
        <div class="col-4">
            <input id="ID" value="Show Graph" type="button" />
        </div>
    </div>
</p>

<br />

<div id="ChartView">
    <canvas id="myChart"></canvas>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script type="text/javascript">
    $(function () {
        $("#ID").click(function () {
            var chartType = $("#ChartType").val();
            if (!chartType) {
                alert("请选择图表类型");
                return;
            }

            var chartView = document.getElementById('ChartView');
            chartView.innerHTML = '<canvas id="myChart" style="max-width:750px;max-height:400px;"></canvas>';

            $.ajax({
                type: "POST",
                url: "/Downtime/GetDdata",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccessResult,
                error: function(err) {
                    console.error("数据获取失败:", err);
                    alert("图表加载失败，请检查控制台信息");
                }
            });

            function OnSuccessResult(data) {
                var _chartLabels = data[0];
                var _chartData = data[1];

                var barColor = ["blue", "purple", "orange", "brown", "green", "red"];

                new Chart("myChart", {
                    type: chartType,
                    data: {
                        labels: _chartLabels,                           
                        datasets: [{
                            backgroundColor: barColor,
                            data: _chartData,
                            label: "停机次数统计"
                        }]
                    },
                    options: {
                        responsive: true,
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: "次数"
                                }
                            },
                            x: {
                                title: {
                                    display: true,
                                    text: "停机原因"
                                }
                            }
                        }
                    }
                });
            }
        });
    });
</script>

额外注意事项 #

1. 确保MVCDemoDbContext中已添加public DbSet<DowntimeOccurence> Downtime { get; set; }
2. 先访问/Downtime/IndexDowntime生成统计数据，再进入/Downtime/ShowDdata加载图表
3. 若布局页已引入jQuery，可移除视图中的jQuery引用

内容的提问来源于stack exchange，提问作者mariem