iT邦幫忙

0

C# .NET7.0 MVC ajax 取得資料請益

  • 分享至 

  • xImage

各位前輩小弟又來發問了這次問題是顯示的數量正確,但是數值跟名稱都是undefined
確定傳遞的value都指定正確但都沒接收到求解20點
先感謝各位前輩的回覆

//js
<script>
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: "@Url.Action("GetData", "BackSide")",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                var ctx = document.getElementById("doughnut-chart").getContext('2d');
                var myChart = new Chart(ctx, {
                    type: 'doughnut',
                    data: {
                        labels: data.map(function (item) { return item.Name }),
                        datasets: [{
                            label: '# of Votes',
                            data: data.map(function (item) { return item.Value }),
                            backgroundColor: data.map(function (item) { return item.BackgroundColor }),
                            borderColor: data.map(function (item) { return item.BorderColor }),
                            borderWidth: 1
                        }]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false

                    }
                });
            }
        });
    });
</script>
//C# Controller
[HttpPost]
public JsonResult GetData()
{
    List<object> data = new List<object>
            {
                new { Name = "Data1", Value = 10, BackgroundColor = "#f44336", BorderColor = "#f44336" },
                new { Name = "Data2", Value = 20, BackgroundColor = "#9c27b0", BorderColor = "#9c27b0" },
                new { Name = "Data3", Value = 30, BackgroundColor = "#3f51b5", BorderColor = "#3f51b5" },
                new { Name = "Data4", Value = 40, BackgroundColor = "#2196f3", BorderColor = "#2196f3" }
            };

    return Json(data);
}

從DevTools中的Network看到Preview取得的數值

[
    {
        "name": "Data1",
        "value": 10,
        "backgroundColor": "#f44336",
        "borderColor": "#f44336"
    },
    {
        "name": "Data2",
        "value": 20,
        "backgroundColor": "#9c27b0",
        "borderColor": "#9c27b0"
    },
    {
        "name": "Data3",
        "value": 30,
        "backgroundColor": "#3f51b5",
        "borderColor": "#3f51b5"
    },
    {
        "name": "Data4",
        "value": 40,
        "backgroundColor": "#2196f3",
        "borderColor": "#2196f3"
    }
]

但仍然顯示undefined
求解

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
緯大啊緯大人
iT邦好手 1 級 ‧ 2023-02-02 13:44:14
最佳解答

看不太懂你問什麼

ajax成功進入Controller了?,也成功回拋了?
然後不是就從前端查看data是否正確嗎?

盡量可以把你錯誤的內容圖上傳才比較容易知道你的問題~

可以試試在success那邊補個console.log看一下data回來的是什麼
並且注意大小寫....js接收內容時都會自己更動大小寫,導致取值有誤等等....

看更多先前的回應...收起先前的回應...

成功回拋
前端看data也正確

[
    {
        "name": "Data1",
        "value": 10,
        "backgroundColor": "#f44336",
        "borderColor": "#f44336"
    },
    {
        "name": "Data2",
        "value": 20,
        "backgroundColor": "#9c27b0",
        "borderColor": "#9c27b0"
    },
    {
        "name": "Data3",
        "value": 30,
        "backgroundColor": "#3f51b5",
        "borderColor": "#3f51b5"
    },
    {
        "name": "Data4",
        "value": 40,
        "backgroundColor": "#2196f3",
        "borderColor": "#2196f3"
    }
]

但顯示仍然是undefined

froce iT邦大師 1 級 ‧ 2023-02-02 13:55:29 檢舉
labels: data.map(function (item) { return item.Name }),

屬性跟你json不合,name要小寫

你上一篇我就跟你說過了。後端傳的資料正不正確那不重要,重要的是傳回結果的屬性

froce
成功了...我眼殘沒注意到((
感謝你,可以使用回答方式給你最佳解答,我到底為啥沒看到= =

我不是就說要注意大小寫了嗎-.-?

我要發表回答

立即登入回答