Избегание двойных кавычек для JS в Razor

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

Этот код генерируется на сервере с использованием синтаксиса бритвы, например:

@{
    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"
    }
};

Версия с апострофом: Затем создаем объект JSON в Razor:

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