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