[英]How to dynamically make a JSON object from code behind in c#
I want to make a flowchart using a JSON object 我想使用JSON对象制作流程图
HTML HTML
var chart = null;
$(document).ready(function(){
chart = new FlowChart($);
var chartJSON = {
nodes: [
{ id: 'p1', type: 'simple-node', left: 120 ,top:2200 , content:'Process 1'},
{ id: 'p2', type: 'simple-node', left: 120,top: 2400,content:'Process 2' },
{ id: 'p3', type: 'simple-node', left: 120, top: 2600,content:'Process 3'}
],
connections: [
{ start: 'p1', end: 'p2' },
{ start: 'p2', end: 'p3' },
]
};
chart.importChart(chartJSON);
This creates a FlowChart on the page like this 这样会在页面上创建流程图
but I need to populate this json from code behind depending on a sql query result dynamically, I am new to javascript and can't find out exact direction for the solution. 但是我需要根据sql查询结果动态地从后面的代码中填充此json,我是javascript新手,无法找到解决方案的确切方向。
Look at the Newtonsoft json nuget package. 查看Newtonsoft json nuget包。
There is a method you can call to serialize an object into Json 您可以调用一种方法将对象序列化为Json
eg. 例如。
JsonConvert.SerializeObject(myObj);
yes we have option to pass dynamically to code behind by using javascript seralize and desearlize option. 是的,我们可以选择使用javascript seralize和desearlize选项动态地传递给后面的代码。
eg: 例如:
result = JSON.stringify(p)// from client side it serialize json object
var a =new JavaScriptSerializer().Deserialize<class>(result) // server side seralize
note using system.web.serialization or newtonsoftjson dll's 注意使用system.web.serialization或newtonsoftjson dll的
A detailed answer, might be helpful 详细的答案可能会有所帮助
Create classes like 创建类似的类
public class connections
{
public string start { get; set; }
public string end { get; set; }
}
public class chartItem
{
public string id { get; set; }
public string type { get; set; }
public int left { get; set; }
public int top { get; set; }
public string content { get; set; }
}
// holding both chartItems and nodes
public class ChartJson
{
public List<connections> connections { get; set; }
public List<chartItem> nodes { get; set; }
}
I am using WebApiController, you can also use PageMethods 我正在使用WebApiController,也可以使用PageMethods
public class ChartController : ApiController
{
public ChartJson Get()
{
ChartJson chartJson = new ChartJson();
chartJson.nodes = getNodes(); //function to get data from database
chartJson.connections = getConnections(); //function to get data from database
return chartJson;
}
}
On .aspx page 在.aspx页上
On .aspx page, using jQuery call function below 在.aspx页面上,使用下面的jQuery调用函数
$(function () {
$.getJSON("api/Chart/Get", function (result) {
console.log(result.connections); //Check results and bind with your chart object
console.log(result.nodes); //Check results and bind with your chart object
})
});
Thanks 谢谢
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.