在 Razor 中转义 JS 的双引号

Question

我正在使用 GoJS 库来绘制图表。我正在尝试在页面上显示以下 JavaScript 代码（这是我在完成加载后需要看到的页面源代码）：

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"}
]);

此代码是在服务器上使用 razor 语法生成的，如下所示：

@{
    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]);  

但是，在加载结果页面后，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"}
]); 

用反斜杠转义不起作用，代码仍然用“替换双引号，因此不绘制图形。当我使用浏览器中的开发人员工具手动将它们替换回正常的双引号时，图形被绘制。

我也尝试使用@ 进行转义，也尝试使用Html.Raw()。没有任何效果。有人有什么建议吗？提前感谢您的帮助！

Answer 1

出于好奇，我同时尝试了不同的选项，让我分享我测试过的迭代。

我已经建立了一个小类进行测试：

public class ColoredObject
{
    public string key { get; set; }

    public string color { get; set; }
}

出于测试目的创建了一个列表，其中添加了 2 个测试对象：

var list = new List<ColoredObject>()
{
    new ColoredObject()
    {
        key = "Node26",
        color = "lightgreen"
    },
    new ColoredObject()
    {
        key = "Node25",
        color = "lightgreen"
    }
};

撇号版本： 然后在 Razor 中创建 JSON 对象：

string nodesWithApostrophe = "[";

foreach (var i in list)
{
    nodesWithApostrophe += "{ key: '" + i.key + "', color: '" + i.color + "'},";
}

nodesWithApostrophe += "]";

所以第一个工作正常并正确记录到控制台的解决方案是按预期创建的数组如下：

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

双引号版本： 我也对如何使用双引号创建对象感兴趣，所以我已经更改为在 foreach 中转义字符：

string nodesWithDQ = "[";

foreach (var i in list)
{
    nodesWithDQ += "{ key: \"" + i.key + "\", color: \"" + i.color + "\"},";
}

nodesWithDQ += "]";

在 JavaScript 中也做了同样的事情：

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