javascript - JsonConvert.SerializeObject 不会将我的对象序列化为 JSON 字符串

Question

我正在使用 Entity Framework 和数据库优先方法。我想用来自数据库的数据填充饼图。图表将显示在主页中，因此我在 HomeController 中创建了一个名为 FillChart 的方法。

家庭 Controller

public class HomeController : Controller
{
    private readonly IRoomRepository _roomRepository;

    public HomeController(IRoomRepository roomRepository)
    {
        _roomRepository = roomRepository;
    }

    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public ActionResult FillChart()
    {

        var dbRoomList = _roomRepository.GetAll().Select(x => new { x.DoorNumber, x.Fullness });
        var jsonString = JsonConvert.SerializeObject(dbRoomList.ToList());
        return Json(jsonString, JsonRequestBehavior.AllowGet);
    }
}

HTML

<canvas id="pieChart"></canvas>

Javascript

<script type="text/javascript">
$(document).ready(function () {
    debugger;
    $.ajax({
        url: "FillChart",
        method: "GET",
        dataType: 'json',
        success: function (data) {
            debugger;
            console.log(JSON.parse(data));
            var doorNumber = [];
            var fullness = [];

            for (var i = 0; i < data.length; i++) {
                doorNumber.push("Door Number" + data[i].DoorNumber);
                fullness.push(data[i].Fullness);
            }

            var chartData = {

                labels: doorNumber,
                datasets: [{
                    label: 'Oda Numarası ',
                    borderColor: 'rgba(200, 200, 200, 0.75)',
                    hoverBorderColor: 'rgba(200, 200, 200, 1)',
                    data: fullness
                }]
            };

            var ctx = $("#pieChart");
            var barGraph = new Chart(ctx,
                {
                    type: 'pie',
                    data: chartData
                });
        },
        error: function (data) {

            console.log(data);
        },
    });
});

下面的代码行编译后:

var jsonString = JsonConvert.SerializeObject(dbRoomList.ToList());

jsonString 值似乎未序列化:

"[{\"DoorNumber\":1,\"Fullness\":1},{\"DoorNumber\":2,\"Fullness\":0},{\"DoorNumber\":3,\"Fullness\":0},{\"DoorNumber\":4,\"Fullness\":0},{\"DoorNumber\":1,\"Fullness\":0}]"

但是当我使用 Text Visualizer 查看 jsonString 内部时，它看起来像这样:

[{"DoorNumber":1,"Fullness":1},{"DoorNumber":2,"Fullness":0},{"DoorNumber":3,"Fullness":0},{"DoorNumber":4,"Fullness":0},{"DoorNumber":1,"Fullness":0}]

我正在 Debug模式下打开浏览器来检查 javascript 代码的更改

我看到 data.lenght 是 151 而不是 5。 console.log(JSON.parse(data)); 的结果是:

I have checked the answer of this question即使这样我也找不到任何解决我的问题的方法。我的代码有什么问题？

Answer 1

如果您从 Controller 返回 Json()，则无需在发送之前使用 JsonConvert.SerializeObject() 来序列化对象。 Controller.Json() 方法将创建一个 JsonResult 对象，该对象将指定对象序列化为 JavaScript 对象表示法 (JSON)。

此外，在您的 jQuery 代码中，由于您已将 JSON 指定为 dataType，因此 data 从服务器返回/on success() 回调应采用 JSON 格式。您不需要再次解析它。

服务器端

[HttpGet]
public ActionResult FillChart()
{
    var dbRoomList = _roomRepository.GetAll()
        .Select(x => new { x.DoorNumber, x.Fullness });

    return Json(dbRoomList, JsonRequestBehavior.AllowGet);
}

jQuery 代码

$.ajax({
    url: "FillChart",
    method: "GET",
    dataType: 'json',
    success: function (data) {
        // data should already be a JSON object

        var doorNumber = [];
        var fullness = [];

        for (var i = 0; i < data.length; i++) {
            doorNumber.push("Door Number" + data[i].DoorNumber);
            fullness.push(data[i].Fullness);
        }
       ...
    }
});

其他建议

我会将完全限定的 url 放入 jQuery ajax url 中。我还更喜欢使用 Razor HTML helper 生成 url，而不是手动将相对路径放在那里，因为有时相对 url 指向站点根目录而不是应用程序根目录。

例如，如果您将应用发布到服务器 www.example.com 上名为 app1 的文件夹。您可以通过访问 www.example.com/app1 来访问该应用。但是像 /home/fillChart 这样的任何相对 URL 实际上都会指向 www.example.com/home/fillChart 而不是 www.example.com/app1/home/fillChart.

所以我建议你这样做:

$.ajax({
    url: '@Url.Action("fillChart", "home", new { area = "" })',
    method: "GET",
    dataType: 'json',
    success: function (data) {
        // data should already be a JSON object

        var doorNumber = [];
        var fullness = [];

        for (var i = 0; i < data.length; i++) {
            doorNumber.push("Door Number" + data[i].DoorNumber);
            fullness.push(data[i].Fullness);
        }
       ...
    }
});