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