JsonConvert.SerializeObject不会将我的对象序列化为JSON字符串(JsonConvert.SerializeObject doesn't serialize my

JsonConvert.SerializeObject不会将我的对象序列化为JSON字符串(JsonConvert.SerializeObject doesn't serialize my object to a JSON string)

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

HomeController的

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

使用Javascript

在编译下面的代码行之后：

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}]

我在调试模式下打开浏览器来检查javascript代码的变化

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

我已经检查了这个问题的答案，所以我无法找到解决问题的方法。我的代码有什么问题？

I am using Entity Framework with Database First approach. I want to fill my pie chart with data coming from database. The chart will be shown in home page so I have created a method named FillChart inside the HomeController.

HomeController

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

Javascript

After the code line below is compiled:

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

jsonString value seems like it is not serialized:

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

But when I take a look at inside of jsonString with Text Visualizer it looks like this:

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

I am opening the browser in debug mode to inspect the changings of javascript code

and I saw that data.lenght is 151 instead of 5. The result of console.log(JSON.parse(data)); is:

I have checked the answer of this question even so I couldn't find any solution to my problem. What is the problem of my code?

最满意答案

如果从控制器返回Json() ，则在发送之前不需要使用JsonConvert.SerializeObject()来序列化对象。 Controller.Json()方法将创建一个JsonResult对象，该对象将指定对象序列化为JavaScript Object Notation（JSON）。

同样在您的jQuery代码中，由于您已经将JSON指定为dataType ，因此从服务器/ success()回调返回的data应该是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指向站点根目录而不是应用程序root。

例如，如果您将应用程序发布到服务器www.example.com上名为app1的文件夹中。您可以访问www.example.com/app1访问该应用。但是像/home/fillChart这样的任何相对网址实际上都会指向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); } ... } });

If you're returning Json() form the Controller, you don't need to use JsonConvert.SerializeObject() to serialize the object before sent. Controller.Json() method will create a JsonResult object that serializes the specified object to JavaScript Object Notation (JSON).

Also in your jQuery code, since you've already specified JSON as dataType, the data returning from the server / on success() callback is expected to be in JSON format. You don't need to parse it again.

Server-side

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

jQuery code

$.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); } ... } });

Other suggestion

I would put the fully qualified url in jQuery ajax url. I also prefer using Razor HTML helper to generate the url instead of manually putting relative path there, because sometimes relative urls point to site root instead of application root.

For example, if you publish your app to a folder called app1 on your server www.example.com. You can access the app by going to www.example.com/app1. But any relative url like /home/fillChart will actually point to www.example.com/home/fillChart instead of www.example.com/app1/home/fillChart.

So I would suggest you do this:

$.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); } ... } });

更多推荐