个人中心
gpt4 book ai didi

javascript - 如何在 asp mvc 应用程序中构建 ajax-chartjs 折线图？

转载 作者：太空宇宙 更新时间：2023-11-03 22:46:30 25 4
gpt4 key购买 nike

我认为有以下代码:

@Styles.Render("~/Content/newcss")
@Scripts.Render("~/bundles/chartscripts")
@Scripts.Render("~/scripts/jquery-1.10.2.js")
@Scripts.Render("~/scripts/jquery.unobtrusive-ajax.js")
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.bundle.min.js">
</script>

<script>
$.ajax({
    type: "post",
    url: "/GraphicsController/AjaxChart",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function () {
    var ctx1 = document.getElementById("Linecanvas").getContext("2d");
    window.myBar = new Chart(ctx1,
        {   type: 'line',
            data: {
                labels: [@Html.Raw(Json.Encode(@ViewBag.ContentIds))],
                datasets: [{
                        label: "Common Responses",
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderWidth: 2,
                        data: [@Html.Raw(Json.Encode(@ViewBag.ContentIds))]
                    },{
                        label: "Delayed Responses",
                        backgroundColor: "rgba(75,192,192,0.4)",
                        borderWidth: 2,
                        data: 
[@Html.Raw(Json.Encode(@ViewBag.DelayedResponseTimes))]
                    }]},
            options:{title:
                    {display: true,
                        text: "Graphic"},
                    responsive: true,
                    maintainAspectRatio: true
                }});},
    error: function OnErrorCall_(repo) {alert("Woops something went wrong, 
pls try later !");}});
</script>  
</head>
<body>
<div id="wrapper">
    <div id="div-chart">
        <canvas id="Linecanvas"></canvas>
    </div>
    ...
<body>

在 Controller 中:

[HttpPost]
public ActionResult AjaxChart() {
  IEnumerable < DBContent > contents = db.DBContents;

  var delayedResponses = contents.Where(r => r.DelayedResponseTime != 0).Select(x => x.DelayedResponseTime);
  var commonResponses = contents.Where(r => r.CommonResponseTime != 0).Select(x => x.CommonResponseTime);
  ViewBag.DelayedResponseTimes = delayedResponses.ToList();
  ViewBag.CommonResponseTimes = commonResponses.ToList();

  var ContentIds = new List < int > () {};
  for (var i = 1; i <= delayedResponses.Count(); i++) {
    ContentIds.Add(i);
  }
  ViewBag.ContentIds = ContentIds;
  return Json(delayedResponses.ToList(), JsonRequestBehavior.AllowGet);
}

我尝试使用 chartjs 构建折线图，但没有使用 Ajax 我已经完成了，但是我希望在不刷新页面且不在页面上执行任何操作(触发 Ajax，如单击按钮等)的情况下自动重建图表数据库中的新项目。使用此代码，我总是会转到 error block 。

最佳答案

您不能将 ViewBag 与 Ajax 一起使用，您只能返回一个结果对象。将所有这些返回的对象合并为一个父对象的属性:

[HttpGet]
public ActionResult AjaxChart() {
    IEnumerable<DBContent> contents = db.DBContents;

    var delayedResponses = contents.Where(r => r.DelayedResponseTime != 0)
                                   .Select(x => x.DelayedResponseTime);
    var commonResponses = contents.Where(r => r.CommonResponseTime != 0)
                                  .Select(x => x.CommonResponseTime);

    var ContentIds = new List<int>();
    for (var i = 1; i <= delayedResponses.Count(); i++) {
        ContentIds.Add(i);
    }

    var result = new {
        DelayedResponseTimes = delayedResponses.ToList(),
        CommonResponseTimes = commonResponses.ToList(),
        ContentIds = ContentIds
    };
    return Json(result, JsonRequestBehavior.AllowGet);
}

现在，在您的 jQuery 中，您需要获取数据(您没有这样做)。更改行:

success: function () {

到:

success: function (result) {

然后您需要将所有使用 ViewBag 的行更改为使用 result 参数:

success: function(result) {
  var ctx1 = document.getElementById("Linecanvas").getContext("2d");
  window.myBar = new Chart(ctx1, {
    type: 'line',
    data: {
      labels: result.ContentIds,
      datasets: [{
        label: "Common Responses",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderWidth: 2,
        data: result.CommonResponseTimes
      }, {
        label: "Delayed Responses",
        backgroundColor: "rgba(75,192,192,0.4)",
        borderWidth: 2,
        data: result.DelayedResponseTimes
      }]
    },
    options: {
      title: {
        display: true,
        text: "Graphic"
      },
      responsive: true,
      maintainAspectRatio: true
    }
  });
},

最后，在您的方法的 URL 中，您必须使用不带后缀的 Controller 名称，因此请更改此行:

url: "/GraphicsController/AjaxChart",

到:

url: "/Graphics/AjaxChart",

最好让 ASP 为您生成 URL，以防您更改路由或重命名您的方法:

url: @Url.Action(nameof(GraphicsController.AjaxChart), "Graphics"),

关于javascript - 如何在 asp mvc 应用程序中构建 ajax-chartjs 折线图？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49615413/

25 4 0
文章推荐： node.js - NW.js 和 WebStorm
文章推荐： html - 当在其周围添加图像时，顶部边框空间的文本表现不同
文章推荐： c# - 如何使用azure函数应用程序读取azure blob中的内容
文章推荐： python - 在 python 中手动编写 warpAffine 代码
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com