CODEWITHSUNDEEP
javascriptc#asp.net-corerazor
ShHolmes
ShHolmes

Reputation: 453

Escaping double quotes for JS within Razor

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!

Upvotes: 1

Views: 1064

Answers (1)

norbitrial
norbitrial

Reputation: 15166

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);

JSON with apostrophe

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);

With double quotes

Upvotes: 2

Related Questions