Styjun

I am using GoJS library for drawing a graph. I am trying to display the following JavaScript code on the page (that's what I need to see as the page source when it's finished loading):

myDiagram.model = new go.GraphLinksModel([
 key: "Node26", color: "lightgreen",
 key: "Node25", color: "lightgreen",
 key: "Node33", color: "lightgreen",
 key: "Node42", color: "lightgreen"],
 [
 from: "Node26, to: "Node25",
 from: "Node26, to: "Node33",
 from: "Node33, to: "Node42",
 from: "Node33, to: "Node41",
 from: "Node33, to: "Node57",
 from: "Node33, to: "Node25",
 from: "Node33, to: "Node34"
]);

This code is generated on the server using razor syntax like this:

@
 string nodes = "";
 string links = "";
 string childName;

 foreach (Node node in Model.FullGraph)
 
 nodes += " key: "" + node.NodeName + "",";
 @foreach (uint childId in node.ChildrenIds)
 
 childName = Model.FullGraph.Find(x => x.NodeId == childId).NodeName;
 links += " from: "" + node.NodeName + "", to: "" + childName + "",";

 
 

 myDiagram.model = new go.GraphLinksModel([@nodes], [@links]); 

However, after loading the resulting page looks like this in HTML:

myDiagram.model = new go.GraphLinksModel([
 key: "Node26", color: "lightgreen",
 key: "Node25", color: "lightgreen",
 key: "Node33", color: "lightgreen",
 key: "Node42", color: "lightgreen"],
 [
 from: "Node26, to: "Node25",
 from: "Node26, to: "Node33",
 from: "Node33, to: "Node42",
 from: "Node33, to: "Node41",
 from: "Node33, to: "Node57",
 from: "Node33, to: "Node25",
 from: "Node33, to: "Node34"
]); 

Escaping with backslash doesn't work, the code still replaces double quotes with " and therefore the graph is not drawn. When I manually replace them back to normal double quotes using developer tools in the browser, the graph is drawn.

I've also tried using @ for escaping, and Html.Raw() as well. Nothing works. Does anyone have some suggestions? Thanks for help in advance!

From my curiosity I have tried different options as well in the meantime, let me share the iterations what I have tested.

I have built a small class for testing:

public class ColoredObject

 public string key get; set; 

 public string color get; set; 

For testing purposes created a list where adding 2 test objects:

var list = new List<ColoredObject>()

 new ColoredObject()
 
 key = "Node26",
 color = "lightgreen"
 ,
 new ColoredObject()
 
 key = "Node25",
 color = "lightgreen"
 
;

Apostrophe version:
Then creating the JSON object in Razor:

string nodesWithApostrophe = "[";

foreach (var i in list)

 nodesWithApostrophe += " key: '" + i.key + "', color: '" + i.color + "',";


nodesWithApostrophe += "]";

So the first solution which is working fine and logging to the console properly the created array as expected is the following:

let jsonObject = @Html.Raw(nodesWithApostrophe);
console.log('testJson with apostrophe', jsonObject);

Double quotes version:
I was interested how to create object with double quotes also, so I have changed to escape chars in foreach:

string nodesWithDQ = "[";

foreach (var i in list)

 nodesWithDQ += " key: "" + i.key + "", color: "" + i.color + "",";


nodesWithDQ += "]";

Also doing the same in JavaScript made it work:

let jsonObject = @Html.Raw(nodesWithDQ);
console.log('testJson with double quotes', jsonObject);