How to dynamically make a JSON object from code behind in c#

Question

I want to make a flowchart using a JSON object

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.

Create A WebAPI and including odate service protocol will solve you problem for odate please see the fallowing links asp.net/web-api/overview/odata-support-in-aspnet-web-api odata.org/blog/… — Muhammad Saqib
– Muhammad Saqib, Commented May 17, 2016 at 5:32
How dynamic should this be? Generate on each page request? Or even between page requests, using AJAX? — Marcel
– Marcel, Commented May 17, 2016 at 5:35
Since you are talking about "Code behind", are you using WebForms? — Marcel
– Marcel, Commented May 17, 2016 at 5:38
@Marcel Generate on each page request, No I haven't checked Json,NET, yes using web forms — Faryal Imam
– Faryal Imam, Commented May 17, 2016 at 5:49

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Look at the Newtonsoft json nuget package.

There is a method you can call to serialize an object into Json

eg. JsonConvert.SerializeObject(myObj);

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 17, 2016 at 5:51

JordanW

1311 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

J.M.Farook · Accepted Answer · 2016-05-17 06:22:30Z

1

yes we have option to pass dynamically to code behind by using javascript seralize and desearlize option.

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

answered May 17, 2016 at 6:22

J.M.Farook

1831 silver badge8 bronze badges

Comments

Sami · Accepted Answer · 2016-05-17 06:18:59Z

0

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

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

On .aspx page, using jQuery call function below

$(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

answered May 17, 2016 at 6:18

Sami

3,8204 gold badges19 silver badges30 bronze badges

2 Comments

Sami Over a year ago

If you are already getting JsonObject try JordanW tip i.e. JsonConvert.SerializeObject(myObj) using Newtonsoft.json package

Faryal Imam Over a year ago

This is exactly what I needed.

Collectives™ on Stack Overflow

How to dynamically make a JSON object from code behind in c#

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related